The Coordination Committee formed by GR No. Abhyas - 2116/(Pra.Kra.

43/16) SD - 4
Dated 25.4.2016 has given approval to prescribe this textbook in its meeting held on
30.01.2020 and it has been decided to implement it from academic year 2020-21.

INFORMATION
TECHNOLOGY
STANDARD - TWELVE
(Science)

SEO

IoT, 5G
E-Governance

Maharashtra State Bureau of Textbook Production and

Curriculum Research, Pune.

The digital textbook can be obtained through

DIKSHA App on smart phone by using the Q.R.
Code given on title page of the textbook and useful
audio-visual teaching-learning material of the
relevant lesson.
First Edition: 2020 © Maharashtra State Bureau of Textbook Production and
Curriculum Research, Pune- 411004.
Reprint: 2022
The Maharashtra State Bureau of Textbook Production and
Curriculum Research reserves all rights relating to the book.
No part of this book should be reproduced without the written
permission of the Director, Maharashtra State Bureau of Textbook
Production and Curriculum Research, ‘Balbharati’, Pune.

Co-ordination
Information Technology Subject
Committee and Study group Dr. Ajaykumar Lolage
Special Officer, Work Experience,
Shri. Sanjay Kulkarni, Chairman
Incharge Special Officer,
Smt. Neha N. Katti
Health and Physical Education,
Shri. Prashant M. Patil Textbook Bureau, Pune
Smt. Vijaya A. Parekar
Smt. Archana K. Mulay Production
Smt. Dipali G. Dhumal Shri. Sachchidanand Aaphale
Chief. Production Officer
Smt. Jyoti J. Barge
Shri. Sachin Mehata
Smt. Aasha C. Mohite
Production Officer
Smt. Sushama S. Patil
Shri. Nitin Wani
Smt. Sangita A. Jaju Asst. Production Officer
Shri. Tayyabali M. Sayyad Paper
Shri. Nilesh S. Ghavate 70 GSM Creamwove
Shri. Milind Oka Print Order
Shri. Prashant D. Hakim N/PB/2022-23/ ,000

Printer
Shri. Satyawan B. Guram
M/S. IMPRESSIONS, KOLHAP R
Shri. Nitin R. Choubey
Dr. Ajaykumar S. Lolage
(Member Secretary)
Publisher
Vivek Gosavi,
Cover & Illusatrations
Controller
Smt. Pradnya Kale
Maharashtra State Textbook
Shri. Sandeep Koli
Bureau, Prabhadevi,
Typesetting Mumbai-400025
Textbook Bureau, Pune
NATIONAL ANTHEM
 Foreword
Dear Students,
Congratulations to all of you for the successful completion of Std XI and welcome to
the second year of Higher Secondary Education. The syllabus of Information Technology
(Science) at Higher Secondary Level has been revised and implemented in view of the fact
that computer is used currently as a tool for various applications, especially in the field of
e-Banking, e-Commerce, e-Governance, etc. Higher studies and placements, at present,
greatly demand human resources with adequate knowledge in computer applications and
information technology.
The Information Technology aims to equip students the knowledge, skills and attitudes
to become productive employees in the area of computer science and technology. In this
course, you all will gain a perspective to become a successful entrepreneur in information
Technology and allied sector. Scope of this textbook also provides you all with the
foundation for higher studies. Information technology is one of the most significant
growth catalysts for the Indian economy. I am sure after completion of HSC with IT,
you will acquire skills and competence to enter in the upcoming job market.
In Class XI, the syllabus focused on the fundamentals of Computer, computer network,
basics of website designing and some knowledge of database. Emphasis is also given to
put a strong foundation to develop problem solving skills and create computer programs
using JavaScript as a scripting language. You all are also familiar with web page
designing and database concepts.
The syllabus of Class XII Information Technology (Science) is a continuation to
that of Class XI. Hence the textbook designed in accordance with the syllabus, begins
with some advance features of HTML5. It also has given vertical ladder to understand
JavaScript thoroughly with loop statements. To become a full-fledged web developer
with proper knowledge and understanding about server side scripting PHP with database
connectivity is also an additional feature of this syllabus. Once you have developed a
website it is necessary to optimize its ranking and therefore SEO is introduced in this
book. One chapter is dedicated to new technologies like cloud computing, 5G, IoT and
AI. The concepts such as E-commerce and E-Governance are the decisive concepts in
today’s world and knowledge about the same is must.
I hope this book will meet all the requirements for stepping to levels of higher education
and pave the way to the peak of success. Each unit comprises of simple activities and
demonstrations which can be done by you on your own.
It is sure if you carefully study the text and practice the laboratory exercises, you will
develop confidence in working with website development, web hosting and analyzing,
scripting and also update your knowledge with new and current technologies.

(Vivek Gosavi)
Pune Director
Date : 21 February, 2020 Maharashtra State Bureau of Texbook
Bharatiya Saur : 2 Phalguna 1941 Production and Curriculum Research, Pune
 For Teachers
Dear Teacher,
The subject Information Technology (Science) is an optional subject of the
Higher Secondary Education. The content is developed in view of the fact that
it should be useful to the students for their higher studies and they should be
able to use computer as a tool. Besides, if somebody wishes a shift towards the
IT field in higher education, the syllabus can cater to their needs. Although the
field of IT continues to expand rapidly, it is not feasible to expand the size of
the curriculum proportionately. As a result, the syllabus has been designed in
such a manner to inculcate the current technical knowledge among the students.
The textbook on Information Technology (Science) is developed as per
the approaches and methods used in recent era of internet and web. As the
curriculum is activity-based, process-oriented and based on constructivism, it
demands higher level proficiency and dedication from the part of the teachers
for effective teaching.
This textbook takes two aspects into consideration - knowledge domain
and process domain. The knowledge area of the curriculum of Class XII is a
continuation to that of Class XI. The programming aspects to solve complex
problems and handle complex data are introduced. Since we are in an era of
Internet, a wide coverage is given to the contents required for designing web
pages and developing web applications. It also enhances the knowledge of
web hosting. The knowledge domain also initiates server side scripting using
PHP. The emerging technologies such as Cloud computing, 5G, AI are also
included to keep the students updated with current knowledge. The concepts
such as E-commerce are also introduced and E-Governance. The knowledge
about the same is must for today’s generation.
The process domain gives importance to gain the Science and logical method
and develop interest for deeper investigation. The SEO topic is introduced to
encourage the students to design a perfect website by optimising and ranking
the site at top on search engines. While transacting the concepts through
activities, it should be ensured that the students are attaining the skills along
with learning outcomes.
The Textbook IT (Science) is prepared by a team of practicing teachers
under the guidance of a panel of subject experts. All possible efforts have
been taken to make the books learner-friendly and interesting. There is no
denying the fact that our teachers are resourceful and committed, and hence
directions towards the right path can make the transaction of the curriculum
most effective and productive.
Constructive criticism and creative suggestions for improvement of the book
are most welcome.
Information Technology
Subject Committee and Study Group
Textbook Bureau, Pune
 Competency Statements For Information Technology
Standard - XII (All Streams)

Competency
Theory
1. To create awareness and acquire knowledge about new technology.
2. To acquire in-depth knowledge about technologies related to AI, IOT, 3D Printing,
5G.
3. To enable the student to think and create interest in emerging technology from career
point of view.
4. To make students aware about concept of E-commerce.
5. To acquire knowledge about scope of E-commerce.
6. To create awareness about different E-commerce websites and discuss its features.
7. To develop higher order logical skills based on basic knowledge acquired in 11th
standard.
8. To make students aware about HTML5’s advanced tags while developing web page.
9. To make students competent in scripting language to create dynamic web page.
10. To acquire knowledge about concept of object.
Skill Oriented Practicals (SOP)

1. To inculcate web designing skills using advance tags.

2. To make students confident to create website.
3. To develop skills for programming using DOM.
4. To develop ability to create dynamic web pages using advance features.
5. To develop ability to program for server side scripting.
6. To develop skill to create simple PHP Program.
7. To make student aware about connectivity with database.
8. To develop skill in handling accounting package with advance feature.
9. To make student competent to display and print different accounting report.
10. To acquire skills in recording and manipulating audios.
11. To make student skillful to mix audio.
12. To acquire skills to record, create and manipulate video.
13. To enhance the creative ability by mixing and fusion of the different media.
 INFORMATION TECHNOLOGY
STANDARD - TWELVE
(Science)

INDEX

No. Title of the Chapter Page No

1 Advanced Web Designing 1

2 Introduction to SEO (Search Engine Optimization) 27

3 Advanced Javascript 35

4 Emerging Technologies (IOT, Cloud computing, AI,5G) 53

5 Server-Side Scripting (PHP) 59

6 E-Commerce and E-Governance 79

Skill Oriented Practicals (SOP)

1. Advanced Web Designing 91

2. Advanced Javascript 94

3. Server-Side Scripting (PHP) 96

 1 Advanced Web Designing 1
Let us learn different versions supporting different
features. HTML5 is currently used
Student can design the layout of web because it supports mobile technology.
pages using CSS. The major browsers are Google Chrome,
Students can learn to design the MozillaFirefox, Microsoft Edge, Safari,
website. Opera and Apple support the features of
HTML5.
Student can design the web form
with validations. 1.2 Forms in HTML5

Students can learn concept of image In eleventh standard we have studied

map and Iframe (inline frame). different controls related to form like text,
radio, checkbox, submit, reset, select and
The aim is to give the skills to create textarea.
HTML WebPages, using HTML5
These controls are used to collect
and CSS.
different kinds of user inputs, such as
contact details like name, address, single
1.1 Advanced Web Designing or multiple options from group of options,
as well as clearing and submitting data
We have been introduced to basic
etc.
terminologies related to creation of web
pages. The Hypertext Mark-up Language HTML5 has introduced additional
(HTML) is an evolving language, with form controls which can also be used for
validation purpose.
HTML5 advanced <input> elements
HTML5 introduces a number of new input type values for the type attribute of
<input> tag.
Input type Description
<input type="color"> Defines a color picker
<input type="number"> Defines a field for entering a number
<input type="url"> Defines a field for entering a URL.
<input type="image"> Defines an image as a submit button.
<input type="date"> Defines a date picker with the year, month and day
<input type="email"> Defines a field for an e-mail address

1
 Input type Description
Defines a month and year control in format is
<input type="month">
"YYYY-MM"
<input type="range"> Define a range control. Default range is 0 to 100.
Defines a date picker that includes the year, month,
<input type="datetime-local">
day and time.
<input type="time"> Defines a control for entering a time.
<input type="week"> Defines a week and year control.
Defines a text field for entering a search string like
<input type="search">
a site search or Google search.
Defines a file-select field and a "Browse" button for
<input type="file">
file uploads.
Used to define input fields that should contain a
<input type="tel">
telephone number.

Input Restrictions
A list of some common input restrictions is given below, few of which can be used
for validation purpose.
Attribute Description
disabled Specifies that an input field should be disabled.
max Specifies the maximum value for an input field.
min Specifies the minimum value for an input field.
pattern Specifies a regular expression to check the input values.
read only Specifies that an input field is read only (cannot be changed).
This acts as a temporary label showing the purpose of a text field
placeholder
without requiring a label tag.
required Specifies that an input field is required (must be filled out).
Specifies whether a form or input field should have autocomplete On
autocomplete
or Off.
Specifies that the input field should automatically get focus when the
autofocus
page loads.
height and Specifies the height and width of an <input type="image">
width
Specifies that the user is allowed to enter more than one value in the
multiple
<input> element. This works with input types like email and file.

2
Some other useful attributes used with <input> are-
1. id : This is used to identify the html element uniquely through the document object
model.
2. class: It is used to apply CSS style to the individual input element.
Examples :
<!DOCTYPE html> <html>
<head>
<title>Forms in html 5 </title></head>
<body>
<form> Name: <input type="text"autocomplete><br><br>
E-mail:<input type="email" name="email"><br><br>
Date of Inception: <input type="date" name="bday"><br><br>
Office time: <input type="time" name="usr_time"><br><br>
Number of years completed(between 1 and 100): <input type="number" min="1"
max="100"><br><br>
Office phone number: <input type="tel" name="phone" pattern="[0-9]{2}-[0-9]
{10}" required><br><br>
Add your homepage:
<input type="url" name="homepage"><br><br>
<input type="image" src="E:/submitbutton.png" alt="click here to submit" >
</form>
</body>
</html>
The output is as follows
Do it Yourself
1. Use multiple attribute in <input>
2. Use pattern attribute in <input>
and see the Output.

1.3 <meta> tag

The meta tag is a tag in html that
describes some aspects of contents of a
webpage. The HTML <meta> tag is used
by search engines to search information

3
that is provided with the webpage. This is empty tag (singular tag) which carries
information within its attributes. The <meta> tag is placed between the <head>and
</head> tags. Metadata will not be displayed on the webpage.
Attribute of <meta> tag
Attribute Values Description
Name The value of the name attribute Specifies the Name of the meta-
can be related to any of the data like the author, keywords or
following- i) Author ii) Description description.
iii) Keywords iv) copyright
e.g. <meta name = "author" >
Content It can have any textual matter
related to the name as in eg.
i. <meta name = "author" content Here content of author is
= "Balbharti"> balbharati.
ii. <meta name = "description" Here the value for content attribute
content = "Advance web de- specifies name of the topic
signing"> advance web designing.
iii. <meta name = "keywords" Here the values for content
content = "html5, learn html5, attribute are given as keywords
list in html 5"> like html5 , learn html5 etc.

Charset UTF-8, Big5 Specifies the character encoding

e.g used by the document, This is
<meta charset="UTF-8"> called a character encoding
<meta charset="Big5"> declaration.
UTF-8 For Indian characters
Big5 – for Chinese characters
http-equiv refresh , set-cookie, content-type, Used for http response message
expires, headers.
e.g. <meta http- Here the page will get refresh after
equiv="refresh"content="5"> every 5 seconds.
<meta http-equiv="set-cookies"> The browser sends the cookies
<meta http-equiv="content- back to the server.
type"content="text/ Specifies the character encoding
html"charset="Big5"> for the document
<meta http-equiv="expires" Here page session will get expire at
content="userid=pqr; specified date and time.
expires=Wednesday, 8-feb-2018
23:59:59 GMT;">

4
Example:

<!DOCTYPE html>
<html>
<head>
<title>meta tag
examples</title>
<meta name = "authors" Selector : Selector indicates the HTML
content = "Balbharti"> element you want to style. It could be
<meta name = "description" content = any tag like <h1>, <body> etc.
"Advance web designing"> Declaration Block : The declaration
<meta name = "keywords" content = block can contain one or more
"html5, learn html5, list in html5"> declarations separated by a semicolon.
<meta name="copyright" content
For the above example, there are two
= " copyright Balbharti All right
declarations:
Reserve">
</head> 1. color : yellow;
<body> 2. font-size :11 px;
<p> Welcome to HTML5 Each declaration contains a property
</p> name and value, separated by a colon.
</body>
Property : A Property is a type of
</html>
attribute of HTML element. It could be
color, border etc.
1.4 Cascading Style Sheets in HTML5
Value : Values are assigned to CSS
CSS stands for Cascading Style properties. In the above example, value
Sheets. CSS describes how HTML "yellow" is assigned to color property.
elements are to be displayed on screen, Selector{Property1: value1; Property2:
paper, or in other media. CSS saves a value2}
lot of work. It can control the layout
Types of CSS
of multiple web pages all at once. CSS
allows you to control the look and feel There are three methods of
of several pages by changing a single implementing styling information to an
source. HTML document.
1. Inline CSS
CSS Syntax
2. Embedded stylesheet or Internal
 A CSS rule set contains CSS
a selector and
3. External CSS
a declaration block.
1. Inline stylesheet : It uses the style
attribute in the HTML start tag.
5
 Inline CSS is used to apply CSS on a </style></head>
single line or element. <body>
For example : <h1>The internal style sheet is applied
on this heading.</h1>
<p style="color:blue">Hello CSS</p> <p>This paragraph will not be affected.
2. Embedded stylesheet or internal </p>
</body>
CSS : This is used to apply CSS on
</html>
a single document or page. It can
affect all the elements of the page. It The output of above program is as
is written inside the style tag within follows-
head section of html.
For example :
<!DOCTYPE html>
<html>
<head>
<style>
h1{color: Red;}
CSS Properties
Property Use Value Example
Color Changes the color of the text Color name h1{color: maroon}
Background-color To set the background color Color name body{background-
in your webpage color:yellow}
Font-weight Used to bold text bold or 100, p{font-weight:300}
200…900
Font-style Used to italicize text Italic, oblique or p{font-style:italic}
normal
Text-decoration This property is used to add p{text-decoration:
1. strike-through marks 1. line-through underline}
2. underline 2. underline a{text-decoration:
3. overstrike 3. overline none}
4. to remove underlines from 4. none
links
Text-align This property is use to left, right, center h1{text-
control the horizontal or justify align:center}
alignment of any block-level
text that are paragraphs,
tables and other elements
Font-family This is used to control the Font name p{font-
fonts family:arial}

6
 Property Use Value Example
Font-size This property allows you to px, in, mm, cm, p{font-size:10px}
control the size of the font pt
Letter-spacing This helps in controlling the px, in, mm, cm, h1{letter-spacing:
horizontal spacing between pt 5pt}
characters of text
Padding This property is used when Pixel h1{padding:30px}
you want to add padding
(blank spaces) around the
content of an element.
Border This property adds a border Solid, double, h1{border:double}
to a webpage element groove, ridge,
inset, outset,
dotted or dashed
Background-image To set an image as the url(''X'') body{background-
background of your webpage where X is the image:
path of image url('background.
file jpg')}
Background-repeat To set the background image repeat no-repeat background-repeat:
to repeat or not repeat
background-repeat:
no-repeat
Margin-Left Sets margin area on the left px,pt,cm etc. h1{margin-
side of the element. left;10px}
3. External stylesheet : The external An external style sheet can be written
style sheet is generally used when you in any text editor, and must be saved
want to make changes on multiple with a .css extension. The external css
pages. It facilitates to change the look
of the entire web site by changing file should not contain any HTML tags.
just one file. It uses the <link> tag on Here is how the "style.css" file looks
every page and the <link> tag should like:
be put inside the head section. Style.css
For example : h1{color:navy;margin-left:20px}
<!DOCTYPE html> The output is as follows
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<h1>This is a heading</h1>
</body></html>
7
CSS Id Selector The class name should not start
The Id selector selects the id with number.
attribute of an HTML element to Let's take an example with a class "intro".
select a specific element. An id is
always unique within the page so it is <!DOCTYPE html>
unique element. It is written with the <html>
<head>
hash character(#), followed by the id
<style>
name.
.intro{text-align:center;color:blue}
<!DOCTYPE html> </style></head>
<html> <body>
<head> <h1 class="intro">This heading is blue
<style> and center-aligned.</h1>
#para1{text-align: center; color: blue} <p class="intro">This paragraph is
</style> blue and center-aligned.</p>
</head> </body>
<body> </html>
<p id="para1">Hello Students</p> The above code results as
<p>This paragraph will not be
affected.</p>
</body>
</html>
Class Selector for specific element
See the output as follows
To specify only one specific HTML
element should be affected then you
should use the element name with class
selector.
Let's see an example :
<!DOCTYPE html>
<html><head><style>
p.intro {text-align: center;color: blue}
CSS Class Selector
</style></head>
The class selector selects HTML <body>
elements with a specific class attribute. <h1 class="intro">This heading is not
It is used with a period character '.' affected</h1>
(full stop symbol) followed by the class <p class="intro">This paragraph is
name. The Class selector is used when blue and center-aligned.</p>
you want to change a group of elements </body></html>
within your HTML page.
8
The output is as follows h1{ text-align:center;color:blue}
h2{ text-align:center;color:blue}
p {text-align:center;color:blue}
As you can see, you need to define
Universal Selector CSS properties for all the elements. It
The universal selector is used as can be grouped as-
a wildcard character. It selects all the h1,h2,p{ text-align:center;color:blue}
elements on the Webpages.
Let`s see full code as follows :
<!DOCTYPE html>
<!DOCTYPE html>
<html><head><style> <html>
* { color: green; font-size: 20px;} <head>
</style></head> <style>
<body> h1,h2,p{text-align: center; color: blue}
This css style will be applied on Entire </style>
page.It does not check tag or plain </head>
text<br> <body>
<h2>This css is applied to heading <h1>Hello Heading 1</h1>
</h2> <h2>Hello Heading 2 (In smaller
<p id="para1">it is applied to first font)</h2>
paragaraph</p> <p>This is a paragraph.</p>
<p>Also to second paragraph !</p> </body>
</body> </html>
</html>
Output :
Output :

Group Selector
The grouping selector is used to select Positioning in CSS
all the elements with the same style CSS helps to position the HTML
definitions. It is used to minimize the elements. The position property is used
code. Commas are used to separate each to set position for an element. The
selector in grouping. element can be positioned using the top,
Let's see the CSS code without group bottom, left and right properties.
selector.
9
Syntax : Output :
Selector{position:value;top:value;
left:value:bottom:value;right:value}
Where values in positions are fixed,
absolute, relative and values of top,
bottom, left, right are in pixels 3. Relative Positioning : The relative
There are four types of positioning in positioning property is used to set the
CSS element relative to its normal position.

1. Static Positioning : This is a by- 4. Absolute Positioning : This property

default position for HTML elements. sets an element in a specific location
It is not affected by the top, bottom, and it is not affected by the flow of
left and right properties. the page. This property positions the
element at the specified coordinates
2. Fixed Positioning : This property relative to your screen top-left corner.
helps to put the text fixed on the
For example :
browser. The FIXED property forces
an element into a fixed position <!DOCTYPE html>
relative to the browser window. The <html><head><style>
fixed element will not move, even .first{position: relative;top: -10px;
when the page is scrolled. right: -10px;}
h2{position: absolute;
Let`s see the example : left:100px;top:150px}
<!DOCTYPE html> </style></head><body>
<html><head><style> <h1 class="first">This is heading 1
p.fixed{position: fixed; top: 50px; right: </h1>
5px; color: blue} <h2>This is heading 2</h2>
</style></head> </body></html>
<body> Output :
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p class="fixed">This is the fix
positioned text.</p>
</body>
</html>

10
 In above output the Level 1 headings <h2 class="float-right">Balbharati
with class=“first"have a relative position </h2>
10 pixels above and 10 pixels to the right <p>This text rearranges itself to flow
of it’s original position. around the element that is floated
right. </p>
All level 2 headings will be positioned
</body></html>
100 pixels from the left of the browser
window and 150 pixels from the top of Output
the browser window.

Float Property
Float is a CSS property written in CSS
file or directly in the style of an element.
Display property
The float property defines the flow of
content. The Display property in CSS defines
how the components (div, hyperlink,
Following are the types of floating
heading, etc) are going to be placed on
properties :
the web page. It specifies how the element
1. float : left : This keeps the element is displayed. As the name suggests, this
float on left side of the container property is used to define the display of
2. float : right : This keeps the element different parts of a web page.
float on right side of container Syntax :
3. float : none : This is default property Display : value;
i.e. this shows the element as it is.
Where values are :
For example :
Inline : It is used to display an element as
<!DOCTYPE html> an inline element.
<html><head>
<title>Float Example</title> Block : It is used to display an element
<style> as an block element. It starts on a new
.float-left{float:left;font- line, and takes up the whole width of the
size:20px;background-color:gold} browser window.
.float-right{float: right;
Inline-Block : This value is very similar
font-size:20px;background-color:gold}
to inline element but the difference is that
</style></head><body>
<h2 class="float-left">Balbharati you are able to set the width and height.
</h2><p>This text rearranges itself to None : The element is completely
flow around the element that is floated removed.
left.
</p>

11
Let's see an example Output :
<!DOCTYPE html>
<html>
<head> Based on the CSS properties studied
<style> so far, the representation of semantic tags
p{ displayed in 11th standard textbook can
display: inline; be coded as follows.
}
</style> Example 1 :
</head> Use of semantic tags and CSS.
<body>
<p>welcome to balbharti</p> <!DOCTYPE html>
<p>Javascript</p> <html>
<p>HTML5</p> <head>
<p>CSS</p></body></html> <style>
header{background-color:pink;width:1
Output :
00%;height:20%}
nav{background-
color:skyblue;width:100%;height:20%}
aside{background-color:grey;width:40
Example 2 :
%;height:42%;float:right}
<!DOCTYPE html> section{background-color:lightyellow;
<html lang="en"> width:60%;height:10%;float:left}
<head> article{background-color:violet;width:
<title>Example of CSS display</title> 60%;height:40%}
<style type="text/css"> footer{background-color:orange;width
a{ :100%;height:10%}
display : block;
</style>
background-color:orange;
</head>
}
</style> <body>
</head> <header>
<body> <h1>HTML5 includes new
<p> semantics</h1>
<a href="https://www.ebalbharti.in" > <p>It includes semantic tags like
Visit balbharti</a> header, footer, nav
<br> <h1>Example of complete HTML5
</p></body> Basics</h1>
</html> <h2>The markup of the future under

12
development.</h2></p></header> forum posts or individual comments.</p>
<nav>The nav element represents a section of </article>
navigation links. It is suitable for either site
<footer>© 2018 Balbharti.</footer>
navigation or a table of contents.<br>
<a href="/">http://www.w3schools.com</a><br> </body></html>
<a href="http://www.ebalbharati.in">Balbharti
website</a><br></nav>
1.5 Ordered list or numbered list
<aside> The <ol> tag defines an ordered
<h1>Other education based websites of State</h1> list. An ordered list can be numerical or
<a href="http://mahahsscboard.ac.in">State
alphabetical.
Board website</a><br>
<a href="http://unipune.ac.in">Pune university Attributes of <ol> tag-
website</a><br>
Attribute Values Description
</aside>
<section> Type "1" 1 is default value and
<h1>Impressive Web Designing</h1> /"a"/"I"/"i" other values specify
<p>The aside element is for content the numbering type for
that is tangentially related to the content around the used items.
it, and is typically useful for marking up
sidebars.</p> Reversed Reversed This attribute specifies
</section> that the items of the
<section> list are specified in the
<h1>Articles on:Article tag</h1>
reverse order.
</section>
<article> Start Number Specifies the starting
<p>The article element represents an number of the first
independent section of a document, page or site. item in an ordered list.
It is suitable for content like news or blog articles,

13
<!DOCTYPE html> Output :
<html><body>
<h3>List of Topics</h3>
<ol>
<li>Basics of IT</li>
<li>HTML 5</li>
<li>PostgreSQL</li>
</ol>
<h3>List of Topics start with series 1.6 Unordered list or bulleted list
50</h3>
<ol start="50"> An unordered list created using the
<li>Basics of IT</li> <ul> tag, and each list item starts with
<li>HTML 5</li> the <li> tag. The list items in unordered
<li>PostgreSQL</li> lists are marked with bullets (small black
</ol></body></html> circles), by default.

Output : Example : 1

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Unordered
List</title>
</head>
<body>
<h3>HTML Unordered List</h3>
<ul>
<li>Basics of IT</li>
<li>HTML 5</li>
Example 2 : <li>PostgreSQL</li>
</ul></body></html>
<!DOCTYPE html>
<html>
Output :
<body>
<h3>List of Topics in reverse
sequence</h3>
<ol reversed>
<li>Basics of IT</li>
<li>HTML 5</li>
<li>PostgreSQL</li>
</ol></body></html>

14
 Attributes of <ul> tag
Attribute Values Description
Type = disc/ style="list-style-type:disc" Sets the list item marker to a
circle/square e.g bullet (default)
(use style (css) <ul style="list-style-type:disc;">
instead of type style="list-style-type:circle"
attribute in
e.g
HTML5.
<ul style="list-style-type:circle"> Sets the list item marker to a
Type attribute is circle
supported by style="list-style-type:square"
previous e.g
versions of <ul style="list-style-type:square"> Sets the list item marker to a
HTML) square
style="list-style-type:none"
e.g
The list items will not be
<ul style="list-style-type:none;">
marked

Note : HTML5 does not support bullets, <body>

circle and square value of type attribute <h3>Example of HTML definition
instead you use CSS style. List</h3>
<dl>
1.7 Definition list <dt><b>Web</b></dt>
To define a definition list <dl> tag is <dd>The part of the Internet that
used. You can create items in definition contains websites and web pages</dd>
<dt><b>HTML</b></dt>
list with the <dt> and <dd> tags. The <dt>
<dd>A markup language for creating
tag is used to define the term whereas
web pages</dd>
the <dd>tag is used to define the term’s <dt><b>CSS</b></dt>
definition. <dd>A technology to make HTML look
Type the following code better</dd>
</dl>
<!DOCTYPE html>
</body>
<html>
</html>
<head>
<title>definition List</title>
</head>

15
Output : Multi level list :
<!DOCTYPE html>
<html >
<head>
<title>nested list</title>
</head>
<body>
<h3> Multi-level list Nested List</h3>
Nested list <ul>
List within another list either order <li>Daily computing</li>
list or unordered list is called nested list. <li>Web design</li>
<ol>
Examples : Single level nested list
<li>html 5</li>
<!DOCTYPE html> <li>hyperlink</li>
<html > <li>Inserting Images</li>
<head> </ol>
<title>Example of HTML nested list</ <li>Javascript</li>
title> <ul style="list-style-type:circle">
</head> <li>conditional structure</li>
<body> <ul style="list-style-type:square">
<h3>HTML Nested List</h3> <li>If statment</li>
<ol> <li>If else statement</li>
<li>Introduction to IT</li> <li>case statement</li>
<li>Introduction to DBMS</li> </ul>
<ul style="list-style-type:circle"> <li>loop statement</li>
<li>Definition of DBMS</li> </ul>
<li>applications of DBMS</li> </ul>
<li>Advantages of DBMS</li> </body>
</ul> </html>
<li>Postgresql</li>
</ol></body></html> Output :

Output :

16
1.8 Inserting audio and video in Attributes of <audio> tag
HTML 5
Attribute Values Description
HTML5 new specifications enables The audio will
users to have a far more control over start playing as
audio on webpages. Autoplay -
soon as it is
HTML5 features include native audio ready
and video support without the need for The audio
Flash. HTML5 includes special elements controls should
(tags) allowing to include video and Controls - be displayed
audio and to define controls. (i.e. play/pause
Common Audio Formats : button etc.)
mp3 : An audio format from The audio will
start over
MPEG(Moving / Motion Pictures Experts
loop - again, every
Group).
time it is
aac : Advanced Audio Coding, standard finished
format on Iphone, youtube etc.
This Specifies
ogg : An Open container and free audio that the audio
format. muted -
output should
<Audio >Tag be muted
The <audio> element enables you to Specifies the
embed(or add) audio files on Webpages. src URL URL of the
audio file
Declare the audio tag, and specify
the source attribute with the Audio file Example :
location.
<!DOCTYPE html>
Syntax : <html>
<audio src="sample.mp3" type="audio/ <body>
mpeg" controls> <p>Audio Sample</p>
</audio> <audio controls>
<source src="test.mp3" type="audio/
Note: Autoplay, controls, muted are mp3">
without any values. Browsers have </audio>
their own policies. Autoplay attribute is </body></html>
supported by Microsoft Edge or Firfox,
Output :
when the permission from 'Privacy &
Security' panel is set as 'Allow Audio
Autoplay'.

17
In previous code <video>Tag
The controls attribute is used to add The HTML <video> tag is used to
audio controls such as play, pause, and embed video into your web page, it has
volume. several video sources.
The"source"element is used to specify There are three different formats that
the audio files which the browser may are commonly supported by web browsers
use. – .mp4, .Ogg and .WebM.
Adding audio with multiple sources : Syntax :
Multiple sources of audios are <video src="URL" controls></video>
specified so that if the browser is unable
to play the first source then it will Attributes of <video> tag :
automatically jump to the second source. Attribute Values Description
<source> tag Defines link to
Src URL
The <source> tag is used to specify video file
multiple media resources for media Specifies that
elements. It is used with <audio> and the video will
<video> both. autoplay - start playing as
soon as it is
Example :
ready
<!DOCTYPE html> Specifies that
<html> video controls
<body> should be
controls -
<p>Audio Sample</p> displayed (such
<audio controls autoplay> as a play/pause
<source src="test.mp3" button etc).
type="audio/mp3"> Sets the height
<source src="test.ogg" height Pixels of the video
type="audio/ogg"> player
<source src="test.opus"
Specifies that
type="audio/ogg">
the video will
</audio>
loop Value start over again,
</body>
every time it is
</html>
finished
Output : Specifies that
the audio output
muted -
of the video
should be muted

18
Attribute Values Description Output :
Specifies an
image to be
shown while the
video is
poster URL
downloading, or
until the user
hits the play
button
Specifies if and
1. auto how the author
2. metadata thinks the video
preload
3. none should be 1.9 Image map in HTML 5
loaded when the An image with multiple hyperlinks is
webpage loads called an image map.
Sets the width
Image map is used to connect links
width Pixels of the video
to different regions on the webpage. An
player
Image map is created by marking certain
The <source> tag is used to specify regions on an image clickable. These
multiple media resources for video as clickable regions are called as hotspots.
well as audio media elements. Image Maps are of two types; Client
Side and Server Side. We will confine
Example :
only to Client Side image map. The tags
<!DOCTYPE html> used to define client side image map are
<html> 1. <Img> : It is used to insert an image
<body> on a web page. To create a client side
<video width="320" height="240" image map usemap attribute of <img>
controls> is used with value which is preceded
<source src="movie.mp4" with a # symbol. The usemap attribute
type="video/mp4"> acts as a pointer which indicates that
<source src="movie.ogg" type="video/ the image is a client side image map.
ogg">
2. <map> : It has only one attribute
Your browser does not support the
name. It specifies name of the image
video tag.
used for client side image map. The
</video></body></html>
value of the name attribute is the
value specified in usemap attribute of
<img>.

19
3) <area> - It defines specific clickable Example : Image Map with element
regions. A given <map> element can <map> and <area>
contain multiple <area> element
within it.<area> is singular tag and
<!DOCTYPE HTML>
<map> is paired. <html>
Attributes of <area>: <head><title>image map</title>
</head>
Attribute Description <body>
<h1>An example of Image Map
Defines the URL to which </h1>
the clickable region <img src="Tulips.jpg"
Href
within the image-map usemap="#imagemap" alt="Image of
navigates. Tulip">
It can value rect, circle or <map name="imagemap">
Shape <area href="http://www.google.com"
poly.
shape="rect" coords="0,0,93,65"
Specifies co-ordinates of alt="google site"/>
the clickable regions on <area href=" great_wall_china.html"
the image-map. shape="circle" coords="118,140 ,40"
Rect- specifies alt=" great wall of china"/>
rectangular area with <area href="http://mahahsscboard.
four co-ordinates. in" shape="poly"coords
Circle-Defines a circular ="145,187,198,215,245,280,305"
region. It requires three alt="maharashtra stateboard site"/>
coords co-ordinates. </map>
Poly-Defines a polygon </body></html>
region with co-ordinates (In the above program great_wall_
specifying each point on china.html is a local file created on the
the polygon. It requires machine.)
four co-ordinates.
Default-Region covers
the entire image. No 1.10 INLINE FRAME IN HTML5
co-ordinates are required The <iframe> element creates an
inline frame. Inline frames are often used
Specifies extra
in online advertising, where the contents
information about
of the <iframe> is an advertisement
alt clickable area. It is the
alternative text to the from an external party. HTML5 allows
clickable region. the incorporation to be seamless (no
scrollbars, borders, margins etc).

20
Attributes of <iframe> : 1.11 Website Hosting
Attribute Values Description In this chapter we have seen how to
Specifies the create a website. But just creating of a
address of the website is not sufficient. One has to make
Src URL document to the website available on the Internet.
embed in the These web pages are to be stored in the
<iframe> web servers that are connected to the
Specifies the Internet, to be made available to others.
Height Pixel height of an
<iframe> What is web hosting?
Specifies the Web hosting is the service of providing
Width Pixels width of an storage space. The website is made
<iframe> available on the Internet with the help of
Specifies name of web hosting.
Text an <iframe>
Name What is Web Host?
Specifies the The companies that provides web
HTML_ HTML content of hosting services are called web hosts.
srcdoc
code the page to show Web hosts own and manage web servers.
in the <iframe> These web servers offer uninterrupted
Internet connectivity.
For example :
Types of Web hosting :
<!DOCTYPE html>
<html> Types of web hosting are
<body> 1. Shared hosting : It is cost effective. It
<h2>HTML Iframes</h2>
gives domain name to your website.
<p>This is the example of iframes.</p>
<iframe src="abc.html" height="200" 2. Free hosting : There are some hosting
width="300"></iframe> websites which provide you free
</body> hosting of the website for limited
</html> period of time.

Output : 3. Dedicated hosting : These are paid

hosting servers for large websites.

Note : You can buy your own web server

space, but it is the most expensive way
to publish your website. Though it is
very expensive, but it gives you a lot of
control over your website.

21
 For information purpose only
Prerequisites for Free Web Hosting : webpages including image, audio
1. Three to Four pages website having files etc) and click on "Logout"
first or Home Page named as index. 10. Your website is ready with the sub
html. domain as 000webhostapp.com
2. Computer with internet connection. e.g.it-xi-textbook.000webhostapp.
3. Gmail id with password. com
4. Need to toggle between two websites Acquire Domain Name :
https://www.000webhost.com/ and 1. Open the website https://my.freenom.
http://my.freenom.com com
5. Have to acquire free web space from 2. From Use social sign in Click on
web server named 000webhost.com. "sign in" Login with your gmail id
6. Have to acquire domain name for and give password
your website from my.freenom.com. 3. Click on "Services" --> Register a
7. Park the website domain address with New Domain
free server website i.e. with 000web- 4. Type your website name and click on
host.com. "check availability" button
Redirect the domain free server name 5. Choose any domain(e.g. .tk,.ml.cg
to the domain website i.e. with my. etc) and click on "Get it now" if avail-
freenom.com. able click on "CheckOut" button
Steps to Acquire free webspace : 6. Set the free period to host the website,
1. Open the website https:// click on "Continue" button
www.000webhost.com/ 7. From Review &Checkout page if the
2. Click on free signup Login with your Total Due is $0.00 then only select
email id and password terms and conditions
3. verification email will be send to your 8. Click on "Complete Order" button e.g.
email it-xi-textbook.tk
4. open your email and click on "verify 9. From Order Confirmation Screen
email" click on "Click here to go to Client
5. Click on "Get Started" Area" button
6. From My Website page click on Park the website domain :
"+Create New site" button Go to http://www.000webhost.com
7. Type your website name and any website perform the following steps first
password 1. Select "MyWebsite"--> "Manage
8. e.g. website name as :- it-xi-textbook Website" -->dashboard-->Tools-->
9. From File Manager box select "Up- Set Web Address
load" option to upload your web pag- 2. Click on "+Add domain" button then
es. Home page of the website must be select radio button Park domain and
named as "index.html" (Select all then click on "Next" button
22
3. Type the site URL acquired by you 2. "My Domains"-->"Manage Domain"
from Freenom.com e.g. it-xi-textbook. 3. From Domain details screen click on
tk. (Remember don’t give http or / or "Management Tools" -->
any special character) "Nameservers"
4. Then click on "Park domain" button. 4. Change the radio button to "Use
5. You may see domain status as custom nameservers (enter below)"
"pending" for sometime. Once it is and type the NameServer1 as
through from the 000webhost side you "NS01.000WEBHOST.COM"and
can see the domain status as "parked". NameServer2 as
6. Configure your domain's DNS "NS02.000WEBHOST.COM"
provider to point to the 5. Click on "Change Nameservers"
ns01.000webhost.com and button
ns02.000webhost.com as your 6. Logout from the my.freenom.com
nameservers. 7. Type the website address in the
Redirect the domain to free server : browser's address bar to view your
Now follow the final steps given website
below through my.freenom.com website 8. The website can also be seen from
1. Sign in to my.freenom.com click on your mobile. Hosting is done.
"Services"-->
Summary

Html5 has introduced new types in <Input> like number, date, Tel, email, search,
URL, range, month, week, color.
Few attributes of <Input> can be used for validation purpose.
<meta> is used by search engines to search information that is provided with the
webpage. It is inserted in the <head>
CSS- Cascading Style Sheet describes how HTML elements are to be displayed
on screen, paper, or in other media.
CSS syntax Selector{Property1: value1; Property2: value2}
The <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.
An unordered list created using the <ul> tag, and each list item starts with the <li>
tag. The list items in unordered lists are marked with bullets (small black circles),
by default.
To insert Audio and Video in a web page, <audio> and <video> are used which
specifies the source with the file location.
An image with multiple hyperlinks is called an image map. The usemap attribute
acts as a pointer which indicates that the image is a client side image map.
The <iframe> element creates an inline frame.

23
 Exercise

Q 1. Fill in the blanks. Q2. State whether the following

statement is True or False.
1. The………………element is a
staring element in an HTML, it 1. HTML is an Object Oriented
indicates that document type Programming Language.
definition being used by the 2. Charset is used for character
document. encoding declaration.
2. The……………. is a tag in html 3. An unordered list can be
that describe some aspects of numerical or alphabetical.
contents of a webpage.
4. Multilevel list can be created in
3. The <ol> tag defines HTML 5.
an……………… 5. Srccode specifies the HTML
4. An unordered list is created using content of the page to show in the
the…………….. tag. <iframe>
6. The ‘controls’ attribute is not
5. T h e … … … … … … … e l e m e n t
used to add play, pause, and
creates an inline frame.
volume.
6. …………….tag is used to specify 7. .cs is the extension of CSS file
video on an HTML document.
Q.3. Choose Single correct answer
7. If a web developer wants to add
from the given options.
the description to an image he
must use ……… attribute of 1. ………………….element used
<img> tag. to create a linking image.
8. The……………… property is a) <img> b) <td>
used to set position for an element. c) <map> d) <usemap>
9. The float property defines 2. The ……………tag is used to
the………………..of content. embed audio files on Webpages.
10. ………………is used with a) <sound> b) <audio>
elements that overlap with each c) <video> d) <embeded>
other.

24
 3. A programmer wants to define 4. Client-side image map can be
range for age between 18 to 50, created using two elements
he will use a form with following …………… and………...
appropriate control. a) <area> b) <image>
a) number b) compare c) <usemap> d) <map>
c) range d) Textboxes e) <server>
4. ……….character is used to Q.5. Choose Three correct answers
create id in CSS. from the given options.
a) % b) $
1. Attributes of <area> tag
c) @ d) # is……………………..
a) href b) src
Q 4. Choose Two correct answers from c) coords d) data
the given options. e) alt f) usemap
1. List within another list 2. Attributes used with iframe
either………list or………list is are………………..
called nested list.
a) srcdoc b) name
a) multilevel b) order
c) att d) src
c) unordered d) general
e) href f) loop
e) cascading
3. Following are the Form
2. Image maps are of two types
controls……………
……...........and …………..........
a) Network side a) email b) search
c) label d) video
b) Client Side
e) tel f) audio
c) Computer side
4. Attributes used with <audio>
d) Server Side tag…………………………..
e) n-compting
a) autoplay b) href
3. A CSS rule set contains………..
c) controls d) cntrl
and……………………...............
e) loop f) bgsound
a) Set b) selector
c) post
d) declaration block e) < >

25
 5. CSS types are …………………, 1. The background colour of the
………...... and………………… company name should be in
green.
a) internal b) external
2. The text colour of the
c) control d) inline
company name should be red.
e) loop f) style
3. The heading should be large
with font ''comic sans ms''
6. Positioning types in CSS 4. The description of the
are…………………… company should be displayed
in blue color in a paragraph.
a) Static b) fixed
c) absolute d)position 2) Write Html5 code with CSS as
follows-
e) dynamic f) nested
1. To create form to accept
7. Types of floating properties
name,age, email address,
are………,…………, …………..
from the user.
a) left b) zero 2. Create a submit button to
c) right d) all send the data.
e) none f) dock 3. The heading of the form
should have a background
colour and a different font
Q. 6. Match the pair style.
A B
a) Client side 3) Write Html5 code with CSS as
1) <ul>
image map follows-
2) usemap b) CSS Property 1. Create ordered list with names
c) bulleted list of tourist Cities.
3) color
d) Image as a 2. Create unordered list with
4) <Img>
submit tourist places of those cities.
button 3. Divide the list into two
5) <Input type =image> e) inserts an sections left and right by
image using CSS.
Q.7. Programs.

1) Write a program using html with

following CSS specification-

26
 2 Introduction to SEO (Search Engine Optimization)

webpage. This chapter introduces few

Let us learn
ways at the beginners level.
Definition of SEO
Types of SEO Do you know?
Techniques of SEO Search Engine is an online program or
software that helps users to search for
SEO-Page content
information on world wide web.
SEO- Keywords Examples of Search Engine include
SEO-Social Book marking Google, Yahoo and Bing
SEO-SMO
2.2 Types of SEO - There are two types
2.1 Introduction of optimization
SEO stands for Search Engine On-Page SEO : It includes Provision
Optimization. SEO is a technique used of good content, good keywords
for: designing and developing a website selection, putting keywords on correct
to rank high in search engine results. It is places, giving appropriate title to
a subset of search engine marketing. Thus every page etc.
SEO is useful in increasing the number of
Off-Page SEO : It includes link
visitors to a website.
building, increasing link popularity
There are many strategies and by submitting open directories, search
techniques adopted to optimize the engines, link exchange etc.

On-Page Off-Page

On-Page SEO is concerned Off-Page SEO is concerned with

with information that is  Website-Website relationship.
displayed to the end user,
SEO
 Do other websites refer to you,
such as text, images and do you refer to others?
website navigation.  How good is your network?

Fig 2.1: Types of SEO

27
2.3 Techniques of SEO Black Hat SEO : Techniques that
These are classified into two broad search engines do not approve. The
categories: techniques used for optimizing the
White Hat SEO : Techniques that website are manipulative.
search engines recommends as apart
of good design.
Refer the following strategies and differences in short about Black Hat and
White Hat techniques–

WHITE BLACK
HAT HAT
WHITE HAT STRATEGIES BLACK HAT STRATEGIES

Relevant content Duplicate content

Well-labeled images Invisible text and stuffed keyword
Relevant links and refernces Cloking or re-directing the user to
Complete sentences with good spelling another site or page
and grammar Links from sites with non-relveant
Standard-compliant HTML content
Unique and relevant page titles

2.4 Optimizing Website

There are various sections of a website It is recommended to use
which can be optimised for better SEO. <TITLE> : Title is the first
Some of the ways to optimize the webpage thing that user notices in search
for SEO result list while using google
for searching. Contents should
1. SEO : Page structure optimization
be up to 60 characters (spaces
Html programs should start with included)
<!doctype html>.
Meta-description Tag : While
If it is singular tag eg<img> it creating a web page, Meta
should be self enclosed like this- description should be used to
<img /> boost your On-Page SEO.
Order of tags should be proper. Meta Description should be
Most of the time recently opened between 70 and 160 characters
tag will be closed first. (spaces included)

28
 Heading Tags : The page Example 2 :
should include proper heading
<!doctype html>
tags from <h1> to <h6>
<html>
wherever required.
<head><title> Meta tag and Image tag
Image Tags with ALT </title>
attribute : The alt attribute <meta name = "description" content =
gives information about the "statue of liberty">
image, so even if the image <meta name = "keywords" content =
does not download, it can make "alt, optimization of image">
the viewers understand the <meta name = "image" content =
image related information. "statue of liberty">
Examples of optimized Webpages /head><body>
<h1> Let us understand Meta and
Example 1 : Image for optimization </h1>
<p>
<!doctype html>
<img src ="statue of liberty.
<html>
jpg"alt="Statue of liberty image"/>
<head><title> Page structure with
</p>
appropriate order of opening and
closing tags</title> </body></html>
</head>
<body> Note : In the above example meta tag
<h1> Let us understand SEO</h1> is used with important and valid
<p>Webpage optimization helps for keywords related to that image, like the
higher ranking in search engines. image source as statue of liberty and
<b>There are number of ways to from the view of optimisation of <img>
opimize the pages.<i>Even the Social tag.
media plays an important role!!!</i>
</b>
</p> 2. SEO Keywords
</body></html> SEO keywords are the important
words and phrases related to the developed
Note : In the above example check website content. A list of keywords. Need
the ordering of <p>,<b>and<i>. The to be carefully choosen to optimize the
innermost tag ends first, followed by search. Keyword Research and Analysis
the outermost tag. The other basic tags is an important part of the Search Engine
also follow a proper ordering as per the Optimization (SEO) as well as"Search
HTML structure. Engine Marketing".

29
 For"Search Engine Marketing”, one links to the created website it builds
can pay for certain keywords. familiarity and trust about the website.
There are various online Keyword 5. SEO-Backlinks
Planner tools (such as Google AdWords
Backlinks are links on one website
Keyword Planner) to shortlist keywords.
that, when clicked, take the user to
This is more useful to compare the cost of another site. Backlinks are especially
various keywords, if the website designer valuable for SEO because they contribute
opts for Paid Search Engine Marketing. to the overall strength and value of the
content. They also represent a "vote of
3. SEO Social Bookmarking
confidence" from one site to another. In
Social bookmarking is a powerful short, backlinks to your website are a
tool in promoting a website. It is very signal to search engines that others are
useful for Off-Page SEO optimization. interested to know about the contents
form your website.
Did you know?
6. Other factors for SEO
Modern browsers support bookmark
features. For example, you can save the Speed of the website : While creating
bookmark in the browser by clicking the a website, attention is given on the
design, content and as many visuals
star icon next to the URL in Google
as possible. However, all But this can
Chrome.
slow down the website and obstruct
Bookmarks are website links that are usability.
stored for future references. They are very Mobile friendly : Website’s mobile
useful specially when Web pages with friendliness has become a ranking
long URLs are not easy to remember. factor for Google. Hence, it is very
Bookmarking service allows you to save, important to ensure that the created
organize and share bookmarks with other website is mobile friendly 'for
users. External links are the important maximum' exposure and to improve
SEO factors to rank a website higher in the websites ranking.
the search engine. With Social
bookmarking, you can quickly create Do you know?
high-quality backlinks. In Google chrome you can check if
your site is mobile friendly by
4. SEO-Social Media Optimization
right-clicking anywhere on the page
(SMO)
and clicking"Inspect. "There is an
It deals with enhancing the website's icon at the left of "Elements "called"
ranking, using interactive communities Toggle device toolbar "which changes
like facebook, twitter, blogs, forums and the page to mobile mode when clicked.
so on. When these communities have

30
 Creating Robots.txt : This file Eg-Seomator, SEOptimer are few free
tells search engine which pages you SEO audit tools available on net.
want to exclude from indexing. For SEOptimer is a free SEO Audit Tool
example, if you do not want a certain that will perform a detailed SEO Analysis.
page or image being indexed, then It provides clear and actionable
you can restrict that page from being recommendations that can be taken to
indexed. improve your online presence.
2.5 SEO Audit The URL are as follows-
An SEO Audit helps to find out https://seomator.com/free-seo-audit-tool
what could be done to improve ranking https://www.seoptimer.com/
on search engines, so that consumers The following figures display the SEO
could find the website with greater analysis using SEOptimer website
ease. It analyses the websites health.

Fig 2.2 : Search bar in SEO Audit tool

Fig 2.3 : Homepage of SEOptimer

31
 Fig 2.4 : Overall Analysis using SEOptimer

Fig 2.5 : Detailed Analysis of SEOptimer

32
Audit Results of SEOPtimizer will have Header content recommendations
following details  Title and Meta description
Overall Ranking of the site Body Content
Recommendations for improvements  Header Tags
Search Engine Optimization  Body content recommendations
Usability of the website  Keyword Consistency
Performance of website  Amount of content in the pages
Social links Links
 Connected social accounts  Number of backlinks
Security parameters  Broken links
 SSL Enabled  Friendly links
 HTTPS Redirect  On page links
 Email Privacy Technology list which is used in the
website

Did you know?

Crawling is a process by which search engines crawler/ spiders/bots scan a website
and collect details about each page: titles, images, keywords, other linked pages
etc.
Organic search results are the listings on a search engine results page (SERP)
that appear because of factors such as relevance to the search term and valid
search engine optimization (SEO) efforts rather than because of search engine
marketing (SEM) or trickery.

Summary

SEO stands for Search Engine optimization .

Apart from the Content of the website being the king of Optimization there are
many other factors to improve the ranking .
Keywords used in <title>,<meta> and heading levels play key role. Use of proper
order of tags and structure, is equally important.
<img> with alt attribute also contributes to Optimization .
Social media links and backlinks are also major factors to optimise the webpage.
Apart from this mobile friendliness, speed also rank the websites higher.
A SEO Audit tools like SEOptimer and SEOmator are the tools to determine the
health of the website.

33
 Exercise
Q.1 Fill in the blank. Q.2. Choose corect answers from the
following. (2 correct)
1. The full form of SEO is ______ .
1. The page content optimization
2. _____ are links on one website can be done by using keywords
that, when clicked, take the user in
to another site. a)<font> b) <title>
3. One of the optimization factor to c) <hr> d> <meta>
improve images is by using e) <input>
______ attribute.
2. Other factors to rank the website
4. An ______ helps to find out what higher are
you can be done to improve
a) Desktop friendly
ranking on search engines, so
that consumers can find the b) Speed of the website
website with greater ease. c) Creating robots. txt
d) No backlinks
5. The _______ files tells search
engine which pages you want to e) No external links.
exclude from indexing.
Q.3. Answer briefly.
Q.2. Match the following. 1. Define SEO. State types of SEO.
A B 2. Which are the different SEO
techniques?
1. Image optimization a) meta tag
3. Explain in short White Hat
2. Links to Twittter, b) SEO technique
technique.
facebook
4. Explain in short Black hat
3. description about c) alt attribute technique.
author 5. Explain in short SEO Keyword
4. White hat Strategy d) Social media search.
optimization 6. Explain any two Page content
optimization points.
7. Explain how could you optimize
images.

34
 3 Advanced Javascript

Let us learn • No need of special software to run

JavaScript programs
Features of JavaScript, difference • JavaScript is object oriented scripting
between client side scripting and language and it supports event based
server side scripting. programming facility. It is case
Looping structures. sensitive language.
DOM Objects and window object in • JavaScript helps the browser to
JavaScript. perform input validation without
Inbuilt objects such String, Math, wasting the user's time by the Web
Array, Date and Number with its server access.
properties and Methods. • It can handle date and time very
Simple JavaScript programs to do effectively.
validations and user interaction.
• Most of the JavaScript control
statements syntax is same as syntax
3.1 Introduction of control statements in other
programming languages.
There is variety of scripting languages
used to develop dynamic websites. • An important part of JavaScript is the
JavaScript is an interpreted scripting ability to create new functions within
language. An interpreted language is a scripts. Declare a function in
type of programming language that JavaScript using function keyword.
executes its instructions directly and • Software that can run on any hardware
freely without compiling machine platform (PC, Mac, SunSparc etc.) or
language instructions in precious software platform (Windows, Linux,
program. Program is a set of instructions Mac OS etc.) is called as platform
used to produce various kinds of outputs. independent software. JavaScript is
JavaScript was initially created to "make platform independent scripting
webpages alive". The programs in this language. Any JavaScript-enabled
language are called scripts. browser can understand and
3.1.1 Features of JavaScript : interpreted JavaScript code. Due to
different features, JavaScript is known
• JavaScript is light weight scripting
as universal client side scripting
language because it does not support
language.
all features of object oriented
programming languages.
35
There are two types of scripting : Server validation purpose and effectively
side scripting and Client side scripting. minimize the load to the server.
Client-side Scripting : In this type, the 5. Special software (web server
script resides on client computer (browser) software) is required to execute
and that can run on the client. Basically, server-side script, whereas client side
these types of scripts are placed inside an scripts requires web browser as an
HTML document. interface.
Server-side Scripting : In this type, the Do you know?
script resides on web server. To execute
There are some popular framework /
the script it must be activated by client libraries.
then it is executed on web server.
 Angular JS : It is a java script based
3.1.2 Difference between Server side open source frontend web framework
scripting and client side scripting devloped mainly for single page
application.
1. Server-side scripting is used at the
backend, where the source code is not  Vue JS : It is javascript based frame
visible or hidden at the client side work for building interactive user
interface (UI). It can be easly
(browser). On the other hand, client-
integrated with other projects and
side scripting is used at the frontend
libraries.
which users can see from the browser.
 React : It consists of javascript
So Server-side scripting is more secure
libraries for building UI for single
than client-side scripting.
page application and mobile
2. When a server-side script is processed application.
it communicates to the server. As
against, client-side scripting does not 3.2 Switch case and Looping Structures
need any server interaction.
Previous year we have learnt different
3. The client-side scripting language basic syntax of javascript such as variable
involves languages such as HTML5, declaration, if structure, function etc. Let
JavaScript etc. In contrast, us learn some extra features:
programming languages such as PHP,
ASP.net, Ruby, ColdFusion, Python, 3.2.1 Switch Case statement
C# etc. are server side scripting JavaScript has a built–in multiway
languages. decision statement known as Switch. The
4. Server-side scripting is useful in switch statement test the value of given
customizing the web pages and expression against a list of case values
implements the dynamic changes in and when match is found, a block of
the websites. Conversely, the client- statement associated with that case is
side scripts are generally used for executed. There should not be duplicity
36
between the cases. The value for the case Output :
must be similar data type as the variable
in switch. The default statement is not
mandatory.
Syntax :
switch(expression)
{
case value1:
statement block 1;
break; Note : 'language' attribute of <Script>
case value2: is replaced by 'type' attribute in all the
statement block 2; programs as it is standardised.
break;
………….... 3.2.2 Looping Statement
case value n:
While creating programming logic,
statement block n;
break; we need to execute some statements
default: repeatedly. Iteration refers to the
statement block ; execution of statement or a group of
} statements of code for a fixed number of
times or till the condition is satisfied. The
Program : condition should be boolean condition.
<!DOCTYPE html> Some commonly used JavaScript looping
<head><title>Javascript Program statements are:
</title></head>
<body> 1. for…….loop
<h1> use of switch case </h1> This loop executes statements as
<script type="text/javascript"> long as condition becomes true,
var day=6; control comes out from the loop
switch(day) when condition becomes false.
{
Benefit of for-loop is that it combines
case 1: alert("Monday"); break;
case 2: alert("Tuesday"); break; initialization, condition and loop
case 3: alert("Wednesday"); break; iteration (increment or decrement) in
case 4:alert("Thursday"); break; single statement.
case 5: alert("Friday"); break;
case 6: alert("Saturday"); break; Syntax :
case 7: alert("Sunday"); break;
default: alert("Invalid day"); for(initialization;condition;iteration)
} {
</script></body></html> statement block;
}
37
 Initialization is assigning initial value condition always true then loop would be
to the variable, which executes only once, executed infinitely so after some execution
and then the condition is checked. Loop condition becomes false.
will execute statements in statement
block till the condition is true. When Example :
condition becomes false control is
transferred out of the loop and it will var i=1
execute remaining program. Iteration while(i<=5)
means increment or decrement value of a {
running variable. document.writeln(i);
i=i+1;
Example :
Output:
}
for(i=1;i<=5;i++)
1
{ 2
document.writeln(i); 3 Program for loop
} 4
5
<!DOCTYPE html>
for(i=5;i>=1;i--) Output: <head><title>Table-I</title>
5
{ 4
<script type="text/javascript">
document.writeln(i); 3 function display()
} 2
1 {
var i,a;
2. While…..loop a=form1.t1.value
for(i=1;i<=10;i++)
This loop executes statements as long
{
as the condition is true. As soon as
document.write(a*i + "<br/>");
condition becomes false control
}
comes out of the loop.
}
Syntax: </script></head>
initialization; <body>
while(condition) <form name="form1">
{ Enter number to display table:-
statement block;
} <input type="text" name="t1">
<input type="button" value=" Display
The statement within the loop may be Table" onClick="display()">
a single line or a block of statements. If </body>
the statement within loop is a single line </html>
then the curly parenthesis is optional.
Here loop will be executed repeatedly as
long as the condition is true. Note that if

38
Output : Break and continue statements
Break statement is used to jump out
of loop. It is used to make an early exit
from a loop. When keyword break is
encountered inside the loop, control
automatically passes to the next statement
after the loop.
Do it yourself Sometimes in looping it may be
necessary to skip statement block and
Find syntax of do…..while() loop and
take the control at the beginning for next
difference between while() and do...
iteration. This is done by using ‘continue’
while() loop.
statement in JavaScript.

Program :
<!DOCTYPE html>
<html><head><title>Prime number</title>
<script type="text/javascript">
function display()
{
var a,ans;
a=parseInt(form1.t1.value);
ans=1;
for(i=2;i<a;i++)
{
if(a%i==0)
{
ans=0;
break;
}
}
if(ans==1)
alert("Number is prime");
else
alert("Number is not prime");
}
</script></head>
<body>
<h1 align="center"> Program to check number is prime or not </h1>
<form name="form1" style="text-align:center">
Enter your Number (Greater than one):-<input type="text" name="t1"> <br>
<input type="button" value="check Prime number" onClick="display()">
</body></html>
39
Output : Properties and methods of object's are
accessed with '.' operator. JavaScript
supports 2 types of objects built-in objects
and user defined objects.
1. Built in objects such as Math, String,
Array, Date etc.
2. JavaScript gives facility to create user
defined objects as per user
requirements. The ‘new’ keyword is
used to create new object in JavaScript.
e.g.
d= new Date();
3.3 Objects in JavaScript // ‘d’ is new instance created for Date object.
JavaScript is an object based scripting
language. Almost everything is an object DOM (Document Object Model) :
in JavaScript. A JavaScript object is an When HTML document is loaded into
entity having state (properties) and a web browser, it becomes a document
behavior (methods). An object can group object. It defines logical structure of
data together with functions needed to document. The way in which HTML
manipulate it. Look around you, you will document content is accessed and
find many examples of real world objects. modified is called as Document Object
Such as table, board, television, bicycle, Model. It is programming interface for
shop, bus, car, monitor etc. All these HTML and XML (Extensible Markup
tangible things are known as objects. Language) documents.
Take an example of car object. It has The standardization of DOM was
properties like name, model, weight, founded by W3C (World Wide Web
color etc. and methods like start, stop, Consortium) which works for
brake etc. All cars have same properties standardization of web technologies.
but contain different values from car to According to W3C :
car. All cars have same methods but
perform differently. "The W3C Document Object Model
Object Properties Methods (DOM) is a platform and language-
car.name=Ferrari car.start()
neutral interface that allows programs
car.model=F430 car.drive() and scripts to dynamically access and
car update the content, structure, and style of
car. weight=1517kg car.brake()
car.color=red car.stop() a document."

40
Following diagram shows hierarchy of The innerHTML Property
DOM object: The innerHTML property is useful for
getting html element and changing its
content. The innerHTML property can be
used to get or change any HTML element,
including <html> and <body>.

<!DOCTYPE html>
<html>
Fig. 3.1 Document Object Model
<head>
Following are some of the predefined <script type="text/javascript">
methods and properties for DOM object.
function changeText3()
Property Description
{
head Returns the <head>
element of the var style="<h2 style= 'color:green'>";
document var text="Welcome to the HTML5 and
title Sets or returns title Javascript";
of the document.
URL Returns full URL var closestyle="</h2>";
of the HTML document.getElementById('para').
document. innerHTML =style+text+closestyle;
body, img Returns <body>,
<img> elements }
respectively. </script></head>
Method Description <body style="background-
write() Writes HTML
expressions or color:cyan">
JavaScript code to <h1 align="center">
a document.
<p id="para">Welcome to the site</p>
writeln() Same as write(),
but adds a newline <input type="button"onclick="
character after "changeText3()" value="click this
each statement. button to change above text">
getElementById() There are many
ways of accessing </h1>
form elements, of </body>
which the easiest is
by </html>
getElementById()
method. In which
id property is used
to find an element.
41
Output :

Before button click After button click

Window Object :
At the very top of the object hierarchy is the window object. Window object is
parent object of all other objects. It represents an open window in a browser. An object
of window is created automatically by the browser. Window object represents an open
window in a browser. An object of window is created automatically by the browser.
Following table shows some of the methods and properties for window object.
Property Description
name Sets or returns the name of a window.
location Returns the Location object for the window.
document Returns the Document object for the window.
closed Returns a Boolean value indicating whether a window has been
closed or not.
Method Description
alert() Displays the alert box containing message with ok button.
confirm() Displays the confirm dialog box containing message with ok
and cancel button.
prompt() Displays a dialog box to get input from the user.
open() Opens the new window.

close() Closes the current window.

blur() Removes focus from the current window.
focus() Sets focus to the current window.
print() Prints the content of current window.
setTimeout() Calls a function or evaluates an expression after a specified
number of milliseconds.

42
Program : Program :
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title >Window Opener and Closer
<script type="text/javascript">
</title>
function sampleFunction()
<script type="text/javascript"> {
function makeNewWindow() window.setTimeout(next(), 4000);
{ }
var newwin=window.open(); function next()
newwin.document.write("<h1>This is {
new window</h1>"); alert("4 seconds have passed");
newwin.document.body.style. }
backgroundColor="skyblue"; </script></head>
} <body style="background-color:cyan">
</script></head> <h1 align="center">
<body><form> Click button and wait for message
<input type="button" value="Create </h1>
New Window" <input type="button" value="Timeout
onClick="makeNewWindow()"> function"
</form></body> onClick="sampleFunction()">
</html> </body>
</html>
Output : Output :

43
 Do it yourself
1. Write JavaScript program to display status"Hi this is status
property"in status bar of window.
2. Write JavaScript program to set three different background color to
webpage on onClick, onMousemove and onMouseover events of button
object.

3.4 JavaScript Event

Events are actions done by the user or an application that occurs on the webpage.
In previous year we studied different keyboard events (onKeypress, onKeydown,
onkeyup) and mouse events (onClick, onMousemove, onMouseout, onMouseover).
Similarly there are some more events used with form objects.
Input and other object Events:

Event handler Description

onblur It occurs when user leaves field or losses focus of an element.

onfocus It occurs when an element gets focus.
onchange It occurs when user changes content of an element or selects
dropdown value. E.g. for textbox, password, select box, textarea
etc.
onselect It occurs when user selects some text of an element.
onsubmit It occurs when user clicks submit button.
onreset It occurs when user clicks reset button.
onload It occurs when page/image has been loaded.
onunload It occurs when document/page has been unloaded or closes.

3.5 JavaScript Built-in Objects

JavaScript has several built-in or core language objects. These built-in objects are
available regardless of window content and operates independently of whatever page
browser has loaded. These objects provide different properties and methods that are
useful while creating live web pages.

44
String Object :
String is used to store zero or more characters of text within single or double quotes.
String object is used to store and manipulate text.
Property Description
length Returns the number of characters in a string
Method Description
charAt() Returns the character at the specified position (in Number).
indexOf() Returns the index of the first occurence of specified character in
given string, or -1 if it never occurs, so with that index you can
determine if the string contains the specified character.
lastIndexOf() Returns the index of the last occurence of specified character in
given string.
substr() Returns the characters you specified: (14,7) returns 7 characters,
from the 14th character.
substring() Returns the characters you specified: (7,14) returns all characters
between the 7th and the 14th.
trim() The trim() method removes whitespace from both sides of a
string
toLowerCase() Converts a string to lower case
toUpperCase() Converts a string to upper case
Example :
var str="Information Technology";
document.write ("length of string is :-" + str.length);
document.write ("Substring is :-" + str.substr (12,10));
Output :
Length of string is :-22
Substring is :- Technology
Math Object :
The built-in Math object includes mathematical constants and functions. You do
not need to create the Math object before using it. Following table contains list of math
object methods: e.g. var x=56.899; alert(Math.ceil(x));
Method Description
abs(x) Returns the absolute value of a number.
cbrt(x) Returns the cube root of a number.
Returns the next integer greater than or equal to a given number
ceil(x)
(rounding up).
45
Method Description
Returns the next integer less than or equal to a given number (rounding
floor(x)
down).
max(x, y, ...) Returns the highest-valued number in a list of numbers.
min(x, y, ...) Returns the lowest-valued number in a list of numbers.
pow(x, y) Returns the base to the exponent power, that is, xy.
random(x) Returns a random number between 0 and 1 (including 0, but not 1).
sqrt(x) Returns the square root of a number.

Do it yourself
1. Write event driven JavaScript program to take number as user input and find its
square root and cube root.

Date Object :
The date object is used to create date and time values. It is created using new
keyword. There are different ways to create new date object.
var currentdate=new Date();
var currentdate=new Date(milliseconds);
var currentdate=new Date(dateString);
var currentdate=new Date(year, month, day, hours, minute, seconds, milliseconds);
Method Description
getDate() Returns the day of the month (from 1-31)
getDay() Returns the day of the week (from 0-6)
getFullYear() Returns the year (four digits).
getHours() Returns the hour (from 0-23).
getMinutes() Returns the minutes (from 0-59).
getMonth() Returns the month (from 0-11).
getSeconds() Returns the seconds (from 0-59).
getTime() Returns the number of milliseconds since midnight Jan 1, 1970.
now() Returns the number of milliseconds since midnight Jan 1, 1970.
setDate() Sets the day of the month of a date object.
setFullYear() Sets the full year of a date object.
setHours() Sets the hours of a date object.
setMinutes() Set the minutes of a date object.
setMonth() Sets the month of a date object.
setSeconds() Sets the seconds of a date object.
setTime() Sets a date to a specified number of milliseconds after/before Jan 1,
1970.
46
Number Object :
It helps us to work with numbers. Primitive values (like 34 or 3.14) cannot have
properties and methods, but with JavaScript it is available with primitive values.
Property Description
MIN_VALUE Returns the largest minimum value.
MAX_VALUE Returns the largest maximum value.
NaN It represents ‘Not a Number’ value.
Method Description
isInteger() It determines whether the given value is a Integer
parseFloat() It converts the given string into a floating point number.
parseInt() It converts the given string into a integer number.
isFixed() It returns the string that represents a number with exact digits
after a decimal point.
Array Object :
An array is an object that can store a collection of items. JavaScript arrays are
used to store multiple values in single variable. An array is a special variable which
can hold more than one value at a time. Arrays become really useful when you need
to store large amounts of data of the same type. You can create an array in JavaScript
as given below.
var fruits=["Mango","Apple","Orange","Grapes"];
OR
var fruits=new Array("Mango","Apple","Orange","Grapes");
You can access and set the items in an array by referring to its indexnumber and
the index of the first element of an array is zero. arrayname[0] is the first element,
arrayname[1] is second element and so on.
e.g. var fruitname=fruits[0];
document.getElementById("demo").inner HTML=fruits[1];

Property Description
index The property represents the zero-based index of the match in the string
length Reflect number of elements in array.
Method Description
concat() Joins two or more arrays, and returns a copy of the joined arrays
copyWithin() Copies array elements within the array, to and from specied positions.

47
Method Description
Returns the value of the first element in an array that satisfies a test
find() in testing.
forEach() Calls a function for each array element.
indexOf() Search the array for an element and returns its position.
isArray() Checks whether an object is an array.
pop() Removes the last element of an array, and returns that element.
push() Adds new elements to the end of an array, and returns the new length.
reverse() Reverses the order of the elements in an array.
sort() Sorts the elements of an array.
Program Using array object :

<!DOCTYPE html>
<html><head>
<title>use of array methods</title>
</head>
<body style="color:blue;background-color:pink;font-size:30px">
<script type="text/javascript">
var city = ['Pune', 'Kolhapur', 'Mumbai', 'Nashik', 'Latur', 'Nagpur'];
document.write("Original array elements are <br>");
document.write(city);
document.write("<br><br>Copy elements at end to the beginning <br>");
document.write(city.copyWithin(0, 3));
city = ['Pune', 'Kolhapur', 'Mumbai', 'Nashik', 'Latur', 'Nagpur'];
document.write("<br><br>Copy elements at the beginning to the end<br>");
document.write(city.copyWithin(3, 0));
city = ['Pune', 'Kolhapur', 'Mumbai', 'Nashik', 'Latur', 'Nagpur'];
document.write("<br><br>Copy first 3 elements to middle<br>");
document.write(city.copyWithin(2, 0, 3));
city = ['Pune', 'Kolhapur', 'Mumbai', 'Nashik', 'Latur', 'Nagpur'];
document.write("<br><br>Adding an element to an array<br>");
document.write(city.push('Kokan'));
document.write(city);
document.write("<br><br>Reversing an array element <br>");
document.write(city.reverse());
</script> </body></html>

48
Output :

Validation program in JavaScript :

<!DOCTYPE html>
<html><head><title>Pincode Validation</title></head>
<body style="color:blue;background-color:cyan"><form name="form1">
<h1 align="center">
Enter Pincode value:-<input type="text" name="t1"><br><br>
<input type="button" value="Submit value" onClick="validate()"></h1>
<script type="text/javascript">
function validate()
{
var pincode; pincode=form1.t1.value;
if(pincode.length==0)
{
alert("please check, enter value");
form1.t1.focus();
}
else if(Number.isInteger(pincode))
{
alert("please, enter integer number only");
form1.t1.focus();
}
else if(pincode.length<6||pincode.length>8)
{
alert("pincode length range between 6 to 8");
form1.t1.focus(); }
else
alert("Pincode is accepted");
}
</script> </body></html>

49
Note : islnteger() is supported by version Mozilla Firefox 16 and higher.

Do it yourself
1. Find more Math object methods useful for trigonometric functions.
2. Write JavaScript Program to create simple calculator using JavaScript Math
object.

Summary

JavaScript is light weight scripting language. It is platform independent language.

There are two types of scripts; client side script and server side scripts. Client side
scripts reside on client machine and server side script resides on web server.
JavaScript provide ‘switch…case’ as multi way decision statement.
For....loop, while…loop and do…while are commonly used looping structures in
JavaScript.
DOM (Document Object Model) is a programming interface for HTML and XML
documents. It defines logical structure of document.
Window object is parent object of all other objects hence its methods can be used
without specifying it.
JavaScript is event based language support objects events such as onBlur, onFocus,
onChange, onSelect, onSubmit, onLoad, onUnload, onResize etc.
JavaScript supports built-In objects such as Date, String, Math, Number and array
etc. These objects contain number of properties and methods that are useful while
creating interacting web pages.

50
 Exercise
Q.1 Fill in the blanks. c) Both a and b
1. -------------script resides on server d) None of the above
computer. 2. Select correct method name of
2. --------- statement is used to jump String object---------------------.
out of loop. a) charAt() b) characterAt()
3. ------------------ defines logical c) valueAt() d) lengthAt()
structure of document. 3. ---------------- method displays
4. ---------------- property of window message box with Ok and Cancel
object returns Boolean value in- button.
dicating whether window is a) Confirm() b) Alert()
closed or not. c) both a and b d) None of these
5. -------------------- event occurs 4. We can declare all types of vari-
when an element looses its focus. ables using keyword ------------.
Q.2. State whether given statement is a) var b) dim
true or false. c) variable d) declare
1. JavaScript is case sensitive 5. Trace ouput of following
language. JavaScript code.
2. Math.ceil() function is used to var str="Information
return the nearest integer less Technology";
than or equal to given number. document.write
3. MAX_VALUE property of (str. lastIndexOf("o");
number object returns smallest
a) 18 b) 19
possible value.
c) 20 d) 21
4. getDay() method of Date object
returns month in number. Q.4. Multiple choice questions. Select
two correct answer.
5. onKeydown event occurs when
user moves mouse pointer. 1. Valid two methods of Date object
are ---------------- and -------------.
Q.3. Multiple choice questions. Select
a) setTime()
one correct answer.
` b) getValidTime()
1. JavaScript is ----------------------
language. c) getTime()
a) Compiled d) setValidTime()
b) Interpreted

51
 2. Properties of document object are Q.6 Explain the following.
---------------- and ----------------. 1. What are similarities and
a) URL b) title differences between client side
scripting and server side scripting.
c) name d)status
2. Briefly explain features of
3. ---------- and ----------- are event / JavaScript.
event handler used with text 3. Explain switch….........case
object in JavaScript. conditional statement in
a) onBlur b) onMove JavaScript with example.
c) onFocus d) onAction Q.7 Write event driven JavaScript
Q.5 Multiple choice questions. Select program for the following.
three correct answers. 1. Display Addition, multiplication,
division and remainder of two
1. Select three correct methods of
numbers, which were accepted
window object----------------
from user.
a) write() b) alert()
2. Display number sequence from
c) writeln() d) close() 100 to 150 in following format.
e) open() f) charAt()
(100 101 102.............150)
2. JavaScript features are -----------
3. Find and display factorial of
------------ , ---------------and ------
given number.
-----------.
a) supports event based facilities 4. Accept any string from user and
count and display number of
b) is platform dependent vowels occurs in it.
language
Q.7 Match the following.
c) case insensitive scripting
language A B
d) provide inbuilt objects ceil() Writes HTML expression or
e) can handle date and time javascript code to a
effectively document.
f) requires special software to floor() Sets focus to current window.
run write() Removes white spaces from
both sides of string.
3. Inbuilt objects in JavaScript are focus() Returns next integer greater
-----------------, ---------------- and than or qual to to given
--------------. number.
a) Time b) Date trim() Returns the next integer less
than or equal to given
c) Inheritance d) Array number.
e) Number f) function

52
 4 Emerging Technologies

Let us learn Advantages :

 Efficient resource utilization : If we
Different Emerging Technologies. know the functionality and the way
Basics of Internet Of Things (IOT). that how each device works, we
Basics of cloud computing. definitely increase the efficient
resource utilization as well as monitor
Introduction to Artificial Intelligence
natural resources.
(AI).
 Minimize human effort : As the
Introduction to 5G.
devices of IoT interact and
communicate with each other and do
4.1 IoT (Internet of Things)
lot of task for us, then they minimize
The Internet of things (IoT) is the the human effort.
network of physical devices, vehicles,
 Time saving : As it reduces the human
home appliances, and other items
effort then it definitely saves out time.
embedded with electronics, software,
Time is the primary factors in
sensors, actuators, and connectivity. It
automation which can save through
enables these things to connect, collect
IOT platform.
and exchange data, creating opportunities
for more direct integration of the physical  Enhance Data Collection : IoT
world into computer-based systems, devices can collect data from
resulting in efficiency improvements, environment like weather, sound,
economic benefits. This reduces human pollution etc. This data then can be
efforts. used to take decisions.
IOT involves extending Internet  Improve, security : IoT based
connectivity beyond standard devices, security systems can make home or
such as desktops, laptops, smartphones office environment secure.
and tablets, to any range of traditionally Disadvantages :
dumb or non-internet-enabled physical
 Privacy : Even without the active
devices and everyday objects. Embedded
participation on the user, the IoT
with technology, these devices can
system provides substantial personal
communicate and interact over the
data in maximum detail.
Internet, and they can be remotely
monitored and controlled.  Complexity : The designing,
developing, maintaining and enabling
53
 the large technology to IoT system is Models of Cloud computing :
quite complicated. There are three primary service
Applications of IoT : models of cloud computing that are
Infrastructure as a Service (IaaS),
 Smart lighting - Illumination of light
Platform as a Service (PaaS), and
is controlled on the basis of day light.
Software as a Service (SaaS).
 Smart thermostats - Allows users to
schedule, monitor and remotely Infrastructure as a service (IaaS)
control home temperatures. IaaS gives users access to storage,
networking, servers and other computing
 Smart locks and garage-door openers
resources via the cloud. While the user is
- Password based or facial recognition
still responsible for managing their
based doors and locks.
applications, data, middleware, etc. IaaS
 Smart security cameras – Security provides automated and scalable
cameras that can identify known and environments that provide a high degree
unknown person and raise alarm, in of control and flexibility for the user.
case of security threat.
Key features :
 Smart traffic signals – Signal that can
 Instead of purchasing hardware
adjust their timing to accommodate
outright, users pay for IaaS on
commutes and holiday traffic and
demand.
keep cars moving.
 Infrastructure is scalable depending
4.2 Cloud Computing on processing and storage needs.
Cloud computing is a model for  Enterprises saves the costs of buying
enabling, convenient on-demand network and maintaining their own hardware.
access to a shared pool of computing
resources like network, servers, storage, Examples : Amazon web services (AWS)
applications and services released with ec2, Microsoft Azure VM, Google
service provider interaction. Compute Engine (GCE)

Platform as a service (PaaS)

A service provider offers access to a
cloud-based environment in which users
can develop, manage and deliver
applications. In addition to storage and
other computing resources, users are able
to use a suite of prebuilt tools to develop,
customize and test their own applications.
Fig. 4.1 : Cloud Computing

54
Key features : almost any internet-connected device,
 PaaS provides a platform with tools from virtually anywhere in the world.
to test, develop and host applications Examples : Google's G suite, GitHub,
in the same environment. SAP, Slack, Dropbox.
 Enables organizations to focus on
Types of Cloud Computing :
development without having a worry
about underlying infrastructure. There are three basic types of
deployment of cloud computing that are
 Providers manage security, operating
Public, Private and Hybrid.
systems, server software and backups.
 Facilitates collaborative work even if Public Cloud :
teams work remotely. In public cloud, all the services and
supporting infrastructure are managed
Do it yourself off-site over the internet and shared
Find example of Paas across multiple users. Public cloud are
more efficient and inexpensive than
private and hybrid cloud solutions.
Software as a service (SaaS)
Examples : Amazon AWS, Microsoft
A service provider delivers software
Azure, Google Cloud Platform.
and applications through the internet.
Users do not install applications on their Private cloud :
local devices. Instead, the applications As the name suggests private cloud
reside on a remote cloud network accessed provides I.T services through the internet
through the web or an API. or a private network to selected users
Key features : rather than to general public. All the data
is protected behind the firewall. Private
 SaaS vendors provide users with
cloud solutions are preferred for enhanced
software and applications via a
security and privacy by the users.
subscription model.
Hybrid Cloud :
 Users do not have to manage, install
or upgrade software; SaaS providers Hybrid cloud environments combines
manage this. both Public and Private cloud elements.
The clouds in a Hybrid environment
 Data is secure in the cloud; equipment communicate over an encrypted
failure does not result in loss of data. connection and allow for the portability
 Use of resources can be scaled of data and applications. Hybrid cloud
depending on service needs. allows greater flexibility as compared to
that of public and private cloud solutions.
 Applications are accessible from
55
Benefits of Cloud Computing : data, for applications such as image
Cost saving : Cloud computing solutions and speech recognition.
are inexpensive than the actual overall  Cognitive computing is about creating
Infrastructure set up for the I.T services.
a "natural, human-like interaction",
Reliable : Cloud computing solutions are including using the ability to interpret
more reliable than In-house I.T speech and respond to it.
infrastructure.
 Computer vision employs pattern
Mobility : Cloud computing solutions
recognition and deep learning to
are more portable because user can access
understand the content of pictures and
data anytime, anywhere as required.
videos, and to enable machines to use
4.3 AI (Artificial Intelligence) real-time images to make sense of
what's around them.
Artificial intelligence (AI) is an area
of computer science that emphasizes on  Natural language processing involves
creation of intelligent machines that work analyzing and understanding human
and react like humans. language and responding to it.
AI is different from robotics, but
Advantages of Artificial Intelligence :
related to some extent, in which machines
sense their environment, perform Reduction in human error : Computers
calculations and do physical tasks either if programmed properly with artificial
by themselves or under the direction of Intelligence gives 100% accuracy as
people. compared to task performed by human as
AI has some sub fields like- there is always a chance for human
mistakes.
 Machine learning automates
analytical model building, to find Digital Assistance : Some of the highly
hidden insights in data without being advanced organizations use digital
programmed to look for something in assistants to interact with users which
particular or draw a certain conclusion. saves the need for human resources.
Example- chatbot
 Neural networks imitate the brain's
array of interconnected neurons, and Faster Decisions : Using AI alongside
relay information between various other technologies, we can make machines
units to find connections and derive take decisions faster than a human and
meaning from data. carry out actions quicker.

 Deep learning utilizes really big Daily Applications : Daily applications

neural networks and a lot of computing such as Apple’s Siri, Window’s Cortana,
power to find complex patterns in Google’s OK Google are frequently used

56
in our daily routine whether it is for The new 5G networks will be able to
searching a location, taking a selfie, transmit very large amounts of data—but
making a phone call, replying to a mail only a few blocks at a time. 5G networks
and many more. are digital cellular networks, in which the
service area covered by providers is
Disadvantages of AI : divided into small geographical areas
High Costs of Creation- As the called cells.
machines used in AI based environments 5G can support upto a million devices
are very complex and high in price, it per square kilometer, compared to 4G.
increases the cost for overall set up.
Features of 5G are shown in fig. 4.2
Unemployment- As AI is replacing
Applications :
the majority of the repetitive tasks and
other works with robots. This will reduced 1) Online 5G Games.
human interference but cause a major 2) Automated Vehicles.
problems in the employment standards. 3) Virtual Classrooms.
4.4 5G
5G is the fifth generation of cellular Ultra
network technology. HD Videos

High speed Reduced

5G is the next generation of wireless Data Website
Transfer Load time
communications. It is expected to provide
Internet connections that are multiple
times faster than 4G LTE (Long Term
5G
Evolution). 5G technology may use a
variety of spectrum bands, including Reduced
IOT
millimeter wave (mmWave) radio Based
App
Applications
Load time
spectrum, which can carry very large Multiple
amounts of data at a short distance. The times
Faster
drawback of the higher frequencies is that Than 4G

they are more easily obstructed by the

walls of buildings, trees and other foliage, Fig. 4.2 : Features of 5G
and even changes in the weather.

Do it yourself
Find out various technologies used in smart cities

57
 Summary

IOT stands for Internet of Things.

With the help of applications based on IOT various social and critical problems
can be solved. for e.g. Traffic problem, Air pollution, water pollution.

AI Stands for Artificial Intelligence.

With the help of AI we can approach higher accuracy and privacy.

5G is the fastest method of data transfer.

Exercise

Q.1 Fill in the blanks. Q.3. State whether the given statement
is True or False.
1. IOT is Referred as ....................
1. PaaS provides a platform with
2. Smart Home is the application of tools to test, develop and host
.................... Technology. applications in the same
3. Amazon is the ................ service Environment.
provider. .....................................................
Q.2. Match the pair. 2. Cloud computing means to store
and access data and programs
'A' 'B' over the internet.
1) Smart city a) Software as a .....................................................
2) Amazon web server Service
Q.4 Explain the followings.
b) Platform as a 1. Give some applications of IOT.
3) PaaS Service
2. Explain in detail about cloud
c) Cloud computing.
4) SaaS computing 3. Explain models of cloud
d) IOT computing.
4. Give brief idea about AI.
5. Explain the concept of 5G.

58
 5 Server-Side Scripting (PHP)

Let us learn programs and is shared by the clients.

The server-side environment that runs a
Features of PHP scripting language is termed web server.
PHP variables, datatypes A user's request is fulfilled by running a
PHP Array, String function and user- script directly on the web server to
defined functions generate dynamic HTML pages. This
HTML is then sent to the client browser.
PHP form handling
It is usually used to provide interactive
PHP connectivity with database web sites that interfaces with databases
server or other data stores on the server.
5.1 Introduction to PHP Few Programming languages for
server-side programming are :
PHP (Hypertext Preprocessor) is a
widely-used open source general-purpose 1) PHP
scripting language. It is especially suited 2) Java and JSP
for web development and can be 3) Python
embedded into HTML.
PHP mainly focuses on server-side
PHP runs on various platforms (Linux,
scripting, which is used to collect form
Unix, Mac OS X, Windows etc.).
data, generate dynamic page content, or
PHP is compatible with almost all send and receive cookies. There are three
servers used today (For eg. XAMMP, things to make this work : the PHP parser
Apache, NGINX, lighttpd). a web server and a web browser. You
PHP supports a wide range of need to run the web server, with a
databases. connected PHP installation. You can
access the PHP program output with a
PHP is free and one can download it
web browser, viewing the PHP page
from the official PHP resource: www.
through the server. Note : PHP hides the
php.net.
code from the user.
PHP is easy to learn and runs
efficiently on the server side. 5.3 Features of PHP
PHP is most popular and frequently
5.2 Server Side Scripting
used world wide server-side scripting
A server is a computer system that language and the main reason of
serves as a central repository of data and popularity is :
59
 Simple : It is very simple and easy to we can do things like adding a string
use, as compared to other scripting to an integer without causing an error.
languages. 5.4 First sample code of PHP
Interpreted : It is an interpreted A PHP file normally contains HTML
language, i.e. there is no need for tags, and some PHP scripting code. The
compilation. PHP code is usually enclosed in special
start and end processing instructions
Faster : It is faster than other scripting
<?php and ?> that allow us to move into
language e.g. JSP and ASP.
and out of "PHP mode." Even it allows to
Open Source : Open source means embed HTML code within PHP code.
you need not pay for use of PHP. You All the PHP files have extension ".php".
can freely download and use. A PHP script can be placed anywhere in
Platform Independent : PHP code the html document. For e.g. : PHP
will be run on every platform, Linux, program to display the text "Hello
Unix, Mac OS X, Windows. World!" on a web page. Note that 'echo'
is used to display text on web page.
Case Sensitive : PHP is case sensitive
scripting language while declaration Program 5.1:
of variables and its use in the program. <!DOCTYPE html>
In PHP, all keywords (e.g. if, else, <html>
while, echo, etc.) classes, functions, <body>
and user-defined functions are NOT <h1>My First PHP Page</h1>
case-sensitive. <?php
echo "Hello World!";
Error Reporting : PHP have some ?>
predefined error reporting constants </body>
to generate a warning or error notice. </html>
Real-Time Access Monitoring : PHP
provides access logging by creating Output 5.1:
the summary of recent accesses for
the user.
Loosely Typed Language : PHP
supports variable usage without
declaring its data type. It will be taken
at the time of execution Based on the
type, data has its value. Since the Note : The PHP code is embedded with
data types are not set in a strict sense, HTML tags using <?php and ?>.

60
 Do you know?
Popular PHP Frameworks
1. Laravel : It is used to build robust
web application with MVC support.
It simplifies task such as caching, Fig 5.2: first.php in server directory
security, authentication and many
4. Go to browser and type
more.
"http://localhost/balbharati/"inURL
2. Symfony : It is used for fast app
bar. Click on 'first.php'.
development due to reusable
components. It provides many
app building blocks like Form
management etc..

How to execute PHP program :

1. Type the above program and save it

Fig 5.3: List of files on server directory
as"first.php"using any text editor (for
e.g. notepad, gedit).

2. Create folder with your name in /var/

www/html. (for e.g. balbharati)
Fig 5.4 : Output of first.php program

Note : Create folder in servers root

PHP Case Sensitivity :
directory. In case of Linux the path of
root directory is var/www/html. In case In PHP, the variable names are case
of windows the path is C:/XAMPP/ sensitive. However keywords (e.g.
htdocs. if, else, break, for, while, echo etc.),
function and class names are
case insensitive.
For e.g. : The echo keyword is case
insensitive in the program 5.2.
Program 5.2:

Fig 5.1: Folder created on web server <?php

ECHO "Hello World!<br>";
3. Save the 'first.php' file in balbharati echo "Hello World!<br>";
folder. EcHO "Hello World!<br>";
?>

61
Output 5.2: has a GLOBAL SCOPE and can only be
accessed outside a function (variable $a).
And a variable declared within a function
has a LOCAL SCOPE and can only be
accessed within that function (variable
$b).
Note : In above example, HTML tag Program 5.3:
<br> is enclosed in echo output string.
<?php
$a = 20;
PHP Variables :
$c = 15;
Variable is a symbol or name that function myFunction(){
stands for a value. Variables are used for $b = 10;
storing values such as numeric values, global $c;
characters, character strings, or memory echo "<p> value of 'a' inside function
addresses, so that they can be used in any is : $a </p>";
part of the program. echo "<p> value of 'b' inside function
Rules for declaring PHP Variable : is : $b </p>";
• A variable starts with the $ sign, echo "<p> value of 'c' inside function
followed by the name of the variable is : $c </p>";
}
• A variable name must start with a
letter or the underscore character
myFunction();
• A variable name cannot start with a echo "<p> value of 'a' outside function
number is : $a </p>";
• A variable name can only contain echo "<p> value of 'b' outside function
alpha-numeric characters and is : $b </p>";
underscores (A-z, 0-9, and _ ) ?>
• Variable names are case-sensitive Output 5.3:
($age and $AGE are two different
variables)
There are three different variable
scopes in PHP:
• local
• global
• static We can access a global variable $c
A variable declared outside a function from within a function using
62
"global"keyword before the variables e.g. : One can check the data-type of
(inside the function). variable using var_dump() method in
PHP.
Note : PHP also stores all global
variables in an array called Program 5.5:
$GLOBALS[index]. The index holds <?php
the name of the variable echo "<br> -- String --<br>";
$x = "Hello World !";
When a function is executed, then all echo var_dump($x);
of its variables are deleted. In some cases, echo "<br> -- Decimal --<br>";
if we want a local variable not to be $x = "1234";
deleted then the use of "static"keyword is echo var_dump($x);
must. ?>
Program 5.4: Output 5.5:
<?php
function myCount(){
static $c = 0; // Static Keyword
echo $c;
$c++; var_dump() gives different output for
} each type of data type. It gives the length
echo "Output of myCount() with use of of string for 'string' data type, it gives
'static' keyword : <br>"; actual digit for 'integer' data type and
myCount(); true/false for 'boolean' data type.
echo "<br>";
myCount(); 5.4.5 Comments in PHP
echo "<br>"; Comments are the statements in PHP
myCount(); code, which are not visible in the output
?> of the program. It is ignored during
execution. A Single-line comment is
Output 5.4:
possible if one adds // or # before a
statement in PHP. A multi-line comment
is possible with /* and */ .

PHP Data Types: Note :

Variables can store data of different 1) PHP Operators are similar to
types and PHP supports the following JavaScript Operators.
data types : 2) Accepting value from the user at
1) String 2) Integer 3) Float 4) Boolean runtime is possible through HTML
5) Array 6) NULL Form and is covered in section 5.8

63
Control structures in PHP : 3. Loop Structure in PHP : Loops are
1. If statement in PHP : if statement used to execute the same block of
allows programmer to make decision, code repeatedly as long as a certain
based on one or more conditions; and condition is satisfied.
execute a piece of code conditionally. For eg : 'For loop' in PHP
Syntax : Syntax :
if(condition) for(initialisation;condition;incrementation
{ or decrementation)
block of statement;
{
}
Statement;
2. If-else statement in PHP : if-else }
statement allows programmer to
Program 5.7:
make decision based on either this or
that conditions. <?php
for($i=1;$i<=5;$i++)
Syntax :
{
if(condition)
echo"The number is".$i."<br>";
{
}
Statement;
?>
}
else Output 5.7:
{
Statement; The number is:1
} The number is:2
Program 5.6: The number is:3
The number is:4
<?php
The number is:5
$marks=80;
if($marks>=60) Use of foreach loop : This loop works
{ echo"you passed with first class"; only on arrays, and is used to loop through
} each key/value pair in an array.
else
Syntax :
{ echo"you can do better";
foreach ($array as $value) {
}
code to be executed;
?>
}
Output 5.6:
Note : Use of '.' in PHP. It is used for
you passed with first class concatenation purpose.

64
Following are the few predefined functions in PHP to manipulate string.
Function Description
strlen() Returns the length of a string (i.e. total no. of characters)
str_word_count() Counts the number of words in a string
strrev() Reverses a string
strpos() Searches for a specific text within a string and returns the character
position of the first match and if no match is found, then it will
return false
str_replace() Replaces some characters with some other characters in a string
substr() Returns a part of a string
strtolower() Converts a string to lowercase
substr_count() Counts the number of times a substring occurs in a string
ucwords() Converts the first character of each word in a string to uppercase
trim() Removes whitespace and other predefined characters from both
sides of a string
Table 5.1: Pre-defined functions for string manipulation.
Example : The program below shows few string manipulation functions.
Program 5.8:
5.5 PHP String Functions
<?php
A string is series of characters. The
$str="Textbooks produced by Balbharati
real power of PHP comes from its are also published in pdf format. ";
functions. A function is a block of echo "<br>String: ".$str;
statements that can be used repeatedly in echo "<br>";
a program. PHP has many built-in echo "<br>String Length : ".strlen($str);
functions that can be called directly to echo "<br>";
perform a specific task. echo "<br>String Word Count
: ".str_word_count($str);
echo "<br>";
Output 5.8: echo "<br>Reverse String : ".
strrev($str);
echo "<br>";
echo "<br>Retrun position of string
search : ".strpos($str,"Balbharati");
echo "<br>";
echo "<br>Replace string :
".str_replace("Balbharati","State
Board",$str);
?>

65
5.6 PHP Arrays In above example, we store subject in
An array is a special variable, which an array at following index location.
can hold more than one value at a time. $subjects[0] = "English";
An array stores multiple values in one $subjects[1] = "Hindi";
single variable:
$subjects[2] = "Marathi";
Create an Array in PHP :
The count() function is used to return
In PHP, the array() function is used to the length of an array:
create an array.
Syntax : Note : An array can hold many values
$a = array( values ) under a single name, and you can
access the values by referring to an
index number.
In PHP, there are three types of arrays:
Indexed arrays - Arrays with a PHP Associative Arrays :
numeric index Associative arrays are arrays that use
Associative arrays - Arrays with named keys instead of index to identify
named keys record/value. Let us see how to create
Multi-dimensional arrays - Arrays associative array.
containing one or more arrays Syntax :
Indexed arrays : $a = array( key1 => value1, key2
=>value2, ...,key n => value n)
The index can be assigned automatically
(index always starts at 0). Program 5.10:
Syntax : <?php
$a = array( value1, value2, ..., value n) $student_mark =
array("English"=>"75",
Program 5.9: "Hindi" =>"64",
<?php "Marathi"=>"88");
$subjects = array("English", "Hindi", echo "You have scored ".$student_
"Marathi"); mark['English']." in English .";
echo "I like ".$subjects[0].", ?>
".$subjects[1]." and ".$subjects[2];
echo "<br> Count : ".count($subjects); Output 5.10:
?>
Output 5.9:
In above example, the values of
‘student_mark’ array are stored in
following way:

66
$student_mark['English'] = "75" functions, we can always create our own
$student_mark['Hindi'] = "64" functions. A user-defined function
declaration starts with the word function.
$student_mark['Marathi'] = "88"
Syntax :
Instead of index location, we can function functionName() {
refer values with the help of keys. Here code to be executed;
'English' refers to a key & value is '75'. }
"=>" is used to associate key & value.
Note : A function name can start with a
PHP Multi-dimensional Arrays :
letter or underscore (not a number).
A multidimensional array is an Function names are NOT case-
array containing one or more arrays. PHP sensitive.
can handle multiple levels of
multidimensional array. Program 5.12:
Use of foreach loop in an array <?php
function writeMsg(){
Program 5.11: echo "This is user-defined function";
<?php }
$subjects = array("English","Hindi", writeMsg(); //call the function
"Marathi"); ?>
foreach ($subjects as $value) {
Output 5.12:
echo "$value <br>";
} This is user-defined function
?>
PHP Function Arguments :
Output 5.11: Information can be passed to functions
through arguments. An argument is just
like a variable. Arguments are specified
after the function name, inside the
parentheses. The following example has
In above example we have used a function with arguments ($rollno and
'foreach' loop where for every loop $name):
iteration, the value of the current array
Program 5.13:
element is assigned to '$value' and the
array pointer is moved by one, until it <?php
reaches the last array element. function Student($rollno, $name){
echo "Roll No is $rollno and Name is
5.7 PHP User Defined Functions $name <br>";
A function is a block of statements }
that can be used repeatedly in a program. Student(1,"Ashwini");
It will not execute immediately when a Student(2,"Raj");
page loads but will be executed by a call Student(3,"Sonam");
to the function. Along with built-in PHP ?>
67
Output 5.13: Program 5.15.1:
<html>
<body>
<form action="welcome.php"
method="post">
Name: <input type="text"
Note : String is written in double name="name"><br>
quotes. E-mail: <input type="text"
name="email"><br>
<input type="submit">
Returning Value : </form>
</body>
To let a function return a value, use
</html>
the return statement:
Output 5.15.1:
Program 5.14:
<?php
function sum(int $x, int $y) {
$z = $x + $y;
return $z; When the user fills out the form above
} and clicks the submit button, the form
echo "5 + 10 = " . sum(5, 10) . "<br>"; data is sent for processing to a PHP file
echo "7 + 13 = " . sum(7, 13) . "<br>"; named "welcome.php". The form data is
echo "2 + 4 = " . sum(2, 4); sent with the HTTP POST method.
?> The code for "welcome.php" looks
like this:
Output 5.14: Program 5.15.2:
5 + 10 = 15 <html>
7 + 13 = 20 <body>
2+4=6 Welcome
<?php echo $_POST["name"]; ?> <br>
Your email address is:
<?php echo $_POST["email"]; ?>
5. 8 PHP Form Handling
</body>
A simple HTML form with two input </html>
fields and a submit button:
Output 5.15.2:
Welcome balbharti Your email address
is: [email protected]
68
 $_POST["email"] helps us to get the bmioutput.php
data of form field whose name attribute Program 5.16.2:
is email. And the output is displayed as
shown in output 5.15.2. <?php
$height = $_GET["height"];
Lets understand another example with $weight = $_GET["weight"];
HTTP GET method. $heightInMs = $height/100;
$bmi = $weight/
Program 5.16.1: ($heightInMs*$heightInMs);
<html>
<head> if($bmi < 18.5)
<title>BMI Calculator</title> {
$message = "You are underweight.";
</head>
}
<body>
else if($bmi >=18.5 && $bmi <= 24.9)
<form method="get"
{
action="bmioutput.php">
$message = "Congrats!!! You have
normal weight.";
Weight (kg): <input name="weight" }
id="weight" type="text" /> <br/> else if($bmi >24.9 && $bmi <=29.9)
Height (cm): <input name="height" {
id="height" type="text" /> <br/> $message = "You are overweight.";
}
<input name="submit" id="submit" else
value="Calculate" type="submit" /> {
$message = "Be careful!!! You are
obese.";
</form>
}
</body>
</html>
echo $message;
echo "</br> BMI : ".$bmi;
Output 5.16.1: ?>

Output 5.16.2:

Once you click on 'Calculate' button,

the output is displayed as shown above.

69
 The PHP superglobals $_GET and When to use POST?
$_POST are used to collect form-data.
Information sent from a form with the
The same result could also be achieved POST method is invisible to everyone
using the HTTP GET method. Just replace (all names/values are embedded
POST with GET. Let us understand the within the body of the HTTP request).
difference between GET and POST
Method. POST has no limits on the amount of
information to send.
GET vs POST :
Moreover POST supports advanced
Both GET and POST are treated as functionality such as support for
$_GET and $_POST superglobals, which multi-part binary input while
means that they are always accessible, uploading files to server.
regardless of scope. It can be accessed
from any function, class or file without The variables are not displayed in the
having to do anything special. URL so it is not possible to bookmark
the page.
$_GET is an array of variables passed
via the URL parameters. Form connectivity with Database :
$_POST is an array of variables
passed via the HTTP POST method.
Note : Ensure you have configured
When to use GET? 'php.ini' file before PHP & Database
connectivity.
Information sent from a form with the
GET method is visible to everyone
(all variable names and values are Example : Create an admission form for
displayed in the URL). the registration of the college student. We
have already studied HTML form
GET also has limits on the amount of
creation in previous chapter and database
information to send. However,
creation in DBMS chapter. Now
because the variables are displayed in
create"college"database and create
the URL, it is possible to bookmark
table"student"with following fields in
the page. This can be useful in some
this Postgres SQL database.
cases.
Name gender
GET may be used for sending non-
sensitive data. Now write following code in ‘admission.
GET should NEVER be used for php’ file.
sending passwords or other sensitive
information!
70
Program 5.17:

<!DOCTYPE html>
<head lang="en">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1> Student Admission Form</h1>
<form method="post" >
<label> First Name </label>
<input type="text" name="name" id="id_name" maxlength="30" required
placeholder="Enter your Name" />
</br>
<label> Gender </label>
<input type="radio" name="gender" id="id_gender" value="male"> Male
<input type="radio" name="gender" id="id_gender" value="female"> Female
<input type="radio" name="gender" id="id_gender" value="other"> Other
</br>
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</body>
</html>
<?php
$servername = "pgsql:host=localhost;dbname=college";
$username = "postgres";
$password = "postgres";
$conn = new PDO($servername,$username , $password);

if(isset($_POST['submit']))
{
$name=$_POST["name"];
$gender=$_POST["gender"];
$sql = "INSERT INTO student (name, gender) VALUES ('".$name."', '".$gender."')";
$conn->exec($sql);
echo "New record created successfully";
}
?>

71
Output 5.17: string to insert values in the table named
‘student’.
$conn -> exec($sql);
In the above statement ‘->’ is used to
execute SQL statement using $conn as
connectivity object.

In above example, PHP Data Object Note : isset() method in PHP is used to
class, i.e. PDO(), helps us to connect PHP check whether variable has value or
code with almost any database server. It not, this help us to know if the button is
doesn't account for database-specific clicked or not.
syntax, and one can switch database
The above program is used to insert
simply by switching the connection string
data from the user into the database. Now
in many instances. It provides database
let us understand how to fetch the data
access layer providing a uniform method from database and display as a webpage.
of access to multiple databases. The next program uses PDO exception.
1) Create database connection object PDO exceptions are used to handle errors,
which means anything you do with PDO
$conn = new should be wrapped in a try/catch block.
PDO($servername,$username, The part of code which may be erroneous
$password); can be put in try{ } block and the code to
In our example, we connect PHP with handle the error can be place in catch{ }
PostgreSQL server. The above statement block.
creates connectivity object ‘$conn’ with PDO exception class is used to throw
three parameters as shown below: errors due to database connectivity. ‘$e’
is the object of PDO and using
1. Server host name or IP address and getMessage(), we can print the error
Database name message for database connectivity.
2. Database username prepare($sql) is the secure way to execute
SQL queries using any programming
3. Database password language whereas fetchAll() method is
2) SQL statement and its execution used to get all the records from the given
table and store in $result variable.
$sql = "INSERT INTO student
$conn -> null is to close the database
(name, gender) VALUES connectivity object.
('".$name."', Note : For datatbase connectivity you
'".$gender."')"; may use any other database such as
The above statement creates SQL mysql, .maliadb etc.
72
Program 5.18: Output 5.18 :
<!doctype html>
<html> <body>
<h1>Display data</h1>
<?php
$servername = "pgsql:host=localhost;
dbname=college";
$username = "postgres";
$password = "postgres";
try Cookies and session in PHP :
{
$conn = new Cookies :
PDO($servername,$username , A cookie is a small text file that the
$password);
server sends on the user's computer. It is
}
catch (PDOException $e) used to identify user or its machine and
{ track activities created on the user
echo "connection error". computer. When browser requests server
$e->getMessage(); page, cookies are sent along with the
} request. PHP can be used both to create
try and retrieve cookie values.
{
$sql1 = "select * from student"; Eg. Cookies store visited page on browser
$sqlp=$conn->prepare($sql1); to optimise search.
$sqlp->execute();
Session :
$result=$sqlp->fetchAll();
echo "Name -- Gender"; This is used to store user information
foreach($result as $row) on server to track user activites. It helps
{ web application to maintain user
echo $row["name"]."--"; information on all the pages.
echo $row["gender"]." ";
echo "</br>"; Eg. If you login to gmail account, the
} session help us to access youtube account
} also.
catch (PDOException $e) Note : For database connection use
{ username and password values which
echo "connection error".
you have given at the time of postgres
$e->getMessage();
installation.
}
$conn=null; Program 5.17 and 5.18 uses username
?> as 'postgres' and password as 'postgres'
</body></html> while programming.

73
Summary

PHP is widely-used open source server-side programming language which runs

on various platforms.
PHP is a script executed on server which generate dynamic HTML pages.
The PHP code can also be embedded with HTML tags using <?php and ?>.
PHP is case sensitive only at time of variable declaration and not-case sensitive
for other keywords.
PHP variable start with $ sign followed by name of variable which must start
with a alpha-numeric characters or underscore character.
PHP variable has three different scopes namely : local, global and static.
PHP supports String, Integer, Float, Boolean, Array and NULL data types.
Three types of Arrays are Indexed array, Associative array and Multi-dimensional
array.
PHP supports ‘foreach’ loop to iterate easily.
String functions are used to manipulate strings.
A function is a block of statements that can be used repeatedly in a program.
Information can be passed to functions through arguments.
Form is used to collect information from user and process or store in database.
Form data can be submitted by GET or POST method.
The PHP superglobals $_GET and $_POST are used to collect form-data.
$_GET is an array of variables passed via the URL parameters and are visible to
everyone.
$_POST is an array of variables passed via the HTTP POST method and are
invisible to others.
GET has limits on the amount of information to send whereas POST has no limits
on the amount of information to send.
GET should NEVER be used for sending sensitive information.
PDO- PHP Data Object helps us to connect PHP code in uniform method of access
to multiple databases.
Cookies are sent along when browser requests server pages.
Session helps web application to maintain user information on all the pages.

74
 For information purpose only

PHP LAMP Install

How To Install Apache, PHP and php-pgsqlstack on Ubuntu 18.04
A "LAMP" stack is a group of open-source software that is typically installed
together to enable a server to host dynamic websites and web apps. His term is actually
an acronym which represents the Linux operating system, with the Apache web server.
The site data is stored in a MySQL database, and dynamic content is processed by
PHP.
Open Terminal and type following commands
Step 1 : Installing Apache
$ sudo apt update
$ sudo apt install apache2
To verify the installation, type following statement in the browser address bar.
http://your_server_ip or http://localhost/
If you get following page, its installed succesfully.

Step 2 : Installing connector for php-pgsql

$ sudo apt install php-pgsql
This command, too, will show you a list of the packages that will be installed,
along with the amount of disk space they'll take up. Enter Y to continue.
Step 3 : Installing PHP
$ sudo apt install php libapache2-mod-php
After this, restart the Apache web server in order for your changes to be recognized.
Do this by typing:
75
$sudo systemctl restart apache2
Step 4 : Testing PHP Processing on your Web Server
In order to verify PHP installation, you create a very basic PHP script called myde-
mo.php.
Now go to /var/www/html/. Create the file at that location. The file should contain
following statement.
File Name : mydemo.php
<?php
echo"Hurray !!! First PHP Program is working";
?>
Now go to browser and type following line in the address bar.
http://your_server_ip/mydemo.php or http://localhost/mydemo.php
Step 5 : To configure Apache server for postgresql
For Ubuntu
Open 'php.ini' file located at /etc/php/x.x/apache2/php.ini and add the line below at
the end of file.
extension=pgsql.so
How To Install XAMPP on Window
Step 1 : Download and install XAMPP from https://www.apachefriends.org/down-
load.html
Step 2 : Testing PHP Processing on your Web Server
In order to verify PHP installation, you create a very basic PHP script called myde-
mo.php.
Now go to C:\XAMPP\htdocs\. Save the above mydemo.php file at this location.
The file should contain following statement.
File Name : mydemo.php
<?php
echo"Hurray !!! First PHP Program is working";
?>
Now go to browser and type following line in the address bar.
http://your_server_ip/mydemo.php or http://localhost/mydemo.php

Note : your_server_ip is the actual IP address of your server machine which is in

digits.
76
Step 3 : To configure Apache server for postgresql
Open 'php.ini' file located at C:\xampp\php\php.ini or click on 'config' button on
the XAMPP Apache control panel.
Now add the line below at the end of file.
extension=php_pgsql.dll
extension=php_pdo_pgsql.dll

Exercise

Q.1 Fill in the blanks. Q2. State True/False.

1. PHP is ___________ side 1. PHP is platform dependent
scripting language. scripting language.
2. PHP is ___________ language 2. $_POST is an array of variables
i.e. there is no need for passed via the URL parameters.
compilation.
3. A Function is a block of statements
3. A variable starts with ________ that can be used repeatedly in a
sign followed by variable name. program.
4. An ____________ is a variable, 4. PHP cannot be embeded along
which can hold more than one with HTML tags.
value at a time.
5. GET should NEVER be used for
5. Information can be passed to sending sensitive information.
functions through __________.

77
Q3. Multiple Choice Question. 2. The scope of variable can be
(1 correct) ______________.
1. The program file of PHP have a) local b) global
____________ extension. c) universal d) static
a) .asp b) .php e) final f) outside
c) .js d) .txt
Q6. Brief Questions.
2. A variable declared ________ a
1) Explain any two features of PHP?
function has global scope.
a) outside b) anywhere 2) What are the rules to declare
c) inside d) none variable in PHP?

3. The ________ function returns a 3) What is server side scripting?

part of a string. 4) List the supported datatypes in
a) trim() b) ucwords() PHP.
c) substr() d) strpos() 5) Explain any two string
Q4. Multiple Choice Question. manipulation function.
(2 correct) Q7. Write Programs for the following.
1. The _______ & ______ are valid 1) Write a PHP code which
datatype in PHP. calculates square of any number
a) Double b) Varchar using form.
c) Integer d) Array 2) Write a PHP code to count no. of
e) BigInt words in the given string.
2. Single line comment in PHP is 3) Create a website with two PHP
possible using _______, ______. webpage in which each webpage
a) // b) /* */ is connected.
c) # d) <!-- --> The first page of the website
e) $ contains two form fields for
taking ‘name’ and ‘password’
Q5. Multiple Choice Question.
from users. On onclick event,
(3 correct)
details of forms should be
1. In PHP, three types of arrays are displayed on second webpage.
______, _______, _______ .
a) Indexed b) Simple
c) Associative
d) Multidimensional
e) Complex f) General
78
 6 E-Commerce and E-Governance

Let us learn service to others then it is called as

commerce.
E-Commerce – concept, advantages,
One of the most popular activity on
disadvantages and types.
the Web is shopping. E-Commerce
E-Commerce Trade cycle.
became possible in 1991 when the Internet
Various Payment modes.
was opened to commercial use. Since that
Common forms of E-Commerce.
date thousands of businesses have taken
Electronic Data Interchange.
up residence at websites. History of
E-Governance-concept, advantages
e-commerce is a history of a new, virtual
and types.
world which is evolving according to the
Various security measures.
customer advantage.

6.2 Definition of E-Commerce

6.1 Introduction
“E-Commerce can be broadly defined
E-Commerce stands for Electronic
as the process of buying and selling of
Commerce. Before moving to the concept
goods or services using an electronic
of E-Commerce, let’s first, understand
medium such as Internet.”
what is commerce?
E-commerce is also referred as a
Commerce is an important part of a
paperless exchange of business
business. In simple words, commerce is
information using EDI, E-mail, Electronic
nothing but buying and selling of goods.
fund transfer etc.
That means when we buy a product or
service from others or sell a product or

79
 Difference between Traditional Commerce and E-Commerce :
Traditional Commerce E-commerce
Traditional commerce focuses on the ex- E-commerce trading activities are online
change of products and services through via the internet and can be considered
personal interactions so it is manual. automatic.
Traditional commerce is limited to busi- E-commerce is 24X7, it can be done
ness hours, mostly during the day. anytime day and night.
As far as consumer interactions are con- E-commerce can be termed as screen to
cerned, traditional commerce provides face interaction.
face to face interaction.
Traditional commerce is limited to a E-commerce is global and has no physical
particular geographical location. limitation.
Modes of payment in traditional In E-commerce modes of payments are
commerce include cash, cheques and bank transfer, credit card, e-wallet, mobile
credit cards. payment and many more.
Goods and delivery of services is instant In E-commerce delivery of goods or
with traditional commerce. services takes some time.
Traditional Commerce’s scope is local. E-commerce’s scope is global.

Advantages of E-Commerce : the cost of searching a product.

E-commerce has enabled rural
Global scope : E-commerce provides
areas to access services and products,
the sellers with a global reach. Now
which are otherwise not available
sellers and buyers can meet in the
to them.
virtual world, without barrier of place
(geography). Anytime shopping : One other great
advantage is the convenience. A
Electronic transaction : E-commerce
customer can shop 24×7. The website
reduces the paper work and
is functional at all times, it does not
significantly lower the transaction
have working hours like a shop.
cost. E-Commerce enables the use of
credit cards, debit cards, smart cards, No intermediaries : Electronic
electronic fund transfer via bank's commerce also allows the customer
website and other modes of electronic and the business to be in touch directly,
payment. without any intermediaries. This
allows for quick communication and
Cost Saving : E-commerce application
transactions.
provides users with more options
to compare and select the cheaper Public services : E-commerce helps
and better option. It helps in reducing the government to deliver public

80
 services such as healthcare, education, notification to the business
social services at a reduced cost and organization via email and the
in an improved manner. organization will dispatch the product/
goods to the customer. These B2C
Disadvantages of E-Commerce : businesses are online retailers.
Setup Cost : The setup of the hardware Example : Amazon, Flipkart etc.
and the software, the training cost of
employees, the constant maintenance
and upkeep are all quite expensive.
Physical presence : This lack of a
personal touch can be a disadvantage
for many types of services and
products like interior designing or the
jewellery business.
Business - to - Business (B2B) : In
Security : Security is another area of
B2B model, business sells it’s products
concern. Credit card theft, identity
to an intermediate buyer who then
theft etc. remain big concerns with the
sells the product to the final customer.
customers.
As an example, a wholesaler places
Goods Delivery : There may arrive an order from a company's website
some problem with fulfilment of and after receiving the consignment,
order. Even after the order is placed sells the product to the final customer
there can be problems with shipping, who comes to buy the product at one
delivery, mix-ups etc. This leaves the of its retail outlets. Example : Tata
customers unhappy and dissatisfied. communications (network provider).

Types of E-Commerce :
The most common participants in
e-Commerce are business, administration,
government and consumer. The primary
e-Commerce types are as follows:
Business - to - Consumer (B2C) :
In B2C model, business sells it’s
products directly to a customer. A
customer can view the products shown
on the website. The customer can
choose a product and order the same. Consumer - to - Consumer (C2C) :
The website will then send a In C2C model, consumer helps
81
 consumer to sell their assets like 6.3 E-Commerce Trade Cycle
residential property, cars, motorcycles A trade cycle is the series of exchanges,
etc., or rent a room by publishing their between a customer and supplier that
information on the website. Website take place when a commercial exchange
may or may not charge the consumer is executed. A general trade cycle consists
for its services. Example OLX, Quikr, of following phases:
online auction.
Pre-Sales : It consist of two steps like
Search and Negotiate. Customer
search for required website for product
to be purchased. In Negotiate step
customer find a supplier who offers
good quality product at cheaper price
and then customer agrees the terms
forwarded by supplier.

Consumer - to - Business (C2B) : In Execution : This phase consist of

this model, consumers have products Order and Delivery. Customer sends
or services of value that can be an order for the selected product and
consumed by businesses. For example, after processing the order, customer
the comparison of interest rates of receives delivery of the product.
personal loan/car loan provided by
various banks via websites. A business Settlement : This phase consist of
organization who fulfills the Invoice (if any) and Payment. Invoice
consumer's requirement within the means customer will receive a bill for
specified budget, approaches the purchased product and after
customer and provides its services. confirmation of received product,
For e.g. - A blog can be written by an customer will pay for the same.
author for a business to improve sale After-Sales : This phase consists of
of products, ebay. warranty and After Sale Services. In
warranty period, customer will get all
maintenance services for free or at
minimum cost. After sale services
means customer will do complaints
(if any) about the performance of
product and get maintenance service
from the supplier.

82
 money from bank account is usually
fast and safer than withdrawing and
paying in cash because every
transaction will be authenticated
by checking customer’s banking
credentials. Example : NEFT, IMPS
etc.
4. E-wallets : E-wallet is a type of
electronic card which is used for
Trade Cycle transactions made online through a
computer or a smartphone. E-wallet
6.4 Modes of Payment
is a type of pre-paid account in which
a user can store money for any future
online transaction. An E-wallet is
protected with a password. Examples
are State Bank Buddy, Paytm
Wallets...
1. Credit Cards : Credit cards are the Do it yourself
most common way for customers to
Find out some more payment modes
pay online. Merchants can reach out
used in E-Commerce.
to an international market with credit
cards, by integrating a payment gate-
6.5 Forms of E-Commerce
way into their business.
Some common forms of E-Commerce
2. Mobile Payments : Mobile payments are as follows.
offer a quick solution for customers to
M-commerce (Mobile commerce) :
purchase on e-commerce websites.
M-Commerce is the buying and
Mobile payments are also commonly
selling of goods and services through
used on donation portals, browser
wireless handheld devices such as
games and social media networks.
smartphones and tablets. As a form of
Customer can pay by scanning a
e-commerce, m-commerce enables
barcode on an app on mobile.
users to access online shopping
Examples are apps like BHIM,
platforms without needing to use a
UPI, Paytm, Google Pay,
desktop computer. Some of application
Paypal,..etc.
of M-Commerce are mobile banking,
3. Bank Transfers : Bank transfer is ticket booking, E-bill payment, online
used when money is sent from one auctions, stock market trading.
bank account to another. Transferring

83
 technologies such as mobile commerce,
electronic funds transfer, supply chain
management, Internet marketing, online
transaction processing, electronic data
interchange (EDI), inventory management
systems and automated data collection
systems. Let’s see one of the common
E-commerce technology i.e EDI.
Electronic Data Interchange (EDI) :
EDI is the electronic interchange of
Social Commerce : Social commerce business information using a standardized
is a form of electronic commerce that format; a process which allows one
involves social media, online media company to send information to another
that supports social interaction. It company electronically rather than on
enable shoppers to get advice from paper. Business entities conducting
trusted individuals, find goods and business electronically are called trading
services and then purchase them. The partners. Many business documents can
social networks that spread this advice be exchanged using EDI, two most
have been found to increase the common documents are purchase orders
customer's trust in one retailer over and invoices. It is computer-to-computer
another. Social commerce is the use interchange of strictly formatted
of networking websites such as documents via telecommunications or
Facebook, Instagram and Twitter as physically transported on electronic
vehicles to promote and sell products storage media.
and services. The success of a social
commerce campaign is measured by
the degree to which consumers interact
with the company's marketing through
retweets, likes and shares.

6.7 E-Governance
It signifies the implementation
of information technology in the
government processes and functions so
6.6 E-Commerce Technology as to cause simple, moral, accountable
and transparent governance. The basic
Electronic commerce draws on
purpose of e-governance is to simplify
84
processes for all, i.e. government, access to the services anytime from
citizens, businesses etc. at National, State anywhere. Furthermore, Many
and local levels. Hence, E-governance services like license renewals and
delivers SMART government. (S- Simple, paying tax are essential in G2C.
M-Moral, A-Accessible, R-Responsive, It also focuses on geographic land
T-Transparent Government) barriers.
Advantages of E-governance : 2. Government-to-Business (G2B)
Reduced corruption
The Government to business
High transparency is the exchange of services
Increased convenience between Government and Business
Direct participation of constituents organizations. G2B provides access
to relevant forms needed to comply.
Reduction in overall cost. The G2B also consists of many
Expanded reach of government services exchanged between business
Types of E-Governance : sectors and government. It aims at
eliminating paper work, saving time,
E-Governance is of 4 types depending on cost and establish transparency in
the specific types of services. the business environment, while
interacting with government.
3. Government-to-Government (G2G)
The Government-to-Government
refers to the interaction between
different government departments,
organizations and agencies. In G2G,
government agencies can share the
same database using online
communication. The government
departments can work together. In
conclusion, G2G services can be at
1. Government-to-Citizen (G2C) the local level or the international
level. Likewise, it provides safe and
The Government-to-citizen refers to secure inter-relationship between
the government services which enable domestic or foreign government.
citizens to get access to wide variety
4. Government-to-Employee (G2E)
of public services. Most of the
government services fall under The Government-to-Employee is the
G2C. It helps the ordinary people to internal part of G2G sector.
reduce the time and cost to conduct Furthermore, G2E aims to bring
a transaction. A citizen can have employees together and improvise
85
 knowledge sharing. Similarly, G2E and desktops. It include services like
provides online facilities to the AADHAAR card, DigiLocker, Bharat
employees like applying for leave, Bill Payment System, PAN, EPFO
reviewing salary payment record and services, PMKVY services, AICTE,
checking the balance of holiday. The CBSE. It also provides utilities like bills
G2E sector provides human resource payments, education, job search, tax,
training and development. So, G2E is business, health, agriculture, travel,
also the relationship between
Indian railway tickets bookings, birth
employees, government institutions
certificates, e-District, e-Panchayat,
and their management.
police clearance, passport, other utility
Some effective examples of successful services from private companies and
implementation of E-Governance much more.
projects are e-Mitra project (Rajasthan),
e-Seva project (Andhra Pradesh), CET 6.8 Security Measures in E-Commerce
(Common Entrance Test) . E-Commerce security refers to the
principles which guide safe electronic
Do you know? transactions, allowing the buying and
Digital India is a campaign launched selling of goods and services through the
by the Government of India in order to Internet.
make Government's services available A) Encryption : Encryption is widely
to citizens electronically. Digital India used on the internet to protect user
was launched by the Prime Minister of information being sent between a
India Narendra Modi on 1 July 2015 browser and a server. This includes
with an objective of connecting rural passwords, payment information and
areas with high-speed Internet networks other personal information that should
and improving digital literacy. be considered private. The process
Some of the facilities provided consists of two processes as encryption
through this initiative are Bharat net, and decryption. Encryption converts
digital locker, e-education, e-health, Plain text ( readable form of data )
e-sign, e-shopping and national into Cipher Text (coded form of data)
scholarship portal. means non-readable form of data.
Decryption is exactly opposite process
UMANG (Unified Mobile Application
of encryption. It converts Cipher text
for New-age Governance) Mobile App:
into Plain text.
It is a Government’s all-in-one single
unified secure multi-platform, multi- Encryption is of two types-
lingual, multi-service freeware mobile 1. Symmetric
app for accessing over 1,200 central (Private-Key Encryption )
and state government services through 2. Asymmetric
smart phones, feature phones, tablets
(Public-Key Encryption )
86
 Encryption Decryption

Plain text cipher text Plain text

(readable form of data) (coded form of data) (readable form of data)

B) Digital Signature : A digital signature C) Digital Certificate : A Digital

is also known as an electronic Certificate is an electronic "password"
signature. A digital signature that allows a person, organization to
guarantees the authenticity of an exchange data securely over the
electronic document or message in Internet using the public key
digital communication and uses infrastructure (PKI). Digital
encryption technique ( asymmetric Certificate is also known as a public
cryptography) to provide proof of key certificate or identity certificate.
original and unmodified In this information is transferred
documentation. Digital signatures are between two authorized partners who
used in e-commerce, software have digital certificates issued by
distribution, financial transactions. some supreme authority.
This is the direct transfer of
information between two partners.

Do it yourself
Visit Maharashtra Government website, view various Government Resolutions (GR)
and observe the digital signature of various authorities.

87
 Summary

Buying and selling of goods or services on internet is called as E-Commerce.

Common types of E-Commerce are B2C, B2B, C2C and C2B.
When any business transaction takes place, it completes one trade cycle. Trade
cycle consist of phases like presale, execution, settlement and after sale etc.
In E-Commerce commonly used payment modes are credit card, mobile payment,
bank transfer, e-wallet etc.
Some common forms of E-Commerce are M-Commerce, social commerce.
Electronic Data Interchange (EDI) is one of the most important technology for
paperless exchange of information.
E-Governance is the implementation of information technology in the government
processes and functions.
Types of E-Governance are G2C, G2B, G2G and G2E.
In E-Commerce confidential information can be protected by using encryption,
digital signature and digital certificate.

Exercise
Q.1 Fill in the blanks. 6. The ……. type of e-governance
refers to the government services
1. E-Commerce’s scope is which enable citizens to get
…………… access to wide variety of public
2. Search and Negotiate are the part services.
of …………… phase of trade 7. The e-governance which provides
cycle. safe and secure inter-relationship
3. The…………… phase consist of between domestic or foreign
Order and Delivery. government is ………..

4. E-wallet is a type of ………… Q.2 State True/False.

account in which a user can store 1. C2C type of E-commerce deals
his/her money for any future with Business and Customer.
online transaction.
2. The lack of a personal touch can
5. EDI is ……………………… be a disadvantage for many types
exchange of information. of services and products in
E-commerce.
88
 3. Checking the balance of holiday Q.5 1) Match the following.
is an example of G2C. A B
4. E-commerce provides more 1. M-commerce a) Coded form of
options to compare and select the data
cheaper and better options.
2. Cipher Text b) B2B
5. M-commerce can be used through 3. EDI c) E-bill payment
desktop computer.
4. Wholesaler-to d) Paperless
Q.3 Multiple Choice Question. Retailer exchange of
(1 correct answer) information
5. License renewal e) G2G
1. Invoice and payment are included
in ……………phase of trade services
cycle. 6. Online facility f) G2C
a) Presale b) execution
to employees
c) settlement d) After sale
like leave
2. License renewal is an example of
7. Government g) G2E
………….. e-governance.
agencies share
a) G2C b) G2B same database
c) G2G d) G2E
Q.6 Answer in brief.
Q.4 Multiple Choice Question.
1. Explain phases of trade cycle.
(2 correct answer)
1. Encryption consist of two 2. Explain M-Commerce.
processes..………………..a nd 3. Describe process of encryption.
……………...................
a) encryption b) signature 4. What is E-governance.

c) decryption d) digitization 5. List out advantages of

e) security E-commerce.
2. Social commerce is a subset of 6. Which are the different types of
electronic commerce that e-governance?
involves social media like
… … … … … … & 7. State two examples of G2E
…………………….. services.
a) Facebook b) Instagram 8. Write any four advantages of
c) gmail d) hardware e-governance.
e) software

89
 SKILL ORIENTED PRACTICALS
(SOP)

Note :
Students should file minimum 12 skill sets from the SOPs as
follows-
• Advanced Web Designing - Any 05
• JavaScript - Any 04
• Server side scripting - Any 03

90
 1. Advanced Web Designing
SOP 1 : Creation of website using HTML5
Create a website using HTML5 and CSS using any 4 CSS properties. Write
a code for 2 separate pages having different file names such as first page as
Index. html and second page as page2.html. Use any theme such as college
profile or company profile etc. Every page must contain proper Meta
information and design web page as follows-
The index page must contain a heading which is highest among other text
on pages and must be at centre of the page. There must be a paragraph
which introduces general information about the theme chosen must
have at least 3 physical style tags and one image with alternate text.
This page must be connected to other page with proper navigational
links.
2 The 2nd page must contain the feedback or enrolment form related with
theme chosen with features of HTML5. The form must contain text element
and email address of the company or person. Include the submit button.

SOP 2 : Create a webpage using HTML and CSS code to design a web page as
the layout displayed below.
The top section will display the heading , ‘Tourist places’ in header. The
section on the left has list of cities. The right hand side displays tourist places
of any one of the city .
Use Inline style sheet in the top section to display background color for the
text ‘Tourist places’. Use internal stylesheet for the left and right section
with background color and font styles.

Tourist places
City Tourist places in Pune
1. Pune • Shanivarwada
2. Banglore • Kelkar Museum
3. Hyderabad • Sinhgad fort
4. Delhi

91
SOP 3 : Create a website using HTML and CSS code to design webpages as
follows -
The first webpage will accept the name of the traveller, date of travel ,
telephone number . It also has submit button as an image .
The second webpage has information about the name of transporter, time ,
seat no and destination displayed one below the other in the form of unordered
list as
Name of transporter – Air Asia
Time - 09:30 am
Seat no – B39
Destination - Delhi
Both pages should be interlinked. Create external stylesheet with relevant
tags.
SOP 4 : Creation of website using HTML5 and CSS.
Create a webpage as given layout use <nav>,<header>,<footer>,<aside>,
<article> with CSS.

SOP 5 : Use of Audio on web pages using HTML5.

Create a webpage named audio.html to set an audio file in web page with
controls such that it uses HTML5 elements. The audio file must play as soon
as the webpage loads in browser and it will start over again, every time
when it is completed.
Create another webpage named audio1.html which provides multiple source
file formats for the same audio file that plays a sound with controls. The
code must incorporate the list of sound files formats (like wav, MP3 or
ogg etc).

92
SOP 6 : Use of video on web pages using html5.
Create a webpage named video.HTML to display a video file on web page
and plays automatically. The dimension of video area should be 150 * 150
pixels.
Create another webpage which video provide multiple source file formats
for the same video file that plays a video with controls. The dimension of
video area should be 300*300 pixels. The code must incorporate the
list of video files formats (like webM, MP4 or ogg etc).
SOP 7 : Navigation on an image using Client side image Mapping in web page
using html 5.

SOP 8 : Use of SEO methodology to improvise the website.

Select a website.
Use an appropriate SEO software and list out the page optimization
requirements.
Write down at least 4 suggestions to optimise the web pages.
Write importance of SEO.

93
 2. Javascript

Create another web page using JavaScript where the background color
changes automatically after every ___ seconds. This event must be triggered
automatically after the page gets loaded in the browser. There should
at least 7 different and visibly distinct background colors.

SOP 2 : Create JavaScript program for the following form validations. Make
use of HTML5 properties to do the following validations :
1) Name, address, contact number and email are required fields of the
form.
2) Address field should show the hint value which will disappear when
field gets focus or key press event.
3) Telephone number should be maximum 10 digit number only.
4) Email field should contain valid email address, @ should appear only
once and not at the beginning or at end. It must contain at least one
dot(.).
5) Make use of pattern attribute for email to accept lowercase, uppercase
alphabets, digits and specified symbols.

SOP 3 : Create event driven JavaScript program for the following. Make use of
appropriate variables, JavaScript inbuilt string functions and control
structures.
To accept string from user and count number of vowels in the given
string.

94
SOP 4 : Create event driven JavaScript program for the following. Make use of
appropriate variables, JavaScript inbuilt string functions and control
structures.
To accept string from user and reverse the given string and check whether
it is palindrome or not.
SOP 5 : Create event driven JavaScript program to convert temperature to and
from Celsius, Fahrenheit.
Formula: c/5= (f-32)/9
[where c=Temperature in Celsius and f=Temperature in Fahrenheit.]
Output format : 40 Celsius=104 Fahrenheit
45 Fahrenheit = 7.22222222 Celsius
SOP 6 : Create JavaScript program which compute the average marks of
students. Accept six subject marks of student from user. Calculate
average marks of student which is used to determine the corresponding
grades.
Range Grade
35 to 60 F
61 to 70 D
71 to 80 C
81 to 90 B
91 to 100 A
SOP 7 : Write a JavaScript function to get difference between two dates in days.
Create a page in HTML that contains input box to accept date from
user. The input boxes should be used by users to enter their date of birth
in the format dd-mm-yyyy. Do not make use of any dropdown boxes.
Example :
date_diff_indays('04/02/2019', '11/04/2019');
date_diff_indays('01/01/2020', '31/01/2019');
Output :
66
-30

95
 3. Server-Side Scripting (PHP)
SOP 1 : Write a PHP program to check if a person is eligible to vote or not. The
program should include the following-
Minimum age required for vote is 18.
Use PHP functions.
Use Decision making statement.

SOP 2 : Write a PHP function to count the total number of vowels (a,e,i,o,u)
from the string. Accept a string by using HTML form.

SOP 3 : Write a PHP program to perform the following operations on an

associative array.
Display elements of an array along with their keys.
Display the size of an array.
Delete an element from an array from the given index.

SOP 4 : Write a PHP program to save marks of English, Hindi, Marathi, Maths
and Information Technology in an array. Display marks of individual
subject along with total marks and percentage.

SOP 5 : Write a PHP program to save marks of English, Hindi, Marathi, Maths
and information technology in an array for 5 students and display total
marks and percentage of each students using ‘foreach’.

SOP 6 : Write a program using PHP to calculate Electricity bill by accepting the
limits.
For first 100 units - Rs. 4
For next 100 units - Rs. 5
For next all units - Rs. 6

SOP 7 : Write a PHP Program to insert a roll number and student name in a
database (use postgresql data to create database). Accept roll number
and name from the user.

96
 Career Opportunities

Cloud Computing Engineers science or a related field. Some also have

a master’s degree in business
Basic Requirements :
administration (MBA), with a focus on
Cloud engineers typically have at
information systems. Network related
least a bachelor's degree in computer
jobs and projects. The job profiles are as-
science or information technology. Those
in the field often have years of software  Computer and Information Research
development experience, working with a Scientist
variety of programming languages such  Computer and Information Systems
as Java, Angular JS, C++, and Python. Manager
Cloud computing engineers define,  Computer Network Architect
design, build, and maintain systems and  Computer Systems Analyst
solutions leveraging systems and
 Computer Systems Manager
infrastructure managed by cloud providers
such as Amazon Web Services (AWS)  IT Analyst
and Microsoft Azure. Following are some  IT Coordinator
of job roles in the cloud computing  Network Administrator
domain.
 Network Architect
 Cloud Architect
 Network and Computer Systems
 Cloud Consultant Administrator
 Cloud Product and Project Manager  Network Engineer
 Cloud Services Developer  Network Systems Administrator
 Cloud Software and Network Engi-  Senior Network Architect
neer
 Senior Network Engineer
 Cloud System Administrator
 Senior Network System Administrator
 Cloud System Engineer
 Telecommunications Specialist
Computer Network Specialists
Computer Support Specialist
Basic Requirements :
Basic Requirements :
Computer network specialists and
The computer user support specialist
analysts define, design, build, and
must be knowledgeable about the
maintain a variety of data communication
functioning of a computer system. Some
networks and systems. They typically
of the employers appoint the technicians
have a bachelor’s degree in computer
97
on the basis of an associate's degree or administrators with at least a bachelor's
postsecondary classes, while others prefer degree in computer science or a related
the applicants to have a bachelor degree. field. In some cases, a master's degree is
Computer support specialists and required for higher-level positions. A
network administrators help computer bachelor's degree program is a 4-year
users and organizations. Some of these program and is a prerequisite to a 2-year
workers support computer networks by master's degree program.
testing and evaluating network systems Database administrators help store
and ensuring that the day-to-day and organize data or companies and/or
operations work. Others provide customer customers. They protect the data from
service by helping people with their unauthorized users. Some work for
computer problems. Some require a companies that provide computer design
bachelor’s degree, while others need an services. Others work for organizations
associate degree or post-secondary with large database systems, such as
classes. They work as- educational institutions, financial firms
 Customer Support Administrator and more. They can be employed as-
 Customer Support Specialist  Data Center Support Specialist
 Desktop Support Manager  Data Quality Manager
 Desktop Support Specialist  Database Administrator
 Help Desk Specialist  Senior Database Administrator
 Help Desk Technician Information Technology Leadership
 IT Support Manager Basic Requirements :
 IT Support Specialist Obtain a bachelor's degree in computer
science or information technology.
 IT Systems Administrator
Develop IT and leadership experience in
 Senior Support Specialist a variety of IT roles, from entry-level
 Senior System Administrator support positions to IT manager. Most IT
 Support Specialist director positions require 10 years of
 Systems Administrator experience. Earn your master's degree.
Leadership in IT draws from
 Technical Specialist
candidates with strong technology
 Technical Support Engineer backgrounds and superior management
 Technical Support Specialist skills. They have experience in creating
and implementing policies and systems
Database Administrator
to meet IT objectives, and the ability to
Basic Requirements : budget the time and funds necessary.
Many employers prefer database
 Chief Information Officer (CIO)
98
 Chief Technology Officer (CTO) linear algebra. A sequence in physics is
 Director of Technology also required.
Software developers design, run, and
 IT Director
test various computer programs and
 IT Manager
applications. Application Developers
 Management Information Systems create new applications and code
Director solutions. They usually have a bachelor’s
 Technical Operations Officer degree in computer science or a related
Information Security Specialist field. They also have strong programming
skills, so can be employed as-
Basic Requirements :
Hiring managers for IT security  Application Developer
specialist positions generally require at  Applications Engineer
least an undergraduate degree (associate  Associate Developer
or bachelor) in information security,
computer information systems, network  Computer Programmer
security, computer science or a related  Developer
field of study.  Java Developer
The increased incidence of security
 Junior Software Engineer
breaches and the associated danger of
identity theft has enhanced the importance  .NET Developer
of protecting data on commercial and  Programmer
governmental sites. Information securities  Programmer Analyst
analysts help defend an organization’s
computer network and computer systems.  Senior Applications Engineer
The job roles offered to them are-  Senior Programmer
 Information Security  Senior Programmer Analyst
 Security Specialist  Senior Software Engineer
 Senior Security Specialist  Senior System Architect
Software/Application Developer  Senior System Designer
Basic Requirements :  Senior Systems Software Engineer
Most computer software development  Software Architect
jobs require bachelor's degrees in
 Software Developer
computer science or software engineering.
These programs have significant math  Software Engineer
requirements that include a sequence in  Software Quality Assurance Analyst
calculus, differential equations, and  System Architect
99
 Systems Software Engineer functionality for their client’s needs.
 Mobile Application Developer Some jobs require a bachelor’s degree,
while others need an associate degree,
Web Developer including classes in HTML, JavaScript,
Basic Requirements : or SQL. This education can help to get
Many employers prefer prospective employment as-
Web developers to hold a bachelor's  Front End Developer
degree in computer science or a related  Senior Web Administrator
field. Coursework often includes
programming, database management,  Senior Web Developer
mathematics, Web design and networking.  Web Administrator
Web developers design, create, and  Web Developer
modify websites. They are responsible  Webmaster
for maintaining a user-friendly, stable
 UX Designer
website that offers the necessary

Professional certificate courses like RHCE, ORACLE, software testing etc. can be
done to enhance the career opportunities.

100
 Practical Notebook for Standard XII
Practical Notebook Cum Journal

Price: ` 72.00
1.00 Pric
:`9 e:`
Price 0
81.0
• Practical Notebook prescribed for the subjects Biology, Physics and Chemistry for
Standard Twelve as per subject scheme
• Based on Government approved syllabus and textbook
• Inclusion of all practicals as per Evaluation scheme.
• Inclusion of various activities and objective questions
• Inclusion of useful questions for oral examination
Practical notebooks are available for sale in the regional depots of
the Textbook Bureau.
(1) Maharashtra State Textbook Stores and Distribution Centre, Senapati Bapat Marg, Pune 411004  25659465
(2) Maharashtra State Textbook Stores and Distribution Centre, P-41, Industrial Estate, Mumbai - Bengaluru
Highway, Opposite Sakal Office, Kolhapur 416122  2468576 (3) Maharashtra State Textbook Stores and
Distribution Centre, 10, Udyognagar, S. V. Road, Goregaon (West), Mumbai 400062  28771842
(4) Maharashtra State Textbook Stores and Distribution Centre, CIDCO, Plot no. 14, W-Sector 12, Wavanja
Road, New Panvel, Dist. Rajgad, Panvel 410206  274626465 (5) Maharashtra State Textbook Stores and
Distribution Centre, Near Lekhanagar, Plot no. 24, 'MAGH' Sector, CIDCO, New Mumbai-Agra Road, Nashik
422009  2391511 (6) Maharashtra State Textbook Stores and Distribution Centre, M.I.D.C. Shed no. 2 and 3,
Near Railway Station, Aurangabad 431001  2332171 (7) Maharashtra State Textbook Stores and Distribution
Centre, Opposite Rabindranath Tagore Science College, Maharaj Baug Road, Nagpur 440001
 2547716/2523078 (8) Maharashtra State Textbook Stores and Distribution Centre, Plot no. F-91, M.I.D.C.,
Latur 413531  220930 (9) Maharashtra State Textbook Stores and Distribution Centre, Shakuntal Colony,
Behind V.M.V. College, Amravati 444604  2530965

E-learning material (Audio-Visual) for Standards One to

Twelve is available through Textbook Bureau, Balbharati...
• Register your demand by scanning the Q.R. Code
given alongside.
• Register your demand for E-learning material by using
Google play store and downloading ebalbharati app.
ebalbharati www.ebalbharati.in, www.balbharati.in