S4: ICT in Accounting

Introductory activity

 1. Analyses the following statement and decide which is true by 
 “T” and not true by “F”
 a) Today’s world, it is the rare person who has not had some 
    exposure to the Internet and the World-Wide Web.
b) If you are buying a computer, make sure that it can be 
   connected to a wireless network.
c) you will need to pay to get a connection in your house 
   which will allow you to access the internet.
d) once you have an internet connection then you’ll need to 
   have an internet browser on your computer. This browser 
allows you to browse websites.
 1. Do you know a web site?  the answer is yes, continue on next 
questions if is no skep the next questions about website 
2. State three names of websites you know
3. Can you change or delete an information from a website? 
   Explain your answer. 
4.Discuss on advantages and disadvantages of a website

5. What is a home page on web site? 

Activity 7.1

What do you understand by the terms below?
 i) Internet 
ii) Network
 iii) WWW
 iv) Web application
 v) Browser 
vi) Web server 

vii) Static web page and Dynamic web page

 1.1.1.Understanding web design

 Today’s world, it is the rare person who has not had some exposure to the 
Internet and the World-Wide Web. Many people have not only used the Internet 
but have also created web content in some form or other. Individual is using 
websites to communicate company information and manage their projects. 

People are now reconnecting with their friends and family members on social 
media such as Facebook, Twitter, Instagram, YouTube etc.

The purpose of this Unit, is to provide you with a brief introduction to web and 
how to access and use it via a web browser and other basic concepts relating 
to web designing such as website, web page, web application, static web page 

and dynamic web page. 

 7.1.2.Key terms

Web design is a process of designing and developing websites. Unlike web 
development, which is mainly about functionality, web design includes aesthetics 
and is concerned about the look-and-feel of the site as much as the functionality.
 
The creative aspect of web design covers areas like web graphic design, user 
experience design, interface design. Web designers work with tools like Sketch, 
Figma, and Photoshop. The technical aspect covers front-end and back-end 

development with tools and languages like HTML, CSS,etc.

The Internet is a collection of computers around the world connected 
to each other via a high-speed series of networks. The computers that 
store the files are called servers because they can serve requests from 
many users at the same time. Users access these HTML files and do

cuments via applications called browsers

 A Web browser is a program that displays Web pages and other do
cuments on the Web. Unfortunately, different browsers may interpret 
the HTML of Web. There are a variety of browsers available but the 

most popular are:

 • Internet Explorer (from Microsoft) 
• Firefox (from Mozilla) 
• Safari (from Apple) 
• Chrome (from Google

 • Microsoft Edge (From Microsoft)

 Web page: Each single resource on the web is called a web page. A 
web page is a document commonly written in HTML (Hypertext Markup 
Language), is also called hypertext document containing more specific 
information such as text, images, sound, video and so on; that is accessible
through the internet or other networks using an internet browser. 

A website is a collection of several web pages with information on a 
subject that are connected together. Websites can be easily searched 
using search engines like Google. The World Wide Web is made 

of many websites and each is made of many webpages.

 A web application is a computer program that utilizes web browsers 
and web technology to perform tasks over the Internet is stored on a 

remote server/web server.

The main difference between a web application and a website is given below:

Web server: Is a computer that hosts a website on the Internet.

Search engine: Is A web service that helps you find other web pages, 

such as Google, Bing, Yahoo, or DuckDuckGo.

World Wide Web: The term World Wide Web (WWW), usually 
shortened to the “web” is a system of interlinked hypertext documents 

accessed through the Internet. 

Really the Internet is the system that facilitates the transfer of data and the web 
is the data itself. The web is just one of the ways that data can be circulated 
over the Internet.
 
A dynamic web page website is one whose displays different types 
of content every time a user views it. This display changes depending 
on a number of factors like viewer demographics, time of day, location, 

language settings, and so on.

A static webpage is one whose contents do not change, or at least do not 
change quickly. A static page is one that is usually written in plain HTML 
and what is in the code of the page is what is displayed to the user. These 
are webpages that contain information that does not need to be updated. 
They are always the same unless the content is changed physically on the 
server’s hard disk. That is the reason these web pages are known as static 

web pages.

Application activity 7.1

 1. Discuss different characteristics of a website and a web application? 
2. Define a web application and give two examples of web applications? 
3. Among web application and web site, what is the advantageous? 
Explain your answer. 
4. With a comparison table, differentiate static web page to dynamic web page 
5. Discuss reason why it is easier to update a dynamic web site 
compared to a static website. 
6. Is it very cheap to host static website in comparison with dynamic 

website? Explain.

 1.1. Introduction to HTML

Activity 7.2
Using internet or other available resources, find the answers to the following 
questions:
 1. Write in full the abbreviated terms bellows:
 2. WWW, HTML
 3.Explain what is www
 5.Discuss the importance of HTML
6. Discuss and write an essay on how Hypertext Markup Language (HTML) 

had evolved from 1991 to the current trends seen today.

 1.1.1.Definition of HTML
 HTML is the Standard Markup Language. It is the authoring language that 
describes how a Web page should be displayed by a Web browser. It is used 
for developing Web Pages.  Hypertext means when a visitor clicks a link on a 

Web page, the visitor is led to another Web page or document.

«Hypertext» refers to links that connect web pages to one another, either within a 
single website or between websites. Links are a fundamental aspect of the Web. 

HTML uses «markup» to annotate text, images, and other content for display 
in a Web browser. HTML markup includes special «elements/tags» such as 
«heading», «paragraph», «table», and so on. This unit discusses various HTML 

tags that are needed for developing web pages.

Note: HTML is not a programming language, it is used to describe what 
should appear in a web document/page. HTML is not run/executed, 
it is parsed and transformed into Document Object Model (DOM) 
objects by the client web browser, which the browser can then render. 
Something like C++ is first put through a compiler then executed on 

the machine.

 1.1.1.Evolution of HTML 
The HTML was invented by Tim-Berners Lee, the founder of World Wide Web. 
Lee’s original HTML version was based on a more complicated document 
processing language known as Standard Generalized Markup Language 
(SGML). Soon, Lee released different versions of HTML causing incompatibilities 
between different developers using different versions. For this reason, the 

following was done: 

• A consortium known as World Wide Web Consortium (W3C) was 
established to standardize HTML. 
• The first standard version of HTML that was developed and maintained 
by W3C was HTML 2.0 released in 1995. It specifies a set of tags that 
must be supported by all browsers.
 • In 1996, release of HTML 3.2 standard then later HTML 4.0 in 1997. 
• Most web browsers today support variation of HTML known as 
Extensible Hypertext Markup Language (XHTML) that support mobile 
web application too. Today, there is HTML5 which many browsers and 

developers are using to develop web applications. 

1.1.2.Some of the key advantages of learning HTML
Create Web site: Someone can create a website or customize an 
existing web template if he/she knows HTML well.
 Become a web designer: If someone wants to start a carrier as a 
professional web designer, HTML and CSS designing is a must skill.
 Understand web: If someone wants to optimize the website, to boost 
its speed and performance, it is good to know HTML to yield best results.

Learn other languages: Once the basic of HTML is understood then 
other related technologies like JavaScript, php, or angular become easier to understand.
 
Application activity 7.2
 1) HTML is not a programming language but can be thought of as a 
presentation language. Explain.
 2) What is the difference between Hypertext and Hyperlink? 
3) What are the particularities of XHTML over HTML 4.01?

 4) Discuss the advantages of HTML 5 comparing to the previous versions.

 1.2.HTML Syntax and HTML Page Structure
 Activity 7.3
 1. What is a HTML tag?
 2. Give the syntax of HTML tag
 3. What is the role of an attribute of a HTML tag?
 
Before adding content to the document, there’s a need of basic structure to set 
up in a file. This structure isn’t only required for document to be compliant but 
will also allow to provide useful information about the document.

                                     HTML Syntax 

Hypertext Markup Language (HTML) documents use the .html or .htm 
extensions. This extension allows a web browser or device such as a computer 
or a smartphone to understand that HTML content is on the page, and the 
content of the page is then rendered by the browser or device according to the 

rules of HTML.

 HTML tags are element names surrounded by angle brackets or Less Than 
and Greater Than symbols (< >). 
Syntax: <tag_name>content goes here...</tag_name>
 Example: <title> My First page<title> 
HTML tags normally come in pairs like <p> and </p>. The first tag in a pair is 
the start tag, the second tag is the end tag. The end tag is written like the start 

tag, but with a forward slash inserted before the tag name. 

Note: The start tag is also called an opening tag and the end tag a closing 
tag. For example, to instruct a browser to present text as a paragraph, use the 
<p> opening and </p> closing tags as follows: <p> This is a new paragraph 

separated from others by a blank line</p>

 1.1.1.HTML Page Structure
 An element called HTML surrounds the whole document. This element contains 
two sub-elements which are Head and Body. These elements are required to 
form any HTML document
 
The Head contains the information about the HTML document like Title of the 
page, version of HTML, Meta Data, etc while the Body contains everything to be 

displayed on the Web Page.

The basic structure of a HTML for every web page is shown below:

Explanation of each of the tag used in the above piece of HTML code:
 <!DOCTYPE html>: This tag is used to tells the HTML 
version. This currently tells that the version is HTML 5. 
<html>: This is called HTML root element and used to wrap all the code. 
<head>: Head tag contains metadata, title, page CSS etc. All the HTML 
elements that can be used inside the <head> elements are: <style>, <title>, 
<base>, <no script>, <script>, <meta> that contain meta information about 

the document. 

1.1.1.Elements and Attributes Tags
 Tags are comprised of elements and attributes. An element is an object on a 
page such as a heading, paragraph, or image while attributes are qualities that 

describe that element such as width and height.

Example of element tags:

 An attribute is used to define the characteristics of an HTML element and is 
placed inside the element’s opening tag. All attributes are made up of two parts 
a name and a value. The name is the property to set while the value is what you 

want the value of the property to be set and always put within quotations. 

The example below shows three possible values of align attribute: left, 

center and right.

<p align = «left»>This is left aligned</p>
<p align = «center»>This is center aligned</p>

<p align = «right»>This is right aligned</p>

Note: A few tags are called non-container tags, because they don’t contain 
any content – they stand alone. Examples are images and line breaks. XHTML 
is stricter than HTML, and requires that all open tags must be closed, even if 
they’re not container tags. Therefore, non- container tags end in />. For example, 
the tag for a line break is <br/>. HTML does not have this same requirement, 
but it’s a good habit to get into in case you ever need to code in XHTML. Tags in 
HTML are not case sensitive, but in XHTML all tags must be in lower case. Even 

when coding in HTML, you should get in the habit of writing tags in lower case.

Application activity 7.3

 1. Discuss the syntax of an HTML tag
 2. Define an attribute
 3. You are given the HTML statement below:
 <font color=»green»> Hello Rwanda </font>
 What is the function of:
 a) Color

 b) Green

1.1.Tags that identify and name documents
Activity 7.4

1. Using Notepad text editor, write the following HTML code and save 

the file as mypage.html then run the file in a browser.
 <! DOCTYPE html>
 <html>
 <head> 
<title>Identifying elements</title> 
</head> 
<body>
 <strong>Rwanda is known as a country of thousand hills! </strong> 
<br>
 <mark>The development of Rwanda is based on its people</
 mark><br>
 <del>strong and mark are HTML tags that organize web page contents</
 del><br>
 </body> 
</html>
 
2. Study carefully the output of above HTML code and answer the following 
questions:
 1. What is the function of?
      <strong> tag?
      <mark> tag?
     <del>tag?

 Give any other 2 HTML tags that identify and name a document.

TML language specification defines the markup that can be used to create 
a webpage, the webpage author decides which elements they will use to 

markup content. 

Basic HTML Headings
 Heading tags are used in the body section to define section headings that stand out 
from the rest of the text. HTML provided six levels of section headings i.e. (Size of 

H6<H5<H4<H3<H2<H1)

The figure above shows how the headings appear when displayed on a browser 
such as chrome or Mozilla Firefox.

 1.1.1.Basic HTML Paragraphs and style
 A paragraph always starts on a new line, and browsers automatically add some 
white space (a margin) before and after a paragraph.
<p>This is a paragraph. </p>
 <p>This is another paragraph. </p>
 The HTML style attribute is used to add styles to an element, such as color, 
font, size, and more.
 <!DOCTYPE html>
 <html>
 <body>
 <p>I am normal</p>

 <p style=»color:red;»>I am red</p>

<p style=»color:blue;»>I am blue</p>
 <p style=»font-size:50px;»>I am big</p>
 </body>
 </html>

The figure below shows how the Paragraph and style appear when displayed on 

a browser such as chrome or Mozilla Firefox

 1.1.1.The appearance: Formatting Elements
 A document heading may be created by making text larger, bold and with a 
different color. Presentational markup for such a heading may look like this: 
<p> 
< font size=”36” color=” red” > <b>ICT is a key of development </b> 
</font> </p> 

Formatting elements were designed to display special types of text: 

The table below shows html text formatting elements:

 UP TO HERE
 Example: The HTML document below shows how to use formatting HTML 
elements
 <!DOCTYPE html>
 <html>
 <head> 
<title>Formatting elements</title> 
</head> 
<body>
 <mark><b>Rwanda has 4 provinces and Kigali City</b></mark> <br>
 <strong>Kigali City has 3 districts</strong>^{which ones?}<br>
 <del>Kigali Convention Center is in Nyarugenge district</del><br>
 <ins>Thank you! </ins>
 </body> 

</html>

 1.1.1.HTML images
 One of the most compelling features of latest HTML standard is the ability to 
embed images that make a website more attractive. The three types of images 
supported by HTML4 are GIF (Graphics Interchange Format), JPEG (Joint 
Photographic Experts Group) and PNG (Portable Network Graphics). To insert 
an image onto a web page, use the <img> tag; img is an abbreviation of the 
word image. The <img> is an empty tag does not require a corresponding 
closing tag. The general syntax for inserting a graphical object or image is: 
<img src=”Image URL” ... attributes-list/> 

The src in the img tag is an important attribute that specifies the location 

(source) or URL of the image to insert onto the page. 

For example, the following HTML code displays an image called Volcano:
 <!DOCTYPE html>
 <html>
 <head>
 <title> Visit Rwanda </title>
 </head>
 <body> 
<p><Strong><font color=»red» size=48>
 Visit Volcanoes National Park</font></strong></p>
 <center><img src=»volcano.png»alt=»Gorilla in Rwanda» />
 </center>
 </body>
 </html>

The HTML document above produces the following output:

 NB: use of the alt attribute is a good practice to specify alternate text for an 
image, if the browser cannot display or locate the image. 

1.1.1.Setting Image size 
It is possible to specify the size using width and height attributes. The two 
attributes set width and height of the image in terms of pixels or percentage of 
its actual size. For example, to set the size of the volcano.png to occupy quarter 
of the screen, use: 

<img src=”volcano.png” width = “ 80%” height=”90%”alt=”Gorilla in Rwanda” 
/> 
1.1.1.Image Alignment 
The <img> tag uses the align attribute to align an image on top, bottom, left or 
right of the browser window. For example, to align the volcano.png on top of the 
page, use align attribute as follows: 
<img src=”volcano.png” align=” top”alt=”Gorilla in Rwanda” /> 
Notice: with HTML it is possible to set page background color; bgcolor 
attribute is used within body element.
 
For example, the following html code explains how bgcolor attribute is used 
while setting yellow color as the page background.
 <! DOCTYPE html>
 <html>
<head>
 <title>MY First page</title> 
</head>
 <body bgcolor=»Orange»>
 <h1><font color=»red» size=»72»>Background Color of this page is 
Orange!!</h1> 
</body>
 </html>

 The above html document displays the following web page in a browser:

Application activity 7.4

1. Using heading, paragraph, font and image elements create a page 
that briefly describes a topic that you would like to cover in your 

small website. The website should contain information such as: 

a) Institution Descriptions, 
b) Mission 
c) Vision
d) Institution Logo. 
2. Discuss the function of the following attributes in <font> tag: 
a) Color attribute 
b) Size attribute 

3. Explain the role of src, alt, and align attributes within <img>tag

1.1Organize web page contents using HTML tag and hyperlinks

Activity 7.5

1. Type and execute the HTML code below, observe the output and 
explain the way page content is organized. 
   <! DOCTYPE html>
 <html> 
<head>
 <title>list</title> 
</head> 
<body bgcolor=»yellow»>
 <p><Strong> The most common colour names are </strong></p>
 <ol > 
 <li>Red. </li>
 <li>Orange. </li>
 <li>Yellow. </li>
 <li>Green. </li>
 <li>Cyan. </li>
 <li>Blue. </li>
 <li>Magenta. </li>
 <li>Purple. </li>
 </ol>
 </body>
 </html>

 Observe the following list of items and give its type

Activity 7.5

 1. How do you call a list which is written inside another list?

 2. Using HTML code, write the above list

This section discuss, some HTML elements that describe the structure and 
organize web contents. The information can be displayed in numbered or 
bulleted list. HTML supports three types of lists namely ordered list, unordered 

list, and definition list.

Ordered <ol> list is a container for enumerated items ordered using numbers such as
1, 2, 3.
Unordered list <ul> is a collection of related items that have no special 

order or sequence. 

Definition list <dl> is used for definitions such as glossaries that pair 

each label with some kind of description.

1.1.1.Creating ordered list 
 To create an ordered list, use the <ol>...</ol> tags within which to include one 

or more <li>...</li> (list item) tags. 

Example: 
<!DOCTYPE html> 
<html>
<head> 
<title>Numbered List</title> 
</head> 

<body bgcolor=cyan>

<p><Strong><font color=”blue” size=6 face=»Cooper»> 
Easter African Community (EAC) has 6 Partner States:</font></strong></
 p> 
<ol> 
<li>Rwanda</li> 
<li>Uganda</li> 
<li>Burundi </li> 
<li>Kenya</li> 
<li>Tanzania</li> 
<li>South Sudan</li> 
</ol> 
</body> 
</html>
 The figure below shows the ordered list of 6 <li> Countries after displaying the 

page on a browser:

 It is possible to customize the numbering style of an ordered list using the type 
attributes as follows: 
<ol type = “counter-type”>....</ol> 
<ol type = “a”> ...</ol> 
<ol type = “i”> ...</ol>  
Examples: using above html document change only “<ol> “replaced by <ol type 
=”I”>

 The page on a browser automatic changed as below:

 1.1.2Creating unordered list 
Unordered list is similar to ordered list only that the items are listed using bullets. 
To create unordered list, use <ul>...</ul> instead of <ol>..</ol> element 
Example: 
<!DOCTYPE html> 
<html> 
<head> 
<title>bulleted List</title> 
</head> 
<body bgcolor=pink> 
<p><Strong><font color=»red» size=6 face=»Cooper»> 
Easter African Community (EAC) has 6 Partner States:</font></strong></
 p>
<ul> 
<li>Rwanda</li> 
<li>Uganda</li> 
<li>Burundi </li> 
<li>Kenya</li>
<li>Tanzania</li> 
<li>South Sudan</li> 
</ul>
</body> 
</html> 
The figure below shows the unordered list of 6 Countries after displaying the 

page on a browser:

Unordered list: It is possible to customize unordered lists using type 
attribute and values that denote bullet types such as disc, square, or 
circle. For example, to change the bullets displayed in above figure 
from round to square, use the following syntax: 

<ul type = “bullet-type”>....</ul> 

For example, to display unordered list shown in figure above as a square, bullets, 
use the style attribute for example like <ul type = “square”> ..</ul>  in above 

html  document; Then Page on browser will be change as follow: 

 1.1.1.Creating definition list
 A definition list is used to present a glossary of terms, or other definition lists like 

Dictionary and encyclopedia. To create a definition list, use <dl> ...</dl> 
element in which you place <dt> ... </dt> to mark up the term and <dd> ... </ 

dd> to mark up the definition part. 

Therefore, a definition list consists of the following parts: 
• <dl> - Defines the start of the list 
• <dt> - A term 
• <dd> - Term definition 
• </dl> - Defines the end of the list 
For example, the following HTML document shows a definition list of four terms:
 <!DOCTYPE 
<!DOCTYPE html> 
<html> 
<head> 
<title>Definition list </title> 
</head> 
<body> 
<dl> 
<dt><b>ICT </b></dt> 
<dd>ICT stands for Information and Communication Technology</dd> 
<dt><b>HTML</b></dt> 
<dd> HTML stands for Hyper Text Markup Language</dd> 
<dt><b>JPEG</b></dt>
<dd>JPEG stands for Joint Photographic Experts Group</dd> 
<dt><b>CSS</b></dt> 
<dt><b>CSS</b></dt> 
</dl> 
</body> 

</html>

 1.1.1.Creating nested lists
 To create a nested list, put the entire list structure inside another list
    Example:
 <!DOCTYPE html>
 <html>
 <head>
 <title>sample Nested List </title>
 </head>
 <body>
 <p><Strong><font color=»blue»size=48> 
HTML-BASED WEB</font></strong></p> 
 <ol>
 <li>World wide web</li>
 <li>Organization</li>
 <li>Introduction to HTML</li>
<li>
 <ul>
 <li>Definition of HTML</li>
 <li> HTML Syntax</li>

 <li>Doc structure</li>

 <li>Headings</li>
 <li>Paragraphs</li>
 <li>HTML Comments</li>
 </ul>
 </li>
 <li>Hyperlinks</li>
 <li>Advanced HTML</li>
 </ol>
 </body>

 </html>

Application activity 7.5

Study the following HTML document and answer related questions: 
<! DOCTYPE html> 
<html> 
<head> 
<title>list</title> 
</head> 
<body bgcolor=”yellow”> 
<p><Strong> Fruits Menu:</strong></p> 
<ul > 
<li>Orange</li>
 <li>Banana</li>
 <li>Guava</li>
 <li>Mango</li>
 </ul> 
</body> 

</html> 

1. Write and execute the above html code then specify the type of a list 
2. Write the same html code and change it into ordered list using capital letter types.
3. Give a clear difference between:
 i. Definition and Nested list
 ii. <dt>…</dt> and <dd>…</dd> tags
 4. Study the following web page and write its HTML code which dis

plays it into browser.

1.1.HTML Frame and table Tags 

Activity 7.6

 1. By searching from internet, differentiate Frame and table

 2. Write HTML code that display the below table

HTML frames are used to divide the the browser window into multiple sections 
where each section can load a separate HTML document. A collection of frames 
in the browser window is known as a frameset. The window is divided into 

frames in a similar way the tables are organized: into rows and columns.

1.1.2.Creating Frames 
To use frames on a page we use tag instead of  tag. The tag defines how to 

divide the window into frames. 

• The rows attribute of tag defines horizontal frames.
• the cols attribute defines vertical frames. Each frame is indicated by 

tag and it defines which HTML document shall open into the frame.

<!DOCTYPE html>
 <html>
 <head>
<title>HTML Frames</title>
</head>
<frameset rows=»25%,50%,25%»>
 <frame name=»top» src=»Nested list.html» />
 <frame name=»main» src=»Page color.html» />
 <frame name=»bottom» src=»Ordered list.html» />
 <noframes>
<body>
 Your browser does not support frames.
 </body>
 </noframes>

 </frameset></html>

1.1.1.Creating Frames

Let’s put above example as follows, here rows attribute was replaced by columns 
and changed their width. This will create all the three frames vertically:
 <!DOCTYPE html>
<html>
 <head>
 <title>HTML Frames</title>
 </head>
 <frameset cols=»25%,50%,25%»>
 <frame name=»left» src=»Nested list.html» />
 <frame name=»center» src=»Page color.html» />
 <frame name=»right» src=»Ordered list.html» />
 <noframes>
 <body>
Your browser does not support frames.
 </body>
 </noframes>

 </frameset> </html>

 1.1.1.HTML Table tags

Tables are used to organize data such as numbers, text, links and images into 
rows and columns. An intersection of a row and a column forms data cell in 
which table data is held. The HTML tables are created using the <table> tag in 
which the <tr> tag is used to create table rows and <td> tag is used to create 
data cells. The elements under <td> are regular and left aligned by default. 
Before creating a table, consider the following table-features: 

Caption: indicates the type of data presented in the table <caption>…</caption>
 headings: the row that indicate the data displayed in each column 
<th> ...</th>

 Cells intersection of rows and columns in which we insert data . 

<!DOCTYPE html> 
The HTML document above produces the following table:

a) Define or format a HTML table
The following are basic attributes used to define or format a HTML table: 
Border Attribute: Numeric values that specify thickness of the border 
that surrounds all the table cells. If 0 is used, the border is invisible while. 
Example <table border=”2” > 
Height and Width attributes 
To set the size of the table, use width and height attributes. For example, 

the statement below sets the table size to width of 400 pixels and height of 
150 pixels. 

<table border=”2” width=”400” height=”150”> 

Cellpadding Attribute: Specifies the space, in pixels, between the 
cell wall and the cell content. 

cellspacing attribute: which specifies the space between cells.
 Syntax:  <table cellpadding=”pixels”>

 a) Table Caption 

Colspan attribute: Specifies the number of columns a cell should 
span. It allows the single table cell to span the width of more than one 
cell or column. It provides the same functionality as “merge cell” in the 
spreadsheet program like Excel. It can be used with <td> and <th> 
element while creating a HTML table. 

Syntax:  <td colspan =”value”> table content...</td> 

<th>: The colspan attribute when used with <th> tag determines the 
number of header cells it should span. 
Syntax: <th cospan =”value”> table content...</th> 

The value specifies the number of columns that the cell fills. The value 
must be an integer 

Rowspan attribute: Specifies the number of rows a cell should 
span. That is if a row spans two rows, it means it will take up the space 
of two rows in that table. It allows the single table cell to span the 
height of more than one cell or row. It provides the same functionality 
as “merge cell” in the spreadsheet program like Excel.  It can be used 
with <td> and <th> element in a HTML table. 

<td>: The rowspan attribute when used with <td> tag determines the 

number of standard cells it should span. Syntax:

 <td rowspan = «value»> table content...</td>
 The value specifies the number of rows that the cell fills. The value must 
be an integer.
 <th>: The rowspan attribute when used with <th> tag determines the 
number of header cells it should span.  Syntax:
 <th rowspan = «value»>table content...</th>
 The value specifies the number of rows that the cell fills. The value must 

be a integer.

 Example: The following HTML code explains how to use HTML table attribute discussed above:
 <!DOCTYPE html>
 <html>
 <head>
 <title>Table attributes </title> 
</head>
 <body>
 <table border=»4» cellpadding=»3» cellspacing=»3» 
width=»400»height=»200»> 
  <Caption><b>School Administration report</b></caption>
 <tr>
 <th colspan=6>Number of  school Administrators</th>
 </tr>
 <tr>
 <th colspan=2>Teacher</th>
 <th colspan=2>Officers</th>
 <th colspan=2>Total number</th>
 </tr>
 <tr>
 <th>Male</th>
 <th>Female</th>
 <th>Male</th> 
 <th>Female</th>
 <th rowspan=»2»>40</th>
 </tr> 
<tr>
 <td>19</td>
 <td>7</td>
 <td>4</td> 
 <td>10</td>
 </tr>
 </table> 
</body> 

</html>

 The above HTML code produces the output below:

Application activity 7.6

 1. Discuss the use of the following tags and attributes:
 a. <Frameset> tag
 b. <Caption> tag
 c. Colspan attribute
 d. <Th> tag
 1. Create an html document which create a web page with three 
frames named: «Top_Frames «,»Main_Frames «,and»Bottom_ Frame».

1.1.HTML Forms
Activity 7.7
 A website is developed with different pages; the page below is created 

using HTML language. Observe it and answer related questions.

 1. What do you understand a HTML form? 
2. What is the use of HTML form? 

3. . Use HTML code to produce the above page

 A person may need to gather information such as student’s details and store 
such information in the server. The most common method for gathering such 

information is by using a form. 

1.1.1.Form Attributes 

Html Form elements 
The most common controls include:  text, text area, select, radio buttons, 
checkboxes, file select, command button and reset buttons.

 

Let see the use of every form element and basic form attributes

 i) The <input> Element
 An <input> element can be displayed in many ways, depending on the type attributes. 

Here are some examples:

Text Input Controls

 There are three types of text input used on forms 
Single-line text input controls  This control is used for items that 
require only one line of user input, such as search boxes or names. They 

are created using HTML <input> tag

 Password input controls  This is also a single-line text input but it masks 
the character as soon as a user enters it. They are also created using HTMl 

<input> tag  but type attribute is set to password. Example

 Multi-line text input controls  This is used when the user is required to give 
details that may be longer than a single sentence. Multi-line input controls are 
created using HTML <textarea> tag.  The attributes used with textarea tag 

are: name, rows, and cols.

 Checkbox
 Checkboxes are used when more than one option is required to be selected. They 
are also created using HTML <input> tag but type attribute is set to checkbox 
value as shown by the following statements:
 <! DOCTYPE html>
 <HTML>
 <HEAD><TITLE>Checkbox</TITLE>
 </HEAD>
 <BODY>
 <P><Strong><font color=»green» size=36>Choose your favorite games</
font></strong></p> 
<form> 
<p><input type=»checkbox» name=»game» checked=»checked»> Football 
</p> <p><input type=»checkbox» name=»game» > Basketball <p>
 <p><input type=»checkbox» name=»game» > Volley Ball<p>
<p><input type=»checkbox» name=»game» > Net Ball<p>
 </form> 
</BODY>

 </HTML>

Radio button
 Radio buttons let a user select ONLY ONE of a limited number of choices.
 <input type=»radio»> defines a radio button. Example:
 <!DOCTYPE html>
 <HTML>
 <HEAD><TITLE>radio buttons</TITLE>
 </HEAD>
 <BODY>
 <P><Strong><font color=»purple» size=36>Select your subject</
 font></strong></p> 
<form> 
<input type=»radio»name=»sex» value=»physics»checke
d=»checked» > Math </br>
 <input type=»radio»name=»sex» value=»Math»»>Physics </br>
 <input type=»radio»name=»sex» value=»Accounting»»>Accounting 
</br>
 </form> 
</BODY>
</HTML>

 The HTML code above will be displayed in a browser as follows:

Select Box Control/ (Drop-Down List)
 The select control also known as dropdown box provides the user with various 
options in form of drop-down list, from which a user can select one or more 
options. For example, the following select defines a dropdown for selecting only 
one option:
 <! DOCTYPE html>
 <HTML>
 <HEAD><TITLE>Dropdown list</TITLE>
 </HEAD>
 <BODY>
 <P><Strong><font color=»Orange» size=36>
 Select your residence province:</font></strong></p> 
<form> 
<select name=»dropdown»>
 <option value=»Kigali» selected>Kigali City</option>
 <option value=»South»>South Province</option>
 <option value=»North»>North Province</option>
 <option value=»Easter»>East Province</option>
 <option value=»West»>West Province</option>
 </select>
 </form> 
</BODY>
 </HTML>

 The HTML document above produces the following webpage:

When you click on drop down arrow of a box, it will be as follow

Submit and Reset Button
 Submit input type used to create a button that automatically submits form 
data to web server. On the other hand, reset is used to refresh (reset) form 
controls to their default values. The following statements creates submit and 
reset buttons with values set to Send and Reset respectively:

This is how the HTML code above will be displayed in a browser:

 The following is a HTML document that implements input text box, input 
password box, checkbox, radio buttons, select, text area and action buttons 

(Submit and Reset)

<!DOCTYPE html>
 <HTML>
 <HEAD><TITLE>Detailed_form page</TITLE>
 </HEAD>
 <BODY bgcolor=pink>
 <h2><Font color=»green» size=6>Please provide your registration details 
</font></h2>
 <form action=»register.php»method=»post»>
 <p><b>Your first name:</b><input type=»text» name=»first»size=20></p>
 <p><b>Your second name:</b><input type=»text» name=»second»size=20></
 p>
 <p><b>Your username:</b><input type=»text» name=»mail»size=13></p>
 <p><b>Your password:</b><input type=»password» name=»pass»size=10 
></p>
 <p></u><b>choose your interested subjects:</b></u></p>
 <input type=»checkbox» name=»check»checked=»checked»>Accounting
 <br>
 <input type=»checkbox» name=»check»>Biology<br>
 <input type=»checkbox» name=»check»>Physiscs<br>
 <input type=»checkbox» name=»check»>Chemistry<br>
 <input type=»checkbox» name=»check»checked=»checked»> Fundamentals of 
Nursing
 <p></u><b>Select your sex:</b></u></p>
 <input type=»radio»name=»sex» value=»male»checked=»checked» > Male 
<input type=»radio»name=»sex» value=»female»»>Female 
<p></u><b>Select your residence district:</b></u>
 <select name=»dropdown»>
 <option value=»Gasabo» selected>Gasabo District</option>
 <option value=»Nyarugenge»>Nyarugenge District</option>
 <option value=»Kicukiro»>Kicukiro District</option>
 </select></p>
 <p><b>Comments:</b><br>
 <textarea rows=»3»cols=»15»name=»comment»></textarea>
 </p>
 <p><b>If you have provided all required information click 
<input type=»submit»name=»submit» value=»Send» /></p>
 <p><b>If you want to reset your form click     
<input type=»reset»name=»reset» value=»Clear» /></p>
 </form>
 </body>

 </html>

The above HTML document produces the following web page:

Notice: It is possible to organize the HTML form elements using a table so that 

they can be well arranged.

For example, HTML document below explains how you can insert an html 
form in a table:
 <! DOCTYPE html>
 <html>
 <head> 
<title> Registration</title> 
</head> 
<body>
 <center>
 <h1> <font color=»blue»>Please provide the following details</
 font></h1>
 <table><form Action= «register.php» Method= «get» >
 <tr><td>First Name:</td> <td><input type= «text» name= 
«FName» size=»15»></td></tr>
 <tr><td>Last Name:</td> <td><input type= «text» name= 
«lname»size=»15»></td></tr>
 <tr><td>Nationality:</td> <td> <input type=»text»name= 
«country» size=»25»></td></tr> 
<tr><td>Phone:</td> <td> <input type= «text» name= «phone» 
size=»15»></td></tr> 
<tr><td><input type=»checkbox» name=»subjects» checke
d=»checked»></td> <td> Computer Science</td></tr>
 <tr><td><input type=»checkbox» name=»subjects» ></td> <td> 
Physics</td></tr> 
<tr><td><input type=»checkbox» name=»subjects» ></td> <td> 
Economics</td></tr> 
<tr><td><select name=»dropdown»> <option value=»maths» se
lected>Mathematics</option>
 <option value=»computer»>Computer Science</option> </se
lect> </td></tr>
 <tr><td>Comments:</td> <td> <textarea rows=»3»cols=»10»
name=»comment»> </textarea></td></tr> 
<tr><td><input type=»submit» name=»submit» value=»Send»></
 td></tr> </form></table> 
</center>
 </body>

 </html>

The HTML code above displays the following page in a browser:

Application activity 7.7
 1. Explain the following HTML tag and attributes:
 a. Action attribute
 b. Method attribute
 c. Text area tag
 2. Write the syntax of select HTML tag

 3. Write the HTML code that displays the form below:

1.1.Creation of links

Activity 7.8

 1. A website is a collection of several web pages with 
information on a subject that are connected (linked) 
together. What do you understand by a link?
 2. What is difference between internal and external link?

A hyperlink is a text, phrase or image that is clicked on in order to go to another 
web page or a section within the current page or to another website. In most 
browsers, hyperlinks are often in blue and underlined. 

a) HTML Links – Syntax 
To create a hyperlink, use the anchor element: <a>...</a>. The <a> tag is 
called an anchor tag because it is used to create anchors for hyperlinks. 
<a href=”url”>link text</a> 
Example: 
<a href=”http://www.irembo.gov.rw”>Irembo Official Website</a> 
The href (Hypertext Reference) attribute specifies the destination address 
(http://www.irembo.gov.rw”). The link text is the visible part (Irembo Official 
Website). Clicking on the link text, will send the page visitor to the specified 
address. 

a) Local Links 
The example above used an absolute URL (A full web address). 
A local (internal) link (link to the same web site) is specified with a relative URL 
(without http://www....). 

The following code shows how to add text-based hyperlink into a HTML page:

<!DOCTYPE html> 
<html> 
<head> 
<title>Hyperlink page</title> 
</head> 
<body bgcolor=black> 
<p><font color=»orange» size=”20”> For getting more information 
Click following link: 
</font></p> 
<a href=»http://www.igihe.com»>Visit Tutorial Site</a> 
</body> 

</html>

 The figure below shows how the link is displayed on the browser

In most browsers, a hyperlink is an underlined text and blue in color. In our case, 
once the visitor clicks on the link, he or she is taken to the web page of the 

tutorial site as long as it is a valid URL.

 Example 2:
Example 2:
 <! DOCTYPE html>
 <html> 
<head>
 <title>Hyperlink page</title>
 </head>
 <body>
 <p><font color=»black» size=»3» face=»Goudy Stout»> Click following link 
for more information:
 </font></p> 
<a href=»Occupied-form.html»>click here</a>
 </body>

 </html>

Output of above html code:

The click here hyperlink fall on the following frame.html page:

Application activity 7.8

 1. Define the following terms:
 a. Hyperlink
 b. Hypertext
 c. Href attribute
2. What do you understand by a local link?
 3. Explain this statement: <a href=»photo.html»> image link</a>
 4. Create two static web pages and hyperlink called “next” which 

links them

1.1.Back-end vs Front end

Activity 7.9

With research on internet, discuss the difference between Front end and 

Back end in the web site design and development process.

Database systems are comprised of a Front End and Back End. The Back End 
has the tables that stores data, including the relationships between the tables, 
data queries and other behind the scenes technology that accepts information 
from and displays information to the user via the Front End.

 For example, when someone is  requesting for a birth certificate through Irembo 
there is a number of information provided through different forms and that 

information is kept in the Irembo database tables.

 The front end is the part of the website, users can see and interact with. Back 
end, on the contrary, is the part of the website users cannot see and interact 
with.
 
Front end development is programming which focuses on the coding and 
creation of the visual elements of a website or app that a user will interact with 
(the client side). In contrast to front end development, back-end development 

focuses on the side of the website users can’t see.

The back end can also be referred to as the “server side” of a website. As an 
example, let’s say that someone is running a social media website. he/ she 
needs an accessible place to store all of users’ information. This storage center 
is called a database and a few widely used examples include Oracle, SQL 
Server, and MySQL. 

Databases are run from a server, which is essentially a remote computer. A 
back-end developer will help manage this database and the site contents stored 
on it. This ensures that front end elements on social media website can continue 
to function properly as users browse uploaded content and other user profiles.  

Note: 
• The front end can be created using Visual Basic, HTML, programming languages
 The user at the front end of a system does not need to know how data is stored 
and how it is modified or retrieved.
 • The Back ends can be built using different Relational Database 
Management Systems such as Microsoft Access, SQL Server, Oracle etc.
 • Front end developers build elements like: 
Buttons
 Layouts
 Navigation
 Images 
Graphics
 Animations
 Content organization 
• Back-end web developers work on tasks like: 
Building code
Troubleshooting and debugging web applications
Database management 
 Framework utilization

Application activity 7.9
 1. What is difference between Front end and back-end development
 2. Discuss different types of software used in:
 o Front end development
 o Back-end development
 3. Describe tasks done in Front end and Back-end development

End of unit assessment 7
1. Define the terms below:
 a. Web site
 b. Web application
 c. Web server
 2. Differentiate between internet and web.
 3. A program, such as Mozilla Firefox that lets a user display HT
ML-developed web pages is referred to as …………….
 4. Discuss three key factors that a web developer should consider 
before developing a website
 5. Explain four types of image formats that can be inserted into a web page
 6. Write sample HTML statements to demonstrate how to insert the 
following:
 a. An image of a car
 b. Page with four horizontal frames
 c. Table of 5 rows and 8 columns
 7. Explain statement: <form action =»login.php» method=»post»>
8. Differentiate between GET and POST methods used to send form 
content to a web server.
 9 Explain at least four types of controls that are used to create a form object.
 10. Differentiate between Hypertext and hyperlink.
 11. Giving examples, explain three restrictions that were imposed by 

XHTML that have been relaxed in HTML5.