REPUBLIC OF RWANDA

MINISTRY OF EDUCATION
RWANDA TVET BOARD
KIREHE ADVENTIST TVET SECONDRY SCHOOL

MODULE CODE: SWDWD301

MODULE NAME: WEBSITE DEVELOPMENT
HOURS: 120

LEVEL 3 SOFTWARE DEVELOPMENT

TRAINER NAME: Esla NIYIBIZI

ACADEMIC YEAR: 2024-2025
LO 1 Apply keyboard skills
1.1 Use of keyboard characters
1.1.1 Definition

Keyboarding skills are a set of skills required to operate a keyboard smoothly while typing. This
includes understanding your computer keyboard layout and its functions.

A keyboard is a hardware input device used to enter text, characters, and commands into a
computer or other digital devices. It consists of a set of keys, each representing a specific character,
symbol, or function.
1.1.2 Types
The most used keyboard layouts are QWERTY and AZERTY.

 QWERTY: Refers to the type of keyboard on a Standard English. The name was given
from the first six letters on the row above the home row keys.
 AZERTY: keyboard is the most common type of keyboard used in France. The letters are
also found in a consecutive sequence on the upper left corner of the keypad.

1.1.3 Parts
The main parts of keyboard are:

1. Typing (alphanumeric) keys

These keys include some letter, number, punctuation, and symbol keys found on a traditional
typewriter.

2. Control keys

These keys are used alone or in combination with other keys to perform certain actions. The most
frequently used control keys are Ctrl, Alt, the Windows logo key , and Esc.

3. Function keys

The function keys are used to perform specific tasks. They are labeled as F1, F2, F3, and so on, up
to F12. The functionality of these keys differs from program to program.

Page 1 of 83
 4. Navigation keys

These keys are used for moving around in documents or webpages and editing text. They include
the arrow keys, Home, End, Page Up, Page Down, Delete, and Insert.
5. Numeric keypad.

The numeric keypad is handy for entering numbers quickly. The keys are grouped together in a
block like a conventional calculator or adding machine.

1.2 Combination keys and their use

Description of keyboard combination keys:

 Ctrl + C: This combination is used to copy selected text, files, or objects to the clipboard.
You can then paste the copied item elsewhere using Ctrl + V.
 Ctrl + X: This combination cuts selected text, files, or objects, removing them from their
original location and placing them in the clipboard for later pasting.
 Ctrl + V: This combination is used to paste the content stored in the clipboard into a new
location or document.
 Ctrl + Z: This is the keyboard shortcut for undoing the last action. It's particularly useful
when you want to reverse an action or mistake.
 Ctrl + Y: This combination is used to redo an action that was previously undone with Ctrl
+ Z.
 Ctrl + S: This keyboard shortcut is used to save the current document or file in most
software applications.
 Ctrl + N: This creates a new document or window in many software applications.
 Ctrl + O: This shortcut is used to open an existing file or document.
 Ctrl + P: It opens the print dialog, allowing you to print the currently open document.
 Alt + Tab: This combination allows you to switch between open applications or windows
quickly.
 Alt + F4: It closes the currently active application or window.
 Ctrl + F: This initiates a search within a document or a web page, allowing you to find
specific text or content.

Page 2 of 83
  Ctrl + A: It selects all the content within the current document or field, making it easy to
copy or delete everything at once.
 Windows Key + L: This locks the computer screen, requiring a password or PIN to unlock
it. It's a quick way to secure your computer when you step away.
 Ctrl + W: This is the keyboard shortcut for closing a window.
 Ctrl + H: It opens the find and replace options dialog, which allows you to find and replace
word or character.
 Ctrl + D: This is the keyboard shortcut for duplicating a single line.
 Ctrl + ←: This is the keyboard shortcut for moving one word to the left.
 Ctrl + →: This shortcut is used to move one word to the right.
 Ctrl + ↑: This shortcut is used to move to beginning of the line or paragraph.
 Ctrl + ↓: This shortcut is used to move to the end of the paragraph.
 Ctrl + Del: This shortcut is used to delete word to right of cursor.
 Ctrl + End: This shortcut is used to move cursor to end of document.
 Ctrl + Home: This shortcut is used to move cursor to beginning of
document.

1.3 Application of typing technique

1.3.1 Typing tips

1. Hand positioning

Familiarize yourself with the standard finger placement on the keyboard. The
home row is where your fingers should rest when not typing. For example, the left hand
should have the little finger (pinky) on the "A" key, the ring finger on the "S" key, the middle
finger on the "D" key, and the index finger on the "F" key. The right hand mirrors this positioning
on the "J," "K," "L," and ";" keys.

Page 3 of 83
The left little finger is placed over the "A" key and is also responsible for the second most keys on
the keyboard, including the following keys:"`" (back quote) and when pressing Shift, the "~"
(tilde),1 and when pressing Shift, the "!" (exclamation mark), Tab, Q, Caps Lock, A, Left Shift,
Left Ctrl, Z, and Fn key.

The left ring finger is placed over the "S" key and is also responsible for the following keys:2 and
when pressing Shift, the "@" (at sign), W, S and X.

The left middle finger is placed over the "D" key and is also responsible for the following keys:3
and when pressing Shift, the "#" (hash), E, D, and C.

The left index finger is placed over the "F" key and is also responsible for the following keys:4
and when pressing Shift, the "$" (dollar sign),5 and when pressing Shift, the "%" (percent), R, T,
F, G, V, and B.

The right index finger is placed over the "J" key and is also responsible for the following keys:6
and when pressing Shift, the "^" (caret), 7 and when pressing Shift, the "&" (ampersand), Y, U, H,
J, N, and M.

Page 4 of 83
The right ring middle finger is placed over the "K" key and is also responsible for the following
keys:8 and when pressing Shift, the "*" (asterisk), I, K, , (comma) and when pressing Shift, the
"<" (less than).

The right ring finger is placed over the "L" key and is also responsible for the following keys:9
and when pressing Shift, the "(" (left or open parenthesis), O, L, and "." (period) and when pressing
Shift, the ">" (greater than)

The right pinky (little) finger is placed over the ";" key and is also responsible for the most keys
on the keyboard, including the following keys:0 and when pressing Shift, the ")" (right or
close parenthesis), P, ";" (semicolon) and when pressing Shift, the ":" (colon), "/" (forward slash)
and when pressing the Shift, the "?" (question mark), "-" (hyphen) and when pressing Shift, the
"_" (underscore), [ (left or open bracket) and when pressing Shift, the "{" (left or open curly
bracket), ' (single quote) and when pressing Shift, the " (quote), Right Shift, "=" (equals sign) and
when pressing Shift, the "+" (plus sign), "]" (right or close bracket) and when pressing Shift, the
"}" (right or close curly bracket), Backspace or Delete, "\" (backslash) and when pressing Shift,
the "|" (pipe), Enter, Right Ctrl.

Both thumbs are placed over the spacebar.

2. Body posture

Body posture in typing refers to the position and alignment of your body while you are typing.
Maintaining a proper body posture is important for reducing strain, promoting comfort, and
preventing potential musculoskeletal issues.

Good sitting posture at your workstation means your shoulders are relaxed, your feet are
flat on the floor, position your monitor directly in front of you at eye level, position the keyboard
at a distance that allows your elbows to stay relaxed, and your arms and hands to move freely, you
can sit up straight to do your work and take regular breaks.

3. Ergonomics

Page 5 of 83
Ergonomics in typing with a computer keyboard refers to the design and arrangement of the
keyboard and its workspace to ensure that typing is comfortable, efficient, and minimizes the risk
of physical discomfort or injury. The goal of ergonomic keyboard design is to create a typing
environment that promotes good posture, reduces strain on the body, and helps prevent conditions
like repetitive strain injuries (RSIs) or carpal tunnel syndrome, or neck and back pain.

4. Typing speed

Typing speed refers to the rate at which a person can accurately type characters, words, or
sentences in a given period of time. It is usually measured in terms of words per minute (WPM)
or characters per minute (CPM). Typing speed is an important skill in various contexts, including
professional work, academic tasks, and personal use.

When measuring typing speed, the focus is on both accuracy and speed. It's not only about how
fast you can type, but also how accurately you can do so. Speed without accuracy can result in
errors and the need for corrections, which can impact productivity and efficiency.

Typing speed is influenced by factors such as:

Page 6 of 83
1. Practice and experience: Regular practice and experience with typing can improve speed over
time. Familiarity with the keyboard layout and hand placement allows for quicker and more
efficient typing.

2. Technique and efficiency: Employing proper typing techniques, such as using all fingers,
maintaining a light touch, and minimizing unnecessary movements, can increase speed.

3. Keyboard layout: Different keyboard layouts, such as QWERTY, AZERTY, and Dvorak, may
impact typing speed. QWERTY is the most widely used keyboard layout and is the standard for
many countries.

4. Language familiarity: Typing speed may vary depending on the language being typed.
Familiarity with the language, including the frequency of certain letter combinations or words, can
affect speed.

1.3.2 Use of typing master

Typing Master is a popular software program designed to help individuals improve their typing
skills and increase their typing speed. It provides a range of exercises, lessons, and tests to help
users develop proper typing techniques, accuracy, and efficiency.

With this program you can:

1) Check total number of words written per minute.

2) Maintain writing errors- Typing Master is designed to help users identify and correct their
writing errors as they practice typing.
3) Games to improve typing speed

Page 7 of 83
LO 2: CREATE WEB STRUCTURES
2.1 Definition of general key terms
2.1.1 Webpage

A web page or webpage is a document, commonly written in HTML, which is viewed in an

Internet browser. A web page can be accessed by entering a URL address into a browser's address
bar. A web page may contain text, graphics, and hyperlinks to other web pages and files.

2.1.2 Website

A website is a collection of web pages and related content that is identified by a common domain
name and published on at least one web server.

2.1.3 Web browser

A web browser is a software program that allows a user to locate, access, and display web pages.
Web browser is usually shortened to "browser."

Web browsers are used primarily for displaying and accessing websites on the internet, as well as
other content created using languages such as Hypertext Markup Language (HTML) and
Extensible Markup Language (XML).

Some examples are: Microsoft edge, internet explorer, opera, torch, tor, safari, Google chrome,
Mozilla Firefox, etc.

2.1.4 Text editor

Text editor is a software program that allows users to create or manipulate plain text computer
files.

Some examples are: Notepad, Notepad++, Sublime text, Visual Studio Code (VS Code), brackets,
etc.

2.1.5 URL

A URL (Uniform Resource Locator) is a unique identifier used to locate a resource on the Internet.
It is also referred to as a web address. URLs consist of multiple parts including a protocol and
domain name that tell a web browser how and where to retrieve a resource.

End users use URLs by typing them directly into the address bar of a browser or by clicking a
hyperlink found on a webpage, bookmark list, in an email or from another application.
Page 8 of 83
2.1.6 Hyperlink

A hyperlink is an element in an HTML document that links to either another portion of the
document or to another document altogether. On webpages, hyperlinks are usually colored purple
or blue and are sometimes underlined.

2.2 Setting up of text editor and web browser

2.2.1 Examples of text editor

The examples of text editor are atom, visual studio code, notepad++, vim, emacs, brackets, sublime
text 3, etc.

2.2.2 Examples and function of web browser

The examples of web browser are: google chrome, safari, Microsoft edge, Mozilla Firefox, opera,
internet explorer, Brave, etc.

Main functions of the internet browser

1. Sending requests to and retrieving data from the server

Internet browsers are used to fetch and retrieve hypertext mark-up text from the internet to the user
device. It can be static like the HTML pages only or dynamic data like data from the form. When
the user clicks a button or page it is retrieved from the server and the web browser displays the
same content.

2. Displaying webpage content

Web browsers act as an interface for users to interact with web pages. Different internet browsers
may display the same web page differently. This depends on how it is designed.
Designers are advised when designing a web page to use different browsers to test how the page
will display to offer all users a friendly view from any browser that they will use. Also, different
browsers support different font types that give a different view of the same document.

Page 9 of 83
3. Provide navigation facilities for users
Navigation control is another function of the internet browser. All browsers have menus, tabs, and
many other features that are used to navigate around the website and the internet generally. The
browser allows users to open more than one web page, and print, and save pages among other
features.

4. Caching of most frequently accessed data to increase browsing speed

The web browser saves the content that users retrieve regularly to save time when retrieving data
from the server. Instead of getting the page from the server, it retrieves some components that were
saved in the client computer for fast operation. The content or components that are saved are those
that are less frequently changed. The period of data cached depends on how the browser is set.

2.2.3 Installing text editor and web browser

Installation from storage drive

Browse on the storage drive and choose the setup of text editor (eg. npp.8.4.6.Installer.x64) or web
browser(eg.Tor browser)

The installation of Notepad++

1) Click on the setup with double click or right click and then open
2) Choose Yes to continue the installation
3) Choose the language, by default is English
4) Click on OK to continue the installation
5) Click on Next to continue
6) Click on I Agree button to agree the license agreement.
7) Click on Next to continue
8) Click on Next to continue
9) Check the Cerate shortcut on Desktop and click on Install button
10) Wait the few minutes for completed installation
11) Click Finish button to end the installation.
The installation of Tor browser

1) Click on the setup with double click or right click and then open
2) Choose Run to continue the installation
3) Choose the language, by default is English
4) Click on OK to continue the installation
5) Click on Next to continue
6) Click on Install button to continue
7) Wait the few minutes for completed installation
8) Click Finish button to end the installation.

Page 10 of 83
Installation from internet

Download the online installer of any application and then browse where it is located.

The installation from internet of Google Chrome

1) Click on the setup with double click or right click and then open
2) Choose Run to start the process of installation
3) Wait for few minutes for downloading and installing Google Chrome
2.3 Creating a web page in HTML
2.3.1 Description of website
2.3.1.1 Types

1.eCommerce website

An eCommerce website, short for "electronic commerce website," is a platform that enables
businesses to sell products or services online. It serves as a virtual storefront where customers can
browse, select, and purchase items conveniently over the internet.

eCommerce websites typically include features such as product listings, shopping carts, secure
payment gateways, and order management systems. They provide a user-friendly interface for
customers to search for products, view detailed descriptions and images, compare prices, and make
online transactions.

2.Business website

A business website is an online platform that represents a company or organization on the internet.
It serves as a digital presence for the business, providing information about its products, services,
brand, and contact details. A business website is an essential tool for establishing credibility,
reaching a wider audience, and engaging with potential customers.

3.Blog website

A blog website is an online platform where individuals or organizations regularly publish articles
or posts on various topics. It serves as a space for sharing information, opinions, experiences, and
insights with readers. Blogging has gained popularity as a means of personal expression,
knowledge sharing, and content marketing.

4.Portfolio website

A portfolio website is an online platform that showcases an individual's or a company's work,

achievements, skills, and capabilities. It serves as a digital portfolio or resume, providing a
comprehensive overview of past projects, experiences, and expertise.

Page 11 of 83
5.Social media websites

A social media website is an online platform that enables users to create profiles, connect with
others, and share content, information, and media in a social and interactive manner. These
websites facilitate communication, networking, and the exchange of ideas among individuals,
groups, and communities.

6.Video streaming websites

A video streaming website is an online platform that allows users to watch and stream video
content over the internet. These websites host and deliver video files to users in real-time, enabling
them to view videos without having to download them to their devices.
7.Web portals

A web portal is a website that serves as a gateway to a variety of information, resources, and
services from different sources. It provides a centralized platform where users can access and
navigate through a range of content, tools, and applications tailored to their specific needs or
interests.

8.Personal website

A personal website is an online platform that serves as a digital representation of an individual. It

is a website created and maintained by an individual to showcase their personal brand, skills,
achievements, interests, and experiences. Personal websites are often used for professional
purposes, personal branding, or as a means of self-expression.

9.Membership website

A membership website is an online platform that offers exclusive content, resources, or services
to its members in exchange for a fee or subscription. It provides a restricted access area where
registered members can log in and enjoy benefits not available to the general public.

10.Community forum website

A community forum website is an online platform where users can engage in discussions, share
information, ask questions, and interact with others who have similar interests or expertise. It

Page 12 of 83
serves as a virtual community where individuals can connect, seek advice, and contribute to
ongoing conversations.

11.Event website

An event website is a dedicated online platform that provides information, registration, and
resources related to a specific event or series of events. It serves as a central hub where organizers
can promote their event, provide details to attendees, and facilitate registration or ticketing
processes.

12. Informational websites

An informational website is a type of website that is primarily designed to provide information

and resources to visitors. It serves as an online platform where individuals, businesses,
organizations, or institutions can share knowledge, educate their audience, and provide valuable
information on specific topics or subjects.

13.Nonprofit website

A nonprofit website is a website created and maintained by a nonprofit organization, also known
as a non-governmental organization (NGO) or a charitable organization. The purpose of a
nonprofit website is to serve as an online platform that promotes the organization's mission, raises
awareness about its cause, and facilitates engagement and support from the public.

2.3.1.2 Function

The functions of a website:

 Media for communication
Communication is a process of delivering information and usually, it is a two-way communication,
which both parties are sending and receiving message to each other.
 Media for entertainment
Online gaming sites, online music sites, live stream sites and movies stream sites, are websites that
provide content that are entertaining for their users.
 Media for Education
Sometimes, the information provided in a website can be used for learning purposes and it is
appropriate to be distributed, such as information on politics, economics, science, social culture,
and many more.
 Media for Business

Page 13 of 83
Websites could also work as a media for promotion, marketing, and transactions. Websites can
connect specific companies, consumers, and communities. A business could also expand their
target market wider. They could spread their name to the entire world.

2.3.2 Introduction to HTML

HyperText Markup Language(HTML) is text markup language used to create HTML

documents (web pages) for the Internet.HTML is a set of logical codes or tags(markup) that
are used to define the web browser how to present the information in the web page.
It is interpreted by the web browser. The web browser is software that runs on the web client
(user computer) and it interprets HTML tags to display the contents of the web page.
HTML is not considered as programming language because it can’t create dynamic
functionality.
HTML was earlier proposed by Tim Berners Lee and developed by W3C (World Wide Web
Consortium) and WHATWG (Web Hypertext Application Technology Working Group), and
released in the year 1993. HTML has been extended from SGML (Standard Generalized
Markup language). The filename extension of HTML is .html and .htm (file extension mainly
used for Disk operating system (DOS) and windows also). The last release of HTML is
HTML5, a major release for HTML in 2014.

The HTML page structure is:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

…………

</body>
</html>

The explanation on this HTML file structure:

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

The timeline of HTML is:

Page 14 of 83
  1991- Tim Berners-Lee invents HTML 1.0
 1993- HTML 1.0 is released.
 1995- HTML 2.0 is published. This contains the features of HTML 1.0 plus new features.
This remained the standard markup language for designing and creating websites until
1997.
 1997- HTML 3.0 was invented. Here, Dave Raggett introduced a fresh draft on HTML,
which improved new features of HTML and gave more powerful characteristics for
webmasters in designing websites.
 1999- The widely used HTML 4.0 comes out. It is very successful.
 2014- HTML 5.0 is released and used worldwide. It is said to be the extended version of
HTML 4.01 which was published in 2012.

2.3.3 Description of HTML tag

2.3.3.1 Definition

HTML tags are simple instructions that tell a web browser how to format text.

HTML tags include tags for references, tags for tables, tags for headlines or titles, etc. An HTML
tag consists of the tag name in angular brackets.

2.3.3.2 Types and examples

HTML tags can be of two types:

a) paired tags
It is also called container tag. A tag is said to a paired tag if it along with a companion tag or
closing tag appears at the end. In paired tag, first tag is called the opening tag and the second
tag is called the closing tag. Some examples of paired tags are:<p>, <paragraph>, <html>,
<title>, <head>, <body>, etc….
b) singular tags
It is also known as a stand-alone tag or empty tag. It does not have companion tag or closing
tag. Some examples of singular tags are:<br>, <hr><input>, <img>, etc….

2.3.3.3 Tag attributes

Attributes define additional characteristics of the element. Attributes are always specified in the
start tag (or opening tag) and usually consists of name/value pairs like name="value”. Attribute
values should always be enclosed in quotation marks.

2.3.4 Developing first simple webpage

2.3.4.1 Use HTML page structure

To create a simple webpage, you need to use the HTML page structure and add the contents which
will be displayed in web browser. Those contents must be in the body section of HTML file.

Page 15 of 83
Example: We need to create a web page for displaying L3 Software Development 2022-2023 as
paragraph.
HTML file is:

<!DOCTYPE html>
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<p><b>L3 Software Development 2024-2025</b></p>
</body>
</html>

2.3.4.2 Use HTML extension to save document

After writing these HTML codes in text editor you need to save it with .html.
2.3.4.3 Display contents using web browser

To display the content of HTML file, go to the location where your file is saved and then click on
it to be displayed by default web browser or use right click, open with your desired web browser.
The output of the above code is

2.3.5 Developing webpage using HTML tag categories

2.3.5.1 Formatting tags

HTML formatting tags use for formatting a text style. It will become necessary to make minor
changes to the formatting of those elements.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.

Following is the list of HTML formatting text.

Page 16 of 83
 Tag Description

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del>,<s>,<strike> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

2.3.5.2 Table tags

To create a table in HTML you will need to use tags. The most important one is the <table> tag
which is the main container of the table. It shows where the table will begin and where it ends.

Other tags include:

 <tr> represents rows

 <td> is used to create data cells
 <th> is used to add table headings
 <caption> is used to insert captions
 <thead> adds a separate header to the table

Page 17 of 83
  <tbody> shows the main body of the table
 <tfoot> creates a separate footer for the table
2.3.5.3 Form tags

The <form> tag is an HTML element used to create a form on a web page. It is used to collect user
input, such as text, checkboxes, radio buttons, and more. When a user submits the form, the data
entered is typically sent to a server for processing.

The <form> tag acts as a container for form elements and provides various attributes to control the
behavior and appearance of the form. Some common attributes include action, which specifies the
URL where the form data should be sent, and method, which defines the HTTP method to be used
for submitting the form (e.g., GET or POST).

Within the <form> tag, you can include input fields, buttons, dropdown menus, and other form
elements using specific HTML tags like <input>, <button>, <select>, and more. These elements
allow users to enter or select data that will be submitted when the form is submitted.

Syntax:
<form>
//Form elements
</form>

Other tags that are used with <form> tag are:

The <input> tag is an HTML element used to create various types of input fields within a form. It
allows users to enter data that can be submitted as part of a form submission or used for other
purposes in web development.

The <input> tag has several attributes that determine its behavior and appearance. The most
common attribute is the type attribute, which specifies the type of input field to be created. Some
common values for the type attribute include:

 text: Creates a single-line text input field where users can enter alphanumeric text.
 password: Similar to the text input field, but the entered characters are masked to hide the
actual content (typically used for password input).
 checkbox: Creates a checkbox input field that allows users to select one or multiple
options.
 radio: Creates a radio button input field that allows users to select a single option from a
group of options.
 submit: Creates a submit button that, when clicked, submits the form data to the server for
processing.
 file: Creates a file upload input field that allows users to select and upload files from their
device.

Page 18 of 83
These are just a few examples of the type attribute values for the <input> tag. There are additional
types available, such as email, number, date, and more, each serving a specific purpose in capturing
different types of user input.

In addition to the type attribute, the <input> tag can have other attributes like name, value,
placeholder, min, max and more, which further define its behavior and appearance.

The HTML <input> element is fundamental form element. It is used to create form fields, to take
input from user. We can apply different input filed to gather different information from user.

This example to show the simple text input.

<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea>
can be specify either using "rows" or "cols" attribute.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>

The <label> tag is an HTML element used to associate a text label with a form element, typically
an <input> element. It provides a descriptive label for the corresponding input field, making it
easier for users to understand what information is expected in the input field.

The <label> tag helps improve the accessibility and usability of forms by providing a clear and
visible description of the associated input field.

Example:

Page 19 of 83
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>

The <fieldset> tag is an HTML element used to group related form elements together within a
form. It provides a way to logically organize and visually group form controls, such as input fields,
checkboxes, radio buttons, and more.

The <fieldset> tag acts as a container for a set of form elements and is typically accompanied by
a <legend> tag, which provides a caption or title for the group of form controls. The <legend> tag
is placed immediately after the opening <fieldset> tag and helps provide context and description
for the grouped elements.

Example:

<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>

The <select> tag is an HTML element used to create a dropdown list or a select menu within a
form. It allows users to choose one or multiple options from a predefined list of values.

The <select> tag is typically used in combination with <option> tags, which define the individual
options within the dropdown list. The <option> tags are nested within the <select> tags to specify
the available choices.

Example:

<select name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select>

Page 20 of 83
The <optgroup> tag is an HTML element used to group related <option> elements within a
<select> dropdown list. It provides a way to categorize and visually organize the options within
the dropdown menu.

The <optgroup> tag is placed within the <select> tag and contains one or more <option> tags as
its children. The label attribute of the <optgroup> tag is used to specify the label or title for the
group of options.

Example:

<select name="cars" id="cars">

<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

The <button> tag defines a clickable button.

Example:

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

2.3.5.4 Heading tags

Heading tags are HTML elements used to structure and organize the content of a webpage. They
are used to define headings and subheadings, indicating the hierarchy and importance of different
sections of the content. Heading tags range from <h1> to <h6>, with <h1> being the highest level
of heading and <h6> being the lowest.

Search engines and web browsers use heading tags to understand the structure of a webpage and
display it accordingly. Using heading tags properly can improve the accessibility, readability, and
SEO (Search Engine Optimization) of a webpage.

Example:

<html>
<head>
<title>HTML Heading Tag</title>
</head>
<body>
<h1>Heading h1<h1>

Page 21 of 83
 <h2>Heading h2<h2>
<h3>Heading h3<h3>
<h4>Heading h4<h4>
<h5>Heading h5<h5>
<h6>Heading h6<h6>
</body>
</html>

2.3.5.5 List tags

HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

a) HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

Example:

<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description
Type="1" This is the default type. In this type, the list items are numbered with numbers.
Type="I" In this type, the list items are numbered with upper case roman numbers.
Type="i" In this type, the list items are numbered with lower case roman numbers.
Type="A" In this type, the list items are numbered with upper case letters.
Type="a" In this type, the list items are numbered with lower case letters.

b) HTML Unordered List or Bulleted List

Page 22 of 83
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list
also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

Example:

<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>

c) HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also
known as definition list where entries are listed like a dictionary.

The definition list is very appropriate when you want to present glossary, list of terms or other
name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

Example:

<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign. </dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign. </dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation. </dd>
</dl>

2.3.5.6 Media tags

Page 23 of 83
The media tags are:

The <audio> tag is an HTML element used to embed audio content, such as music, podcasts,
or sound effects, into a web page. It provides a built-in player for playing audio files directly in
the browser.

To use the <audio> tag, you need to specify the source of the audio file using the src attribute.
The supported audio formats include MP3, WAV, and Ogg Vorbis.

Syntax:
<audio src="audio-file.mp3" controls>
Your browser does not support the audio tag.
</audio>

Example:

<!DOCTYPE html>
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<audio controls="">
<source src="ICYEREKEZO_by_The_Guardians_Choir.mp3" type="audio/mp3">
<source src="ICYEREKEZO_by_The_Guardians_Choir.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio></html>

The <video> tag is an HTML element used to embed video content into a web page. It
provides a built-in player for playing video files directly in the browser.

To use the <video> tag, you need to specify the source of the video file using the src attribute.
The supported video formats include MP4, WebM, and Ogg.

Syntax:

<video src="" controls> </video>

Example:
<!DOCTYPE html>
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<video controls width="320" height="240">

Page 24 of 83
 <source src="AMAHORO BY KUGANA YESU FAMILY.mp4" type="video/mp4">
<source src="AMAHORO BY KUGANA YESU.ogg" type="video/ogg">
Your browser does not support the video tag.

</video></body>
</html>

The <source> tag is an HTML element used within the <video> and <audio> tags to specify
alternative media sources for the respective media elements. It allows you to provide multiple
versions of the media file in different formats or resolutions, ensuring compatibility with
different browsers and devices.

The <source> tag is nested within the <video> or <audio> tags and has the src attribute to
specify the URL or file path of the media source. Additionally, it has the `type` attribute to
specify the MIME type of the media file.

Syntax:

<source src="" type="">

...
</source>

Example:

<!DOCTYPE html>
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<audio controls>
<source src="yesu_mureba.mp3" type="audio/mpeg">
</audio>
</html>

The <embed> tag is an HTML element used to embed external content, such as multimedia files
or plugins, into a web page. It allows you to include content from external sources within the
HTML document.

The <embed> tag is self-closing and requires the src attribute to specify the URL or file path of
the external content. The type of content being embedded is determined by the MIME type
specified in the type attribute.

Syntax:

Page 25 of 83
<embed attributes>

Example:

<!DOCTYPE html>
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<embed type="video/mp4" src="arakiza.mp4" controls width="400" height="300">
</body>
</html>

The <track> tag is an HTML element used to specify timed text tracks for media elements, such
as <video> and <audio>. It is used in conjunction with the <source> tag to provide subtitles,
captions, or other text-based content synchronized with the media playback.

The <track> tag is nested within the <video> or <audio> tags and has the src attribute to specify
the URL or file path of the text track file. It also has the kind attribute to specify the type of text
track, such as subtitles, captions, descriptions, or chapters. The srclang attribute is used to specify
the language of the text track.
Syntax:

<track attribute>

Example:

<video width="320" height="240" controls>

<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

2.3.5.7 Code tags

1.The <code> tag is an HTML element used to define a piece of computer code or program code
within a web page. It is commonly used to display code snippets, programming instructions, or
any other text that represents code.

When the <code> tag is used, the enclosed text is typically rendered in a monospaced font, making
it visually distinct from the surrounding text. It helps to differentiate code from regular text and
maintain its formatting.

Example:

Page 26 of 83
<p>To display a message in JavaScript, use the <code>console.log()</code> function.</p>
2. The <samp> tag is an HTML element used to represent sample or output content within a web
page. It is typically used to display text that represents computer code output, sample input, or any
other type of sample content.

When the <samp> tag is used, the enclosed text is typically rendered in a monospaced font, similar
to the `<code>` tag. This helps to visually distinguish the sample content from the surrounding
text and maintain its formatting.

Example:
<p><samp>File not found. <br>Press F1 to continue</samp></p>

3. The <kbd> tag is an HTML element used to represent user input or keyboard input within a web
page. It is typically used to display text that represents keys or key combinations on a keyboard.

When the <kbd> tag is used, the enclosed text is typically rendered in a monospaced font, similar
to the <code> and <samp> tags. This helps to visually distinguish the keyboard input from the
surrounding text and maintain its formatting.

Example:
<p>To copy text, press <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>

4.<var> tag defines a variable.

Example:
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base,
and <var>h</var> is the vertical height. </p>

5. The <pre> tag is an HTML element used to represent preformatted text within a web page. It is
commonly used to display text that requires a fixed-width font and preserves both spaces and line
breaks exactly as they appear in the HTML code.

When the <pre> tag is used, the enclosed text is typically rendered in a monospaced font, making
it visually distinct from the surrounding text. This allows you to display text that requires a specific
formatting, such as ASCII art, code snippets, or any other content that relies on precise spacing
and line breaks.

Example:
<pre>
This is an example
of preformatted text
with preserved spaces
and line breaks.
</pre>
2.3.5.8 HTML frame tags

Page 27 of 83
HTML frame tags were used in older versions of HTML to divide a webpage into multiple sections
or frames, each displaying a separate HTML document. The <frame> tag was used to define
individual frames within a frameset, while the <frameset> tag was used to create the overall
structure of the frames.

Frames allowed for the simultaneous display of multiple HTML documents within a single
webpage, with each frame containing its own content.

Note: Do not use HTML <frame> tag as it is not supported in HTML5, instead you can use
<iframe>

Syntax:< frame src = "URL" >

Create Vertical frames:

<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Create Horizontal frames:

<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="top" src="frame1.html" >
<frame name="main" src="frame2.html">
<frame name="bottom" src="frame3.html">
</frameset>
</html>

<iframe src=""></iframe>

2.3.5.9 HTML Comment

Page 28 of 83
An HTML comment is a piece of text within an HTML document that is not displayed on the
webpage itself. It is used to add notes, explanations, or reminders for human readers or developers,
providing information about the code or serving as a placeholder for future modifications.

HTML comments are written between the <!-- and --> delimiters. Anything within these delimiters
is ignored by the web browser and not rendered on the webpage.
For example:

<!-- This is an HTML comment. -->

Example:

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->

<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

Comments are useful for various purposes, including:

1. Documenting code: Comments can explain the purpose or functionality of specific HTML
elements, attributes, or sections of code, making it easier for developers to understand and maintain
the codebase.
2. Temporarily disabling code: By commenting out a piece of HTML code, it can be temporarily
deactivated without deleting it. This can be helpful for troubleshooting or testing different versions
of the code.
3. Communicating with other developers: Comments can be used to leave messages or instructions
for other developers who may be working on the same project.

2.3.5.10 Grouping tags

1.Div tag

The <div> tag in HTML is a versatile and commonly used element that represents a division or
a container for grouping and organizing other HTML elements. It does not have any inherent
meaning or specific styling but serves as a generic block-level container.

The <div> tag is primarily used for layout purposes, allowing web developers to structure and
style sections of a webpage. By applying CSS styles or classes to <div> elements, developers
can control the appearance, positioning, and behavior of the content within them.

Page 29 of 83
For example, a <div> element can be used to create a header section, a sidebar, a footer, or any
other logical division within a webpage. It can contain text, images, forms, other HTML
elements, or even be empty.

Example 1:

<div>
<h1>Welcome to my website!</h1>
<p>This is the main content of the page.</p>
</div>

Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
border: 5px solid red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>

<h1>The div element</h1>

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element. </p>
</div>

<p>This is some text outside the div element. </p>

</body>
</html>

2.Span tag

The <span> tag in HTML is an inline element that is used to apply styles or manipulate specific
portions of text within a larger block of content. Unlike the <div> tag, which is a block-level
element, the <span> tag is used for smaller, more specific sections of text.

Page 30 of 83
The <span> tag does not have any inherent meaning or specific styling. It is primarily used in
conjunction with CSS to target and style specific parts of text within a paragraph, heading, or
any other block-level element.

For example, if you want to apply a different color or font style to a specific word or phrase
within a paragraph, you can wrap that portion of text with <span> tags and apply CSS styles to
it.
Syntax:
<span class="">Some Text</span>
Example:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>

2.3.6 Use of Hyperlinks

A hyperlink is a clickable word, phrase, or image on the internet that leads from one web page to
another.

To create a hyperlink, we use <a> tag.

1.Syntax

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the link's
destination. The link text is the part that will be visible to the reader.

2. Default link appearance

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

3. Types

1. External links: These are hyperlinks that point to webpages or resources outside of the current
website. They typically include the full URL, including the protocol (e.g., http:// or https://). For
example:
<a href="https://www.example.com">Visit Example Website</a>

2. Internal links: These hyperlinks are used to navigate within the same website or webpage. They
are typically created using relative URLs, which specify the path to the target page or section
relative to the current location. For example:<a href="/about">About Us</a>

Page 31 of 83
3. Anchor links: Also known as "jump links," these hyperlinks are used to navigate to specific
sections within a webpage. They are created by assigning an ID to the target section and using the
ID as the href value.
For example:
<a href="#section2">Jump to Section 2</a>
………
<h2 id="section2">Section 2</h2>

2.3.7 Use of HTML graphics

2.3.7.1 Canvas tags

The <canvas> tag in HTML is used to draw graphics on a web page using JavaScript. It can be
used to draw paths, boxes, texts, gradients, and adding images. A canvas is a rectangular area
on an HTML page. By default, it does not contain borders and text.
Note: The <canvas> tag is new in HTML5. Always specify an id attribute (to be referred to in a
script), and a width and height attribute to define the size of the canvas. To add a border, use
the style attribute.

Syntax:<canvas id = "script"> Contents... </canvas>

Example 1:

<!DOCTYPE html>
<html>
<body>

<!-- canvas Tag starts here -->

<canvas id = "level" width = "200"height = "100" style = "border:1px solid
black">
</canvas>
<!-- canvas Tag ends here -->

</body>
</html>
Output:

Example 2:

Page 32 of 83
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript - Drawing a Line</title>
</head>

<body>
<canvas id="canvas" height="400" width="500">
</canvas>
<script>

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.strokeStyle='red';
ctx.lineWidth=5;
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(300, 100);
ctx.stroke();
</script>

</body>

</html>
Output:

Example 3:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();

Page 33 of 83
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 100, 100, 100, 20);
ctx.stroke();
</script>

</body>
</html>
Output:

Example 4:

<!DOCTYPE html>
<html>

<body>
<!-- HTML code to illustrate canvas tag -->
<canvas id = "geeks" height = "200" width = "200"
style = "border:1px solid black">
</canvas>

<script>
var c = document.getElementById("geeks");
var cx = c.getContext("2d");
cx.beginPath();
cx.arc(100, 100, 90, 0, 2 * Math.PI);
cx.stroke();
</script>

</body>
</html>

Page 34 of 83
arc(x, y, radius, startAngle, endAngle)

Output:

Example 5:

<!DOCTYPE html>
<html>
<body>

<!-- canvas tag starts here -->

<canvas id = "geeks" width = "200" height = "200"
style = "border:1px solid black">
</canvas>
<!-- canvas tag ends here -->

<script>
var c=document.getElementById("geeks");
var cx = c.getContext("2d");
var grd = cx.createRadialGradient(100,
100, 5, 100, 100, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "green");
cx.fillStyle = grd;
cx.fillRect(0, 0, 200, 200);
</script>

</body>
</html>
Output:

Page 35 of 83
context.createRadialGradient(x0,y0,r0,x1,y1,r1);

x0: The x-coordinate of the starting circle of the gradient, y0: The y-coordinate of the starting
circle of the gradient, r0: The radius of the starting circle, x1: The x-coordinate of the ending
circle of the gradient, y1: The y-coordinate of the ending circle of the gradient, r1: The radius of
the ending circle.

2.3.7.2 SVG tags

The <svg> tag defines a container for SVG (Scalable Vector Graphics) graphics. SVG is used
to define vector-based graphics for the Web.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Example1:

<svg width="400" height="200">

<rect x="100" y="20" width="200" height="150"
fill="blue" stroke="pink" stroke-width="5"/>
</svg>

Output:

Example2:

<svg width="400" height="200">

Page 36 of 83
 <circle cx="150" cy="100" r="80" stroke="green" stroke-width="4" fill="red" />
</svg>
The explanation of some attributes:

 The cx and cy attributes define the x and y coordinates of the center of the circle. If cx
and cy are omitted, the circle's center is set to (0,0)
 The r attribute defines the radius of the circle

Output:

Example3:

<svg width="400" height="200">

<ellipse cx="200" cy="80" rx="100" ry="50" fill="blue" stroke="pink" stroke-width="5"/>
</svg>
The explanation of some attributes:

 The cx attribute defines the x coordinate of the center of the ellipse

 The cy attribute defines the y coordinate of the center of the ellipse
 The rx attribute defines the horizontal radius
 The ry attribute defines the vertical radius

Output:

Example4:

<svg width="400" height="200">

<line x1="0" y1="0" x2="200" y2="200" fill="blue" stroke="pink" stroke-width="3"/>

Page 37 of 83
</svg>
The explanation of some attributes:

 The x1 attribute defines the start of the line on the x-axis

 The y1 attribute defines the start of the line on the y-axis
 The x2 attribute defines the end of the line on the x-axis
 The y2 attribute defines the end of the line on the y-axis

Output:

Example5:

<svg width="600" height="600">

<polygon points="30,10 40,50 50,20" fill="blue" stroke="pink" stroke-width="2"/>
</svg>
The explanation:

 The points attribute defines the x and y coordinates for each corner of the polygon

Output:

Example6: The <polyline> element is used to create any shape that consists of only straight lines
(that is connected at several points)

<svg width="600" height="600">

<polyline points="20,20 40,25 50,30 60,40" stroke="black" fill="none"/>
</svg>

Page 38 of 83
The points attribute defines the list of points (pairs of x and y coordinates) required to draw the
polyline

Output:

Example7: The <text> element is used to define a text.

<svg height="300" width="600">

<text x="20" y="50" fill="green" stroke="yellow" stroke-width="1" font-size="40">Welcome in
KIREHE ADVENTIST</text>
Sorry, your browser does not support inline SVG.
</svg>
Output:

2.4 Managing page layout in HTML

2.4.1 Definition of page layout

Page layout is the arrangement and organization of various elements on a web page. It involves
the positioning of content, images, navigation menus, and other components to create a visually
appealing and user-friendly design.

Page layout includes considerations such as the placement of headers, footers, sidebars, and
content sections. It also involves determining the spacing, alignment, and proportion of these
elements to create a balanced and aesthetically pleasing composition. The goal of a good page
layout is to enhance the user experience, guide the visitor's attention to important information, and
facilitate easy interaction with the website.

2.4.2 Parts of webpage

The main parts of webpage are:

Page 39 of 83
1. Header
The header of a web page is the top section of the webpage that typically contains important
information and navigation elements. It can include the company logo, a title and sometimes a
search box for the site. The header usually stays consistent for all webpages on a website.
2. Global navigation
It is also called main navigation generally represents the top-level pages of a site's structure.
Global navigation refers to the consistent navigation elements that are present on every page of a
website. It typically appears in the header of the webpage and provides users with a means to
navigate to different sections or pages of the website, regardless of their current location.

3. Local navigation
Local navigation refers to the navigation elements that are specific to a particular section or page
within a website. Local navigation is designed to provide links and options that are relevant to the
content or context of the current page.
Local navigation menus are often found in the sidebar, footer, or within the main content area of a
webpage. They typically include links to related pages, subcategories, or specific features within
the current section.

4. Banner ads

Banner ads are a form of online advertising that appear as rectangular or square-shaped graphical
advertisements on web pages. They are typically displayed at the top, bottom, or sides of a
webpage and are designed to attract the attention of website visitors.

Banner ads often contain a combination of images, text, and sometimes interactive elements such
as buttons or animations. They are used by advertisers to promote products, services, or brands
and are commonly linked to the advertiser's website or a specific landing page.

Banner ads come in various sizes and formats, such as leaderboard (728x90 pixels), skyscraper
(160x600 pixels), or rectangle (300x250 pixels), among others. They can be static, displaying a
single image or message, or dynamic, featuring rotating or animated content.

Page 40 of 83
5. Contact Information
Contact information can be located on webpage in the following ways:

 The phone number and email address in the footer area or

 A link 'Contact' or 'Contact us' in the footer area or on the navigation bar.

This figure shows the different elements of contact information

6. Content area

The content area on a page is traditionally located to the left or right of a sidebar or between two
sidebars. It provides main page information you want a visitor to focus on. The content area
features a main title and content formatted into concise text paragraphs, images, videos or
combination elements divided by spaces or subheadings.

Page 41 of 83
This is the big area in the center that contains most of the unique content of a web page,
for example the photo gallery you want to display or a feature article you want your visitors
to read. This is area that changes from page to page.

7. Footer
It is located at the bottom of the page and usually provides links to contact information, company
address, company information, terms of service, and social media links.

2.4.3 Use HTML tags to organize page layout

HTML has several semantic elements that define the different parts of a web page:

 <header> defines a header section on a page or a section of a page

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information
Note: You can have several <header> elements in one HTML document. However, <header>
cannot be placed within a <footer>, <address> or another <header> element.

 <nav> creates a container for navigation links

 <main> creates a container for the main content of the page
There must not be more than one <main> element in a document. The <main> element must not
be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

 <section> defines a section in a document

 <article> defines an independent, self-contained content
 <aside> defines content aside from the content (like a sidebar)
 <footer> defines a footer section on a page or a section of a page
A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents
You can have several <footer> elements in one document.

Page 42 of 83
  <details> defines additional details that the user can open and close on demand.
2.5 Optimizing webpage in HTML

2.5.1 Definition of optimization

Website optimization refers to the process of improving the speed, efficiency, and overall user
experience of a website.

Website optimization is a set of actions that can help you improve user experience, traffic, and
conversions on your site.

Website optimization is crucial for the success of any online business. Without it, websites won't
receive the necessary traffic they need to stand out and remain profitable. In addition to helping a
website stay at the top of Google Search Engine results, website optimization also helps online
businesses collect concrete data that makes it easier to create strategies that will provide a
significant return on investment.

There are many ways to optimize your webpage content for search, including:

 Adding keyword-based page titles

 Integrating relevant keywords
 Adding useful images
 Creating meta-tags that highlight key concepts
 Managing keyword density
 Adding internal and external links

2.5.2 Benefit of applying SEO on webpage

SEO stands for search engine optimization, which is the process of improving your site to
increase organic visibility for specific search queries. The goal of SEO is to improve the quality
and quantity of traffic to your website through onsite changes. This doesn’t mean just stuffing
pages with relevant keywords, but focusing on core web vitals such as site speed, mobile-
friendliness, interactivity, and the content of web pages.

SEO, or Search Engine Optimization, is the practice of optimizing a webpage or website to

improve its visibility and ranking in search engine results pages (SERPs). The benefits of applying
SEO on a webpage are numerous and include:

1. Increased visibility: By optimizing your webpage for SEO, you can improve its visibility in
search engine results pages. This means that more people will be able to find your webpage when
they search for relevant keywords or phrases.

Page 43 of 83
2. Higher rankings: SEO can also improve your webpage's ranking in search engine results pages.
This means that your webpage will appear higher up in the search results, making it more likely
that people will click on it.

3. More traffic: By increasing your visibility and rankings in search engine results pages, you can
attract more traffic to your webpage. This can lead to more leads, sales, or conversions, depending
on the goal of your webpage.

4. Better user experience: SEO involves optimizing your webpage for both search engines and
users. This means that your webpage will be more user-friendly, with better navigation, faster
loading times, and more engaging content.

5. Cost-effective: SEO is a cost-effective way to improve your webpage's visibility and attract
more traffic. Unlike paid advertising, which requires ongoing investment, SEO can have long-
lasting benefits that continue to drive traffic to your webpage over time.

2.5.3 Use HTML tags to optimize webpage

HTML tags are used to structure and format the content of a webpage. By using HTML tags
properly, you can optimize your webpage for both search engines and users. Here are some HTML
tags that can be used to optimize a webpage:

1. Title tag: The title tag is used to specify the title of the webpage. It appears in the title bar of
the browser and in the search engine results pages (SERPs). The title tag should be concise,
descriptive, and include relevant keywords.

Example: <title>KIREHE ADVENTIST TSS | Software Development and Computer Systems

and Architecture</title>

2. Meta description tag: The meta description tag is used to provide a brief summary of the
webpage's content. It appears in the SERPs and can influence whether or not a user clicks on your
webpage. The meta description tag should be descriptive, compelling, and include relevant
keywords.

Example: <meta name="description" content=" KIREHE ADVENTIST TSS offers educational

services in software development and computer systems and architecture. Learn more about our
courses and facilities today.">

3. Heading tags: Heading tags (H1, H2, H3, etc.) are used to structure the content of a webpage.
They indicate the hierarchy of the content and make it easier for users to read and understand. The
H1 tag should be used for the main heading of the webpage, while H2 and H3 tags can be used for
subheadings.

Example: <h1>Software Development and Computer Systems and Architecture </h1>

<h2>Courses</h2>
<h3>Web Development</h3>

Page 44 of 83
4. Image tags: Image tags (img) are used to display images on a webpage. By using descriptive
alt text, you can optimize your images for search engines and users with disabilities.

Example: <img src="image.jpg" alt="Students working on software development">

5. Anchor tags: Anchor tags (a) are used to create hyperlinks on a webpage. By using descriptive
anchor text, you can optimize your links for search engines and users.

Example: <a href="courses.html">View our courses</a>

6.HTML semantic tags

HTML5 elements are used for better descriptions of various page components:

Before the introduction of HTML5 elements, we mostly used div tags to split HTML code into
separate components, and then we used classes and ids to further specify those components.

With the introduction of semantic HTML5 elements, we’ve got a set of intuitive tags, each
describing a separate page component. So, instead of tagging our content with a group of
confusing divs, we now have a way of describing the components in an easy-to-understand,
standardized way.

Page 45 of 83
2.5.4 Web accessibility

Web accessibility means that websites are designed and developed so that people with
disabilities can use them. More specifically, people can:

 perceive, understand, navigate, and interact with the web

 contribute to the web

Web accessibility involves all disabilities that affect access to the Web, including: auditory,
cognitive, neurological, physical, speech and visual.

Web accessibility also benefits people without disabilities, for example:

 people using mobile phones, smart watches, smart TVs, and other devices with small
screens, different input modes, etc.
 older people with changing abilities due to ageing.
 people with “temporary disabilities” such as a broken arm or lost glasses
 people with “situational limitations” such as in bright sunlight or in an environment
where they cannot listen to audio.
 people using a slow Internet connection, or who have limited or expensive bandwidth

2.5.4.1 HTML Role

HTML roles are attributes that can be added to HTML elements to help define their purpose and
meaning on a web page. HTML roles can be especially useful for web accessibility, as they provide
additional information to assistive technologies like screen readers, allowing them to better
interpret and navigate the content on a page.

Examples of HTML roles and how they can be used to improve web accessibility:

 role="main": This role can be used to identify the main content of a page, making it easier
for assistive technologies to find and focus on the most important content.
 role="navigation": This role can be used to identify a set of navigation links on a page,
allowing assistive technologies to provide shortcuts for users to navigate to different
sections of a website.
 role="banner": This role can be used to identify the banner or header of a page, which
may contain branding or other important information.
 role="contentinfo": This role can be used to identify the footer of a page, which may
contain copyright information or other legal notices.

By using HTML roles, we can provide additional information to assistive technologies and
improve web accessibility for users with disabilities. However, it's important to note that HTML
roles should be used in conjunction with other accessibility techniques, such as proper heading

Page 46 of 83
structure and descriptive link text, to ensure that all users can access and understand the content
on a web page.

2.5.4.2 Test and Standard Validation

In web accessibility, testing and validation are crucial components of ensuring that a website is
accessible to users with disabilities. There are various tools and techniques that can be used to test
and validate web accessibility, including:

1.Automated testing: There are many automated accessibility testing tools available that can
help identify potential accessibility issues on a website. Some popular examples include
Accessibility Insights, Axe, and Wave. While these tools can be helpful, they should not be
relied on as the sole method of testing, as they may not catch all accessibility issues.
2.Manual testing: Manual testing involves manually testing a website using assistive
technologies such as screen readers and keyboard-only navigation. This can help identify
accessibility issues that may not be caught by automated testing tools.

3.User testing: User testing involves testing a website with actual users with disabilities, who
can provide feedback on the accessibility of the site. This can be a valuable way to identify
real-world accessibility issues and get feedback on how to improve the site's accessibility.

In addition to testing, it's also important to follow established accessibility standards and guidelines
when building and designing websites. Some common web accessibility standards and guidelines
include the Web Content Accessibility Guidelines (WCAG) and the Americans with Disabilities
Act (ADA) Standards for Accessible Design. These standards provide a set of best practices for
making websites accessible to users with disabilities, and can help ensure that a website is
accessible to the widest possible audience.

LO 3 STYLE WEB ELEMENTS

3.1 Introduction to CSS
3.1.1 Definition
Cascading Style Sheets is a style sheet language which is used to describe the look and formatting
of a document written in markup language.
3.1.2 Utility

CSS, or Cascading Style Sheets, offers several utilities that make it a valuable tool for web
development. Some of its key utilities:

1. Styling and layout: CSS allows you to control the visual appearance of web pages by defining
styles for HTML elements. You can set properties such as colors, fonts, backgrounds, borders,
margins, and padding, giving you complete control over the design and layout of your website.

2. Responsive design: With CSS, you can create responsive web designs that adapt to different
screen sizes and devices. Media queries enable you to apply different styles based on the device's

Page 47 of 83
characteristics, allowing your website to look and function well on desktops, tablets, and mobile
devices.

3. Selectors and Specificity: CSS provides a wide range of selectors that allow you to target
specific elements or groups of elements for styling. This specificity gives you fine-grained control
over how styles are applied, allowing you to create unique designs and apply different styles to
different sections of your website.

4. Reusability and Maintainability: CSS promotes code reusability and maintainability. By

defining styles once and applying them to multiple elements, you can ensure consistency
throughout your website. This makes it easier to update and maintain your styles, as changes made
to the CSS file are automatically applied to all elements using those styles.

5. Modularity and Organization: CSS allows you to organize your styles into separate files or
modules, making your code more modular and easier to manage. This modular approach enables
better collaboration among developers and promotes code reuse across different projects.

6. Animation and Transitions: CSS provides powerful animation and transition capabilities,
allowing you to create interactive and engaging user experiences. With CSS animations and
transitions, you can animate properties like size, position, opacity, and colors, adding visual
interest and interactivity to your website.

7. Browser Compatibility: CSS is widely supported by modern browsers, ensuring that your styles
are rendered consistently across different platforms. This compatibility makes CSS a reliable
choice for web development, as it allows you to create websites that work well for users regardless
of their browser or device.

3.1.3 Types
There are four types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS
 Imported CSS

3.2 Creating CSS files

3.2.1 CSS syntax

A CSS Syntax rule consists of a selector, property, and its value.

Syntax: selector {Property: value;}

Example:

Page 48 of 83
3.2.1.1 Selector

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell
the browser which HTML elements should be selected to have the CSS property values inside the
rule applied to them.

The selector points to the HTML element where CSS style is to be applied.

3.2.1.2 Declaration

A declaration is the key-value pair of a CSS property and its value. CSS declarations are used to
set style properties and construct rules to apply to individual or groups of elements. The property
name and value are separated by a colon, and the entire declaration must be terminated by a semi-
colon.

3.2.2 Use of CSS style types

3.2.2.1 Inline

Inline CSS contains the CSS property in the body section attached with element. This kind of
style is specified within an HTML tag using the style attribute.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:#00FF00; font-size:50px;font-style:italic; text-align:center;">
KIREHE ADVANTIST TSS
</p>

</body>
</html>
3.2.2.2 Internal

An internal CSS is used to define a style for a single HTML page. It is defined in
the <head> section of an HTML page, within a <style> element.

Page 49 of 83
Example:

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
p{
color:#00FF00;
font-size:50px;
font-style:italic;
text-align:center;
}
</style>
</head>

<body>
<p> KIREHE ADVANTIST TSS</p>

</body>
</html>

3.2.2.3 External

External CSS contains separate CSS file which contains only styles with .css extension and
should be linked to the HTML document using link tag. This means that for each element, style
can be set only once and that will be applied across web pages.

Example: The file given below contains styles. This file saved with .css extension. For
Ex: bumba.css

p{
color:#00FF00;
font-size:50px;
font-style:italic;
text-align:center;
}

Below is the HTML file that is making use of the created external style sheet
 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file.

<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>

Page 50 of 83
 <link rel="stylesheet" href="KATSS.css"/>
</head>

<body>
<p> KIREHE ADVANTIST TSS</p>

</body>
</html>
3.2.2.4 Imported

The @import rule is used to import one style sheet into another style sheet. The @import rule
must be declared at the top of the document after any @charset declaration.
Syntax:
@import url(URL);
Example:

The first file with the CSS styles called katss.css

p{
color:#00FFFF;
font-size:50px;
font-style:italic;
text-align:center;
}
The second file with the CSS styles and @import rule called katss1.css

@import url("katss.css");
h1 {
color: #00ff00;
}

or

@import " katss.css";

h1 {
color: #00ff00;
}

The HTML file called imported.html

<!DOCTYPE html>
<html>
<head>
<title>imported CSS</title>
<link href=" katss1.css" rel="stylesheet">

Page 51 of 83
 </head>

<body>
<p> KIREHE ADVANTIST TSS </p>
<h1>Level 3 SOD</h1>
</body>
</html>
3.2.3 Use CSS Visual rules
3.2.3.1 Font

The CSS font properties are used for defining the size, font family, boldness and the style of the
text.

1.Font Family

For the font family of the text we use font-family property. This is the name of the font, which we
want to use in our webpage.
Example:
p{
font-family: Arial, sans-serif;
}

As you see we have given to our <p> tag font-family property. We differentiate two types of
families:

 generic family - a group of font families having a similar look (like "Serif" or "Sans-serif")
 font family - a particular font family (like "Times New Roman" or "Arial")

When we use specific font family which consists of more than one word, we take the name in
quotes (like "Times New Roman").

2.Font Style

We use font-style property mostly for texts that we want to write italic. Most of all we use the
following values of the font-style property:

 normal, which shows the text normally,

 italic, which shows the text in italics,
 oblique, which “leans” the text.

Example:

<!DOCTYPE html>
<html>
<head>

Page 52 of 83
 <title>Title of the document</title>
</head>
<body>
<p style="font-style:normal">Level 3 SWD</p>
<p style="font-style:italic">Level 4 SOD</p>
<p style="font-style:oblique">Level 5 SOD</p>
</body>
</html>

By default, our text will be font-style: normal, even without writing this value.

3.Font Size

For the size of our text, we use font-size property. We need to give values to our property. The
values are given by pixels, pt, em, rem, etc. You need to know that 1em=16px,
1rem=16px,1pt=1.33px. Most of all we use pixels (px).

Example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3 style="font-size:40px;"> Level 3 SWD</h3>
<p style="font-size:25px;"> Level 4 SOD</p>
<a style="font-size:2em;"> Level 5 SOD</a>
</body>
</html>

4.Font-Variant

The font-variant property allows to set the text as normal or small-caps from a font family.

The small-caps value makes the lowercase letters to the uppercase letters, but these converted
letters will be displayed a little smaller than normal uppercase letters.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;

Page 53 of 83
}

p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The font-variant Property</h1>

<p class="normal">Our school is KIREHE ADVANTIST TSS </p>

<p class="small"> Our school is KIREHE ADVANTIST TSS </p>

</body>
</html>

5.Font Weight

For that we use font-weight property.

Mostly we use the follow values of the font-weight property:

 normal
 bold
 The value can be given also by numbers.
Example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-weight:900;">Level 3 SWD</p>
<p style="font-weight:normal;">Level 3 SWD</p>
<p style="font-weight:bold;">Level 3 SWD</p>
</body>
</html>

3.2.3.2 Text

1.Text color
The color property is used to set the text color. To specify the color you can use a color name
(red), a HEX value (#ff0000) or an RGB value (rgb (255,0,0) ).

Page 54 of 83
Example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="color:#ff0000"> KIREHE ADVANTIST TSS </p>
</body>
</html>

2.Text alignment

Alignment property is used for aligning text inside an element left, right, center, etc.

Text alignment has four values:

 Left (text-align: left) - aligns the text to the left

 Right (text-align: right) - aligns the text to the right
 Center (text-align: center) - puts the text in center of the page
 Justify (text-align: justify) - stretches the line of text to align both the left and right ends.

Browsers by default align text to the left, and if there is need to align text to the right or put it in
the center, we should use the corresponding value.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="text-align:center">Level 3 SOD</p>
<p style="text-align:right">Level 3 SOD</p>
<p style="text-align:justify">Level 3 SOD</p>
</body>
</html>

3.Text decoration

Text decoration is used for setting the decoration of the text. In CSS3, it is a shorthand for the CSS
text-decoration-line, CSS text-decoration-color and CSS text-decoration-style properties.

Page 55 of 83
The text-decoration-style property specifies the style of the text decoration. Styles can be solid,
dashed, dotted, double and wavy.

Decoration property is used to specify line decorations added to the text. The following values are
valid for text-decoration property.

 Overline (text-decoration:overline) - each line of text has a line over it

 Underline (text-decoration:underline) - each line text is underlined
 Line-through (text-decoration:line-through) - each line of text has a line going through it
 None (text-decoration:none) - no text decoration is applied

Example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a style="text-decoration:none">Level 3 SOD</a>
<h1 style="text-decoration:overline">Level 3 SOD</h1>
<p style="text-decoration:line-through">Level 3 SOD</p>
<a style="text-decoration:underline">Level 3 SOD</a>
</body>
</html>

4.Text transform

Text-transform property is used for controlling text capitalization. It means that you can set your
text to be uppercase, lowercase, or capitalized (title case).

Transform property has the following values:

 Uppercase (text-transform: uppercase) - converts all characters to uppercase

 Lowercase (text-transform: lowercase) - converts all characters to lowercase
 Capitalize (text-transform: capitalize) - converts the first character of each word to
uppercase

Example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

Page 56 of 83
 </head>
<body>
<p style="text-transform:uppercase">Rutsiro</p>
<p style="text-transform:lowercase">Muhanga</p>
<p style="text-transform:capitalize">Karongi</p>
</body>
</html>

5.Text shadow

We use the text-shadow property when we want to give shadow to our text.

Shadow property is used to apply various shadow effects to the text. It accepts a list of values.
Each item in the list can have two and more comma-separated values.

The text shadow property syntax can look like: text-shadow: h-shadow v-shadow blur-radius color
where
 h-shadow: The position of the horizontal shadow
 v-shadow: The position of the vertical shadow
 blur: The blur radius. Default value is 0
 color: The color of the shadow
Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px #FF0000;
}
</style>
</head>
<body>
<h1>KIREHE ADVANTIST TSS</h1>
</body>
</html>

6. Text indentation

Text indent property is used for specifying the length of empty space of the first line in a text block.
The values below are valid for this property:

 Length, which specifies the indentation in px, pt, cm, em, etc. The default value is 0.
Negative values are allowed.

Page 57 of 83
  Percentage - which specifies the indentation in percentage of the width of the containing
block.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Indentation</title>
<style>
p{
text-indent: 100px;
}
</style>
</head>
<body>
<p> KIREHE ADVANTIST TSS</p>

</body>
</html>
7.Letter spacing

CSS letter-spacing property allows to define the spaces between letters/characters in a text.
The following values are supported by this property:

 Normal, which means that there won’t be extra spaces between characters. It is the default
value of this property.
 Length, which defines an extra space between characters. Negative values are allowed.
 Initial, which makes the property use its default value.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p{
letter-spacing: 5px;
}
h3 {
letter-spacing: -1px;
}
</style>
</head>
Page 58 of 83
 <body>
<p>Levels</p>
<h3>Level 4</h3>
</body>
</html>

8.Line height

The line-height property defines the line-height. It is used to set the leading of lines of a text. If
the line-height value is greater than the value of the font-size of an element, the difference will be
the leading of text. Here are the values supported by this property:

 Normal, which defines a normal line height. It is the default value of this property.
 Length, which defines a fixed line height in px, cm etc.
 Number, which defines a number which is multiplied with the current font size to set the
line height.
 %, which defines a line height in percent of current font size.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p{
line-height: 50px;
}
h3 {
line-height:20px;
}
</style>
</head>
<body>
<p> KIREHE ADVANTIST TSS </p>
<h3>Software deveopment</h3>
</body>
</html>

9. Word spacing

With the help of the CSS word-spacing property, we can change the space between the words in a
piece of text, not the individual characters.
It supports the values below:

 Normal, which specifies normal word spacing. This is the default value of this property.

Page 59 of 83
  Length, which specifies an extra word spacing. Can be specified in px, pt, cm, em, etc.
Negative values are valid.
 Initial, which makes the property use its default value.
 Inherit, which inherits the property from its parent’s element.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p{
word-spacing: 20px;
}
h3 {
word-spacing: 5px
}
</style>
</head>
<body>
<p> G KIREHE ADVANTIST TSS </p>
<h3>Software development</h3>
</body>
</html>

3.2.3.3 Colors and background colors

The color property specifies the color of text.

The background-color property sets the background color of an element.

Tip: Use a background color combined with a text color that makes the text easy to read.
Example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body{
background-color:orange;
}
p
{

Page 60 of 83
 color:white;
}
</style>
</head>
<body>
<p> KIREHE ADVANTIST TSS </p>
<h3>Software development</h3>
</body>
</html>
3.2.3.4 Opacity

The opacity property sets the opacity level for an element. The opacity-level describes the
transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely
transparent.

Note: When using the opacity property to add transparency to the background of an element, all
of its child elements become transparent as well. This can make the text inside a fully transparent
element hard to read. If you do not want to apply opacity to child elements, use RGBA color
values instead.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: red;
opacity: 0.5;
}
p{
background-color: rgba(255,0,0,0.5);
}
</style>
</head>
<body>

<div> KIREHE ADVANTIST TSS</div>

<p>Software Development</p>

</body>
</html>

3.2.3.5 Background image

The background-image property sets one or more background images for an element.

Page 61 of 83
By default, a background-image is placed at the top-left corner of an element, and repeated both
vertically and horizontally.

Tip: The background of an element is the total size of the element, including padding and border
(but not the margin).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>

</body>
</html>
3.2.4 Use CSS Display and positioning
3.2.4.1 Relative

Relative Position: Setting the top, right, bottom, and left properties of an element with position:
relative; property will cause it to adjust from its normal position. The other objects or elements
will not fill the gap.

Syntax: position: relative;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
left: 50px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div>
This element has position:relative;

Page 62 of 83
 <p>Welcome</p>
</div>
</body>
</html>
3.2.4.2 Absolute

An element with position: absolute; will cause it to adjust its position with respect to its parent.
If no parent is present, then it uses the document body as parent.

Syntax: position: absolute;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
left: 50px;
border: 3px solid #73AD21;
height:80px;
}
p{
position:absolute;
top:25px;
border:4px dotted #FF0000;
}
</style>
</head>
<body>
<div>
This element has position:relative;
<p>Welcome</p>
</div>
</body>
</html>
3.2.4.3 Fixed

Position: fixed; property applied to an element will cause it to always stay in the same place
even if the page is scrolled. To position the element, we use top, right, bottom, left properties.
Syntax: position: fixed;

Example:

<!DOCTYPE html>

Page 63 of 83
<html>
<head>
<style>
p{
position:fixed;
top:550px;
right:0px;
bottom:20px;
border:4px solid #FF0000;
}
</style>
</head>
<body>
<p>Welcome</p>
</body>
</html>

3.2.4.4 Sticky

The "position: sticky;" is used to position the element based on the scroll position of the user.

This CSS property allows the elements to stick when the scroll reaches to a certain point.
Depends upon the scroll position, a sticky element toggles in between fixed and relative. The
element will be positioned relative until the specified position of offset is met in the viewport.
Then, similar to position: fixed, the element sticks in one place.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
div{
position: sticky;
top:50px;
padding: 10px;
font-size:20px;
font-weight:bold;
background-color: lightblue;
border: 1px solid blue;
}
</style>
</head>

Page 64 of 83
 <body>
<h1>Welcome to this web page</h1>
<h2>This page is reserved to all users</h2>
<div>Sticky Element</div>
<p style = "padding-bottom:2000px">Hello World</p>
</body>
</html>

3.2.4.5 Block

CSS display is the most important property of CSS which is used to control the layout of the
element. It specifies how the element is displayed.

Every element has a default display value according to its nature. Every element on the webpage
is a rectangular box and the CSS property defines the behavior of that rectangular box.

Syntax: display: value;

The default value is inline.

The CSS display block element takes as much as horizontal space as they can. Means the block
element takes the full available width. They make a line break before and after them.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p{
display:block;
}
</style>
</head>
<body>
<p>Accounting</p>
<p>Computer Systems and architecture</p>
<p>Software Development</p>
</body>
</html>

3.2.5 Use CSS Box model

The CSS box model is a container that contains multiple properties including borders, margin,
padding, and the content itself. It is used to create the design and layout of web pages.

Page 65 of 83
The following figure illustrates the Box model in CSS.

Example:
p{
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}
The total width for the element can be calculated as:

Total element width = width + left padding + right padding + left border + right border + left
margin + right margin

The <p> element can have a total width of 94px.

Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border)
+ 0px (left margin + right margin) = 94px.

The total height for the element can be calculated as:

Total element height = height + top padding + bottom padding + top border + bottom border + top
margin + bottom margin

The <p> element can have a total height of 84px.

Page 66 of 83
Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom
border) + 0px (top margin + bottom margin) = 84px.

3.2.5.1 Height and width

Height and Width in CSS are used to set the height and width of boxes. Its value can be set using
length, percentage or auto.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
width:200px;
height:10px;
}
</style>
</head>
<body>
<p>Software Development</p>
<p>Computer Systems and architecture</p><br>
<h2>Height and Width in CSS are used to set the height and width of boxes.</h2>
</body>
</html>
Output:

3.2.5.2 Borders

Border property is used to cover the content and any padding. It allows to set the style, color,
and width of the border.

3.2.5.3 Border radius

Border radius property sets the rounded borders and provides the rounded corners around an
element, tags, or div. It defines the radius of the corners of an element.

It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-right-

radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of

Page 67 of 83
an element. We can specify the border for all four corners of the box in a single declaration using
the border-radius. The values of this property can be defined in percentage or length units.

If the bottom-left value is omitted, then it will be same as the top-right. If the value of bottom-right
is eliminated, then it will be same as the top-left. Similarly, if top-right is eliminated, then it will
be the same as top-left.

Let's see what happens when we provide a single value, two values, three values, and four values
to this property.

o If we provide a single value (such as border-radius: 30px;) to this property, it will set all
corners to the same value.
o When we specify two values (such as border-radius: 20% 10% ;), then the first value
will be used for the top-left and bottom-right corners, and the second value will be used for
the top-right and bottom-left corners.
o When we use three values (such as border-radius: 10% 30% 20%;) then the first value
will be used for the top-left corner, the second value will be applied on top-right, and
bottom-left corners and the third value will be applied to the bottom-right corner.
o Similarly, when this property has four values (border-radius: 10% 30% 20% 40%;) then
the first value will be the radius of top-left, the second value will be used for the top-right,
the third value will be applied on bottom-right, and the fourth value is used for bottom-left.

3.2.5.4 Padding

Padding property is used to create space around the element, inside any defined border.

3.2.5.5 Margin
Margin property is used to create space around the element, around the border area.

3.2.5.6 Visibility

Visibility property is used to specify whether an element is visible or not in a web document but
the hidden elements take up space in the web document. Use the display property to remove or
display property to both hide and delete an element from the browser.

Syntax:
visibility: visible|hidden|collapse|;

visible: It is the default value. The element is show or visible normally in the web document.

Page 68 of 83
Example:

<!DOCTYPE html>
<html>
<head>
<title>visibility in css</title>
<style>
h1 {
color:green;
visibility: visible;
text-align:center;
}

</style>
</head>
<body>
<h1>Level 3 SOD</h1>
</body>
</html>
Hidden: It hides the element from the page but takes up space in the document.
Example:

<!DOCTYPE html>
<html>
<head>
<title>visibility in css</title>
<style>
h1 {
color:green;
visibility: hidden;
text-align:center;
}
h2{
color:orange;
text-align:center;
}

</style>
</head>
<body>
<h1>Level 3 SOD</h1>
<h2> KIREHE ADVANTIST TSS</h2>
</body>
</html>

Page 69 of 83
Collapse: It is only used for the table elements. It is used to remove the rows and column from
the table but it does not affect the layout of the Table. But their space is available for other
content.
Note: This property is not used for other elements except table elements.
Example:

<!DOCTYPE html>
<html>
<head>
<title>
CSS | visibility Property
</title>
<style>
table{
visibility:collapse;
}

</style>
</head>
<body>
<center>
<table border=1>
<tr>
<th>&numero;</th>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</table>
Welcome
</center>
</body>
</html>

3.2.5.7 Auto
You can set the margin property to auto value to horizontally center the element within its
container. The element will then take up the specified width, and the remaining space will be split
equally between the left and right margins.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;

Page 70 of 83
 margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

3.3 Applying Typography on webpage

3.3.1 Introduction to typography

Typography is the way that text is arranged and presented.

Typography in CSS refers to the visual appearance of text on a webpage. It includes various aspects
such as font family, font size, font weight, line height, letter spacing, and text alignment.

Here are some of the common CSS properties used for typography:

1. font-family: specifies the font to be used for the text on a webpage. This property can take
multiple font names as an alternative in case the primary font is not available.
2. font-size: specifies the size of the font in pixels, ems, or other units.
3. font-weight: specifies the thickness of the font, which can be normal, bold, or other values.
4. line-height: specifies the height of the line on which the text is displayed.
5. letter-spacing: specifies the space between letters in the text.
6. text-align: specifies the alignment of the text, which can be left, right, center, or justified.
By using these properties, web designers can create visually attractive and readable text content
on their web pages.

3.3.2 Use CSS scripts for typography

1.Font family

Example

body {
font-family: "Open Sans", sans-serif;
}

Page 71 of 83
This script sets the font family for the entire body of the document. In this example, the font family
used is "Open Sans" and if it is not available, the browser will use a default sans-serif font.

2.Font size

Example

h1 {
font-size: 36px;
}

p{
font-size: 16px;
}

These scripts set the font size for heading 1 and paragraphs respectively. The font size is measured
in pixels.

3.Font weight

Example

h2 {
font-weight: bold;
}

h3 {
font-weight: 600;
}

These scripts set the font weight for heading 2 and heading 3 respectively. The font weight can be
set to bold, normal or to a specific number to adjust the thickness of the font.

4.Line height

Example

p{
line-height: 1.5;
}

This script sets the line height for paragraphs. The line height property can be used to adjust the
spacing between lines of text.

5.Letter spacing

Page 72 of 83
Example

p{
letter-spacing: 2px;
}

In this example, the letter-spacing of all paragraphs in the HTML document will be increased by
2 pixels.
You can also use negative values to decrease the spacing between characters:

h1 {
letter-spacing: -1px;
}

In this example, the letter-spacing of all h1 headings in the HTML document will be decreased by
1 pixel.

6.Text align

Example

div {
text-align: center;
}

This script puts in center the text for div.

7.Text decoration

Example

a{
text-decoration: none;
}

h4 {
text-decoration: underline;
}

These scripts set the text decoration for links and heading 4 respectively. The text-decoration
property can be used to remove underlines from links or add underlines to headings.

These are just a few examples of CSS scripts that can be used for typography. There are many
other CSS properties that can be used to style typography, such as text-transform,font-style,word-
spacing.

Page 73 of 83
3.3.3 Use HTML tags required for typography

Here are some commonly used HTML tags required for typography:

 <h1> - Used for headings. You can also use <h2>, <h3>, <h4>, <h5>, and <h6> for
subheadings with varying levels of importance.
 <p> - Used for paragraphs.
 <strong> - Used for emphasizing important text. Renders as bold text.
 <em> - Used for emphasizing text. Renders as italicized text.
 <u> - Used for underlining text.
 <s> - Used for striking through text.
 <sup> - Used for superscript text.
 <sub> - Used for subscript text.
 <blockquote> - Used for quoting text.
 <cite> - Used for citing the source of a quote or piece of text.
 <abbr> - Used for abbreviations.
 <code> - Used for displaying code snippets.
 <pre> - Used for displaying preformatted text.
 <br> - Used for line breaks.
 <hr> - Used for horizontal lines.
These are just some of the commonly used tags. There are many more tags and attributes available
in HTML that can be used for typography, depending on your needs.

3.3.4 Embed and position project object in webpage content

To embed and position a project object in a webpage content, you can follow these steps:

1. Determine the type of project object you want to embed: This could be an image, video,
audio file, or any other type of multimedia content.
2. Upload the project object to a web server or cloud storage service: Once you have
determined the type of project object you want to embed; you need to upload it to a web
server or cloud storage service. You can use a free hosting service like Imgur or YouTube
or upload to your own server or storage.
3. Get the embed code: Once the project object is uploaded, you need to get the embed code
to embed it in your webpage. This can be obtained from the hosting service where the
project object was uploaded.
4. Determine the position of the project object on your webpage: Decide where you want to
position the project object on your webpage. You can position it within a paragraph, in a
dedicated section, or anywhere else on your page.

Page 74 of 83
 5. Add the embed code to your webpage: Once you have determined the position of the
project object, you need to add the embed code to your webpage. You can do this by
copying and pasting the embed code into the HTML code of your webpage.
6. Adjust the size and alignment of the project object: Finally, you can adjust the size and
alignment of the project object using CSS styles. You can use CSS to control the width and
height of the project object, as well as its position on the page.
Example:

To embed an image, you can follow these steps:

1. Upload the image to a web server or cloud storage service.

2. Get the embed code for the image.
3. Determine the position of the image on your webpage.
4. Add the embed code to your webpage.
5. Adjust the size and alignment of the image using CSS styles.
Here's an example of how to embed an image using HTML and CSS:

<div class="image-container">
<img src="https://example.com/image.jpg" alt="Image description">
</div>

<style>
.image-container {
width: 50%;
margin: 0 auto;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
</style>

In this example, we use a div container to position the image in the center of the page. We set the
width of the container to 50% and use margin: 0 auto to center it horizontally. We also use text-
align: center to center the image within the container. Finally, we use CSS to set the maximum
width of the image to 100% and ensure that its height is adjusted automatically.

3.4 Setting media query rules

3.4.1 Description of media query rules
3.4.1.1 Definition

A media query rule is a way to apply specific styles to a webpage based on the characteristics of
the device or screen size that is being used to view it. Media queries allow web developers to

Page 75 of 83
create responsive designs that can adapt to different devices and screen sizes, such as desktop
computers, tablets, and smartphones.

Media queries are written using the @media rule in CSS, followed by a set of conditions in
parentheses. The conditions can be based on a variety of factors, such as the width of the screen,
the orientation of the device, the pixel density, and more.

The syntax for a media query rule in CSS is:

@media mediatype and (media feature) {

/* CSS rules */

The media type is the type of media being targeted, such as screen, print, speech, etc. The media
feature is a specific characteristic of the targeted media, such as width, height, orientation, etc.

For example, to target devices with a maximum screen width of 768px, you can use the
following media query rule:

@media screen and (max-width: 768px) {

/* CSS rules */

This rule applies only when the device is a screen and its maximum width is 768 pixels. The CSS
rules within the curly braces will be applied only when this condition is met.

3.4.1.2 Identify the device types

The commonly used media types are:

 all: This is the default media type and applies to all devices.
 print: Used for printing on paper.
 screen: Used for computer screens, tablets, smart-phones, etc.
 speech: Used for screen readers and other speech synthesizers.
Example

/* Styles for all devices */

body {
font-size: 16px;

Page 76 of 83
 }

/* Styles for screens with width less than 600px */

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}

/* Styles for printing on paper */

@media print {
body {
font-size: 12px;
}
}

3.4.2 Use of breakpoint

Breakpoints are customizable widths that determine how your responsive layout behaves across
device or viewport sizes.

CSS breakpoint is point where the website content responds according to the device width,
allowing you to show the best possible layout to the user. CSS breakpoint is also called media
query breakpoint.

Example:

@media (max-width: 480px) {

.text {

font-size: 16px;

Here, the breakpoint is 480px.

3.4.2.1. For Desktop

The breakpoints of widths of desktop and large screens computer are ranged between 1025px and
1200px.1201px and more for extra large screens and Television, from 769px to 1024px for small
screens and laptops.

3.4.2.2. Tablet

Page 77 of 83
A tablet is a mobile computing device that is typically larger than a smartphone and smaller than
a laptop.
The breakpoints of widths of tablets are ranged between 481px and 768px.

3.4.2.3 For Smartphone

A smartphone is a mobile device that combines the functionality of a phone with the features of a
computer. It typically features a touchscreen display and can connect to the internet through Wi-
Fi or cellular networks.

The breakpoints of widths of mobile devices are ranged between 320px and 480px.

3.4.3 Media orientation

The orientation CSS media feature can be used to test the orientation of the viewport. The
orientation feature is specified as a keyword value chosen from portrait and landscape.
3.4.3.1 Portrait
The viewport is in a portrait orientation if the height is greater than or equal to the width.
3.4.3.2 Landscape
The viewport is in a landscape orientation if the width is greater than the height.

3.4.4 Hide elements with media queries

To hide an element in a responsive layout, we need to use the CSS display property set to its
"none" value along with the @media rule.

3.4.5 Variable Font Size

To adjust font size for different screen sizes using CSS media queries, you can use a combination
of CSS units and media queries.

Here's an example of how to adjust font size for different screen sizes using a variable font size in
a media query:

/* Default font size */

body {
font-size: 16px;
}

/* Media query for screens smaller than 600px */

@media (max-width: 600px) {
body {
font-size: 14px;
}
}

/* Media query for screens between 600px and 1200px */

Page 78 of 83
 @media (min-width: 600px) and (max-width: 1200px) {
body {
font-size: 18px;
}
}

/* Media query for screens larger than 1200px */

@media (min-width: 1200px) {
body {
font-size: 20px;
}
}

In this example, the body element has a default font size of 16px. The media queries adjust the
font size for screens smaller than 600px, screens between 600px and 1200px, and screens larger
than 1200px.

You can adjust the font size values to fit your specific design needs.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Website</title>
<style>
@media screen and (min-width:320px) and (max-width:480px) and
(orientation:landscape)
{
body{
background-color: orange;
font-size:10px;
}
}
@media screen and (min-width:320px) and (max-width:480px) and
(orientation:portrait)
{
body{
background-color:green;
color:orange;
font-size:10px;
}
}
@media screen and (min-width:1025px) and (max-width:1200px)

Page 79 of 83
{
body{
background-color:blue;
color:white;
font-size:10px;
}
h1{
font-size:24px;
}
h2{
text-decoration: overline;
}
}
</style>
</head>
<body>
<h1>Welcome to this website.</h1>
<h2>This page is here for the purpose of showing what I need to learn in
Level 3.</h2>
</body>
</html>

Note:

The HTML tag <meta name="viewport" content="width=device-width, initial-scale=1"> is

used to specify how a webpage should be displayed on different devices, such as mobile phones,
tablets, and desktop computers.

The name attribute specifies the type of metadata, which in this case is the viewport. The content
attribute contains the settings for the viewport.

width=device-width means that the width of the viewport should be set to the width of the device's
screen. This is important for ensuring that the webpage is displayed properly on different screen
sizes.

initial-scale=1 sets the initial zoom level of the webpage. A value of 1 means that the webpage
should be displayed at its original size, without any zooming in or out.

Exercises:

1.Change the font size of a paragraph when the screen size is smaller than 600 pixels.

Answer:

p{
font-size: 20px;

Page 80 of 83
}

@media screen and (max-width: 600px) {

p{
font-size: 16px;
}
}
2. Hide an image when the screen size is larger than 1200 pixels

Answer:

img {
display: block;
max-width: 100%;
height: auto;
}

@media screen and (min-width: 1200px) {

img {
display: none;
}
}
3. Change the background color of a section when the screen size is between 600 and 900 pixels.

Answer:

section {
background-color: white;
}

@media screen and (min-width: 600px) and (max-width: 900px) {

section {
background-color: lightgray;
}
}

4. Multiple choice questions on media queries in CSS:

1. What is a media query in CSS?

a) A way to apply styles to specific HTML elements
b) A way to target specific screen sizes or device types
c) A way to add JavaScript code to a website
d) A way to embed images in a webpage

Answer: b) A way to target specific screen sizes or device types.

Page 81 of 83
2. Which of the following media queries targets screens with a maximum width of 768 pixels?
a) @media screen and (max-width: 768px)
b) @media screen and (min-width: 768px)
c) @media screen and (max-height: 768px)
d) @media screen and (min-height: 768px)

Answer: a) @media screen and (max-width: 768px)

3. How can you apply different styles to a navigation menu on a mobile device versus a desktop
device using media queries?
a) Use the :hover pseudo-class to target mobile devices
b) Use JavaScript to detect the device type and apply styles accordingly
c) Use a media query with a max-width of a certain size to target mobile devices
d) Use a media query with a min-width of a certain size to target desktop devices

Answer: c) Use a media query with a max-width of a certain size to target mobile devices.

4. Which of the following is an example of a media query that targets screens with a minimum
resolution of 300dpi?
a) @media screen and (min-width: 300dpi)
b) @media screen and (resolution: 300dpi)
c) @media screen and (min-resolution: 300dpi)
d) @media screen and (max-resolution: 300dpi)

Answer: c) @media screen and (min-resolution: 300dpi)

5. What is the purpose of using media queries in CSS?

a) To apply the same styles to all devices
b) To target specific devices or screen sizes and apply different styles accordingly
c) To add interactivity to a webpage
d) To optimize a webpage for search engines

Answer: b) To target specific devices or screen sizes and apply different styles accordingly.

Page 82 of 83