Website Note

WEBSITE
DEVELOPMENT
Table of content
Table of content .................................................................................................... 1
Acronyms ............................................................................................................. 2
Learning Unit 1: Design simple web page layouts ................................................. 5
Learning outcome 1.1 Identify of main layout sections according to ndesign

specifications. .................................................................................................... 6
Learning outcome 1.2 Design the web page Layout to match design
specifications. .................................................................................................. 12
Learning Unit 2: Develop Cascarding Style Sheets (CSS) ..................................... 51
Learning outcome 2.1 Use the appropriate Format, style and layout of the
elements on a web page as design specifications ............................................. 52
Learning Unit 3: Ensure website content meets technical protocols and standards.
........................................................................................................................... 80
Learning Outcome 3.1 Verify and validate the web content in accordance with
required standards. ......................................................................................... 82
Learning Outcome3.2 Test the content as per standard procedures............... 110
Learning Unit 4: Produce interactive web animations ....................................... 121
Learning Outcome 4.1: Analyze website requirements in accordance with client’s

requirements ................................................................................................. 123
Learning Outcome 4.2 Design of web animations and responsiveness according

to the design specifications ............................................................................ 127
Learning Outcome 4.3: Publish animations .................................................. 130
Appealing Features of Bootstrap ....................................................................... 136
Learning Unit 5: Integrate website with social web technologies........................ 138
Learning Outcomes: 5.1 Identify social web to be integrated with website ...... 140
Learning Outcome 5.2.Develop the code and documentation of the integration

requirements ................................................................................................. 145
References: ....................................................................................................... 148

Acronyms
CSS: Cascading Style Sheet
HTML: Hypertext Markup Language
UI: User Interfaces
SEO: search engine optimization
APNG: Animated Portable Network Graphics
GIF: Graphics Interchange Format
ICO: Microsoft Icon
JPEG: Joint Photographic Expert Group image
PNG: Portable Network Graphics
SVG: Portable Network Graphics
Kigali November, 2022 2

Introduction
This course intends to provide basic knowledge and skills required for
planning, designing and developing effective web pages with a focus on the
practical application of the technologies used in the web development. It
covers basic terminologies, tools, HTML, Cascading Style Sheet (CSS).
This course is intended for people who are already Software development.
The course aims to:
✓ Introduce learners the basic terminologies and various phases of

website development process.
✓ Help learners to recognize and understand HTML web page elements
and HTML tags.
✓ Enable learners to develop web pages using HTML.
✓ Make learners capable to apply CSS to format web page elements.
✓ Ensure website content meets technical protocols and standards
✓ Produce interactive web animation
✓ Integrate social web technologies

Module Code and Title: SFDDW401: WEBSITE DEVELOPMENT
Learning Units:
1. Design simple web page layouts
2. Develop cascading style sheets
3. Ensure website content meets technical protocols and standards
4. Produce interactive web animation
5. Integrate social web technologies

Learning Unit 1: Design simple web page layouts
STRUCTURE OF LEARNING UNIT
Learning outcomes:
1.1. Identify of main layout sections according to design specifications.

1.2. Design the web page Layout to match design specifications.

Learning outcome 1.1 Identify of main layout sections according to
ndesign specifications.
Duration: 2hrs
Learning outcome 1.1 objectives:
By the end of Identify of main layout sections according to design

specifications, the trainee will be able to:
1. Identify basic Page structure and site design.

2. Describe the types of User Interface
Resources
Equipment Tools Materials
✓ Books.
✓ Computer. ✓ Papers.
✓ Pens.
✓ Markers.
✓ Pencils.
✓ Board.

1.1.1 Page structure Deffinition
Page structure and site design are the basic parts that internet users often
expect to see when they visit a web site.
Understanding the location and propose of the the main structures can help
you relay information about your small business and products or services in
ways that attract visitors and retain their interest.
1.1.2 Basic Page structure and site design.

A. Page headers
The header is the area that runs horizontally across the top of a page and is
commonly the same on most every page in the site. It helps make a website
visually identifiable to visitors. Similar to a letter heading or letterhead at the

top of stationery, the page header displays information about the person or
company controlling the website via title text, log, background images, tagline
or a combination of these elements. Other elements often placed in the header
include a site-search box, shopping cart link, site-access link and navigation
tools.
B. Navigation Tools.
Web-page navigation tools are located in several areas outside of the header
including the right or left sides, center or boottom of the page. They offer page-
to-page navigation or instant jump to the top of the current page. Designs
feature text or image based one click links organized standalone or in tab, drop
down or pop up menu and list layouts. Some sites also feature breadcrumb
trails links to every page you would visit to reach the current page organized
left to right on a harizontal line in the header or top center of the page in the
order of your movement through the site, if you were to follow the site’s
organizational hierarchy.
C. Primary content
The primary content area on a page is traditionally located to the left or right of
sidebar or between two sidebars. It provides main page information you want a
visitor to focus on. The primary content area features a main title and content
formatted into concise text paragraphs, images, videos or combination elements
divided by spaces or subheadings. It also often features elements previously
mentioned such as a breadcrumb trail and jump navigation links, as well as
update information such as content publication or update dates and links to
websites relevant to the content or that you think would interest visitors.

D. Sidebar columns.
Sidebar columns, also knowns as sidebars, run vertically along the left or right
side of web pages. They usually provide primary or secondary site navigation
links and information you want to emphasize such as contact details or
important updates about the site operator or the topic of the site. Other
elements often placed in sidebars include personal or partner advertising, a site
search box and search filter tools. Sidebars usually display information as an
unbroken column or a column divided into sections or boxer.
E. Page Footer
The footer runs horizontally across the bottom of pages. It provides navigation
links visitors might find useful, as well as details about a page or website such
as a logo, copyright date, website operator’s name, page author name, legal
statements and links to the site terms of use and privacy policies. Other
elements aften placed in the foot include links to the site operator’s contact page
oe email address, job postings page, feedback form page, support page and
frequently asked questions page.
1.1.3. user interfaces (UI)

1.1.3.1. The user interface Definition
The user interface is the point at which human users interact with a computer,
website or application. The goal of effective UI is to make the user's experience
easy and intuitive, requiring minimum effort on the user's part to receive the
maximum desired outcome.
1.1.3.2. Why is user interface important?
User interface (UI) is important to meet user expectations and support the
effective functionality of your site. A well-executed user interface facilitates

effective interaction between the user and the program, app or machine
through contrasting visuals, clean design and responsiveness.
1.1.3.3. Types of User interface
Types of user interfaces can include:
➢ Form-based user interface: Used to enter data into a program or

application by offering a limited selection of choices. For example, a
settings menu on a device is form-based.
➢ Graphical user interface: A tactile UI input with a visual UI output
(keyboard and monitor).
➢ Menu-driven user interface: A UI that uses a list of choices to navigate
within a program or website. For example, ATMs use menu-driven UIs
and are easy for anyone to use.
➢ Touch user interface: User interface through haptics or touch. Most
smartphones, tablets and any device that operates using a touch screen
use haptic input.
➢ Voice user interface: Interactions between humans and machines
using auditory commands. Examples include virtual assistant devices,
talk-to-text and GPS.
Summary for the trainer related to the content
In this unit, we learned how to Understanding the location and

propose of the the main structures can help you relay information
about your small business and products or services in ways that
attract visitors and retain their interest.

Points to Remember (Take home message)
✓ Describe types of User Interface.

✓ Identify basic Page structure and site design
Learning outcome 1.1: formative assessment
Please mix different assessment instruments/tools for triangulation

and relevancy of assessment
Written assessment
1. A user interface (UI) is the space where interactions between humans and
machines occur. Describe two (2) types of User Interface.
2. Identify any five (3) basic Page structure and site design

Learning outcome 1.2 Design the web page Layout to match design
specifications.
Duration: 8hrs
By the end of design, the web page Layout to match design

specifications, the trainee will be able to:
1. Define the web page, website, web browser, text Editor.
2. Differentiate between tags, element and attributes.
3. Draw Table, Numbering elements, Insert Image to web page, Link
Page to another Page
1.2.1. Some Definition Related to Web Page Layout
➢ HTML: is Hypertext Markup Language for creating Web pages.
Is also responsible for telling a Web browser (e.g., Microsoft Internet Explorer,
Mozilla Firefox, Opera, Mac Safari, Google Chrome, and so on) how text and
other objects in a Web document should appear. Whether the text should be
small, large, bold, underlined, or right or left justiﬁed is largely determined by
the HTML embedded in a Web page.
➢ A web page: a web page is a collection of code written in html by using

html tags, and is a document which can be displayed in a web browser such as
Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's
Safari.
➢ Website is a collection of related network web resources, such as web
pages, multimedia content, which are typically identified with a
common domain name, and published on at least one web server.
Software namely, Web browsers. You create content specifying how the browser
should Display it (highlighting certain pieces of text, and so on). When the
browser displays the page, it applies the appropriate formatting accordingly so
the user sees the text and document as you intended. You need a way to mark
up the text so the browser understands it.
In the early 1990s, a Hypertext Markup Language (HTML) was created, it is not
a programming language but a language created to provide a way for users
to markup documents so Web browsers could display certain elements of
the document in italics, underlined, and so on.
Several requirements must be considered when telling a computer how to

format text. A short
List of the requirements includes the following:
✓ The instructions should follow a stringent set of guidelines.

✓ The instructions should be included in the textual document.
✓ The instructions should be invisible to the end user.
The instructions should tell the display device (usually a Web browser) where
to start and end, and how to apply the formatting speciﬁed
➢ A web browser (also referred to as an Internet browser or simply
a browser) is application software for accessing the World Wide Web or a local
website. When a user requests a web page from a particular website, the web

browser retrieves the necessary content from a web server and then displays
the page on the user's device.
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to
display the document:
Examples of browser
1. Mozilla firefox 10. Chromium
2. Google chrome 11. Tor browser
3. Safari 12. Maxthon
4. Opera 13. Yandex browser
5. Internet Explorer 14. Lynx
6. Microsoft Edge 15. Epic
7. Netscape Navigator 16. SeaMonkey
8. Brave 17. UC Browse
9. Vivaldi

➢ An HTML editor is a software for editing and creating HTML code that
is
used for websites or other web documents. With text-based HTML editors, the
source code can be edited directly.
Examples of HTML Editors

✓ Atom
✓ Notepad++
✓ Sublime Text
✓ Adobe Dreamweaver CC
✓ Visual Studio Code
Below is a visualization of an HTML page structure:
1.2.2. HTML TAG definition

HTML TAGS are instructions used to format a web page content.
These instructions are delimited. This means that they are enclosed in angle
brackets more commonly known as ‘‘less than’’ and ‘‘greater than’’ signs (<
and >).
The beginning marks contains a keyword corresponding to what the markup

should accomplish. The ending mark includes a slash (/).

Tags are the starting and ending parts of an HTML element. They begin with <
symbol and end with > symbol. Whatever written inside < and > are called
tags.
Example:
<b> </b>
1.2.2.1. Types of Tags in HTML

An HTML document is created using different types of tags. HTML tags can be
defined and divided based on a different basis. We have divided HTML tags
based on the following classifications:
A. Paired and Unpaired Tags

Following are the paired and unpaired tags in HTML explained in detail with
the help of examples.
A.1 Paired Tags

An HTML tag is known as a paired tag when the tag consists of an opening
tag and a closing tag as its companion tag. An HTML Paired tag starts with
an opening tag: the tag name enclosed inside the angle brackets; for example,
a paragraph opening tag is written as ‘<p>’. The content follows the opening
tag, which ends with an ending tag: the tag name starting with a forward
slash; for example, an ending paragraph tag is written as ‘</p>’. The first tag
can be referred to as the ‘Opening Tag’, and the second tag can be called
Closing Tag.
Example <p> This text is a paragraph. </p>
Output:
This text is a paragraph.
A.2 Unpaired Tags

An HTML tag is called an unpaired tag when the tag only has an opening tag
and does not have a closing tag or a companion tag. The Unpaired HTML tag
does not require a closing tag; an opening tag is sufficient in this type.
Unpaired tags are sometimes also named as Standalone Tags or Singular Tags
since they do not require a companion tag.
Example:
<p> This is a paragraph </p>
<hr>
<i> <b> This is a bold and italicized text </b> </i>
Here, the <hr> is the unpaired tag used to create a horizontal line. In older
versions, you might see hr tag written as <hr/> instead of <hr>. These tags are
also called Empty Tag.
A.3 Self-Closing Tags
Self-Closing Tags are those HTML tags that do not have a partner tag, where
the first tag is the only necessary tag that is valid for the formatting. The main
and important information is contained WITHIN the element as its attribute.
An image tag is a classic example of a self-closing tag. Let’s see it in action
below:
Example:
<img src="a.jpg" alt="This is an alternate text">
1.2.3. HTML Elements
element is everything from the start tag to the end tag. They consist of some
kind of structure or expression. It generally consists of a start tag, content
and an end tag.
Example:
<b>This is the content. </b>

Where, <b> is the starting tag and </b> is the ending tag.
1.2.4. HTML Attributes
Attributes is used to define the character of an HTML element. It always

placed in the opening tag of an element. It generally provides additional
styling (attribute) to the element.
Example:
<p align="center">This is paragraph. </p>
HTML Tags HTML Elements HTML Attributes
HTML attributes are used

HTML tags are used to to describe the
hold the HTML HTML element characteristic of an HTML
element. holds the content. element in detail.
Whatever written
within a HTML tag
HTML tag starts with < are HTML HTML attributes are found
and ends with > elements? only in the starting tag.
HTML tags are almost HTML attributes specify

like keywords where HTML elements various additional
every single tag has specifies the properties to the existing
unique meaning. general content. HTML element.

1.2.5. HTML Elements Category
1.2.5.1. Basic HTML Elements
<!DOCTYPE>: Defines the document type.
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the

browser about what document type to expect.

❖ <html>: Defines an HTML document
The <html> element is the root element and it defines the whole
HTML document. It has a start tag <html> and an end
tag </html>.
❖ <body>: Defines the document's body.
The <body> element contains all the contents of an HTML

document, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc
<head>: Contains metadata/information for the document.
Contains metadata/information for the document.
The <head> element is a container for metadata (data about

data) and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not

displayed.
Metadata typically define the document title, character set, styles,

scripts, and other meta information.
The following elements can go inside the <head> element:
• <title> (required in every HTML document)

• <style>
• <base>
• <link>
• <meta>
• <script>
• <noscript>

❖ <title>: Defines a title for the document.
The contents of a page title are very important for search engine
optimization (SEO)! The page title is used by search engine
algorithms to decide the order when listing pages in search
results.
The <title> element:
• defines a title in the browser toolbar

• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results
❖ <h1> to <h6>: Defines HTML headings.
<h1> defines the most important heading. <h6> defines the least
important heading.
Example
The six different HTML headings:
<h1>This is heading 1</h1>

Output:

❖ <p>: Defines a paragraph.
Browsers automatically add a single blank line before and after

each <p> element.
❖ <br>: Inserts a single line break.
Inserts a single line break.
The <br> tag is useful for writing addresses or poems.
Example
Use <br> in a poem:
<p>Be not afraid of greatness.<br>

Some are born great,<br>
some achieve greatness,<br>
and others have greatness thrust upon them.</p>
<p><em>-William Shakespeare</em></p>
Output:

The <br> tag is an empty tag which means that it has no end tag.
❖ <hr>: Defines a thematic change in the content.
The <hr> tag defines a thematic break in an HTML page.
The <hr> element is most often displayed as a horizontal rule that

is used to separate content (or define a change) in an HTML page.
Examples of difference between <br> and <hr>
<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language for creating Web

pages. HTML describes the structure of a Web page, and consists
of a series of elements. HTML elements tell the browser how to
display the content. </p>
<hr>
<p>CSS is a language that describes how HTML elements are to
be displayed on screen, paper, or in other media. CSS saves a lot
of work, because it can control the layout of multiple web pages
all at once. </p>
<hr>
<p>JavaScript is the programming language of HTML and the
Web. JavaScript can change HTML content and attribute values.

JavaScript can change CSS. JavaScript can hide and show HTML
elements, and more. </p>
Output:
❖ <! --...-->: Defines a comment.
The comment tag is used to insert comments in the source code.

Comments are not displayed in the browsers. You can use
comments to explain your code, which can help you when you
edit the source code at a later date. This is especially useful if you
have a lot of code.
Example
<! --This is a comment. Comments are not displayed in the

browser-->
<p>This is a paragraph. </p>
1.2.5.2. HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b>: Bold text

The HTML <b> element defines bold text, without any extra
importance.
Example:
<b>This text is bold</b>
Output:
This text is bold
<u>: underline text
The <u> tag in HTML stands for underline, and it’s used to
underline the text enclosed within the <u> tag. This tag is
generally used to underline misspelled words. This tag requires a
starting as well as ending tag.
Syntax:
<u> Contents... </u>
Example:
<u>This text is bold</u>
Output:
This text is bold
<strong>: Important text.
The HTML <strong> element defines text with strong importance.

The content inside is typically displayed in bold.
Example:
<strong>This text is important! </strong>
Output:

This text is important!
<i>: Italic text.
The HTML <i> element defines a part of text in an alternate voice

or mood. The content inside is typically displayed in italic.
Example:
<i>This text is italic</i>
Output:
This text is italic
<em>: Emphasized text
The HTML <em> element defines emphasized text. The content

inside is typically displayed in italic.
Example:
<em>This text is emphasized</em>
Output:
This text is emphasized
<mark>: Marked text.
The HTML <mark> element defines text that should be marked or

highlighted
Example:
Do not forget to buy <mark>milk</mark> today.
Output: Do not forget to buy milk today.

<small>: Smaller text.
The HTML <small> element defines smaller text:
Example:
<small>This is some smaller text. </small>
Output: This is some smaller text.
<del>: Deleted text
The HTML <del> element defines text that has been deleted from
a document. Browsers will usually strike a line through deleted
text
Example:
My favorite color is <del>blue</del> red.
Output: My favorite color is blue red.
<ins>: Inserted text.
The HTML <ins> element defines a text that has been inserted into a
document. Browsers will usually underline inserted text:
Example:
My favorite color is <del>blue</del> <ins>red</ins>
Output: My favorite color is blue red
<sub>: Subscript text.
The HTML <sub> element defines subscript text. Subscript text appears
half a character below the normal line, and is sometimes rendered in a
smaller font. Subscript text can be used for chemical formulas, like H2O:

Example:
This is <sub>subscripted</sub> text.
<p>
H<sub>2</sub>O
Output:
This is subscripted text.
H2O
<sup>: Superscript text.
The HTML <sup> element defines superscript text. Superscript

text appears half a character above the normal line, and is
sometimes rendered in a smaller font. Superscript text can be
used for footnotes.
Example:
This is <sup>superscripted</sup> text.
<p>
125<sup>2</sup>
Output:
This is superscripted text.
1252
1.2.5.3. HTML <img> tag

HTML <img> tag is used to add image inside webpage/website. Nowadays
website does not directly add images to a web page, as the images are linked
to web pages by using the <img> tag which holds space for the image.
Syntax:
<img src="" alt="" width="" height="">
Attributes: The <img> tag has following attributes.

• src: It is used to specify the path to the image.
• alt: It is used to specify an alternate text for the image. It is useful
as it informs the user about what the image means and also due to
any network issue if the image cannot be displayed then this
alternate text will be displayed.
• crossorigin: It is used to import images from third-party sites that
allow cross-origin access to be used with canvas.
• height: It is used to specify the height of the image.
• width: It is used to specify the width of the image.
• ismap: It is used to specify an image as a server-side image map.
• loading: It is used to specify whether a browser should defer
loading of images until some conditions are met or load an image
immediately.
• longdesc: It is used to specify a URL to a detailed description of an
image.
• referrerpolicy: It is used to specify which referrer information to
use when fetching an image i.e. no-referrer, no-referrer-when-
downgrade, origin, origin-when-cross-origin, unsafe-url.
• sizes: It is used to specify image sizes for different page layouts.
• srcset: It is used to specify a list of image files to use in different
situations.
• usemap: It is used to specify an image as a client-side image map.
Example1: In this example we are using the <img> tag along
with src, width, height, and alt attributes.
<html>
<body style="text-align: center;">
<h3>GeeksforGeeks logo</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-
13.png"
width="420" height="100"
alt="Geeksforgeeks.org">

</body>
</html>
Output:
img src with width and height
Here are the most common image file types, which are supported in all
browsers (Chrome, Edge, Firefox, Safari, Opera):
Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg,

image .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

1.2.5.4. HTML Elements Lists
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>: Used to create a list of related items,
in no particular order.
2. Unordered List or Bulleted List <ul>: Used to create a list of related items,
in a specific order.
3. Description List or Definition List <dl>: Used to create a list of terms and
their descriptions.
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or

sequence. This list is created by using HTML <ul> tag. Each item in the list is
marked with a bullet.
Example
<!DOCTYPE html>
<html>
This will produce the following
<head>
result
<title>HTML unordered
List</title>
</head>
<body>
<ol> • Beetroot
<li>Beetroot</li> • Ginger
<li>Ginger</li>
<li>Potato</li> • Potato
<li>Radish</li> • Radish
</ol>
</body>
</html>

You can use type attribute for <ul> tag to specify the type of bullet you like. By
default, it is a disc. Following are the possible options
1. <ul type = "square">

2. <ul type = "disc">
3. <ul type = "circle">
Example for each type attribute
1. Example where we used <ul type = "square">
<!DOCTYPE html>
<html>
This will produce the following result
<head>
<title>HTML Unordered ▪ Beetroot
List</title> ▪ Ginger
</head> ▪ Potato
<body> ▪ Radish
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body
</html>
2. Example where we used <ul type = " disc">

<!DOCTYPE html>
<html>
<head>
result
<title>HTML Unordered
List</title> • Beetroot
</head> • Ginger
<body> • Potato

<ul type = "disc"> • Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
3. Example where we used <ul type = " circle">

<!DOCTYPE html>
<html>
<head>
result
<title>HTML Unordered
List</title> o Beetroot
</head> o Ginger
<body> o Potato
<ul type = "circle"> o Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
HTML Ordered Lists

Ordered Lists are used to put items in a numbered list instead of bulleted. This
list is created by using <ol> tag. The numbering starts at one and is
incremented by one for each successive ordered list element tagged with <li>.
Example

<!DOCTYPE html>
<html>
<head>
result
<title>HTML Ordered List</title>
</head> 1. Beetroot
<body> 2. Ginger
<ol> 3. Potato
<li>Beetroot</li> 4. Radish
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Ordered List use different type attribute for <ol> tag to specify the type
of numbering you like. By default, it is a number.
Following are the possible option
✓ <ol type = "1"> Default-Case Numerals.
✓ <ol type = "I"> Upper-Case Numerals.
✓ <ol type = "i"> Lower-Case Numerals.
✓ <ol type = "A"> Upper-Case Letters.
✓ <ol type = "a"> Lower-Case Letters.
1. Example where we used <ol type = "1">

<!DOCTYPE html>
<html>
<head>
result
<title>HTML ordered List</title>
</head> 1. Beetroot
<body> 2. Ginger
<ul type = "1"> 3. Potato

<li>Beetroot</li> 4. Radish
<li>Ginger</li>
<li>Potato</li>

<li>Radish</li>
</ul>
</body>
</html>
2. Example where we used <ol type = " I ">

<!DOCTYPE html>
<html>
<head>
result
<title>HTML ordered
List</title> I. Beetroot
</head> II. Ginger
<body> III. Potato
<ul type = " I "> IV. Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
3. Example where we used <ol type = " i ">

<!DOCTYPE html>
<html>
<head>
result
</head> i. Beetroot
<body> ii. Ginger
<ul type = " i "> iii. Potato

<li>Beetroot</li> iv. Radish
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>

</ul>
</body>
</html>
4. Example where we used <ol type = " A ">
<!DOCTYPE html>
<html>
<head>
result
</head> A. Beetroot
<body> B. Ginger
<ul type = " A "> C. Potato

<li>Beetroot</li> D. Radish
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
5. Example where we used <ol type = " a ">

<!DOCTYPE html>
<html>
<head>
result
</head> a. Beetroot
<body> b. Ginger
<ul type = " a "> c. Potato

<li>Beetroot</li> d. Radish
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body></html>

Ordered List use also different start attribute for <ol> tag to specify the
starting point of numbering you need.
Possible options used “start attribute”
✓ <ol type = "1" start = "4"> Numerals starts with 4.
✓ <ol type = "I" start = "4"> Numerals starts with IV.
✓ <ol type = "i" start = "4"> Numerals starts with iv.
✓ <ol type = "a" start = "4"> Letters starts with d.
✓ <ol type = "A" start = "4"> Letters starts with D.
Example where we used <ol type = " i " start = "4">

<!DOCTYPE html>
<html>
<head>
result
</head>
<body>
<ul type = " i " start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Description List or Definition List <dl>
Definition list <dl>: is used to list items along with a description of each item.
Definition lists are typically formatted with the term on the left with the
definition following on the right or on the next line. The <dl> tag is used in
conjunction with <dt> (defines terms/names) and <dd> (describes each
term/name).

Defines a term/name <dt>
The <dt> tag defines a term/name in a description list. The <dt> tag is used in
conjunction with <dl> (defines a description list) and <dd> (describes each
term/name).
Defines a description <dd>
The <dd> tag is used to describe a term/name in a description list.

The <dd> tag is used in conjunction with <dl> (defines a description list)
and <dt> (defines terms/names). Inside a <dd> tag you can put paragraphs,
line breaks, images, links, lists, etc.
Example of a description list, with terms and descriptions:

<!DOCTYPE html> Output:
<html> The dl, dd, and dt elements
<body>
These three elements are
<h3>The dl, dd, and dt elements</h3>
used to create a
<p>These three elements are used to create a
description list:
description list:</p>
<dl>
Coffee
<dt>Coffee</dt>
Black hot drink
<dd>Black hot drink</dd>
<dt>Milk</dt> Milk
<dd>White cold drink</dd> White cold drink
</dl>
</body>
</html>
Summary Description of HTML Elements Lists

<ul>: Defines an unordered list
<ol>: Defines an ordered list

<li>: Defines a list item
<dl>: Defines a description list
<dt>: Defines a term/name in a description list
<dd>: Defines a description of a term/name in a description list
1.2.5.5. The HTML tables Elements

The HTML tables allow web authors to arrange data like text, images, links,
other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is
used to create table rows and <td> tag is used to create data cells. The elements
under <td> are regular and left aligned by default
Example

<html>
<head> Row 1, Column Row 1, Column
<title>HTML Tables</title>
1 2
</head>
<body>
<table border = "1"> Row 2, Column Row 2, Column
<tr> 1 2
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>

Here, the border is an attribute of <table> tag and it is used to put a border
across all the cells. If you do not need a border, then you can use border = "0".
A. Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace
<td> tag, which is used to represent actual data cell. Normally you will put your
top row as table heading as shown below, otherwise you can use <th> element
in any row. Headings, which are defined in <th> tag are centered and bold by
default
Example

<html>
<head> Name Salary
<title>HTML Table Header</title>
</head> Ramesh Raman 5000
<body>
<table border = "1">
<tr> Shabbir Hussein 7000
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
B. Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which you will
use to adjust the white space in your table cells.
The cellspacing attribute defines space between table cells, while

cellpadding represents the distance between cell borders and the content
within a cell.
Example

<html>
<head> Name Salary
<title>HTML Table Cellpadding</title>

</head<body> Ramesh
5000
Raman
<table border = "1" cellpadding = "5"
cellspacing = "5"> Shabbir
7000
<tr> Hussein
<th>Name</th>
<th>Salary</th>
</tr> <tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr><tr>
<td>Shabbir Hussein</td>
<td>7000</td> </tr> </table>
</body></html>
C. Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into
a single column. Similar way you will use rowspan if you want to merge two or
more rows.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Output:
Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr> Column 1 Column 2 Column 3
<th>Column 1</th>
<th>Column 2</th> Row 1 Cell 2 Row 1 Cell 3
<th>Column 3</th> Row 1 Cell 1
</tr> Row 2 Cell 2 Row 2 Cell 3
<tr>
<td rowspan = "2">Row 1 Cell
1</td> Row 3 Cell 1
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell
1</td>
</tr>
</table>
</body>
</html>
D. Tables Backgrounds
You can set table background using one of the following two ways:
• bgcolor attribute: You can set background color for whole table or
just for one cell. You can also set border color also
using bordercolor attribute.
• background attribute: You can set background image for whole
table or just for one cell.
Example Using bgcolor or bordercolor

<!DOCTYPE html>
<html>
<head>
Background</title>
</head> Column 1 Column 2 Column 3
<body>
<table border = "1" bordercolor =
Row 1 Cell Row 1 Cell
"green" bgcolor = "yellow">
<tr> 2 3
Row 1 Cell
<th>Column 1</th>
<th>Column 2</th> 1
Row 2 Cell Row 2 Cell
<th>Column 3</th>
</tr> 2 3
<tr>
<td rowspan = "2">Row 1 Cell Row 3 Cell 1
1</td>
</tr>
<tr>
</tr>
<tr>
1</td>
</tr </table>
</body>
</html>
Example of using background attribute. Here we will use an image available in

/images directory.
<!DOCTYPE html>
<html>
<head>
Background</title>
</head>
<body>
<table border = "1" bordercolor =
"green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>

</tr>
<tr>
<td rowspan = "2">Row 1 Cell
1</td>
<td>Row 1 Cell 2</td><td>Row 1
Cell 3</td>
</tr>
<tr>
</tr>
<tr>
1</td>
</tr>
</table>
</body>
</html>
N.B: This will produce the following result. Here background image did not
apply to table's header.
E. Table Height and Width
You can set a table width and height using width and height attributes. You
can specify table width or height in terms of pixels or in terms of percentage of
available screen area.

Example
<!DOCTYPE html>
<html>
<head>
Width/Height</title>
</head>
Row 1, Column 1 Row 1, Column 2
<body>
<table border = "1" width = "400"
height = "150">
<tr>
<td>Row 1, Column 1</td> Row 2, Column 1 Row 2, Column 2
</tr>
<tr>
</tr>
</table>
</body>
</html>
F. Table Header, Body, and Footer
Tables can be divided into three portions:
➢ header,
➢ body, and
➢ foot.
The head and foot are rather similar to headers and footers in a word-
processed document that remain the same for every page, while the body is the
main content holder of the table.
The three elements for separating the head, body, and foot of a table are:
• <thead>: to create a separate table header.

• <tbody>: to indicate the main body of the table.
• <tfoot> :to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or
groups of data. But it is notable that <thead> and <tfoot> tags should appear
before <tbody>
Example
<!DOCTYPE html>
<html>
<head> Output:
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "400">
<thead>
<tr>
<td colspan = "4">This is the
head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the
foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr></tbody></table></body></html>

Summary for the trainer related to the content (key notes using
bullets such as ticks etc)
In this unit, we learned how to use a text editor (such as notepad) to

type and save HTML code and view its output in a browser. We have
also learned how to use basic HTML tags with the help of examples
Theoretical learning Activity
✓ What should be the extension of HTML document?

✓ Which two tags should be written at the beginning of an HTML
document?
✓ Discuss basic HTML tags for converting a text into bold, italic and
underlined.
✓ Explain the purpose of content-based tags? Discuss some of the
common. content based tags. 6. Differentiate between ordered and
unordered lists?
Practical learning Activity
✓ Write HTML code to produce the following Output.

HTML tags are used to hold the HTML element.
✓ HTML element holds the content.
✓ HTML attributes are used to describe the characteristic of an
HTML element in detail.
✓ <table>: Defines a table
✓ <th>: Defines a header cell in a table
✓ <tr>: Defines a row in a table
✓ <td>: Defines a cell in a table
✓ <thead>: Groups the header content in a table
✓ <tbody>: Groups the body content in a table
✓ <tfoot>: Groups the footer content in a table.
✓ <col>: Specifies column properties for each column
within a <colgroup> element
Please mix different assessment instruments/tools for

triangulation and relevancy of assessment
Written assessment
Choose the correct answer.
1. What does HTML stand for?
A. Hyper Type Makeup Longing
B. Hyper Text Markup Language

C. Hyper Type Marking Logo
D. Hypermedia Type Markup Language
2. What are the two things you need to create and view web pages?
A. A text editor and a compiler
B. A text editor and a web browser
C. A compiler and a web browser
D. A compiler and interpreter
3. Should <! DOCTYPE> declaration be the first thing in an HTML

document?
A. Yes, always
B. Yes, but only when the Strict version is used
C. No
D. Both A and B
4. Which tag is the root tag in HTML?
A. <body>
B. <html>
C. <title>
D. <head>
5. Where is the title text displayed?
A. In the body of the page
B. In the status bar
C. In the title bar
D. All of the above
6. What are the different levels of headings in HTML?

A. 1-6
B. 2-5
C. 1-4
D. 1-3
7.What happens if you forget a slash at the end of a header tag?
A. A Netscape errors
B. Everything following will be a heading format
C. Nothing
D. It hides the text
8. Which tag is used to define items in an ordered or unordered list?
A. list tag
B. ls tag
C. li tag
D. ol tag
Practical assessment
1.Using ordered and unordered lists, create a web page that displays months
of a year grouped according to the number of days each month has. That is, all
the months having 31 days should be grouped together followed by months
having 30 days and February should be placed in a separate group
2. Create a web page that gives basic information about yourself. The page
should display your personal information, academic qualification, professional
qualification, job experience etc. Your page should be well-designed and should
look attractive.
3. Create a website that provides basic information about a number of historical

places in your country. Information about each place should be properly divided
into sections (with proper section headings) and paragraph.

Learning Unit 2: Develop Cascarding Style Sheets (CSS)
Learning outcomes:
2.1 Use the appropriate Format, style and layout of the elements on a web
page as design specifications.
2.2. Test and validate the layout with reference to design specifications.
Duration: 2hrs

By the end of Use the appropriate Format, style and layout of the
elements on a web page as design specifications, the trainee will be
able to:
➢ Use the HTML style attribute for inline styling

➢ Use the HTML <style> element to define internal CSS
➢ Use the HTML <link> element to refer to an external CSS file
➢ Use the HTML <head> element to store <style> and <link> elements
➢ Use the CSS color property for text colors
➢ Use the CSS font-family property for text fonts
➢ Use the CSS font-size property for text sizes
➢ Use the CSS border property for borders
➢ Use the CSS padding property for space inside the border
➢ Use the CSS margin property for space outside the border
Resources
✓ Books.
✓ Pens.
✓ Markers.
✓ Pencils.
✓ Board.
Learning outcome 2.1 Use the appropriate Format, style and layout of
the elements on a web page as design specifications
2.1.1 What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images
or background colors are to be used, different displays for different devices and
screen sizes, and much more!
The word cascading means that a style applied to a parent element will also
apply to all children elements within the parent. So, if you set the color of the
body text to "blue", all headings, paragraphs, and other text elements within
the body will also get the same color.
2.1.2 What is a style sheet?

- A style sheet is a numeric document which can specify all
characteristics of formatting a document linked with a tag on which it is
applied.
- Styles define how to display HTML elements
With CSS you can define for each HTML tag, a specific format which will
applied on it.
2.1.3 Utility and advantage of the style sheets
- Separate the content and formatting.

- Presentation Cohesion within the web site with the external style
sheets.
- Modify the page aspect or website without changing its content in few
lines instead of changing a lot of tags.
- A new language, clear, simple and logical compared to HTML with its
different versions.
- Short way of writing and neat compared to HTML (reduced file size)
- It reduces the time of loading pages
- It encompasses weaknesses of HTML language (control of fonts, control
of distance between lines, control of margins and indents without using

- table or <DD> tag therefore increasing creativity for those who design
web sites.
- Reusability of code
CSS Syntax
We have used CSS code without discussing how to write it. It is time to get
into CSS. The purpose of a style sheet is to create a presentation for a
particular HTML element or set of elements. Binding an element to a style
specification is very simple. It consists of a rule-set. A rule-set has a selector
and one or more declarations. Each declaration consists of a property and
its value. The figure below sums it up:
The selector refers to the HTML tag or element that we want to apply the style
on. A selector can be an HTML element name, id, class, or an attribute etc.
For example, the above figure defines properties for <h1> tag. A declaration is
a combination of a property name and a value separated by a colon. Each
declaration must end with a semi-colon, even if there is only one declaration.
The declaration set must be included between curly-braces. A CSS rule-set
can be written in a single line, or multiple lines. That is we can define the
style for <h1> as
h1
{ font-size: 20px; color: red; text-align: center;

A CSS rule has two main parts:
• a selector,
• and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change.

Properties indicate the aspects of the element you want to change. For
example, color, font, width, height and border.
Each property has a value.
Values specify the settings you want to use for the chosen properties. For
example, if you want to specify a color property then the value is the color you
want the text in these elements to be.
2.1.5. Methods of Writing Style Sheets (CSS) CSS
CSS can be added to HTML documents in 3 ways:
A. Inline by using the style attribute inside HTML elements

B. Internal by using a <style> element in the <head> section
C. External by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is
easier to demonstrate, and easier for you to try it yourself.
A. Inline Cascading Style Sheets
An inline CSS is used to apply a unique style to a single HTML element. An

inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

B. Internal Cascading Style Sheets
An internal CSS is used to define a style for a single HTML page. An internal
CSS is defined in the <head> section of an HTML page, within
a <style> element.
The following example sets the text color of ALL the <h1> elements to blue,
and the text color of ALL the <p> elements to red. In addition, the page will be
displayed with a "powderblue" background color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
C. External Cascading Style Sheets
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each
HTML page:
Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph. </p>
</body>
</html>
The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
C.1 Element used to insert External Cascading Style Sheets in HTML

Document
<link>
The <link>element can be used in an HTML document to tell the browser where
to find the CSS file used to style the page. It is an empty element (meaning it

does not need a closing tag), and it lives inside the element. It should use three
attributes:
href
This specifies the path to the CSS file (which is often placed in a folder called
css or styles).
Type
This attribute specifies the type of document being linked to. The value should
be text/css.
rel
This specifies the relationship between the HTML page and the file it is linked
to. The value should be stylesheet when linking to a CSS file. An HTML page
can use more than one CSS style sheet. To do this it could have a element for
every CSS file it uses. For example, some authors use one CSS file to control
the presentation (such as fonts and colors) and a second to control the layout.
C.2 Link to External CSS
External style sheets can be referenced with a full URL or with a path relative
to the current web page.
Example
This example links to a style sheet located in the html folder on the current
web site:
<link rel="stylesheet" href="/html/styles.css">
Example
This example links to a style sheet located in the same folder as the current
page:
<link rel="stylesheet" href="styles.css">

Which Style Sheet to Use
Generally, it is not very difficult to decide which style sheet to use
(external, internal or inline). Simply keep the following advantages and
disadvantages of each type of style sheet in your mind while making a
choice.
Table: CSS style sheets
Style Sheet Advantages Disadvantages
External It can be used to set the style It requires extra downtime to

of many documents. load the style sheet.
Internal It can control the style of It needs to reapply style

each document separately. information for each
No additional downtime is document.
required to load the style
sheet.
Inline It can control the style of It needs to apply style

each element. Can be used to information for each element.
override any external or Need extra work. Documents
document style. are difficult to update.
C.4. Importance of using External Cascading Style Sheets

Here are a few reasons this is better.
✓ Easier Maintenance
✓ Reduced File Size
✓ Reduced Bandwidth
✓ Improved Flexibility
2.2. Test and validate the layout with reference to design specifications.
2.2.1 Element Selector
An element selector specifies the style for an element by name. For example, if
we want to change the style of <p> element in a web page, we need to define a
style for <p> as shown below.

p{ font-size: 25px;
color: white;
text-align: center;
}
Once the style is defined, it will be applied to all paragraphs (tag <p>)
automatically by the browser. A complete example of HTML code is given
below. Note that we are using internal style sheets in our example. You can
use external style sheets, if you like.
<!DOCTYPE html>
<html>
<head>
<title>Element Selector</title>
<style>
body {
background-color: blue;
} p { font-
size: 25px; color:
white; text-align:
center;
}
</style>
</head>
<body>
<p>This line is written in first Paragraph </p>
<p>This line is written in second Paragraph </p>
</body>
</html>

The output of above code is shown
2.2.2 ID Selector
The ID selector is used to select a specific HTML element. The ID of an
element must be unique. To select an element with a specific ID, (#)
character is used with ID name. Suppose we want to apply a style to one or
more specific paragraphs (but not to all), then we should define the style as:
#p1
{
font-size: 25px;
color: white;
text-align: center;
}
Now, we can use the above style with a paragraph by specifying the above style
as shown below:
<p id="p1">This line is written in second Paragraph </p>
Note that the element selector applies to all whereas an ID selector is applied
to the selected elements. We can define multiple styles for a single element.
Try the following example and observe the output. We notice that style is
applied to the second paragraph only.

<!DOCTYPE html>
<html>
<head>
<title>ID Selector</title>
<style> body {
}
#p1 {
font-size: 25px; color: white;
text-align: center;
}
</style>
</head>
<body>
<p id="p1">This line is written in second Paragraph </p>
</body>
</html>
The output of above code is
The color of this text is different

from the first line because the
specified style is applied only to the
second paragraph.
2.2.3 Class Selector

Class selector selects the element with a specific class attribute. To select
an element of a specific class (.) character is used with class name.
Suppose we have two paragraphs and want to apply different style on the

second paragraph. We give an ID to the second paragraph in order to apply
different CSS properties. A class selector and an ID selector are somehow
similar to each other, however, an ID selector identifies an element only,
whereas a class selector can identify more than one elements.
<!DOCTYPE html>
<html>
<head>
<title>Class Selector</title>
<style>
body {
}
.p1
{
font-size: 25px;
color: white; text-
align: center;
}
</style>
</head>
<body>
<p class="p1">This line is written in second Paragraph
</p> </body></html>

The color of this text is different

from the first line because the
specified style is applied only to the
second paragraph.
2.2.4 CSS Comments

Writing a comment within a code is very useful because it helps to
understand and modify the source code at later time. when you edit the
source code at a later time, a comment is written as:
/* A comment */
The following code shows how useful comments can be written in an HTML
document. See the code below how we can write useful comments in an HTML
document.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue; /* Set background color to blue
*/ }
.p1 /* Specify the style for paragraph */
{
font-size: 25px;
color: white; text-align:
center;
}
</style>
</head>
<body>
<p class="p1">This line is written in second Paragraph
</p>
</body>
</html>
2.2.5 Basic Properties of CSS

We discussed how rules are formed in CSS style sheets but did not
mention what are various properties that can be set. CSS defines a large
number of properties and their values.

Some of the basic properties are:
1. Background property
2. Border, margin & padding properties
3. Height / width property
4. Text
5. Fonts
6. links
7. Lists
8. Tables
We will discuss how to set the above properties in this and the next unit. Let
us start with the background property.
2.2.5.1 Background Properties

Background properties are used to define the background effects for elements.
Some of the background properties are given in the following table:
Background properties with their description
Property Description
background-color It specifies which background color is to be used
background-image It specifies one or more background images to be

used
background-repeat It specifies how to repeat the background images
background- It specifies whether the background images are fixed

attachment or scrolls with the rest of the page
background-position It specifies the position of the background images
Let us see how these properties are defined.

2.2.5.2 background-color
This property defines the background color of an HTML element or a
document. The backgroundcolor property is defined as:
background-color: color;
A color can be specified in one of the following three methods:
1. Using a valid color name, like red

2. Using a RGB value, like rgb (255, 0, 0)
3. Using a hexadecimal value like #ff0000.
For example, to set background color of an HTML document, we specify the

background-color property as:
bod
y{
background-color: lightblue;
}
The following example shows how to set background color for a paragraph
p
{
background-color: yellow;
}
Similarly, the following code can be used to set the background-color for
<h1>.
h
1{

background-color: yellow;
}
See the HTML code below that sets the background color for the whole
document to blue.
<!DOCTYPE html>
<html>
<head>
<title>Background Property in CSS</title>
<style> body
{
}
</style>
</head>
<body>
<h1>Playing with colors</h1>
<p>This line is written in second Paragraph </p>
</body>
</html>
2.2.5.3 background-image
We can use an image as a background of an HTML document to make it look
like a wallpaper. The following example illustrates how to use background-
image property:
bod
y {
background-image: url("paper.gif");
}
By default, the image is repeated on the screen to cover the whole document.
Try the following code and see the output in the browser.

<!DOCTYPE html>
<html>
<head>
<style> body { background-image: url("new.jpg"); }
p
{
color: white; text-
align: center;
}
</style>
</head>
<body>
<p>This is Paragraph 1
</p>
<p>This is Paragraph
2</p>
</body>
</html>

2.2.5.4 Background repeat
Some images are designed in a way that they can be attached to each
other, either horizontally or vertically, to form a certain design. By default,
background-image property repeats the images both vertically and
horizontally. To set the repeat direction of a background image, we use
backgroundrepeat property that accepts one of two values: repeat-x or
repeat-y. To prevent the image from being repeated, we use the value no-
repeat.
The following example shows how to use background-repeat property. Keep in

mind that background-repeat must be used along with background-image
property and not by itself.
body { background-image: url("tree.png");

background-repeat: repeat-x;
}
The following code displays an image in the background with repeat property.
The output is amazing.
<!DOCTYPE html>
<html>
<head>
<style> body {
background-image: url("tree.png");
background-repeat: repeat;
} p {
color: red;
text-align: center;
}
</style>
</head>

<body>
</body>
</html>
The image repeats several

times in the web page due to
background-repeat property.
2.2.5.5 background-attachment
This property determines whether that background image will scroll or not
when the content with which it is associated scrolls. This can be specified
by background-attachment property as shown in the following code.
bo
dy
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-attachment: fixed;
}

In the above code, we set the background-attachment to “fixed” which allow
us to scroll up and down in the document without moving the background
image.
2.2.5.6 background-position
This property determines the position of the background image within the
canvas space used by its element. The background position can be set to
"left top", "left center", "left bottom", "right top", "right center", "right
bottom", "center top", "center center". If we specify only one value only, the
second value is taken as center.
The following example defines the position of the background image as top
right side of the document.
body
{
background-position: right top;
background-attachment: fixed;
}
The following code displays an image on the top right side of the web page.
We can see in the output that the image is displayed on the top right side
of the web page, while “backgroundattachment” is used to fix the
background image so that image will not scroll.

<!DOCTYPE html>
<html>
<head>
<style> body {
background-position: right top;
} p { color:white;
text-align: center;
}
</style>
</head>
<body>
<p>This is Paragraph 1 </p>
<p>This is Paragraph 2</p>
</body>
</html>
The output of code 5.12 is

Summary for the trainer related to the content (key notes using
bullets such as ticks etc)
In this unit, we learned about advantages and the use of Cascading

Style Sheet in web page development. We discussed how CSS code
can be written to style different HTML elements. We have also
discussed the differences and usage of external, internal and inline
style sheets.
Write short answers of the following questions.
1. What are the benefits of using CSS?

2. Differentiate between external, internal and inline style sheets?
3. How an external style sheet is linked to a HTML document?
4. What is CSS syntax to define properties of an HTML element?
5. List background properties and their possible values.
1. Create the web page by removing the style from the HTML document and
store it in a CSS file instead. Link your document with the style sheet.
2. Repeat the above activity by using inline style.

➢ CSS treats each HTML element as if it appears inside its own box and uses
rules to indicate how that element should look.
➢ Rules are made up of selectors (that specify the elements the rule applies to)
and declarations (that indicate what these elements should look like).
➢ Different types of selectors allow you to target your rules at different
elements.
➢ Declarations are made up of two parts: the properties of the element that
you want to change, and the values of those properties. For example, the
font-family property sets the choice of font, and the value arial specifies
Arial as the preferred typeface.
➢ CSS rules usually appear in a separate document, although they may
appear within an HTML page
➢ Use the HTML style attribute for inline styling

➢ Use the HTML <style> element to define internal CSS
➢ Use the HTML <link> element to refer to an external CSS file
➢ Use the HTML <head> element to store <style> and <link> elements

Written assessment
1. Which of the following is correct about CSS?

A. CSS is used to control the style of a web document in a simple and
easy way.

B. CSS is the acronym for "Cascading Style Sheet".
C. You can write CSS once and then reuse same sheet in multiple HTML
pages.
D. All of the above.
2. Which of the following property is used to set the background image of an

element?
A. background-color
B. background-image
C. background-repeat
D. background-position
3. The correct place to refer an external style sheet in an HTML document is

A. <stylesheet>mystyle.css</stylesheet />
B. <style src = "mystyle.css" />
C. <link rel = "stylesheet" type = "text/css" href = "mystyle.css">
D. None of the above
4. Where in an HTML document is the correct place to refer to an external style

sheet?
A. At the end of the document
B. In the <head> section
C. At the top of the document
D. In the <body> section
5. Which HTML tag is used to define an internal style sheet?

A. <style>
B. <css>
C. <script>
D. All of the above

6. Which is the correct CSS syntax?
A. body {color: black}
B. {body;color:black}
C. {body:color=black(body}
D. body:color=black
7. How do you add a background color for all <h1> elements?

A. all.h1 {background-color:#FFFFFF}
B. h1.all {background-color:#FFFFFF}
C. h1 {background-color:#FFFFFF}
8. What is the correct CSS syntax for making all the <p> elements bold?
A. <p style = "text-size:bold">
B. p {font-weight:bold}
C. p {text-size:bold}
D. <p style = "font-size:bold">
9. What is the correct CSS syntax for displaying background image?
A. body { background-image: url("paper.gif"); }
B. background.body: "paper.gif"
C. body {background-image = "paper.gif"
10. Which CSS property is used to specify position of the background image?
A. background-position
B. image-position
C. background-image-position
Answer Key:
1. D 2. B 3. C 4. B 5. A 6. A 7. C 8. B 9. A 10. A

Practical assessment
1. Create a CSS with suitable background properties for a web page that
gives some basic information about your city (add some nice photos as
well).
2. Create a website that gives basic information about yourself. You
should prepare a separate page for each of the following: personal
information, academic qualification, professional qualification, job
experience, hobbies, and photo gallery. Academic qualification page
should display the information about your degrees and certificates
along with the subjects you studied in each in a tabular form. Create
suitable CSS file and link it with all of your pages.

Learning Unit 3: Ensure website content meets technical protocols and
standards.
Learning outcomes:
3.1. Verify and validate the web content in accordance with required standards.
3.2. Test the content as per standard procedures.
Duration: 2hrs

By the end of Verify and validate the web content in accordance with
required standards, the trainee will be able to:
• Required Field Validation

• Minimum Length Validation
• Maximum Length Validation
• Email Validation
• Number Validation
• URL Validation
Resources
✓ Books.
✓ Pens.
✓ Markers.
✓ Pencils.
✓ Board.

Learning Outcome 3.1 Verify and validate the web content in
accordance with required standards.
3.1.0 HTML Forms

Introduction
HTML Form is one of the main points of interaction between a user and a
website or application. The user uses it to send data to the website. An HTML
Form consists of one or more widgets. These widgets can be text fields (single
line or multiline), select boxes, buttons, checkboxes, or radio buttons. Mostly,
these widgets are paired with a label that describes their purpose.
An HTML form is a section of a document which contains controls such as text

fields, password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server
for processing such as name, email address, password, phone number, etc.
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
Example:
Why use HTML Form
HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user wants to purchase some items on internet, he/she must
fill the form such as shipping address and credit/debit card details so that item
can be sent to the given address.

HTML FORMS ELEMENTS
1. The <form> Element
The HTML <form> element provide a document section to take input from
user. It provides various interactive controls for submitting information to web
server such as text field, text area, password field, etc.
<form>
.
form elements
.
</form>
The HTML <form> element can contain one or more of the following form
elements:
1. <label>: Defines a label for an <input> element

2. <input>: Defines an input control
3. <select>: Defines a drop-down list
4. <textarea>: Defines a multiligne input control (text area)
5. <button>: Defines a clickable button
6. <fieldset>: Groups related elements in a form
7. <legend>: Defines a caption for a <fieldset> element

8. <output>: Defines the result of a calculation
9. <option>: Defines an option in a drop-down list
10. <datalist>
11. <optgroup>
2. The <label> Element
The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.
The <label> element represents a label which can be associated to

a <form> control, and is supposed to provide a short description for it.

Browsers may link both elements by allowing users to set the focus to the
control by clicking on its label.
Example:
<form > <p><label>Username: <input type="text" name="user"></label></p>

</form>
3. The <input> Element
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 form user. Following is the example to show the
simple text input.
<body>
<form>
Enter your name <br>
<input type="text">
</form>
</body>
Here are the different input types you can use in HTML:
➢ <input type="text">
➢ <input type="password">
➢ <input type="button">

➢ <input type="checkbox">
➢ <input type="color">
➢ <input type="date">
➢ <input type="datetime-local">
➢ <input type="email">
➢ <input type="file">
➢ <input type="hidden">
➢ <input type="image">
➢ <input type="month">
➢ <input type="number">
➢ <input type="radio">
➢ <input type="range">
➢ <input type="reset">
➢ <input type="search">
➢ <input type="submit">
➢ <input type="tel">
➢ <input type="time">
➢ <input type="url">
➢ <input type="week"
1. <input type="text">:
<input> element of type "text" is used to define a single-line input text field.
Example:
<form>
<label>Enter first name</label><br>
<input type="text" ><br>

<label>Enter last name</label><br>
<input type="text"><br>
</form>

Output:
2. <input type="password">:
The <input> element of type "password" allow a user to enter the password
securely in a webpage. The entered text in password filed converted into "*" or
".", so that it cannot be read by another user.
Example:
<form>
<label>Enter User name</label><br>
<label>Enter Password</label><br>
<input type="Password"><br>
</form>
Output:
3. <input type="submit">:
The <input> element of type "submit" defines a submit button to submit the
form to the server when the "click" event occurs.

Example:
<form action=" ">

<label> Enter Password</label><br>
<br><input type="submit" >
</form>
Example:
4. <input type="reset">:
The <input> type "reset" is also defined as a button but when the user performs
a click event, it by default reset the all inputted values.
Example:
<form action=" ">

<label>Enter Password</label><br>
<br><input type="submit" >
<br><input type="reset" >
</form>

Output:
5. <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow choosing an
option between a set of related options. At a time only one radio button option
can be selected at a time.
Example:
<form>
<p>Kindly Select your favorite color</p>
<input type="radio" value="red"> Red <br>

<input type="radio" value="blue"> blue <br>
<input type="radio" value="green">green <br>

<input type="radio" value="pink">pink <br>
<input type="submit" value="submit">

</form>
Output:
Kindly Select your favorite color
Red
blue
green

pink
submit
Bottom of Form
6. <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can be
checked or unchecked to select the choices from the given options.
Example:
<form>
<h2>Registration Form</h2>
<label>Enter your Name:</label>
<input type="text" name="name">

<p>Kindly Select your favourite sports</p>
<input type="checkbox" name="sport1" value="cricket">Cricket<br>

<input type="checkbox" name="sport2" value="tennis">Tennis<br>
<input type="checkbox" name="sport3" value="football">Football<br>

<input type="checkbox" name="sport4" value="baseball">Baseball<br>
<input type="checkbox" name="sport5" value="badminton">Badminton

<br>
<br>
</form>
Output:
Registration Form
Enter your Name:
Kindly Select your favorite sports

Cricket
Tennis
Football
Baseball
Badminton
submit
Bottom of Form
N.B: The "radio" buttons are similar to checkboxes, but there is an important
difference between both types: radio buttons allow the user to select only one
option at a time, whereas checkbox allows a user to select zero to multiple
options at a time.
7. <input type="button">:
The <input> type "button" defines a simple push button, which can be
programmed to control a functionally on any event such as, click event.
Example:
<form>
<input type="button" value="Clcik me ">
</form>
8. <input type="file">:
The <input> element with type "file" is used to select one or more files from
user device storage. Once you select the file, and after submission, this file can
be uploaded to the server

Example:
<form>
<label>Select file to upload:</label>
<input type="file" name="newfile">

</form>
9.<input type="image">:
The <input> type "image" is used to represent a submit button in the form of
image.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Input "image" type. </h2>
<p>We can create an image as submit button</p>

<form>
<label>User id:</label><br>
<input type="text" name="name"><br><br>
<input type="image" alt="Submit" src="login.png" width="100px">

</form>
</body>
</html>
10.<input type=" Color ">:
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.

Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" name="favcolor">
</form>
11.<input type="date">:
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" name="birthday">
</form>
You can also use the min and max attributes to add restrictions to dates:
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" name="datemax" max="1979-12 31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" name="datemin" min="2000-01-02">
</form>
12.<input type="email">:
The <input type="email"> is used for input fields that should contain an e-mail
address.
Depending on browser support, the e-mail address can be automatically

validated when submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard to
match email input.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" name="email">
</form>
13.<input type="month">
The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label >Birthday (month and year):</label>
<input type="month" name="bdaymonth">
</form>
14.<input type="number">
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a
value from 1 to 5:

Example
<form>
<label>Quantity (between 1 and 5):</label>
<input type="number" name="quantity" min="1" max="5">
</form>
Example
<form>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" max="100" step="10" v
alue="30">
</form>
15.<input type="range">:
The <input type="range"> defines a control for entering a number whose

exact value is not important (like a slider control). Default range is 0 to
100. However, you can set restrictions on what numbers are accepted
with the min, max, and step attributes:
Example
<form>
<label >Volume (between 0 and 50):</label>
<input type="range" name="vol" min="0" max="50">
</form>
16.<input type="search">
The <input type="search"> is used for search fields (a search field behaves
like a regular text field).

Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" name="gsearch">
</form>
17.<input type="tel">:
The <input type="tel"> is used for input fields that should contain a
telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
18.input type="time">
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input

field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" name="appt">
</form>
19.<input type="url">
The <input type="url"> is used for input fields that should contain a URL
address.

Depending on browser support, the url field can be automatically
validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the
keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" name="homepage">
</form>
20.<input type="week">
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input

field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" name="week">
</form>
3.The <select> Element
The <select> element defines a drop-down list:
Example
<label for="cars">Choose a car:</label>

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>

<option value="audi">Audi</option>
</select>
Output:
Volvo
Choose a car:
The <option> elements define an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="fiat" selected>Fiat</option>
Visible Values:
Use the size attribute to specify the number of visible values:
Example

<select name="cars" size="3">
</select>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:

Example

<select name="cars" size="4" multiple>
</select>
4.The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
You can also define the size of the text area by using CSS:

Example
<textarea name="message" style="width:200px; height:600px;">

The cat was playing in the garden.
</textarea>
5.The <button> Element
The <button> element defines a clickable button:
Example
<button type="button" >Click Me!</button>
6.The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

7.The <datalist> Element
The <datalist> element specifies a list of pre-defined options for

an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
Example
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
8.The <output> Element
The <output> element represents the result of a calculation (like one

performed by a script).

Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML Form Attributes
This chapter describes the different attributes for the HTML <form> element.
1. The Action Attribute
The action attribute defines the action to be performed when the form is
submitted.
Usually, the form data is sent to a file on the server when the user clicks on
the submit button.
In the example below, the form data is sent to a file called "action_page.php".
This file contains a server-side script that handles the form data:
Example
On submit, send form data to "action_page.php":

<input type="text" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
If the action attribute is omitted, the action is set to the current page.
2. The Method Attribute
The method attribute specifies the HTTP method to be used when submitting
the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP

post transaction (with method="post").
The default HTTP method when submitting form data is GET.
Example
This example uses the GET method when submitting the form data:
<form action="/action_page.php" method="get">
Example
This example uses the POST method when submitting the form data:
<form action="/action_page.php" method="post">
Difference between GET and POST:
GET:
• Appends the form data to the URL, in name/value pairs

• NEVER use GET to send sensitive data! (The submitted form data is
visible in the URL!)
• The length of a URL is limited (2048 characters)

• Useful for form submissions where a user wants to bookmark the result
• GET is good for non-secure data, like query strings in Google
POST:
• Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)
• POST has no size limitations, and can be used to send large amounts of
data.
• Form submissions with POST cannot be bookmarked
3. The Target Attribute
The target attribute specifies where to display the response that is received
after submitting the form.
The target attribute can have one of the following values:
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
The default value is _self which means that the response will open in the
current window.
Example
Here, the submitted result will open in a new browser tab:

<form action="/action_page.php" target="_blank">
4. The value Attribute
The input value attribute specifies an initial value for an input field:
Example
Input fields with initial (default) values:
<form>
<input type="text" name="lname" value="Doe">
</form>
5. The readonly Attribute
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it,
highlight it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
Example
A read-only input field:
<form>
<input type="text" name="fname" value="John" readonly><br>
</form>

6. The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example
A disabled input field:
<form>
<input type="text" name="fname" value="John" disabled><br>
</form>
7. The size Attribute
The input size attribute specifies the visible width, in characters, of an input
field.
The default value for size is 20.
Note: The size attribute works with the following input types: text, search, tel,
url, email, and password.
Example
Set a width for an input field:
<form>

<input type="text" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" name="pin" size="4">
</form>
8. The maxlength Attribute
The input maxlength attribute specifies the maximum number of characters

allowed in an input field.
N.B: When a maxlength is set, the input field will not accept more than the
specified number of characters. However, this attribute does not provide any
feedback.
Example
Set a maximum length for an input field:
<form>
<input type="text" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" name="pin" maxlength="4" size="4">
</form>
9. The min and max Attributes
The input min and max attributes specify the minimum and maximum
values for an input field.
The min and max attributes work with the following input types: number,
range, date, datetime-local, month, time and week.

Example
Set a max date, a min date, and a range of legal values:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>

<input type="date" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>

<input type="number" name="quantity" min="1" max="5">
</form>
10. The multiple Attribute
The input multiple attribute specifies that the user is allowed to enter more
than one value in an input field.
The multiple attribute works with the following input types: email, and file.
Example
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" name="files" multiple>
</form>
11. The pattern Attribute
The input pattern attribute specifies a regular expression that the input
field's value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search,
url, tel, email, and password.

Example
An input field that can contain only three letters (no numbers or special
characters):
<form>
<label for="country_code">Country code:</label>
<input type="text" name="country_code"
pattern="[A-Za-z]{3}" >
</form>
12. The placeholder Attribute
The input placeholder attribute specifies a short hint that describes the
expected value of an input field (a sample value or a short description of the
expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search,
url, tel, email, and password.
Example
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" name="phone" placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

13. The required Attribute
The input required attribute specifies that an input field must be filled out
before submitting the form.
The required attribute works with the following input types: text, search, url,
tel, email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
<form>
<label for="username">Username:</label>
<input type="text" name="username" required>
</form>
14. The height and width Attributes
The input height and width attributes specify the height and width of
an <input type="image"> element.
Example
Define an image as the submit button, with height and width attributes:
<form>
<label for="fname">First name:</label>
<input type="text" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="4
8">
</form>

Learning Outcome3.2 Test the content as per standard procedures
Form Validation
Form validation is a “technical process where a web-form checks if the
information provided by a user is correct.”
The form will either alert the user that they messed up and need to fix
something to proceed, or the form will be validated and the user will be able to
continue with their registration process.
Example:
Twitter won’t let me use an email address that is incorrectly formatted, and
gives me an error message.
Types of form validation.
In general, there are main types of form validation:
• Required Field Validation

• Minimum Length Validation
• Maximum Length Validation
• Email Validation
• Number Validation
• URL Validation
• Pattern Validation or Regular Expression Validation
1. Required Field Validation:
If you want to make an input mandatory to be entered by the user, you
can use the required attribute. This attribute can be used with any input
type such as email, URL, text, file, password, checkbox, radio, etc. This
can help to make any input field mandatory.

Syntax:
<input type="..." id="..." name="..." required>
Example:
<!DOCTYPE html>
<html lang="en">
<body>
<p>Required Attribute</p>
<form>
<label>Name:</label>
<input type="text" required />
<label>Email:</label>
<input type="email" required />
<button style="margin-top: 5px">Submit</button>
</form>
</body>
</html>
Output:
2. Maximum Length Validation

The maxlength attribute helps us to specify the maximum length of an
input field in the form i.e. the maximum no. of characters that can be entered

for the specific field. It can be used to make the maximum length of a
telephone number in India as 10 digits so as to prevent any wrong input data
submission.
Syntax:
<input type="..." id="..." name="..." maxlength="...">
N.B: When the maxlength attribute is set, it will not allow the user to enter
more characters than those specified.
Example:
<!DOCTYPE html>
<html lang="en">
<body>
<p>Maxlength Attribute</p>
<form>
<label>Roll No.</label>
<input type="text" maxlength="10" required />
</form>
</body>
</html>
Output:

3. Minimum Length Validation
The minlength attribute helps us to specify the minimum length of an input
field in the form i.e., the minimum no. of characters that must be entered for
the specific field. It can be useful to make the minimum length of a password
that can’t be guessed or a telephone number in India as 10 digits so as to
prevent any wrong input data submission.
Syntax:
<input type="..." id="..." name="..." minlength="...">
N.B: When the minlength attribute is set, an input field will not accept lesser
characters than those specified.
Example:
<!DOCTYPE html>
<html lang="en">
<body>
<p>minlength Attribute</p>
<form>
<label>Roll No.</label>
<input type="text" minlength="5" required />
</form>

</body>
</html>
Output:
4. Min and max attributes:
The min and max attributes of the input field are used to specify the
minimum and maximum allowed values for an input field. We can create a
range of allowed values using min and max together.
min specifies the minimum value an input field can have whereas max
specifies the maximum value for a field.
The min and max attributes work with the various input types such as
number, range, date, datetime, month, time and week. We can use these
attributes in a field where we want a user to enter some amount. We can set
the maximum limit and minimum limit for the amount to be entered.
Syntax:
<input type="..." id="..." name="..." max="...">
<input type="..." id="..." name="..." min="..." max="...">
Example:
<!DOCTYPE html>
<html lang="en">
<body>
<p>Min and max Attributes</p>
<form>

<label>Amount</label>
<input type="number" min="50" max="100" required />
</form>
</body>
</html>
Output:
5. Pattern Validation:
The pattern attribute defines a particular pattern that an input field’s value
must satisfy when the form is submitted. The pattern attribute works with

text, date, search, URL, tel, email, and password input types. We make use of
regex or regular expressions to specify the pattern. It is useful in situations
where we want the input entered must be according to the given pattern only.
The inputs that do not satisfy the pattern will not be accepted by the form.
Syntax:
<input type="...." id="..." name="...." pattern=".....">
Example:
<!DOCTYPE html>
<html lang="en">
<body>
<p>Pattern Attribute</p>
<form>
<label>Tel.</label>
<input type="text" pattern="[0-9]{10}" required />
<input type="email" multiple required />
</form>
</body>
</html>
Output:

In the above example, the pattern specifies that Tel. can be composed of digits
only and its length must be 10.
6. Email Validation
To validate an email address of an input field, just set the input type
to "Email".
Example
<form name="Form">
<input type="Email" name="Email" ng-model="user.Email" />
</form>
7. Number Validation
To validate that an input field has a number, just set the input type
to "number".
Example
<form name="Form">
<input type="number" name="number" ng-model="user.Age" />
</form>
8. URL Validation
To validate that an input field has an URL, set the input type to "URL".
<form name="Form">
<input type="url" name="homepage" ng-model="user.google_url" />
</form>

Write short answers of the following questions.
1. What is difference between checkboxes and radio buttons?

2. Discuss various input types available for a form.
1. Create a web page that gives some basic information about your
city (add some nice photos as well). At the end of the page,
create a simple form for more information form that allows the
users to input their names, email addresses, and comments.
a. Add a checkbox on the web page asking the reader either he likes
to join the group.
b. Add a drop down list that allows the user to select his/her
country.
Form: Allows a user to enter data on a web page.
Textbox: It is a rectangular area for entering text in a web page.
Dropdown list: It is a list of items for selecting a value from pull down menu.
Radio button: It is used to select one option from set of many option
Check box: It is used to select more than one options.

Formative assessment

Written assessment
1. Which of the following tag is used to specify a multi-line text area in a

form?
A. <input type="Multi-text">
B. <textarea> <textarea>
C. <form type="textarea">
2. A form can be placed anywhere in the head section of a HTML

document.
A. True
B. False
3. Which of the following code is used to create a single-line text box in

a form?
A. <input type="text" name="name">
B. <input type="text-box" name="name">
C. <form type="text" name="name">
D. <input type="box" name="name">
4. <input type = “submit”> creates a button on a form.

A. True
B. False

5. Which of the following code clears all the form elements?
A. <input type="clear">
B. <form type="reset">
C. <input type="reset">
D. <input type="reset-form">
6. Which of the following code is used to create a radio button?

A. <input type="radio-button" name = "gender" value = "male">
B. <input type="radio" name = "gender" value = "male">
C. <input type="button" name = "gender" value = "male" >
7. <input type="checkbox" name="choice" value="Orange"> will create a

check box in a form.
A. True
B. False
8. Which input type is used to create display a calendar?

A. Date
B. Calendar
C. Date-Time

9. Which of the following tag is used to specify items in a select-box?
A. <choice>
B. <item>
C. <select>
D. Option
Answer Key:
1. B 2. B 3. A 4. A 5. C 6. B 7. A 8. A 9. C

Learning Unit 4: Produce interactive web animations
Learning outcomes:
4.1. Analysis of website requirements in accordance with client’s requirements

4.2. Design of web animations according to the design specifications
4.3. Publish animation

Duration: 2hrs
Learning outcome objectives :

By the end of Produce interactive web animations, the trainee will be
able to:
➢ Analysis of website requirements in accordance with client’s

requirements
➢ Design of web animations according to the design specifications
➢ Publish animation
Resources
✓ Books.
✓ Pens.
✓ Markers.
✓ Pencils.
✓ Board.

Learning Outcome 4.1: Analyze website requirements in accordance
with client’s requirements
So, you’ve just signed your terms and engaged in website design services with
Primal Space, but what next? We’re often asked by clients before a website
design project commences; ‘What is required?’ Therefore, we’ve decided to write
everything down in this handy guide making life much easier for you, our new
web design client, going forward. Below we have detailed exactly what you will
need. Helping you prepare to get started with the project, before work at our
end can commence.
No matter what stage you are at with your website design idea. You can use this
blog article as a great reference point. It’s worth noting that this is a general
guide we have written, not every concept in this article may apply to your
website design. But the majority certainly will, as most of the list are core
aspects of any website. However, it’s important to note that if you are having
your website designed by our good selves, the information that we detail here
will be required before we start building and designing your website.
If you aren’t yet at that stage, you might want to go back a step and check out
the post about gathering specifications and the goals of your new website. We’ve
also created a new more in depth post titled how to create requirements
documents which includes example templates that you can follow.
Website Design Requirements
Your idea and vision for the project is arguably the most important part of the
whole preparation process. Tell us about your idea! What purpose do you want
the website to serve?
It’s important to have everything in a clear structure that is easy for us to follow.
Your ideas and visions can be collated into documents or mood boards if you
like and provided as such to us by scanning and uploading to our Google Drive.

Or we can meet over video call or face to face for coffee and you can tell us all
about your new website concept.
Colour Scheme
If you have a particular colour (or colour spectrum) that needs to be featured
throughout the website. You’ll need to specify this to us. We’ll require the 6-
digit hexadecimal colour code for the colour you want to use. We recommend
using the Hex colour picker website here Hex Colour Picker. For a website
design, we generally like to stick to a base of 3 or 4 colours at most. With 2 of
those colours generally being black or white. If you’ve read other articles on our
website you’ll already know that we are lovers of white space within a website
design. Allowing your content to take centre stage so to speak! The colour you
provide to us from the hex colour chart will generally be your brand colours. Or
the main colour that you want to be used through the theme of your website
design and other marketing material including your logo.
Fonts
Have you decided on specific fonts that you’d like to be used within the design
to depict your brands image? Just like colour, these fonts should be consistent
throughout all marketing materials as well as company logos to create a concise
brand identity.
Website Content Requirements
Forming the nuts and bolts of your website so to speak is your websites content!
We’ve broken this concept up into a list of images, mock-ups, text wording
content and your logo. Depending on your website requirements what you will
need may differ, or you may need to provide us with more content. For example
these could include, videos, PDF or any other graphics that you require within
the design. Your mock-up provided should reference the file names of any
particular content you require within the website design.

Images
We’ll let you into a little secret, eye-catching images that give an instant wow
factor are an integral part of any website design. If you have really strong and
powerful images, the design of your website will instantly look more impressive.
We would thoroughly recommend hiring a professional photographer where
possible. Providing us with the most high-resolution photos you can get your
hands on. It will really make a difference to the final design and help your
website stand out alongside your competitors.
If your budget can’t stretch to paying for a professional photographer, then

perhaps looking at how you can obtain copyright free imagery for your
website online would be beneficial. There are lots of great websites out there
where you can access high quality photos free or for a donation.
Mock-ups
A mock-up in terms of website design is a document showing how you want
that page of the website to be laid out. We receive mock-ups from clients in
many forms. Some are more sophisticated than others. However it’s an integral
part of the preparation process for your website design. Without a mock-up
being provided to us, it’s very difficult to get a clear idea of how you want your
content displayed on each page. There are a whole variety of formats in which
a website design mock-up can be provided to us. You can provide hand-drawn
mock-ups to us. Or you can go to the other end of the spectrum, providing
professional wire-frames showing each page of your website. Mock-ups can be
provided as a Word Document, or PDF. Or like we say if you are hand drawing
your mock-up, you can scan these and upload them to Google Drive.
You may also wish to provide us with website screenshots representing
particular elements or functions of existing websites that you would like to be
featured within your own website.
Text Content

The wording for text content should be detailed in a separate document for each
page. The text content can be provided to us as a Word document (.doc) or as a
Text document (.txt), either is fine.
Before your project commences we’ll have established how you’ll provide your
content to us via a shared access Google Drive folder. This is all part of
your website design project management plan which we will have put in place
and provided you with ahead of development. This is a requirement of all Primal
Space digital servicees.
Logo
If your logo is not being purchased through us, you’ll need to provide us with
this. The logo asset files should be provided as a .ai or .eps file type. Allowing
us to edit the logo’s design and size where required to fit within your websites
pages. The logo is often edited purely for the purpose of the website design.
If you don’t yet have a logo for your website, reach out to us for a quote for our
graphic design service. Allowing us to design a professional logo for your
business as part of the build.
Access to your Domain and Hosting
If your domain was not purchased through us here at Primal Space. And/or
you have your hosting with another company. For us to be able to implement
your website live, we’ll require login access to our domain and/or hosting
control panel to apply the settings. Even if you have your domain purchased
elsewhere. But you are having your website hosting supplied through ourselves
Primal Space. We’ll still need access to the domain settings to apply changes
there to point to the new website.

Learning Outcome 4.2 Design of web animations and responsiveness
according to the design specifications
An Introduction to Animation in Web Design
Animation is not just for cartoons anymore. From full-screen moving images to
small hover effects, touches of animation are popping up everywhere. Animation
is trendy, fun, and user-friendly.
Animation happens when something created in still or two-dimensional form is

“brought to life” and appears to move in a way that follows laws of physics. It’s
the way a cartoon character walks across the screen or how an app icon
bounces like a ball while it is loading on the desktop of your Mac.
One of the words that is almost synonymous with animation is Disney. In the
early 1980s, two of the companies’ top animators wrote a book detailing the 12
principles of animation. The “Illusion of Life: Disney Animation” by Frank
Thomas and Ollie Johnston still provides the framework for animation today.
1. Squash and stretch

2. Anticipation
3. Staging
4. Straight Ahead Action and Pose to Pose
5. Follow Through and Overlapping Action
6. Slow In and Slow Out
7. Arc
8. Secondary Action
9. Timing
10. Exaggeration
11. Solid Drawing
12. Appeal

Web animations are often saved as GIF, CSS, SVG, WebGL or video. They can
be anything from a simple underline that appears when you hover over a word
to a full-screen video or background image. As with any other design technique,
animations can be subtle or they might be in your face and hard to avoid.
To help guide your animation decisions, you might want to avoid some more
trendy elements and stick to some of the more timeless elements of animation
design. These techniques provide a basic guide that can help you create
something usable and visually interesting.
• Navigation: Use micro-animations to show users when they are

activating an element or menu item ahead of the click or tap
• Hover states: Another micro-animation that can facilitate user
experience with a cue to what is actionable
• Video: This major animation can be an engaging content type that
helps tell a story with the design
• Sliding transitions: Made popular in hero headers, this method
moves images or illustrations through a scroll or automatic action
(the trick here is to make each transition as smooth as possible)
• Scrolling: From parallax effects to more complex animated
transitions, the scroll is a great place to add subtle motion to denote
shifts in content
• Background animations: Subtle elements of motion can make a
static image more interesting and provide an element of surprise for
users
• Welcome or loading animations: Many welcome page animations
hide a load issue, but when done properly the motion is interesting
enough that it’s not annoying and distracts the user from the lag

• Storytelling animation: Motion can help set the scene for the
content therein and can help keep users on a website longer as they
get into the tale at hand
The primary reason to use animation is to increase usability. Simple animations

can be great guiding tools to help people understand what buttons to click or
where to go next in the map of a website. Many designers using complex
scrolling effects pair a simple animation with a user tool to scroll or click. (This
includes everything from a simple bouncing icon or words that pop up and say
“scroll down.”)
Usability comes in a few forms:
• Communication function or how to use a website

• Attract users to the overall design or a specific element
• Increase interaction and engagement
• Show change, such as filling in a form correctly or highlighting that
an element is clickable
• Establish a better or stronger emotional connection
• Create flow or direct users to a call-to-action
• Improve the overall user experience
Animation can also be a great “decoration.” Sometimes the goal of an animated
element is purely visual and that is an acceptable use. This decorative
animation can help tell a story or create an emotional connection between the
interface and the user. The purpose of an animation can be to spark visual
interest and keep a user engaged with your site for a longer period of time.
When creating a purely visual animation consider what it is supposed to do.

Think about the connection you want a user to have. Is it supposed to be fun
or surprising? Is it a bit of unique content that is designed for sharing? Even a
pure visual should have a goal.

Learning Outcome 4.3: Publish animations
Animations in an acceptable web format
web animations into a hypertext markup language (HTML) page
Straight forward and simple web pages are good but not the best. The
animation is the thing that brings life to a static page and makes it more
eye-catchy.
Here are a few ideas of animation for your web pages using the frontend
languages like HTML & CSS.
1. Rotating a Card: The first one is rotating a card. The card has two
things front side and the backside when we hover our mouse to the card
it will rotate 180 degrees and it will show the backside only.
Explanation: Here the first whole body is styled the image. The button
is styled according to your need and creativity. The main thing here is
the rotation at first the backside is hidden or rotated 180 degrees and
when we hover to the card the front side is rotating -180 degrees and the
backside is coming in the front.
Below is the example that illustrates the Rotating card animation.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {

color: hsl(209, 61%, 16%);
background: #fff;
;
}
img {
width: 100%;
display: block;
}
.btn {
background: white;
color: rgb(64, 119, 64);
padding: 0.375rem 0.75rem;
letter-spacing: 3px;
display: inline-block;
border: 2px solid transparent;
border-radius: .5rem;
cursor: pointer;
}
.blog {
background: hsl(210, 36%, 96%);
}
.card {
height: 500px;
position: relative;
width: 500px;
margin-left: 30rem;
}
.card-side {

-webkit-transition: all 2s linear;
transition: all 2s linear;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.5rem;
visibility: visible;
}
.card-back {
background: rgb(55, 116, 75);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
display: grid;
place-items: center;
}
.card:hover .card-front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card:hover .card-back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}

.card-info {
padding: 1rem 1.5rem;
}
.card-front img {
height: 13rem;
-o-object-fit: cover;
object-fit: cover;
height: 500px;
}
</style>
</head>
<body>
<div class="section blog">
<div class="card">

<div class="card-side card-front">
<img src=
"https://media.geeksforgeeks.org/wp-
content/uploads/20201113113041/paintorder1.png"
alt="" />
</div>

<div class="card-side card-back">
<button class="btn">
Read More
</button>
</div>
</div>
</div>

</body>
</html>
Output:
2. Text Moving Up & Down: In this animation, the text will go up on hovering
the mouse to it, and in the case of mobile on click, the text will go up.
Explanation: At first, the down texts are being covered using the overflow is
hidden and bottom negative value. And when we are hovering into the card
the front text is going up using translate negative values and down text is
shown by making the bottom value as zero. Linear-gradient is used to read the
text clearly. Transition plays a big part as it makes things going smoothly. The
rest of the code is just for styling and for making things good.
3. Text Coming up on Hovering: In this animation text coming up on
hovering to the image and the image is zoomed.
Explanation: The first is to make the text disappear which is done by making
opacity zero. Now on hovering the image the image will be zoomed and the
overflow hidden property makes sure that the outer part of the image when it
is zoomed doesn’t go outside of the certain height and width. And on hovering

making the opacity of the image text one makes it visible. Transition property
just made things smoother.
Bootstrap
Bootstrap is a free and open-source front end development framework for the
creation of websites and web apps. The Bootstrap framework is built
on HTML, CSS, and JavaScript (JS) to facilitate the development
of responsive, mobile-first sites and apps.
Responsive design makes it possible for a web page or app to detect the
visitor’s screen size and orientation and automatically adapt the display
accordingly; the mobile first approach assumes that smartphones, tablets and
task-specific Mobile apps are employees' primary tools for getting work done
and addresses the requirements of those technologies in design.
Bootstrap includes user interface components, layouts and JS tools along

with the framework for implementation. The software is available precompiled
or as source code.
In the physical world, a bootstrap is a small strap or loop at the back of a

leather boot that enables you to pull the entire boot on and in general usage,
bootstrapping is the leveraging of a small initial effort into something larger
and more significant. There is also a common expression, "pulling yourself up
by your own bootstraps," meaning to leverage yourself to success from a small
beginning.

Appealing Features of Bootstrap
Bootstrap has a lot of features. These features not only make it stand out, but
they also make it more popular even among those web designers who like to
take things in a very conventional way.
i. Easy to Begin With

It is pretty easy, to begin with. Being easy to get started with is probably the
first quality which makes Bootstrap very appealing.
b. LESS as Well as CSS Files

Bootstrap not only offers LESS files but also includes the old CSS files.
c. Easily Customizable
Despite the fact that Bootstrap is designed in responsive 12-column grids,
layouts, and components, it is also very easy to customize. Whether you need
a fixed grid or a responsive one, it can be made possible by making a few
changes. Offsetting and nesting of columns are also easy to do in both CPU-
based and mobile-based browser grids.
B. Responsive Utility Classes

Another prominent feature of Bootstrap is its responsive utility classes. Using
responsive utility classes, a particular piece of content can be made to appear
or hide only on devices depending on the size of the screen being used. This
feature is extremely helpful for designers who want to make a mobile and
tablet-friendly version of their websites.
C. Components of Bootstrap
Some of the components that come pre-styled in Bootstrap are:
• Drop-downs
• Button
• Navigation

• Badges Alerts
• Progress Bar
D. Drop-Down Component Menu

The drop-down component menu is a responsive additive feature of a website.
To include it in a website, a lot of different plugins, mostly Java-based, are
tested. But, via Bootstrap and its easy customizing options, this can easily be
done in a matter of minutes.
E. Bootstrap Templates
The readily available templates make it easier for inexperienced users to
create a website following a simple tutorial or demo available on the
Bootstrap.

Learning Unit 5: Integrate website with social web technologies
Learning outcomes:
5.1. Identify social web to be integrated with website
5.2. Develop the code and documentation of the integration requirements

Duration: 2hrs
Learning outcome objectives :

By the end of Integrate website with social web technologies, the
trainee will be able to:
➢ Identify social web to be integrated with website

➢ Develop the code and documentation of the integration requirements
Resources
✓ Books.
✓ Pens.
✓ Markers.
✓ Pencils.
✓ Board.

Learning Outcomes: 5.1 Identify social web to be integrated with website
Deffinition of social media

The term social media refers to a computer-based technology that facilitates
the sharing of ideas, thoughts, and information through virtual networks and
communities. Social media is internet-based and gives users quick electronic
communication of content, such as personal information, documents, videos,
and photos. Users engage with social media via a computer, tablet, or
smartphone via web-based software or applications
Types of social media

Social media may take the form of a variety of tech-enabled activities. These
activities include photo sharing, blogging, social gaming, social networks,
video sharing, business networks, virtual worlds, reviews, and much more.
Integrate social media into Your Website

Having your website and social media accounts set up is just the beginning;
you need to make sure that these different platforms are effectively integrated
with one another so that customers are able to interact and engage with your
brand regardless of time, place, and purpose.
The process of cross-promoting your social media accounts on your website so
these communication channels can be more frequently used, explored, and
shared is called social media integration. This is something that your
business needs to do if you are going to be competitive in today’s
marketplace. The ones who did this well will reap the benefits, and the ones
that don’t…well, won’t.

Ways To Integrate social media Into Your Website
Employ the following tactics in order to increase traffic amongst platforms,

strengthen brand awareness and affinity, encourage communication with
customers, and improve sales and revenue.
1. Social Media Icons
The first and the most obvious step on the road to integration includes placing
visible social media buttons on your website, linking to your various profiles.
Depending on your type of business and audiences, you might have a number
of different social media profiles, such as:
• Facebook
• LinkedIn
• Twitter
• YouTube
• Pinterest
Naturally, you would like your website’s visitors to also visit these profiles and
consume the messages posted there. The best way to ensure this is to publish
social media buttons on your website landing pages, this gives visitors have the
ability to start following your accounts immediately, without even leaving your
website.
Their placement on your website is very important; there are certain locations
that individuals are used to looking, so you’ll want to be sure that their
placement is intuitive. Experts say the best places are either the top or bottom
navigation bar (or both!) or visibly separated from additional content along the
side of the homepage.
If you use a website development platform, social media icon integration is
incredibly easy, and can be set up in less than a minute, which means that
there’s no excuse not to have these icons integrated across your website.

2. Social Share Buttons
Regardless of whether your website is pushing out blog posts or featuring
products, you want your content to be shareable so that visitors can easily
post to their own social media accounts directly from your website. “Share this”
or “Add this” are examples of share buttons across e-commerce websites with
the possibility to see analytics of who and how your content is shared.
This not only increases the number of eyeballs on your content, but promotes
your overall brand image and improves sale rates.
3. Social Login Plugins
Incorporate a social sign-in to allow your visitors to sign into your e-commerce
website through one of their social media accounts. Research has shown
that users prefer to bypass the need to create a separate account for a
website and sign in with a social login instead.
Reducing the registration process saves time for the customers, encourages
users along the sales process, and enables brands to quickly capture
customers’ information and engage them.

4. Social Live Feeds
Social live feeds allow you to display your live activity from Facebook, Twitter,
Instagram, YouTube, or other social media accounts directly on your website.
So, instead of merely linking to these social media channels, you can show your
current and recent social activity, so your visitors can see, follow, and
otherwise engage without leaving your website.
These feeds can make your website feel less like a sales pitch and more
human. It also makes the entire brand experience more integrated, and
increases the likelihood that someone will begin following your social media
accounts while visiting your website.
Most social media platforms have widgets that allow you to easily customize
settings, grab the code, paste and publish it directly onto a website. Depending
on your industry, product or service offering, and audience, you may want to
consider integrating your:

• Instagram feed
• Live Twitter stream
• YouTube recent videos
• Blog posts
5. Social Assistance Account

Customers not only appreciate, but often expect, immediacy. It has been shown
that brands that are able to offer immediate assistance not only have higher
brand affinity, but customers are more likely and willing to pay a higher
price for their products and/or services.

Learning Outcome 5.2. Develop the code and documentation of the
integration requirements
An Integration Requirements Document assesses and describes the

requirements for a successful data integration. Much like a Systems/Software
Requirements Specification (SRS), the Integration Requirements articulates the
expected behavior and features of the integration project and related systems.
Most Integrations Requirements Documents are part of a larger Data
Integration Requirement Plan and quality of service standards. Typically,
integration requirements documents include timelines, goals, expectations,
rules, and roles as well as company specific requirements that will encompass
complete data integration from all contributors of the process.
Documents carefully outline expectations and show a homogenous agreement

among the company as to how to move forward with integration.
Integration Requirement Documents include scope and input documents. They

often start with establishing a current evaluation of the business and data
system. Then, they will explain the problem the integration is solving for and
the business operations affected. As part of this, an assessment of the current
data landscape is performed.
The Data Integration Requirements Documents also provide a detailed model

for the kind of integration project and architecture that will be performed,
something like a blueprint. The data integration model will define what each of
the architectural details are and their function. For example, will it be a cloud-
based data lake or an in-house data warehouse?
The Data Integration Requirements will include all software, hardware,

features, and processes that are included in the data integration.

10 integration requirements
Currently, most application integration is done through REST and SOAP

services, which have been determined to meet the majority of the needs on the
integration requirements document. Integration requirements have changed,
particularly as data management and use has been shaped by newer, cloud-
based utility.
SnapLogic has outlined 10 of the requirements for the most contemporary,

highest-functioning integrations. The “10 Modern Data Integration Platform
Requirements” for a unified iPaaS are:
1. Application integration is done through SOAP and REST services

2. Large capacity for data integration and storage through a data lake or
cloud-based data warehouse
3. Integration will be able to support the present and coming data velocities
whether batch or streaming data
4. Event-based integration over clock-driven integrations
5. A document-centric data integration strategy
6. Hybrid integration, including for both cloud-to-cloud and cloud-to-
ground scenarios.
7. Integration must be accessible via REST/SOAP APIs
8. Instead of location, new integrations must be focused on connectivity for
speed and agility
9. Elastic integration able to operate in real-time and fluctuating event-
based demands
10. SaaS-based approach wherein integration is delivered as a service
to anyone who needs acces

Remember (Take home message)
✓ Types of social media

✓ Ways To Integrate social media Into Your Website
✓ Social media integration strategies for your website
Formative assessment
Please mix different assessment instruments/tools for triangulation

and relevancy of assessment
Written assessment
1. How do I integrate social media into website?

2. Why you should integrate social media platforms into website?

References:
1. HTML Tags. Available on: http://socnedo.org/htlm/notes-of-html/
2. HTML.Availableon:http://www.arconlab.com/dev/web/HTMLTheDefinit
eGuide.pdf
3. HTML MCQ. Available on: http://www.c4learn.com/mcq/html-
mcq/html-mcq-html-imagesmultiple-choice-question/
4. HTML Tables. Available on:
http://www.tutorialspoint.com/html/html_tables.htm
5. Duckett, J. (2011). HTML and CSS: design and build websites. John Wiley
& Sons.
6. Robbins, J. N. (2012). Learning web design: A beginner's guide to HTML,
CSS, JavaScript, and web graphics. O'Reilly Media, Inc.
7. Nixon, R. (2012). Learning PHP, MySQL, JavaScript, and CSS: A step-by-
step guide to creating dynamic websites. O'Reilly Media, Inc.
8. Goldstein, A., Lazaris, L., & Weyl, E. (2015). HTML5 & CSS3 for the Real
World. sitepoint.
9. Casario, M., Wormser, N., Saltzman, D., Bradford, A., Reid, J., Improta,
F., & Congleton, A. (2013). CSS3 Solutions: Essential Techniques for
CSS3 Developers. Apress.

Website Note

Uploaded by

Copyright:

Available Formats

Website Note

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Website Note

Uploaded by

Copyright:

Available Formats

WEBSITE

Table of content .................................................................................................... 1

Learning Unit 1: Design simple web page layouts ................................................. 5

Learning outcome 1.1 Identify of main layout sections according to ndesign

Learning Unit 2: Develop Cascarding Style Sheets (CSS) ..................................... 51

Learning Outcome3.2 Test the content as per standard procedures............... 110

Learning Unit 4: Produce interactive web animations ....................................... 121

Learning Outcome 4.1: Analyze website requirements in accordance with client’s

Learning Outcome 4.2 Design of web animations and responsiveness according

Learning Outcome 4.3: Publish animations .................................................. 130

Appealing Features of Bootstrap ....................................................................... 136

Learning Unit 5: Integrate website with social web technologies........................ 138

Learning Outcome 5.2.Develop the code and documentation of the integration

References: ....................................................................................................... 148

CSS: Cascading Style Sheet

HTML: Hypertext Markup Language

UI: User Interfaces

SEO: search engine optimization

APNG: Animated Portable Network Graphics

GIF: Graphics Interchange Format

ICO: Microsoft Icon

JPEG: Joint Photographic Expert Group image

PNG: Portable Network Graphics

SVG: Portable Network Graphics

Kigali November, 2022 2

The course aims to:

✓ Introduce learners the basic terminologies and various phases of

Kigali November, 2022 3

1. Design simple web page layouts

2. Develop cascading style sheets

3. Ensure website content meets technical protocols and standards

4. Produce interactive web animation

5. Integrate social web technologies

Kigali November, 2022 4

STRUCTURE OF LEARNING UNIT

1.1. Identify of main layout sections according to design specifications.

Kigali November, 2022 5

Learning outcome 1.1 objectives:

By the end of Identify of main layout sections according to design

1. Identify basic Page structure and site design.

Equipment Tools Materials

Kigali November, 2022 6

1.1.2 Basic Page structure and site design.

Kigali November, 2022 7

Kigali November, 2022 8

1.1.3. user interfaces (UI)

1.1.3.2. Why is user interface important?

Kigali November, 2022 9

1.1.3.3. Types of User interface

Types of user interfaces can include:

➢ Form-based user interface: Used to enter data into a program or

Summary for the trainer related to the content

In this unit, we learned how to Understanding the location and

Kigali November, 2022 10

✓ Describe types of User Interface.

Learning outcome 1.1: formative assessment

Please mix different assessment instruments/tools for triangulation

Kigali November, 2022 11

Learning outcome 1.2 objectives: