Web technologies

(Computer Science (DSE-2F) (Elective-B))

As Per (O.U) CBCS 2016-17 Syllabus for B.Sc III-Year VI-Semester

A. Bhagya
MCA, M.Tech
 Available Books for B.Sc (OU) III-Year VI-Semester
 Mathematics (Numerical Analysis)
 Mathematics (Generic Elective-2 : Elements of Number Theory)
 Mathematics (SEC-4G : Switching Circuits)
 Mathematics (SEC-4H : Graph Theory)
 Mathematics (DSE-1F/A : Complex Analysis)
 Mathematics (DSE-1F/B : Vector Calculus)
 Physics (Paper-VII : Modern Physics)
 Chemistry (Paper-VII : Chemistry-VII)
 Computer Science (Computer Networks)
 Computer Science (Generic Elective-2 : Information Technologies-2)
 Computer Science (SEC-4G : Python-2)
 Computer Science (SEC-4H : Information Security)
 Computer Science (DSE-1F (Elective-A) : PHP with MySQL)
 Computer Science (DSE-2F (Elective-B) : Web Technologies)
 Statistics (Design of Experiments, Vital Statistics, Official Statistics and Business Forecasting)
 Electronics (Digital Communication)
 Botany (Paper-VIII : Plant Physiology)
 Botany (Paper-IX (Elective-III) : Tissue Culture and Biotechnology)
 Zoology (Paper-VII : Immunology and Animal Biotechnology)
 Zoology (DSE-II(A) Paper-VIII : Aquatic Biology)

Despite every effort taken to present the book without errors, some errors might have crept in. We
do not take any legal responsibility for such errors and omissions. However, if they are brought
to our notice, they will be corrected in the next edition.

Printed at: SIA Publishers & Distributors Pvt. Ltd.

SIA Publishers & Distributors Pvt. Ltd., Office Address:
Shed No. C-8/2, IDA Uppal, Hyderabad-39. # 5-1-911/5, Biyabani Square Building, Putli Bowli,
Lane Opp. to Osmania Medical College, Koti,
Hyderabad -500 095, Telangana, India.
PREFACE
ABOUT THE SUBJECT

Web Technologies is the programming concept that allows users to create interactive web pages. These pages can
be created by writing code using various web programming languages like XML, HTML, JavaScript, VBscript, Perl
and PHP. A web document can be created using client-side and server-side programming languages and are later
embedded within HTML documents. In client-side programming, the execution of program/script is done on client
machine. Some of the client-side programming languages are HTML, JavaScript, CSS etc.

Cascading Style Sheets (CSS) is one of the most interesting concepts of HTML as it specifies the rules for organ-
izing elements of a given web document. CSS are used to determine the style and layout of web pages. JavaScript
is a programming language with direct support to object-oriented methodologies. It facilitates inclusion of certain
executable data along with it. Hence, it can be said that with the usage of JavaScript, a given web page will no longer
remain a store house of static data but it can also maintain dynamic data which can interact with the users, it can
dynamically create HTML context and also control the browser actions.

ABOUT THE BOOK

This book provides theoretical and practical knowledge to the student about “Web Technologies” for B.Sc III-Year
VI-Sem. It covers the complete syllabus of the subject prescribed by O.U. The content written in this book is presented
in a consistently readable and student friendly format so that student can prepare well for their both mid and final
exams. This book is beneficial because it gives complete up-to-date information about each topic and the questions
to be asked in the exams. This helps the student in getting a clear idea about the important questions in each topic.
This book has been prepared keeping student’s views, ideas and suggestions in mind. The main motivation behind
the publication of this book is to help the student to gain good marks and knowledge in the subject.

According to the examination pattern of B.Sc students, this book provides the following features:

v List of Programs are provided before the units for easy reference.

v Every unit is structured into two main sections viz. Short Questions and Essay Questions with solutions
along with Learning Objectives and Introduction.

v Objective Type along with Very Short Answers are also given at the end of each unit.

v Three Model Papers are provided in order to help students to understand the paper pattern in the end examination.

v Lab Practical with Solutions are also provided at the end of units.

v Important Questions are included to help the students to prepare for Internal and External Assessment.

The table below gives complete idea about the subject, which will be helpful to plan and score good marks in their
exams.
Unit
Unit Name Description
No.
This unit includes topics like Structuring Documents for the Web:

Introducing HTML and XHTML, Basic Text Formatting, Presentational

Elements, Phrase Elements, Lists, Editing Text, Core Elements and

Attributes, Attribute Groups. Links and Navigation: Basic Links,

Creating Links with the <a> Element, Advanced E-mail Links. Images,
Structuring Documents for the Web, Audio and Video: Adding Images Using the <img> Element, Using
Links and Navigation, Images,
1. Images as Links, Image Maps, Choosing the Right Image Format,
Audio and Video, Tables, Forms,
Frames Adding Flash, Video and Audio to Your Web Pages, Table: Introducing

Tables, Grouping Section of a Table, Nested Tables, Accessing Tables,

Forms: Introducing Forms, Form Controls, Sending Form Data to the

Server, Frames: Introducing Frameset, <frame> Element, Creating

Links Between Frames, Setting a Default Target Frame Using <base>

Element, Nested Framesets, Inline or Floating Frames with <iframe>.

This unit includes topics like Cascading Style Sheets: Introducing CSS,

Where you Can Add CSS Rules, CSS Properties: Controlling Text,

Text Formatting, Text Pseudo Classes, Selectors, Lengths, Introducing

the Box Model, More Cascading Style Sheets: Links, Lists, Tables,

2. Cascading Style Sheets Outlines, The :focus and :activate Pseudo Classes Generated Contents,

Miscellaneous Properties, Additional Rules, Positioning and Layout

with CSS, Page Layout: Understanding the Site’s Audience, Page Size,

Designing Pages, Coding Your Design, Developing for Mobile Devices,

Design Issues: Typography, Navigation, Tables, Forms.

This unit includes topics like Learning JavaScript: How to Add Script

to Your Pages, The Document Object Model, Variables, Operators,

Learning and Working with Functions, Control Statements, Looping, Events, Built-in Objects,

3. JavaScript, Putting Your Site on Working with JavaScript: Practical Tips for Writing Scripts, Form

the Web Validation, Form Enhancements, JavaScript Libraries. Putting Your

Site on the Web: Meta Tags, Testing Your Site, Talking the Leap to

Live, Telling the World about Your Site, Understanding Your Visitors.

It is sincerely hoped that this book will satisfy the expectations of students and at the same time helps them to score
maximum marks in exams.

Suggestions for improvement of the book from our esteemed readers will be highly appreciated and incorporated
in our forthcoming editions.
 Web Technologies
B.Sc III-Year VI-Semester (OU)

CONT ENT S
Syllabus (As per (2016-17) Curriculum)
List of Programs L.1 – L.2

UNIT-WISE SHORT & ESSAY TYPE QUESTIONS WITH SOLUTIONS

Unit No. Unit Name Question Nos. Page Nos.

Topic No. Topic Name

UNIT - I Structuring Documents for The Web, Links and

Navigation, Images, Audio and Video, Tables,
Forms, Frames Q1 - Q68 1 - 78

Part-A SHORT QUESTIONS WITH SOLUTIONS Q1 - Q10 2 - 4

Part-B ESSAY QUESTIONS WITH SOLUTIONS Q11 - Q68 5 - 75

1.1 Structuring Documents for the Web 5

1.1.1 Introducing HTML and XHTML Q11 - Q15 5

1.1.2 Basic Text Formatting Q16 - Q19 10

1.1.3 Presentational Elements, Phrase Elements Q20 - Q21 15

1.1.4 Lists, Editing Text Q22 - Q23 18

1.1.5 Core Elements and Attributes, Attribute Groups Q24 - Q25 21

1.2 Links and Navigation 25
1.2.1 Basic Links Q26 25
1.2.2 Creating Links with the <a> Element Q27 - Q29 26
1.2.3 Advanced E-mail Links Q30 29
1.3 Images, Audio and Video 30
1.3.1 Adding Images Using the <img> Element,
Using Images as Links Q31 - Q32 30
1.3.2 Image Maps Q33 - Q36 32
1.3.3 Choosing the Right Image Format Q37 36
1.3.4 Adding Flash, Video and Audio to Your Web Pages Q38 - Q47 37
 1.4 Tables 46
1.4.1 Introducing Tables Q48 46
1.4.2 Grouping Section of a Table Q49 49
1.4.3 Nested Tables Q50 53
1.4.4 Accessing Tables Q51 - Q53 54
1.5 Forms 56
1.5.1 Introducing Forms Q54 56
1.5.2 Form Controls Q55 - Q62 56
1.5.3 Sending Form Data to the Server Q63 68
1.6 Frames 69
1.6.1 Introducing Frameset, <frame> Element,
Creating Links Between Frames Q64 - Q66 69
1.6.2 Setting a Default Target Frame Using <base>
Element, Nested Framesets, Inline or Floating
Frames with <iframe> Q67 - Q68 74

INTERNAL ASSESSMENT 76 - 78

UNIT - II Cascading Style Sheets Q1 - Q66 79 - 172

Part-A SHORT QUESTIONS WITH SOLUTIONS Q1 - Q10 80 - 81

Part-B ESSAY QUESTIONS WITH SOLUTIONS Q11 - Q66 82 - 169

2.1 Cascading Style Sheets 82
2.1.1 Introducing CSS Q11 - Q13 82
2.1.2 Where you can Add CSS Rules Q14 - Q16 85
2.2 CSS Properties Q17 89
2.2.1 Controlling Text Q18 89
2.2.2 Text Formatting Q19 93
2.2.3 Text Pseudo Classes Q20 100
2.2.4 Selectors Q21 101
2.2.5 Lengths Q22 104
2.2.6 Introducing the Box Model Q23 - Q27 106
2.3 More Cascading Style Sheets 116
2.3.1 Links Q28 - Q29 116
2.3.2 Lists Q30 119
2.3.3 Tables Q31 122
2.3.4 Outlines Q32 128
2.3.5 The :focus and :activate Pseudo Classes Q33 129
2.3.6 Generated Content Q34 130
2.3.7 Miscellaneous Properties Q35 132
2.3.8 Additional Rules Q36 134
2.3.9 Positioning and Layout with CSS Q37 134
 2.4 Page Layout 137
2.4.1 Understanding the Site’s Audience Q38 137
2.4.2 Page Size Q39 - Q43 138
2.4.3 Designing Pages Q44 - Q51 142
2.4.4 Coding Your Design Q52 - Q54 146
2.4.5 Developing for Mobile Devices Q55 - Q57 152
2.5 Design Issues 155
2.5.1 Typography Q58 155
2.5.2 Navigation Q59 - Q62 158
2.5.3 Tables Q63 159
2.5.4 Forms Q64 - Q66 163

INTERNAL ASSESSMENT 170 - 172

UNIT - III Learning and Working with JavaScript, Putting

Your Site on the Web Q1 - Q60 173 - 256
Part-A SHORT QUESTIONS WITH SOLUTIONS Q1 - Q12 174 - 175
Part-B ESSAY QUESTIONS WITH SOLUTIONS Q13 - Q60 176 - 253
3.1 Learning JavaScript 176
3.1.1 How to Add Script to Your Pages Q13 - Q15 176
3.1.2 The Document Object Model Q16 - Q19 178
3.1.3 Variables, Operators, Functions Q20 - Q22 186
3.1.4 Control Statements, Looping, Events Q23 - Q25 196
3.1.5 Built-in Objects Q26 - Q31 205
3.2 Working with JavaScript 218
3.2.1 Practical Tips for Writing Scripts, Form Validation Q32 - Q39 218
3.2.2 Form Enhancements Q40 - Q43 231
3.2.3 Javascript Libraries Q44 - Q48 235
3.3 Putting Your Site on the Web 241
3.3.1 Meta Tags Q49 - Q50 241
3.3.2 Testing Your Site Q51 - Q52 243
3.3.3 Taking the Leap to Live Q53 - Q56 247
3.3.4 Telling the World About Your Site Q57 250
3.3.5 Understanding Your Visitors Q58 - Q60 252

INTERNAL ASSESSMENT 254 - 256

LAB PRACTICAL WITH SOLUTIONS LP.1 – LP.32

UNIT-WISE IMPORTANT QUESTIONS IQ.1 – IQ.3

MODEL QUESTION PAPERS WITH SOLUTIONS (As Per OU Curriculum)

Model Paper-I MP.1 – MP.1
Model Paper-II MP.2 – MP.2

Model Paper-III MP.3 – MP.3

SYLLABUS
UNIT-I

Structuring Documents for the Web: Introducing HTML and XHTML, Basic Text Formatting, Presentational
Elements, Phrase Elements, Lists, Editing Text, Core Elements and Attributes, Attribute Groups.

Links and Navigation: Basic Links, Creating Links with the <a> Element, Advanced E-mail Links.

Images, Audio and Video: Adding Images Using the <img> Element, Using Images as Links, Image
Maps, Choosing the Right Image Format, Adding Flash, Video and Audio to Your Web Pages.

Tables: Introducing Tables, Grouping Section of a Table, Nested Tables, Accessing Tables.

Forms: Introducing Forms, Form Controls, Sending Form Data to the Server.

Frames: Introducing Frameset, <frame> Element, Creating Links Between Frames, Setting a Default
Target Frame Using <base> Element, Nested Framesets, Inline or Floating Frames with <iframe>.

UNIT-II

Cascading Style Sheets: Introducing CSS, Where you Can Add CSS Rules.

CSS Properties: Controlling Text, Text Formatting, Text Pseudo Classes, Selectors, Lengths, Introducing
the Box Model.

More Cascading Style Sheets: Links, Lists, Tables, Outlines, The :focus and :activate Pseudo Classes
Generated Content, Miscellaneous Properties, Additional Rules, Positioning and Layout with CSS.

Page Layout: Understanding the Site’s Audience, Page Size, Designing Pages, Coding Your Design,
Developing for Mobile Devices.

Design Issues: Typography, Navigation, Tables, Forms.

UNIT-III

Learning JavaScript: How to Add Script to Your Pages, The Document Object Model, Variables, Operators,
Functions, Control Statements, Looping, Events, Built-in Objects.

Working with JavaScript: Practical Tips for Writing Scripts, Form Validation, Form Enhancements,
JavaScript Libraries.

Putting Your Site on the Web: Meta Tags, Testing Your Site, Talking the Leap to Live, Telling the World
about Your Site, Understanding Your Visitors.
MODEL QUESTION PAPERS WITH SOLUTIONS COMPUTER SCIENCE PAPER-VIII (B)

FACULTY OF SCIENCE
MODEL
PA P E R 1
B.Sc. (CBCS) VI-Semester Examinations
Subject: COMPUTER SCIENCE
DSE-2F: Web Technologies
Paper-VIII (B)

Time: 2 Hours Max. Marks: 60

SECTION - A ( 5 × 3 = 15 Marks )
Answer any Five of the following Eight questions. Each carries Three marks.

1. Write about various controls of forms. (Unit-I, Page No. 2, Q2)

2. Write about the tags used for creating table. (Unit-I, Page No. 3, Q4)

3. Write about style rule. (Unit-II, Page No. 80, Q2)

4. What is a selector? List the types of selectors in CSS. (Unit-II, Page No. 81, Q5)

5. Discuss in brief about tracking. (Unit-II, Page No. 81, Q8)

6. What is a variable in java script? How to declare a variable (Unit-III, Page No. 174, Q3)

7. Write a short note on meta tags. (Unit-III, Page No. 175, Q9)

8. What are head, title, body tags in HTML? (Unit-I, Page No. 4, Q7)

SECTION - B ( 3 × 15 = 45 Marks )
Answer all of the following Three questions. Each carries Fifteen marks.

9. (a) Explain in detail about HTML. (Unit-I, Page No. 5, Q11)

OR

(b) Explain how basic table is created in xhtml. (Unit-I, Page No. 46, Q48)

10. (a) How style sheets are specified into HTML document? (Unit-II, Page No. 82, Q12)

OR

(b) Explain in detail about background properties of CSS3 with an example. (Unit-II, Page No. 117, Q29)

11. (a) How a script is added to the webpage. (Unit-III, Page No. 176, Q13)

OR

(b) Write short notes on following,

(i) Focusing on first form item
(ii) Auto tabbing between fields. (Unit-III, Page No. 231, Q40)

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. MP.1

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

FACULTY OF SCIENCE
MODEL
PA P E R 2
B.Sc. (CBCS) VI-Semester Examinations
Subject: COMPUTER SCIENCE
DSE-2F: Web Technologies
Paper-VIII (B)
Time: 2 Hours Max. Marks: 60

SECTION - A ( 5 × 3 = 15 Marks )
Answer any Five of the following Eight questions. Each carries Three marks.

1. Write about types of lists. (Unit-I, Page No. 3, Q3)

2. What is a frame in HTML? Give an example. (Unit-I, Page No. 3, Q5)
3. What is CSS? (Unit-II, Page No. 80, Q1)
4. Write about vertical-align property. (Unit-II, Page No. 81, Q6)
5. Write a short note on,
(i) list-style-position property
(ii) list-style-image property. (Unit-II, Page No. 81, Q9)
6. What is an array in java script? (Unit-III, Page No. 175, Q7)
7. List the different points used to make people aware of the site. (Unit-III, Page No. 175, Q11)
8. What is hyperlink? Explain the anchor tag with syntax. (Unit-I, Page No. 4, Q9)

SECTION - B ( 3 × 15 = 45 Marks )
Answer all of the following Three questions. Each carries Fifteen marks.
9. (a) Discuss about presentational elements. (Unit-I, Page No. 15, Q20)

OR

(b) What are different types of Form controls in xhtml? (Unit-I, Page No. 56, Q55)

10. (a) Explain how the fonts can be controlled. List and explain each of the properties
that directly affect the font and its appearance. (Unit-II, Page No. 89, Q18)

OR

(b) Discuss in brief about the composition and grids. (Unit-II, Page No. 142, Q44)

11. (a) What is an operator? What are the different types of operators? (Unit-III, Page No. 188, Q21)

OR

(b) What are the two different states of testing? Explain about validating
HTML, XHTML and CSS. (Unit-III, Page No. 243, Q51)

MP.2 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

MODEL QUESTION PAPERS WITH SOLUTIONS COMPUTER SCIENCE PAPER-VIII (B)

FACULTY OF SCIENCE
MODEL
PA P E R 3
B.Sc. (CBCS) VI-Semester Examinations
Subject: COMPUTER SCIENCE
DSE-2F: Web Technologies
Paper-VIII (B)
Time: 2 Hours Max. Marks: 60

SECTION - A ( 5 × 3 = 15 Marks )
Answer any Five of the following Eight questions. Each carries Three marks.

1. Write about different formatting tags. (Unit-I, Page No. 2, Q1)

2. Explain <img> tag in HTML. (Unit-I, Page No. 4, Q6)

3. List the properties that influence the appearance of the font. (Unit-II, Page No. 80, Q4)

4. What are the different properties that are used to position the items on the page. (Unit-II, Page No. 81, Q7)

5. List the advantages of fixed-width design and liquid design. (Unit-II, Page No. 81, Q10)

6. Define functions in javascripts. (Unit-III, Page No. 174, Q4)

7. Write a short note on domain name. (Unit-III, Page No. 175, Q12)

8. Define with syntax <FONT> tag. (Unit-I, Page No. 4, Q10)

SECTION - B ( 3 × 15 = 45 Marks )
Answer all of the following Three questions. Each carries Fifteen marks.

9. (a) Explain about images and supported attributes in HTML. (Unit-I, Page No. 30, Q31)

OR

(b) Discuss about frameset. (Unit-I, Page No. 69, Q64)

10. (a) Discuss in detail about the dimensions of a box. (Unit-II, Page No. 111, Q27)

OR

(b) Write in detail about layout of forms. (Unit-II, Page No. 165, Q66)

11. (a) Write about form validation. (Unit-III, Page No. 219 , Q33)

OR

(b) What are the different pointers used to make more people aware of the site? (Unit-III, Page No. 250, Q57)

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. MP.3

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)

SOFTWARE DEVELOPMENT, Marketed by:

VERIFICATION, VALIDATION
UNIT STRUCTURING DOCUMENTS
AND
THE SOFTWARE
WEB,
FOR
LINKS AND TESTING,
NAVIGATION,
IMAGES, AUDIO
MEASUREMENT ANDAND VIDEO,
METRICS FOR

3
1 TABLES, FORMS, FRAMES
ASSOSSING SOFTWARE QUALITY SIA GROUP

LEARNING OBJECTIVES

After studying this unit, a student will have thorough knowledge about the following key concepts,

 Introduction to HTML and XHTML

 Text formatting tags, Presentational elements and Phrase elements
 Basic links and usage of <a> element
 <img> element and linking image maps
 Adding flash, video and audio to the web pages
 Tables and Nested tables
 Forms and Form controls
 Frameset and <frame> element
 Links between frames and <iframe> element.

INTRODUCTION

HTML is a markup language immensely used to develop web pages. It creates a web page with the help of in-
built tags, which are the special keywords supported by HTML. The most commonly used HTML tags include
<HTML>---</HTML>, <HEAD>---</HEAD>, <BODY>---</BODY>, <TITLE>--- </
TITLE> etc. HTML supports formatting tags which are used for designing and coloring the text. A hyperlink
creates a link. This link directs the users to another HTML page or to any specific part of a web page or the
same webpage. An image tag or <img> tag inserts an image in HTML page.
In HTML, data can also be represented in the form of a table consisting of rows and columns. The HTML
table is created using <TABLE>…</TABLE> tags. Form is a web page which contains elements like text
fields, check boxes. Usually forms are created by inserting<FORM>---</FORM> tags in the HTML code.
The output screen of every HTML application is referred as a frame which is defined as the region of the
browser that displays certain output.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 1

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

PART-A
SHORT QUESTIONS WITH SOLUTIONS
Q1. Write about different formatting tags.
Answer : Model Paper-III, Q1

Formatting the text/content present in a web page can be done through formatting tags. Various formatting tags in HTML
are as follows,
1. Paragraph
The tag <p> allows the text to be written in a paragraph (i.e., block-wise).
2. Center Tag
The tag <center> allows the text to be written in center of a page.
3. Break Tag
The tag <br> shows a line break.
4. Bold Text
The tag <b> displays the text in bold format.
5. Italic Text
The tag <i> displays the text in italicized format.
6. Marked Text
The tag <mark> displays the text by highlighting or marking it.
7. Underlined Text
The tag <u> displays the text in underlined format.
8. Subscript
The tag <sub> displays the text in the subscripted format.
9. Superscript
The tag <sup> displays the text in the superscripted format.
Q2. Write about various controls of forms.
Answer : Model Paper-I, Q1

The various form controls are as follows,

(i) The BUTTON Element
In HTML, button is generally used to trigger appropriate code of javascript (or) to perform some action.
Syntax
<INPUT TYPE = “button” NAME = “Name of button” VALUE = “button label”>
Example
<INPUT TYPE = “button”, NAME = “b1” VALUE = “Add”>
(ii) The TEXT Element
In HTML, Text elements are considered as data entry fields. These fields generally accept single line of text.
Syntax
<INPUT TYPE = “text” Name = “name of text field” VALUE = “default value”>
Example
<INPUT TYPE = “text” NAME = “L1” VALUE = “JOHN”>
2 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
(iii) The PASSWORD Element Syntax
It is similar to text filed but accepts confidential <ol>
information like password, account number and <li> . . . </li>
personnel identification number etc. The password <li> . . . </li>
element are echoed as ‘*’. </ol>
Syntax Example
<INPUT TYPE = “Password” NAME = “name of the 1. item
password” VALUE = “default”> 2. item
3. Definition Lists
Example
It is a special type of list that will list the terms and their
<INPUT TYPE = “password” NAME = “emp_id” definitions. It is created using (define list) <dl> tag. A
VALUE = “default”> term in a definition list is specified using <dt> (define
(iv) The Submit Button term) tag and its definition is specified using <dd> (de-
In HTML, the submit button sends the data entered into fine definition) tag.
the form to the web server. Syntax
<dl>
Syntax
<dt> . . . </dt>
<INPUT TYPE = “submit” NAME = “name of the
<dd> . . . </dd>
submit button” VALUE = “submit button label”>
</dl>
Example
Q4. Write about the tags used for creating table.
<INPUT TYPE = “SUBMIT” NAME = “employee1”
Answer : Model Paper-I, Q2
VALUE = “VALIDATE”>
In HTML, data can also be represented in table format.
Q3. Write about types of lists. In this approach, data is usually organized in the form of rows
Answer : Model Paper-II, Q1 and columns. The tags and attributes that helps in creating
List are displayed in bulleted format by using bullets HTML table are as follows.
or specific sequence. The different types of lists are, 1. <TABLE>...</TABLE>
2. <TR>...</TR>
1. Unordered Lists
3. <TH>...</TH>
Unordered lists displays certain text with a bullet mark. 4. <TD>...</TD>
These lists are used when the user does not want to
5. <THEAD>...</THEAD>
follow any specific order.
6. <CAPTION>...</CAPTION>
Here, usually the entire list item is enclosed under the 7. <TBODY>...</TBODY>
tags <UL> text to be displayed </UL> with each list
8. <TFOOT>...</TFOOT>
item sentence initiating with <LI> and closing with </
LI>. Q5.
What is a frame in HTML? Give an example.
Syntax Answer : Model Paper-II, Q2

<ul> Frame
The output screen of every HTML application is
<li> . . . </li> nothing but a frame. Hence, frame can be define as the part
<li> . . . </li> of the browser that displays a particular output. Here, each
</ul> independent frame can display an independent “HTML” file.
Hence within a single window, various files can be viewed at
Example
one glance.
o item Example
o item Frame.html
2. Ordered Lists <HTML>
<HEAD>
Ordered list is used to display list items with order.
<TITLE> Frame </TITLE>
Ordered list is usually initiated using the tags <OL type
</HEAD>
= “value”> text to be displayed </OL>. These lists are
<BODY BGCOLOR = “pink”>
used when user is willing to display lists sequentially
<CENTER> <STRONG> <H1> FRAME example </
each list item preceeded with <li> . . . </li>, default
sequence is number. It can be customized using type
H1> </STRONG> </CENTER>
attributes <ol type = “1|A|a|i|I”> value is the first char-
</BODY>
acters of sequence. </HTML>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 3
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Mainframe.html Q8. Define the structure of html program.
<HTML> Answer :
<HEAD> The structure of a basic HTML document is given below,
<TITLE> inserting frame</TITLE> <HTML>
<FRAMESET ROW = “25%”> <HEAD>
<FRAME SRC = “frame.html”> <!— A HTML comment—>
</FRAMESET> <TITLE> A HTML Document </TITLE>
</HEAD> </HEAD>
</HTML> <BODY>
Q6. Explain <img> tag in HTML. ...
Answer : Model Paper-III, Q2
...
Image tag is used to add an image to the page. This is </BODY>
done by providing suitable image source and image file format
in the tag. </HTML>
Syntax Q9. What is hyperlink? Explain the anchor tag with
syntax.
<img Src = “location of the image”/name of the image”>
Answer : Model Paper-II, Q8
Attributes supported by the image tag are,
Hyperlink
(a) src
A hyperlink directs the users to another HTML page
(b) Alt
or to any specific part of a web page or the same webpage. A
(c) Align hyperlink allows users to navigate between various parts of
a web page or different web pages. It allows users to create
(d) Border
hyperlinks using text/images available on webpage.
(e) Hight /Width
Anchor Tag
(f) Hspace/Vspace
In HTML, a link is defined using <a> tag. <a> is an
(g) Longdesc anchor tag. The code for creating a link is embedded between
the tags <a> ... </a>.
(h) Name.
Q7. What are head, title, body tags in HTML? The syntax of creating HTML tag is as follows,

Answer : Model Paper-I, Q8

<a href = “URL” ... attribute-list>Text</a>

Head Tag Q10. Define with syntax <FONT> tag.

<HEAD> ……</HEAD> it holds the head information Answer : Model Paper-III, Q8

of the HTML code i.e., title, link, meta are same of the tags that By using font tag, the style and size of the text can be
appears in the head region of the html document. changed. The attributes of the font tag are size and color which
Title Tag are shown below,

<TITLE> ……</TITLE> the name of the document <font size = “[t/ – ]n” color = “# rrggbb” >
which is displayed at the title bar of the html document is This tag sets the font size to the text. It has highest
provided using <TITLE> tag. It is an optional tag. priority than the default value or any size set by <basefont>
Body Tag i,e., it changes the font size to a particular size by modifying
the <basefont> size or default size.
<BODY> ……</BODY> it is the major tag which holds
the data and elements on a web page. It holds eight attributes. The size attributes uses the numbers from 1 to 7 for
They are : background, bgcolor, bottom margin, left margin, tag absolutes font sizes but for relative sizes it uses t/ – 1 to 7.
margin, right margin, text, scroll respectively. These attributes For example: <font size = “+5” Font </font >
can make the representation of elements depending on the
requirement. It displays font with size 5.
4 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
PART-B
ESSAY QUESTIONS WITH SOLUTIONS
1.1 STRUCTURING DOCUMENTS FOR THE WEB

1.1.1 Introducing HTML and XHTML

Q11. Explain in detail about HTML.
Answer : Model Paper-I, Q9(a)

HTML
HTML stands for HyperText Markup Language. It is markup language immensely used in developing web pages. In
similar way, the Hyper Text Markup Language highlights different views of a given web page in terms of headers, titles, plain
text, images, sounds etc.
HTML creates a web page with the help of numerous in built tags. A tag is nothing but a special keyword and instruction
supported by browser.
Considerations to be taken while creating a HTML page,
 Every HTML code should begin with <HTML> tag and end with </HTML> tag.
 Every HTML code should be saved by .HTML or .HTM extension.
 There is no specific editor devised for writing HTML codes, i.e., a given HTML code can be written on a simple notepad.
 The output of a given HTML document can be visualized by typing the path (where a given HTML document has been
saved) along with .HTML extension on the address bar of any web browser (internet explorer, netscape navigator etc.)
 If the browser is not displaying expected output then, it means that the HTML code contains certain errors which should
be sufficiently debugged.
 It has to be noted that the HTML language is not case sensitive, hence writing the code either in upper case or lower
case will make no difference.
Steps for Writing a HTML Program
Step 1
To write a HTML program, open a suitable notepad. This can be done by clicking the start button and typing “notepad”
at the command prompt.
An untitled notepad will be displayed as shown below.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 5

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

Type the following Code First.HTML

<HTML>
<HEAD>
<TITLE> MY FIRST HTML PROGRAM</TITLE>
</HEAD>
<BODY>
<P>SIA Publishers And Distributors Private Limited </P>
</BODY>
</HTML>
Now, save the above code as first.html (for convenience create a new directory in C:\ MyHtmlprogram and save the program
in it).

Step 2
After saving, an internet explorer icon will be displayed with the file name as shown below.

first. html
Double click to execute it. The output will be available in the following manner.
Output

Q12. Write about XHTML.

Answer :
XHTML is the lastest version of HTML. It has become a W3C recommendation in January 2000. XHTML is a enhanced
version of HTML by using XML that changes the direction and using the HTML in the way it must to be. In short, rules does
matter. Earlier, the browser must be intimated about anything and it would render. Inorder to form a valid XHTML document
the following rules must be followed,
6 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
 A doctype indicator which should conform must be available to its rules.
 The tags such as <html>, <head> and <body> (or a <frameset> containing a <body> inside of a <no frames> tag)are
required.
 <title> must be first in the <head> element.
 All the attributes, even simple ones such as <p align = “left”> must be quoted
 Tags must be nested properly.
 The tags such as <p> and </p> are required.
 Empty tags need to be closed, so tags such as <hr> become <hr/>.
 All tags and attribute names must be in lower case.
 XHTML is case sensitive.
 XHTML is sensitive to a single white space character.
 XHTML follows a content model.
Q13. Discuss various tags of HTML.
Answer :
Commonly Used HTML Tags Description
1. <HTML> ……</HTML>  It is placed at the start as well as at the end of every HTML page. The code
which resides between these tags forms the head, title and body of the
HTML program.
It is compulsory that every HTML program should have <HTML> ……
</HTML> at the start as well as at the end of the document.
2. <HEAD> ……</HEAD>  It holds the head information of the HTML code i.e., title, link, meta are
some of the tags that appears in the head region of the html document.
3. <TITLE> ……</TITLE>  The title which is displayed at the title of the html document is provided
using <TITLE> tag. It is an optional tag which displays in title bar.
4. <BODY> ……</BODY>  It is the major tag which holds the contents appearing on a web page.
It holds eight attributes. They are : background, bgcolor, bottom margin,
left margin, tag margin, right margin, text and scroll. These attributes
can make the representation of elements depending on the requirement.
5. Headers tag  These are frequently used tags which display data in bold font with different
(<H1><H2><H3>……<H6>) sizes. <H1> causes data to be displayed in biggest font whereas <H6>
in the smallest font.
6. <!……comment…>  It provides comments to be displayed in the html document. They make the
document elucidating.
7. Formatting text tags
 BOLD (<B> ……</B>)  It makes the text font to bold.
 ITALIC (<I> ……</I>)  It makes the text to appear in italic form.
 UNDERLINE (<U> ……</U>)  It underlines the text.
 LINE BREAK (<BR> … </BR>)  It discriminates between two lines or prevents addition of gap between
and NOLINE BREAK two lines.
(<NOBR> ……</NOBR>)

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 7

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
 PARAGRAPH (<P> ……</P>)  It makes the text to appear on the screen, by leaving certain space towards it’s
left, for the first line.
 CENTER  It aligns the text at the center of the screen.
(<CENTER> … </CENTER>)
8. LISTS (<UL> …</UL>) or  When a text (consisting several lines) is embedded in these tags, a bullet mark
(<OL> ……</OL>) is inserted at the beginning of every line or a number is added to each line.
9. Background <body bgcolor = “ ” >  It is used to set of background to the web page. The background can be any
color(or) an image
10. Text styles
 Base font  It changes the font of the entire text in a page.
<basefont>
 font <font>  It changes the font of only specified text.
11. Combining styles  It combines the style tags for the text
<b> <u>......</u> </b> Example: Bold and underline together.
12. Preformatted Text  It does not substitute the consecutive white spaces by any other tag or text.
<pre> ...... </pre>
13. Strike through text  It is used for displaying a strike through text. This enhances the users
<del> interest. It specifically used in advertising.
14. HTML symbols & name;  It is used to insert symbol on the webpage. They are called as entities.

Q14. Write in brief about document head and document body.

Answer :
Document Head
The head tag in the document contains the control information that is called in body tag. The <title> tag is the only tag
used in head section. It displays the title of the document at the top of the browser. Title of the document should be placed within
the opening and closing tags of title as shown below,
Document Body
The document body contains the text and elements that msut be displayed on the web page. The formatting of the text
can be controlled by HTML documents are divided into blocks of text. The body of the HTML documents generally include
paragraph and heading. Paragraph and heading are considered as two major blocks in HTML documents in which each block is
formatted independently and contains all the text and images of a document. Lists and tables are exceptional.
Paragraph contains the major part of the information and should be tagged explicitly within <p> and </p>.
Example
<html>
<head>
<title> Document Head </title>
</head>
<body>
<p>This is a document head tag </p> //Document body
</body>
</html>
8 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Output

Q15. What is hyperlink? Also, explain about anchor tag with example program.

Answer :

Hyperlink

A hyperlink directs the users from one web page to another HTML page or to any specific part of it or the same webpage.
A hyperlink allows users to navigate between various web pages. It allows users to create hyperlinks using text/images available
on webpage.

Anchor Tag

In HTML, a link is defined using <a> tag. <a> is a anchor tag. The code for creating a link is embedded between the tags
<a> ... </a>.

The syntax of creating HTML tag is as follows,

<a href = “URL” ... attribute-list>Text</a>

1. Href

This attribute defines the destination address. It is usually a URL path.

2. Text

This attribute embeds text/image or any other HTML element on web page.

3. Target

This attribute specifies the location to open a link document. Its values are blank, self, parent top and target frame.

4. Base Path

This attribute is used in head region of HTML tag. It provides the base path for the link.

Program

<html>

<head>

<title> Hyperlink </title>

</head>

<body>

<p> The link directs you to another HTML page </p>

<a href = “http://www.siapublishers.com/” target = “self”> SIA Publishers and Distributors Pvt Ltd. </a>

</body>

</html>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 9

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

1.1.2 Basic Text Formatting

Q16. What are Basic Text formattings? Write about White-Space property in XHTML.
Answer :
Basic Text Formatting
It is a process of changing the original state of the document such as text color back ground color using textformatting
tags. Every document contains some type text that is represented by using the formatting elements such as <h1>, <h2>, <h3>,
<h4>, <h5>, <h6>, <p>, <br/> and <pre>.
White-space Property
The white-space property is used to control the amount of space between each word. The possible values of white-space
property are as follows,
(i) Pre
The “pre” value preserves the white spaces and does not break the line until the <br> element is used explicitly.
(ii) Nowrap
The “nowrap” value does not preserve the white spaces instead it collapses the sequence of white spaces into a single
space. It does not breaks the line until the <br> element is used explicitly.
(iii) Normal
The “normal” is the default value. It does not preserves the white spaces instead it collapses the sequence of white spaces
into a single space. It breaks the line if it exceeds the available line space of the browser screen.
Example
<html>
<head>
<style type= “text/css”>
p.pre {white-space:pre;}
p.nowrap{white-space:nowrap;}
10 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
p.normal{white-space:normal;}

</style>

</head>

<body>

<h3>Effect of “pre” value</h3>

<p class= “pre”>This paragraph demonstrates the use of pre value of the white space property, this paragraph dem-
onstrates the use of pre value of the white space property, this paragraph demonstrates the use of pre value of the white
space property..</p>

<h3>Effect of “Nowrap” Value</h3>

<p class= “nowrap”>This paragraph demonstrates the use of nowrap value of the white space property..This paragraph
demonstrates the use of nowrap value of the white space property..This paragraph demonstrates the use of nowrap value
of the white space property..</p>

<h3>Effect of “Normal” Value</h3>

<p class= “normal”>This paragraph demonstrates the use of normal value of the white space property..This paragraph
demonstrates the use of normal value of the white space property..This paragraph demonstrates the use of normal value
of the white space property..</p>

</body>

</html>

Output

Q17. Discuss in detail about Headings.

Answer :

Heading tags are used to displays the text in predefined text size and bold face. These tags are used for defining HTML
heading with different levels. Html supports six types of headings.

Where,

 <h1> defines the text embedded between these tag with Largest bold font.

 <h2> defines the text with font lesser than <h1>

 <h3> defines the text with font lesser than <h2>

 <h4> define the text with font lesser than <h3>

 <h5> defines the text with font lesser than <h4>

 <h6> defines the text with smallest bold font lesser than <h5>.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 11

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Example
<HTML>
<HEAD>
<TITLE> HEADER TAG </TITLE>
</HEAD>
<BODY>
<h1> Web Programming </h1>
<h2> Web Programming </h2>
<h3> Web Programming </h3>
<h4> Web Programming </h4>
<h5> Web Programming </h5>
<h6> Web Programming </h6>
</BODY>
</HTML>
Output

Q18. Write in detail about text align attribute.

Answer :
text-align Property
The text-align property places the text at left, right or at center of browser’s window according to the specified value. The
attributes of text-align property are as follows,
(i) left
Positions the text at the left side of the browser’s window.
(ii) right
Positions the text at the right side of the browser’s window.
(iii) center
Positions the text at the middle of the browser’s window.

12 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Example
<html>
<title>Text Align</title>
<body>
<h1 style= “text-align:left”>Left</h1>
<h2 style= “text-align:center”>Center</h2>
<h3 style= “text-align:right”>Left</h3>
</body>
</html>
Output

Q19. Discuss about the following,

(i) <p> element
(ii) <br/> element
(iii) <pre> element.
Answer :
(i) <p> Element
The text can be written in a paragraph (i.e., block-wise) by using <p> tag.
<p> element contains universal attributes and deprecated align attribute such as align, class, id, style, title, chir, long.
Example
The following example illustrates the use of <p> tag.,
<html>
<head>
<title> Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 13

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
(ii) <br/> Element
This tag/element is used to break the current line of text. It displays the remaining text in the a next line. This tag does
not contain opening and closing tags, since it is an empty element. Multiple breaks (<br/>) can be used in between paragraphs
to display the text in different lines. This tag element contains the attributes such as clear, class, id, style, title.
Example
Consider below example that illustrates the use of break <br/> element,
<html>
<head>
<title> Break Tag </title>
</head>
<body>
<p> This is paragraph tag <br/> This is break element.</p>
</body>
</html>
Output

(iii) <pre> Element

<pre> element block is used to preserve the specific format of the source code. It contains both opening and closing tag.
Mostly, this element is used to show the computer source code. It is mostly used to display the special characters such as /, %,
<, > etc.
Example
<html>
<head>
<title>Pre tag</title>
</head>
<body>
<pre>
This element block is used to preserve the format for the source code
</pre>
</body>
</html>
Output

14 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)

1.1.3 Presentational Elements, Phrase Elements

Q20. Discuss about presentational elements.
Answer : Model Paper-II, Q9(a)
Presentational Elements
The text can be displayed in different styles or presentation styles using the following tags,
1. <b> element
2. <i> element
3. <u> element
4. <s> (or) <strike> element
5. <tt> element
6. <sup> element
7. <sub> element
8. <big> element
9. <small> element
10. <hr> element.
1. <b> Element
The tag <b> displays the text in bold form.
Example
<P> <b> Web Programming </b> </P>
2. <i> element
The tag <i> displays the text in italic form.
Example
<P> <i> Web Programming </i> </P>
3. <u> element
The tag <u> displays the text in underline form.
Example
<P> <u> Web Programming <u> </P>
4. <s> (or) <strike> element
The tag <strike> displays the text with a strike through it.
Example
<P> <strike> Web Programming </strike> </P>
5. <tt> element
The tag <tt> displays the text in monospared font. Here tt stands for teletype.
Example
<P> <tt> Monospared </tt> font </P>
6. <sup> element
The tag <sup> displays the text in the superscript format.
Example
<P> Web Programming is an ^easy language </p>
7. <sub> element
The tag <sub> displays the text in the subscripted format.
Example
<P> Web Programming is an _easy language </P>
8. <big> element
The tag <big> displays the text in the large size.
Example
<P> <big> Web Technologies </big> </P>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 15

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
9. <small> element
The tag <small> displays the text in small size.
Example
<P> < small> Web Programming </small> </P>
10. <hr> element
The tag <hr/> is used for creating the horizontal rule across the page. It is an empty element similar to <br/> element.
Example
<html>
<head>
<title> Presentational Elements </title>
</head>
<body>
<p><b>This text is Bold</b></p>
<p><i>This text is Italic</i></p>
<p><tt>This text is Teletype</tt></p>
<hr />
<p> Water is H₂O. This text is Subscript .</p>
<p>Today is 22^st November .This text is Superscript. </p>
<p>^{This text is Superscript}</p>
<p><big>This text is Big</big></p>
<p><small>This text is Small</small></p>
</body>
</html>
Output

Q21. Discuss about Phrase Elements.

Answer :
Phrase Elements
The following are phrase elements in XHTML,
1. <em> Element
The tag <em> displays the text in an emphasized form.
Example
<P> <em> Web Programming </em> </P>
2. <strong> Element
The tag <strong> displays the text same as bold and with strong emphasis.
Example
<P> <strong> Web Programming </strong> </P>
<P> <em> Hello </em> <strong> World </Strong> </P>
16 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
3. <address> Element
The tag <address> displays the text of addresses.
Example
<address> SIA PUBLISHERS & DISTRIBUTORS, HYD </address>
4. <abbr> Element
The tag <abbr> is used for abbreviations of text displayed in between opening and closing tags.
Example
This is an phrase element <abbr title = “Web Technolgoies”> WT</abbr>
5. <acronym> Element
The tag <acronym> is used for acronyms of text displayed in between opening and closing tags.
Example
<acronym title = “Hyper Text Markup Language”> HTML </acroynm>
6. <dfn> Element
The tag <dfn> is used for defining a special or a key form in an italicized format.
Example
This is an element of phrase element <dfn> WT </dfn>
7. <blockquote> Element
The tag <blockquote> is used for quoting the text from other document.
Example
<P> This is a paragraph </P>
<blockquote> Web Technologies </blockquote>
Cite Attribute with <blockquote> Element
Cite attribute is used with the <blockquote> element for defining the source or path of the quote. It contains an URL.
Example
<blockquote cite = “http://www.tutorialpoint.com”> </blockquote>
8. <q> Element
The tag <q> is used for short quotations i.e., a quote is added to a word.
Example
<P> <q> It’s raining </q> </P>
9. <cite> Element
It defines the work title for example, A painting, BOOK, TV show, program, school, sports etc. It does not support any
specific attributes except global attributes, event attributes etc.
10. <code> Element
The tag <code> is used for including the codes of any programming language between opening and closing <Code> tags.
Example
<P> <code> &lt;h2&gt; This is phrase element &.lt; /h2&gt; </code> </P>
11. <kbd> Element
The tag <kbd> is used for displaying the text entered by a keyboard.
Example
<P> <kbd> SIA </kbd> <kbd> PUBLISHERS </kbd> and <kbd> DISTRIBUTORS </kbd>.<P>.
12. <var> Element
The tag <var> is used to display the programming variables. This is combined with <P> and <code> elements.
Example
<P> <code> document.write (“<var> Password </var>”) </code> </P>
13. <Samp> Element
The tag <Samp> is used for displaying the program output.
Example
<P> <Samp> This is an output </Samp> </P>.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 17

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Program
<HTML>
<HEAD>
<TITLE> Phrase Elements </TITLE>
</HEAD>
<BODY>
<P> <em> Web Technologies</em> </P>
<P> <strong> Web Technologies </strong> </P>
<P> <address> SIA PUBLISHERS & DISTRIBUTORS, HYD </address></P>
<P> <abbr title = “Web Technologies”> WT</abbr></P>
<P> <acronym title = “Hyper Text Markup Language”> HTML </acroynm></P>
<P> <blackquote> Web Technologies </blockquote> </P>
<P> <q> It’s raining </q> </P>
<P> <code> &lt;h2&gt;This is second heading&lt;/h2&gt;</code> </P>
<P> <kbd> SIA </kbd> <kbd> PUBLISHERS </kbd> and <kbd> DISTRIBUTORS </kbd>.<P>
<P> <Samp> This is an output </Samp> </P>
<P> <cite> Beginning HTML,XHTML,CSS and JavaScript</cite> by Jon Duckett </P>
</BODY>
</HTML>
Output

1.1.4 Lists, Editing Text

Q22. What are lists? Explain different types of lists with examples.
Answer :
List
“List” refers to a record that displays the text in arranged in sequential format or bullet format. Examples in this aspect
can be a shopping list, list of names of employees in an organization, list of names of places.
Types of Lists
XHTML supports three types of lists. They are,
1. Unordered list
2. Ordered list
3. Definition list.
18 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
1. Unordered List
Unordered list display certain text on the console, with each independent sentence being initiated with a bullet mark.
Here, usually the entire text is enclosed under the tags <UL> text to be displayed </UL> with each independent sentence
initiating with <LI> and closing with </LI>.
Unordered list does not account for different forms of displaying text like, sentences initiating with large roman numbers,
small roman numbers, capital letters, small letters etc. Hence, to achieve applications displaying text in the form of above men-
tioned formats, the concept of ordered lists is used.
2. Ordered Lists
It is used to display list items with specific order. Ordered list displays the text containing large roman numbers, small
roman numbers, capital letters etc. Ordered list is usually initiated using the tags <OL type = “value”> text to be displayed </
OL>. Here the value ‘attribute’ can accommodate any of the following values.

Value Independent Sentences Initiates with

1. A 1. Capital alphabets
E.g: A. All men are blue
B. All women are red
C. All children are purple.
2. a 2. Small alphabets
E.g: a. All men are blue
b. All women are red
c. All children are purple.
3. I 3. Large roman numerals
E.g: I. All men are blue
II. All women are red
III. All children are purple.
4. i 4. Small roman numerals
E.g: i. All men are blue
ii. All women are red
iii. All children are purple.
5. 1 5. Numerals usually the positive integers starting from 1
E.g: 1. All men are blue
2. All women are red
3. All children are purple.

If no value is specified, HTML prints the text containing the (+ve) integer numerals as default case.
3. Definition List
It is a special type of list that lists terms and their definitions. It is created using (define list) <dl> tag. Every term in a
definition list is defined within <dt> (define term) tag and its definition is defined within <dd> (define definition) tag.
Lists can be Nested or Embedded
When one list type is included in other list type then such type of succession is usually referred to as Miscellaneous or
Nested Lists.
Program
An example to illustrate the types of lists is given below,
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>B.Sc</li>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 19
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

<li>B.Com</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>B.Sc</li>
<li>B.Com</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>B.Sc</dt>
<dd>Bachelor of Science</dd>
<dt>B.com</dt>
<dd>Bachelor of Commerce</dd>
</dl>
<h2>Nested List</h2>
<ol TYPE=”1”>
<li>Course</li>
<ol TYPE=”A”>
<li>B.Sc
<ol TYPE=”i”>
<li>B.Sc(General)</li>
<li>B.Sc(Hons)</li>
</ol>
<li>B.Com
<ol TYPE=”i”>
<li>B.Com(General)</li>
<li>B.Com(Hons)</li>
</ol>
</li>
</ol>
</body>
</html>
Output

20 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Q23. Write about the elements used for editing text in XHTML.
Answer :
The elements used for editing the text in XHTML are as follows,
(i) <ins> Element
(ii) <del> Element.
(i) <ins> Element
The tag <ins> displays the text that is to be inserted or added to XHTML.
Example
<P> Web Programming <ins> is </ins> an easy subject </P>
(ii) <del> Element
The tag <del> displays the text that is to be delete/removed from XHTML.
Example
<P> Web Programming is <del> also </del> an easy subject </P>.
Example
<html>
<body>
<p>My favorite color is <del>Blue</del> <ins>Red</ins>!</p>
</body>
</html>
Output

1.1.5 Core Elements and Attributes, Attribute Groups

Q24. What are the core elements and attributes of an XHTML document.
Answer :
The core elements and attributes of an XHTML document are given below,
(i) <html>
(ii) <head>
(iii) <little> and
(iv) <body>.
(i) <html> Element
XHTML document contains <html> element, under an optional XML declaration and a DOCTYPE declaration. An opening
<html> tag includes namespace identifier which specifies the markup language to which the element belongs. For an XHTML
document, a namespace identifier is used to specify that markup language belongs to XHTML 1.0 namespace in the document.
It contains id, dir, lang, xml long attributes.
Example
<html xmlns = “http://www.tutorialspoint/Xhtml”>
(ii) <head> Element
<head> element contains the header elements. It is written after the opening tag of html in the document. <title> element
is used to specify or declare the title of the document and is written in the block of <head> element.
The following are the attributes used in an opening<head>tag
id, dir, lang, xml: lang, profile

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 21

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
(iii) <title> Element
The title is displayed at the title bar of an xhtml document by using <title> element.
<title> Element can be used in the following ways,
(a) It is used at the top of the browser window.
(b) It is used as a default name for a bookmarks in any browsers.
(c) It is used by search engines for index pages.
Example
<title> Beginning HTML, XHTML, CSS and Javascript by Jon Duckett </title>
The following are the attributes used in <title> element id, dir, lang, xml: lang
(iv) <body> Element
<body> element contains the content of a web page. It uses all attributes available in the attribute group. The background,
bgcolor, alink, vlink, link.text are the deprecated attributes used in this <body> element. The browser specific attributes such as
language, top margin, bottom margin, left margin, right margin, scroll, bg properties, margin height, margin width are also used
in <body> element.
Example
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Web Technologies</title>
</head>
<body>
These are the Core elements and attributes
</body>
</html>
Output

Q25. What are attribute groups? Explain.

Answer :
Attribute Groups
Attribute groups are embeded within opening tag. They provide extra information about an element. These attributes
contain name as well as value. A name is the property or a feature of an element. A value is the value of an attribute assigned to
that property.
Example
attribute
value
<body bgcolor = “red”>
Types of Attribute Groups
Attribute groups are of three types. They are,
(i) Core attributes
(ii) Internationalization attributes
(iii) UI events.
22 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
(i) Core Attributes
Core attributes used in an XHTML document are id, title, class and style
(a) id Attribute
id attribute is used for identifying an element in a page uniquely.
Syntax
id = “string”
id attribute should start with any alphabet, digits, hyphens, underscores and colons. In an XHTML page, the attribute
values should be different or unique.
(b) class Attribute
class attribute specifies that an element belongs to a class of elements.
Syntax
Class = “ClassName”
Example
<P class = “colors”> List of colors </P>
(c) title Attribute
title attribute provides the title for an element.
Syntax
title = “string”
(d) style Attribute
style attribute specifies the CSS rules in the block of element.
Example
<P style = “color : pink;”> Text </P>
Example
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
</head>
<body>
These are the Core elements and attributes
<p id = “string”> Hello </p>
<p class = “colors”> World </p>
<p title = “string” ></p>
<p style = “font-family:arial;color:#FF0000;”>Hello World </p>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 23

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
(ii) Internationalization Attributes
Internationalization attributes are used for helping the users to write pages of different languages and character sets. The
following are three types of internationalization attributes,
(a) dir
(b) lang
(c) xml:lang.
(a) dir Attribute
dir attribute is used to specify the direction in which the text must be displayed in the browser i.e., from left to right or
from right to left.
dir attribute contain the following values,
 ltr
ltr refers to the value from left to right and is considered as default value.
 rtl
rtl refers to the value from right to left.
(b) lang Attribute
lang attribute specifies the language that must be used in an xhtml document. This is used by search engines, screen read-
ers and other applications. It provides language – specific display to the users.
(c) xml:lang Attribute
xml.lang attribute is the xhtml attribute that is replaced for lang attribute. The value for this attribute must be a country
code ISO-639.
Program
<html >
<head>
<title>Internationalization Attributes</title>
</head>
<body>
<p dir =“rtl” >This is dir attribute.</p>
<p lang=“en”>This is lang attribute.</p>
<p xml:lang=“us”>This is xml:lang attribute.</p>
</body>
</html>
Output

(iii) UI Events
UI event attributes are used to link the elements with the event. Keypress or mouse movement are the examples of UI
events.
There are ten common events that are given as follows,
Onclick, Ondoubleclick, Onmouseup, Onmousemove, Onmousedown, Onmouseover, Onmouseout, Onkeypress, Onkey-
down and Onkeyup.
The <body> and <frame set> elements contain onload and onunload events whenever a page is opened or closed.
24 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)

1.2 LINKS AND NAVIGATION

1.2.1 Basic Links

Q26. Explain the following,

(i) How to link to other web-pages?
(ii) How to link to e-mail addresses?
Answer :
(i) Linking to other Web-Pages
A page can be linked to other web-pages by using the <a> element with the href attribute specifying the URL of the other
web-page. If the URL described by the href attribute is any other complete web-page then this URL is known as qualified URL.
This can be shown with the help of following example,
Example
<html>
<head>
<title>main page</title>
</head>
<h1>one of the most popular engine is
<a href = “http://www.Google.com”>Google</a></h1>
</body>
</html>
Output

When the phrase “yahoo” from the site.html page is clicked, the http://www.yahoo.com site appeared in the same window.
In addition to the href attribute, the anchor element can contain the title attribute which describes about the other page the
link navigates to the value of the title attribute is displayed in a tooltip when the user hovers the mouse over the link. This can
be shown with the help of following example,
Example
<html>
<head>
<title> main page</title>
<h1><a href = “http://www.Google.com/” title = “searches the info with google search engine”>Google</a> is a very
popular search engine</h1>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 25

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
(ii) Linking to e-mail Addresses
A link is created to an e-mail address by using anyone of the following syntax.
<a href = “mailto:abc@exp.com”> abc@emp.com</a>
<a href = “mailto:pqr@exmp.com”> Email us </a>
Example
<html>
<body>
<a href = “mailto:pqr@exmp.com”> Email us </a>
</body>
</html>
Output

1.2.2 Creating Links with the <a> Element

Q27. How source anchor is created to link?
Answer :
A document can be linked to other documents by using the <a> element. It contains an attribute “href” which specifies the
location link of the document that is to be linked. The text inside the anchor element should be clearly mentioned about the page
that is going to be linked there should not be any space between the <a> element because it renders all its contents including the
spaces as links. This is shown in the following example,
Example
home.html
<html>
<head>
<title>Home page</title>
</head>
<body>
<h1>Navigate to <a href = “Lists.html”>Course page</a></h1>
</body>
<html>
Output

When user clicks on the “lists page of the home page, the index.html page gets loaded into the same window by replacing
the home.html page. This can be shown as follows,
For remaining answer refer Unit-I, Page No. 19, Q.No. 22, Topic: Program.
26 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Q28. Explain how the specific parts of a page can be linked.
Answer :
The page can contain links to specific parts of it when the length of page is long or when the page does not fit in the
browser’s window or when the user has to scroll the page to move to the specific location. It is also called internal links.
Some examples of the linking to the specific parts to a page on web pages are as follows,
 Long page contains the links “Back of top” at the bottom of the page to navigate.
 Page contains the lists of contents that will direct to the relevant part of the page.
 Page contains the links in the text to navigate to definitions or to the footnotes.
It is possible by two attributes,
1. Name (or) id attribute
2. Source attribute.
The linking to the specific parts of a page can be achieved by using, source anchors and destination anchors.
(a) Source Anchors
The source anchors specify the links to the specific parts of same page. The href attribute in the source anchor should
contain the value same as the value of id attribute in the destination anchor except that it should be preceeded by a hash sign (#)
(also known as pond sign).
(b) Destination Anchors
The destination anchors contain particular parts in the page that can be linked by source anchor. The destination anchor
contains an attribute, “id”, or name attribute which provides the identification to a particular part of the page. This identification
is used as the value (preceeded by pond sign #) of the href attribute in the source anchor.
Example
<html>
<body>
<a name=“top”>Context</a>
<a href=“#top”>top</a>
</body>
</html>
Output

Q29. What are the other attributes of <a> element?

Answer :
Attributes of <a> Element
<a> element can contain the attributes like universal attributes, UI event attributes and other attributes such as access key,
charset, coords, href, hreflong, rel, rev, shape, style, tabindex, target and type.
1. access key Attribute
access key attribute is used for creating a keyboard shortcut to enable a link.
For example, A value is assigned to the access key attribute such as alphabet ‘P’. When the key “P” is pressed with alt or
ctrl the link is activated.
The access key attribute must be specified on the source anchor.
Example
<a id = “bottom” access key = “P”> Back to top </a>
In the above example, the link at the top of the page can be accessed using the access key attribute by pressing on the
keyboard.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 27
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
2. charset Attribute
charset attribute is used for indicating the character encoding of the document to which the URL is pointed. This can be
used to link a page in different languages with different character set. The value of charset attribute must be string i.e., UTF-8
or ISO-8859–1.
Example
<a href = “http://www.yahoo.co.jp/” charset = “ISO-2022-JP”> yahoo Japan </a>
In the above example, a document is linked with the japanese character set.
3. coords Attribute
coords attribute is used by source anchor that has image in it. This creates an image map i.e., same image link is used at
different places. The value of coords attribute is provided by x and y coordinates such that a particular part of image has link.
4. hreflang Attribute
hreflang attribute is used to specify the language of the page that is linked. The value of hreflang attribute is provided by
two letter language code.
Example
<a href = “http://www.google.co.in/”hreflang = “In”> India </a>
5. rel Attribute
rel attribute is used to specify the relationship between current document and resource provided by href attribute on the
source anchor. It does not support major browsers.
Example
<a href = “#next” rel = “next”> next </a>
This attribute can have the following values.
(a) toc (or) contents
toc refers to the document that contains table of contents of the current webpage.
(b) index
index refers to the document the contains index of the current webpage.
(c) glossary
glossary refers to the document that contains glossary of terms related to the current webpage.
(d) copyright
copyright refers to the document that contains a copyright statement of the current document.
(e) start
start refers to the document that is at the top position in a collection of ordered documents.
(f) next
next refers to the document that is at the next position in a collection of ordered documents.
(g) prev (or) previous
prev refers to the document that is at the previous position in a total of ordered documents.
(h) help
help refers to the document that is user understandable and can be navigated from one page or site to other.
(i) chapter
chapter refers to the document that represents as a chapter from the total documents.
(j) section
section refers to the document that represents as a section in a total documents.
(k) subsection
subsection refers to the document that represents as a subsection in a total documents.
(l) appendix
appendix refers to the document that is represented as a appendix in a total documents.

28 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
6. rev Attribute
rev attribute is same as rel attribute used on destination anchor that specifies the relation between the destination anchor
and the source anchor. It does not support major browsers.
7. shape Attribute
shape attribute is used to specify the shape of an area while creating an image map that becomes a clickable hotspot.
8. target Attribute
This attribute specifies the location to open a link document. Its values are blank, self, parent top and target frame.
Example
<a href \ “Pgm.html/” target = “_self”> Program </a>
9. title Attribute
The title attribute is used on any links that has images. Additional information is provided to the users that uses visual
text tooltip in any browsers.
10. type Attribute
type attribute is used to specify the MIME type of a link. These MIME types are compared with file extensions.
Example
<a href = “Pgmz.html” type = “text/html”> Program2 </a>
Program
<html>
<body>
<p><a href = “http://www.yahoo.co.jp/” charset = “ISO-2022-JP”> yahoo japan </a> </p>
<p><a href = “http://www.google.co.in/” hre?ang = “In”> India </a></p>
<p><a href = “#next” rel = “next”> next </a></p>
<p><a href = “Pgm1.htm/” target = “_self”> Program </a></p>
<p><a href = “Pgm2.html” type = “text/html”> Program2 </a></p>
<a id = “bottom” access key = “P”> Back to top </a>
</body>
</html>
Output

1.2.3 Advanced E-mail Links

Q30. Discuss about advanced E-mail links.
Answer :
Advanced E-mail Links
A link is created to the users default e-mail editor by providing an e-mail address as shown in below,
<a href = “mailto: abcd@exam.org”> abcd@exam.org </a>
Other parts of the message can also be specified by using C c’d or BCC’d for subject, body and e-mail addresses. A
question mark is placed after the e-mail address and name|value separated by an equal sign.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 29
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
The properties are described below,
(i) subject
This property is used for adding subject line to an e-mail.
(ii) body
This property is used for adding a message into the body of the e-mail.
(iii) cc
This property is used for sending a carbon copy of a mail to the given CC’d address. The value provided should be a valid
e-mail address. By using an ampersand, multiple addresses can be sent.
(iv) bcc
This property is used for sending a carbon copy of a mail secretly to the given BCC’d address without any recipient. The
value provided should be a valid e-mail address. Ampress and is used for providing multiple addresses.
A space between words in the subject line can be provided by adding % 20 in between words. A line break in a body of
message is created by adding %0D % 0A.
Example
<html>
<body>
<p><a href=“mailto:ab@email.address?subject=Information”>Home</a></p>
<p><a href=“mailto:cd@email.address?cc=ef@email.address,gh@email.address”>About us</a></p>
<p><a href=“mailto:stu@email.address?bcc=vw@email.address,xyz@email.address”>Contact us</a></p>
<a href=“mailto:abcd@email.address?body=One paragraph.”>Details</a>
</body>
</html>
Output

1.3 IMAGES, AUDIO AND VIDEO

1.3.1 Adding Images Using the <img> Element, Using Images as Links
Q31. Explain about images and supported attributes in HTML.
Answer : Model Paper-III, Q9(a)
Images (<img>)
This tag adds images to the web pages. They increase the visibility of web pages. These images are stored in computers
by following several strict formats, most common among them are BMP, JPEG, GIF, PMP etc. However ‘.GIF’ are most popular
because of its clarity and support for a wide range of colors. The following is the image tag,
<img src = “pic.gif” alt = “picture”/>
This forms the primary tag to insert images onto the web page.
Supported Attributes
The following are the support attributes of <img> tag,
1. SRC
It specifies the URL (Uniform Resource Locator) i.e., where the image is actually stored in the computer or server. For
example, if the image is stored in the ‘C’ drive, images folder, with name rose.gif, then SRC (Source) can supply URL
address as SCR = “C:\images\rose.gif”. It is mandatory to include SRC attribute within the <IMG> tag.
<img src = “c:/images/rose.gif”/>
30 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
2. ALT
It is used to display alternative text if the browser fails to display the required image due to several underlying reasons.
This can be done using ALT attribute.
<img src = “url” Alt = “Text”/>
3. ALIGN
It aligns the given web page. Its values can be “TOP”, “BOTTOM”, “LEFT”, “RIGHT”, “MIDDLE” respectively.
<img src = “url” Align = “Left/Right/Centre”/>
4. BORDER
It specifies the width of the border for the image can be specified. It is usually measured in terms of pixels and its default
value is zero.
<img src = “url” border = “Value in pixels”>
<img src = “image.gif” border = “2”/>
5. HEIGHT/WIDTH
Height and width of the image can be specified using these attributes. Often height and width of an image are measured
in terms of pixels.
<img src = “url” Height = “Value in pixel/Percentage” Width = “Value in Pixel/Percentage”/>
6. HSPACE/VSPACE
The gaps or white spaces between the text and images can be controlled using these attributes
<img src = “url” Hspace = “Value in Pixel” Vspace = “Value in Pixel”/>
<img src = “image.gif” vspace = “10” v space = “12”/>
7. LONGDESC
It usually takes certain URL as argument, where further information related to a given image is stored.
<img src = “url” Width = “Value in Pixel” Height = “Value in Pixel” Longdesc = “file1.html”>
8. NAME
This attribute is used to specify name of the image.
<img src = “url” Name = “name of the image”/>
9. Ismap and Use map
These attributes are used with image maps.
Following is an application supporting insertion of images on the given web pages,
Program
<HTML>
<HEAD>
<TITLE>IMAGES</TITLE>
</HEAD>
<BODY>
<IMG SRC= “IMG1.PNG” ALT= “ERROR” ALIGN= “CENTER” NAME= “IMAGE1” HEIGHT= “200” WIDTH=
“200” HSPACE= “0” VSPACE= “1” LONGDESC= “HTTP://EXAMPLE.COM/DESC#IMAGE1”>
</BODY>
</HTML>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 31

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q32. How an image is used as link?
Answer :
Using Images Links
An image is inserted into the link using <a> element shown below,
<html>
<head>
<title> Image as Link </title>
</head>
<body>
<a href = “http://www.siapublishers.com/” target = “self”>
<img src = “logo.png” align = “bottom” alt = “Error” border = “1” width = “150” height = “150”/> </a>
</body>
</html>
Output

1.3.2 Image Maps

Q33. What are image maps? List the different types of image maps.
Answer :
Image Maps
Image maps are used for creating different links within an image so that, the user can navigate to different pages when
clicked on different parts of the image. The places where the user clicks in an image map are called as clickable hotspots. Image
maps are helpful in dividing the image into irregular partitions such as maps. The two different types of maps are,
(i) Server-side image maps
(ii) Client-side image maps.
(i) Server-side Image Maps
The server side image maps allow the browser to collect the coordinates where the user clicks on the image and sends it to the
server. These coordinates are processed by a script present on the server side and determines the page to be sent to the client.
(ii) Client-side Image Maps
The client-side image maps allow the browser to represent the page based on the location where the user clicks on the image.
32 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Q34. Explain about client-side image maps.
Answer :
Client-side image maps are written in XHTML code. It depends on the browser to specify the part of the image that should
be clicked to navigate to the respective web page. The client-side image maps can be created by using the <map> and <area>
elements within the <img> element.
 The <img> element specifies the image that must be inserted as map in the document. It includes an extra attribute i.e.,
usemap whose value is similar to the value of the name attribute in the <map> element except that it is proceeded by a
pound or hash sign (#).
 The <map> element must be followed by the <img> element. It includes an attribute, “name” which specifies the identity
of the map.
 The <area> element must be contained within the <map> element. It defines the clickable hotspots within the map. It also
defines the shape and the coordinates of the clickable hotspots. It defines the clickable sections of the image.
Example
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtmll/DTD/xhtmll-
transitional.dtd”>
<HTML xmlns=“http://www.w3.org/1999/xhtml” lang=“en”>
<head>
<title>Client side image map </title>
<meta http-equiv=“content-type” content=“text/html”; charset=I80-8859-1”/>
</head>
<BODY>
<h1 align=“center”>Client-side Imagemap test</h1>
<div align=“center”>
<img src=“C:\Users\CB3\Desktop\1.gif” usemap=“#shapes” alt=“shapes” boder=“0” width=“400” height=“200”/>
</div>
<MAP Name=“shapes” id=“shapes”>
<AREA Shape=“circle” Coords=“70,84,51” Href=“https://kb.iu.edu/d/abyt” target=“blank” alt=“CIRCLE”>
<AREA Shape=“rect” Coords=“25,180,125,280” Href=“https://www.cs.uct.ac.za/mit_notes/web_programming/html/
ch18s03.html” target=“blank” alt=“RECTANGLE”>
<AREA Shape=“poly” Coords=“153,106,186,225,340,193,315,81,304,167” Href=“http://www.columbia.edu/itc/visualarts/
r4100/html_example_pages/g_image_map.htm” target=“blank” alt=“POLYGON”>
<AREA Shape=“default” Coords=“0,0,500,300” Href=“https://www.december.com/html/demo/imagemap.html”
target=“blank” alt=“”>
</MAP>
</BODY>
</HTML>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 33

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Attributes of <area> Element
The following are some of the attributes used by the <area> element,
(a) The shape Attribute
The shape attribute specifies the shape of the portions in the map. If the value of the shape is not provided then the area
is assumed to be rectangle. The following are the possible values that the shape attributes can accept,
default → No shape is created
rectangle or rect → Rectangle shape is created
polygon or poly → Polygon shape is created
Circle or circ → Circle shape is created
(b) The coords Attribute
The coords attribute specifies the coordinates of the area that can be selected. The specification of the number of coordinates
depends upon the value of the ‘shape’ attribute for example:
rect → It should specify four coordinates.
The first two indicate the top-left and the next two indicate the botton-right of the rectangle.
Circle → It should specify three coordinates. The first two indicates the centre of the circle where as the third coordinate
indicates the radius in pixels.
polygon → It should specify two coordinates for each of its vertex. So for the triangle it should specify six coordinates,
for the pentagon it should specify ten coordinates.
(c) The href and nohref Attributes
The href attribute provides the URL of the image. If href is not used nohref attribute is used with the value nohref.
<area shape = “rect” coords = “212, 123, 323, 250” nohref = “nohref”/>
(d) The alt Attribute
The alt attribute specifies the text which is displayed in place of image if the image does not get displayed due to certain
reasons.
(e) The target Attribute
The target attribute specifies the frame/window in which the page can be loaded.
(f) tabindex Attribute
The tabindex attribute specifies the order in which the users has to tab items on a page. This value ranges from 1 to 32767.
Q35. Write about client-side image maps using <object> element.
Answer :
Client-Side Image Maps Using the <Object> Element
<Object> element is used to add image maps to documents. This concept is supported by the major browsers such as IE8,
Firefox 3, safari 3.
<map> element with name attribute is used in the <object> element. <a> element is used instead of <area> element in the
<object> element.
Example
<HTML xmlns=“http://www.w3.org/1999/xhtml” lang=“en”>
<head>
<title>Client side image map using object </title>
<meta http-equiv=“content-type” content=“text/html”; charset=I80-8859-1”/>
</head>
<BODY>
<h1 align=“center”>Client-side Imagemap using object element</h1>
<object data=“C:\Users\CB3\Desktop\1.gif” type=“image/gif” alt=“shapes info” width=“400” height=“250” border=“0”
usemap=“#shapes”/>
<map name=“shapes”>
<a shape=“rect” href=“http://speed.eik.bme.hu/help/html/Special_Edition-Using_CGI/ch9.htm” coords=“0,0,118,28”
target=“_self” >Link1</a> |
<a shape=“rect” href=“https://docs.oracle.com/javaee/7/tutorial/jsf-custom002.htm” coords=“118,0,184,28” target=“_
self”>Link2</a> |
34 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
<a shape=“circ” href=“ http://www.howtocreate.co.uk/tutorials/html/imagemaps ” coords=“184,200,60” target=“_self”
>Link3</a> |
<a shape=“poly” href=“ http://www.htmlhelp.com/reference/html40/special/object.html” coords=“276,0,373,28,50,50,276,0”
target=“_self” >Link4</a>
</map>
</body>
</html>
Output

Q36. Explain about server side image maps.

Answer :
In the server-side image maps, the ismap attribute is used the <img> element wthin the <a> element. The ismap instructs
the browser to send the coordinates (that have selected by the user while clicking on the image maps) to the server. The sent
coordinates are then processed by the script (written in PHG, GGI, JSP, Asp.net etc) at the server side. The ismap attribute doesnot
need any value in HTML but, it requires the value in XHTML hence its own name can be used as its value to make this attribute
accessible. This can be shown as follows,
<a href = “..... /location of map/servermap.aspx”><imp src = “/images/countries/country.gif alt” = “India map” border =
“0” ismap = “ismap”/></a>
When the user selects any part of the map with the coordinates 85 pixels from the right of top-left corner and 75 pixels
from the down of the same corner, the browser appends these coordinates at the end of the URL and sends it to the server as
follows,
http://www.mapsexample.org/location/servermap.aspx?85,75.
Thses coordinates are then processed by the script present at the serverside to decide page that is to be send to the client.
Program
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<HTML >
<head>
<title>Server side image map </title>
<meta http-equiv=“content-type” content=“text/html”; charset=I80-8859-1”/>
</head>
<BODY>
<h1 align=“center”>Server-side Imagemap test</h1>
<div align=“center”>
<a href=“https://www.google.com/” shape=“rect” coords=“0,0,118,28”>
<img src=“C:\Users\CB3\Desktop\1.gif” alt=“shapes” boder=“0” width=“400” height=“200” ismaps=“ismap”/></a>
</div>
</BODY>
</HTML>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 35
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

1.3.3 Choosing the Right Image Format

Q37. Explain about bitmapped graphics. Write about reducing file size.
Answer :
Bitmapped Graphics
The bitmapped category of image formats such as : JPEG (Joint Photographic Experts Groups Format), GIF (Graphics
Interchange Format), TIFF, PNG (Portable Network Graphics) and BMP divides an image into number of pixels and defines the
color of each pixel similar to the color of pixels defined on the screen by the computer. These type of image formats are suitable
for photographs and the complicated groups of shade and color.
The resolution can be defined as the number of pixels per square inch. The web stores the image at the resolution of 72
pixels per square inch. The printers often prints the image at 300 dots per inch (in printer the word dot is used in place of pixels)
hence the file, it prints will be of the larger size.
Various types of bitmap graphics formats are as follows,
1. GIF Image
The GIF (Graphic Interchange Format) images uses a palette consisting of 256 colors. Each pixel of a GIF image carry
one of these colors. There are several palettes of 256 colors made by using the group of 16 million colors. Every GIF image can
use any of these different palettes.
The GIF image stores the information about the palette of 256 colors in a lookup table. Each pixel of the GIF image
references to a color in the look up table.
The GIF image doesnot repeat the color information in the lookup table if many of the pixels in it references to a same
color. This type of storing an image is known as “index color formatting”.
When GIF requires more than 256 colors then this technique used to save GIF images that help to represent extra colors.
Two or more colors are used in adjacent pixels for creating an effect of a third color. GIFs are used for specifying one or more
colors in a GIF that represents a transparent background. LZW compression is a technique used for compressing the GIF files to
small. This is used for scanning the rows of an image for consecutive pixels with same color. This technique is also referred as
lossless compression since there is no loss of data and quality.
Animated GIFS
GIF images are used for storing the frames more than one within a file. GIF are allowed to rotate in between versions or
frames to create a simple animation. Its working process is same as a flip-book animation. In this flip book animation, the drawing
on a single page of a book is changed slightly compared with the previous page. Whenever a user flips the pages it looks like as
the images are moving in a book. When an animated image has a larger areas of a flat colour then this is used very well. As the
image is compressed after the recording of initial frame, the pixels are changed and required to store with a single subsequent
frame.
36 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
2. JPEG Image
The JPEG image format is used to store and compress the image. This format can be used to control the compression of
the image. When the image is compressed the color data related to it gets lost and the compressed image cannot be converted
back to the original version of the image. This type of compression is known as “lossy compression”.
The size of the file depends upon the compression that is performed on it. The quality of the image can be either represented
in percentages or by using the words such as excellent, very good, good and so on.
3. PNG Images
The PNG (Portable Network Graphics) format was created in the late 1990’s. It provides image same as GIF formats and
reduces the drawbacks associated with them. The two types of PNG was developed are,
(a) The 8 bit PNG has the disadvantages as the 8-bit GIF formats such as,
 It also uses only 256 colors and
 In case of transparency each pixel is either in the on or off state.
(b) The 24 bit PNG format possesses the following advantages:
 It uses unrestricted colors without loosing any data
 It provides the different level of transparency for each pixel by using the maps (such as lookup tables).
 It displays and image 8 times faster than a GIF image by replacing the approach of sampling one in eight line with
two- dimensional sample.
Reducing File Size
An image is required to be download or saved on the desktop in the format that compresses the size such that the page
can loaded quickly. The JPEG format can be used for photo-realistic pictures that contains heavy or subtle shades that need to
be preserved. The GIF or PNG format can be used for images with flat color, hard edges like diagrams, texts and logos.
Consider the two images saved in different formats and file size shown as below,
Image JPEG GIF
Image 1 50.15k 110.1k
Image 2 8.16k 7.012k
The small size image file are known as thumbnails and found in the image gallery or on some pages. An image is created
in the smaller version and it is scaled in on image editing program. Users download the full-size of image even it is of smaller
version. So, the width and height attributes of an image or object must not be changed. A special thumbnail is created for a smaller
image that can be used to load the page faster.

1.3.4 Adding Flash, Video and Audio to Your Web Pages

Q38. How Flash, Video and Audio are added to web pages?
Answer :
Adding Flash, Video and Audio to Web Pages
Rich Media known to be the addition of flash animations, video and audio to web pages. The following are the two reasons
that make displaying of video or audio difficult on the site.
1. Flash format is easy since it has only one format for flash animation whereas a video contains various formats such as
AVI, Flash video, MPEG, Quicktime, Windows Media etc and in audio MP3, WAV.
2. Browsers are built and used for displaying text and images. The various formats of rich media are not shown automatically
by browsers. The browsers depends on additional programs such as players or plug ins.
An <object> element is used to convey the following things to the browser.
(a) The name of the file and where it has to be find
(b) The format of the file
(c) The type of plug in required for playing the file.
<param> element is used to send additional information to the player present in the <object> element. The <embed>
element also be used in the <object> element.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 37
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
1. Adding Flash Movies to Web Site
For answer refer Unit-I, Page No. 38, Q.No. 39.
2. Adding Videos to Website
For answer refer Unit-I, Page No. 40, Q.No. 42.
3. Adding Audio to Web Site
For answer refer Unit-I, Page No. 42, Q.No. 43.
Q39. How flash movies are added to web site?
Answer :
Adding Flash Movies to Website
1. Flash files are created by using flash authoring environment.
2. The flash project is saved with the extension of .fla.
3. These files are exported into web in the .swf format.
4. After finishing the exporting of files, they are referred as SWF files or flash movies.
5. A flash player is a free plugin used to play SWF files incase of browsers that does not support SWF files.
Example: Adding the Youtube Flash Video Player to a Page
Youtube is easy for users to embed the youtube player on their own pages and this youtube player is written in flash. A
line of a code or a link is copied from the youtube site and is pasted on any web page.
Program
<html>
<head>
<title>Adding a YouTube Video</title>
</head>
<body>
<h1>Embedding a YouTube Video</h1>
<object width=“425” height=“344”>
<param name=“movie” value=“http://www.youtube.com/v/dMH0bHeiRNg&hl=en&fs=1”></param>
<param name=“allowFullScreen” value=“true”></param>
<param name=“allowscriptaccess” value=“always”></param>
<embed src=“http://www.youtube.com/v/dMH0bHeiRNg&hl=en&fs=1” type=“application/x-shockwave-flash”
allowscriptaccess=“always” allowfullscreen=“true” width=“425” height=“344”></embed>
</object>
</body>
</html>
Output

In the above code, the <param> element is used to specify the name as movie with value given as URL. It specifies whther
the player should be in full-screen mode or not. In also allows to play a flash movie from other sites.
38 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Q40. How flash is added to a web page using <object> and <embed> element?
Answer :
<Object> and <Embed> Element
Flash is added to the webpage by using <object> and <embed> elements. A basic flash animation can be added to a web
page by using a different technique called Flash B. When the FIA file exported for creating SWF file. The code created by the
flash adds the SWF file to a web page.
Program
<html>
<head>
<title>Adding a flash movie with the &lt;object&gt; element</title>
</head>
<body>
<p>
<object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=“300” height=“200” codebabse=“http://
download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab”>
<param name=“movie” value=“flash/flash_sample.swf”>
<param name=“play” value=“true”>
<param name=“loop” value=“false”>
<embed SRC=“flash/flash_sample.swf” WIDTH=“300” HEIGHT=“200” PLAY=“true” LOOP=“false” QUALITY=“best”
MENU=“false” TYPE=“application/x-shockwave-flash” PLUGINSPAGE=“http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=ShockwaveFlash”></embed>
</object>
</p>
</body>
</html>
Output

(a) Classid attribute is used for specifying the type of application to be played for a file.
(b) Codebase attribute is used for specifying the plugin or a program at the place where this file is required to be played.
Q41. How flash is added to a web page using SWF object?
Answer :
SWF Object
Flash is added to a web page using SWF object. In this technique, a page is created by using <div> element that holds the
flash video. CSS is used to ensure that <div> element has the width and height same as the SWF file needs <div> element has an
id attribute that specifies uniquely the identity for an element. Images and texts can be used inside <div> element. A javascript
is added to the page that checks for the installed flash player in the browser. When a flash player is installed then the javascript
is used to replace the content of <div> element with SWF file. SWF object can be download from the site http://code.google.
com/p/swfobject/.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 39
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Program
<html>
<head>
<title>Adding a flash movie with SWF Object</title>
<script type=“text/javascript” src=“swfobject.js”></script>
<script type=“text/javascript”>
swfobject.embedSWF(“flash/flash_sample.swf”, “flash_movie”, “300”, “200”, “8.0.0”);
</script>
</head>
<body>
<div id=“flash_movie”>*Install Flash player</div>
</body>
</html>
Output

Q42. How videos are added to website?

Answer :
Adding Videos to Website
A video can be uploaded on the website in a easy way. The following are the things to be considered while playing a video
on the web.
(i) File Format
Selection of user desired format for the video must be done. Video can be in any formats such as AVI, Flash video, MPEG,
Quicktime, Windows Media. Based on the selected format for the video, the user can download it with the specified size
and quality of the picture.
(ii) Plug in is Required for Playing the File
Various formats uses different plugins such as flash player, Quicktime players, Real player, Windows Media player for
playing the file.
The different kind or a type of video required for playing the file can be conveyed to a browser by using type attribute in
the <object> element. Its value is MIME type.
The type of plug in to be used by a browser can be specified by class id attribute. Its value is group of numbers/letters
used for identifying the plugin.
The class id value of the Quicktime Player Plug-in is,
02BF25D5 – 8C17 – 4B23 – BC80 – R3488 ABDDC6B
Commonly used video formats on the web with its file extension, MIME type, default player on PC and Mac are given
below,
40 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)

Video File Format File Extension MIME Type Default Player on PC Default Player on MAC
Flash video player .swf Application/x-shock- Flash player Flash player
wave flash
AVI .avi video/x-ms video Windows media player Windows media components
are required to be download-
ed by user
MPEG .mpg or .mpeg video/mpeg Windows media player Quick time player
Quicktime movie .mov video/quicktime Plug in should be Quick time player
downloaded by the
user
Windows media .wmv video/x-ms-wmv Windows media player Windows media components
video should be downloaded by
the user
Real media .rm Application/vnd.rn- Real player Real player
realmedia
Example: Adding Videos Using Flash Video
The following are the reasons to describe that the flash video is popularly used to add videos on websites.
(i) Flash player must be installed on computer connected to the internet server or the web and different video formats are
also installed such that users can view FLV files.
(ii) Flash is used for controlling the appearance of the player so that users can create branded players.
(iii) FLV files are compared such that these are smaller than MPEG-1 format with some loss in quality.
(iv) The videos are faster for loading and playing.
(v) Its cost is low for running a website.
A user does not upload the video to anyone of the site then the following things are to be done.
(a) The video has to be converted from one format to the required FLV format.
(b) FLV player is written or downloaded for playing FLV files.
The video can be converted from one formats into the required FLV format in two following ways,
(i) Adobe Software
Adobe software is used to convert video format to FLV provided by flash authoring environment.
(ii) Third-Party Software
Different companies have developed softwares for converting various video formats into FLV files.
Different flash players are available that can be downloaded even though it does have any flash authoring tool as given
below,
(a) OS FLV player
(b) JW FLV player
(c) Flow player
(d) Slideshow pro.
The above players have their own way to specify how to find FLV file.
Program
<html>
<head>
<title>OS FLV Player</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<script type=“text/javascript” src=“swfobject.js”></script>
<script type=“text/javascript”>
swfobject.embedSWF(“flash/os_flv_player.swf?movie=video.flv”, “flash_video”, “400”, “340”, “8.0.0”);
</script>
</head>
<body>
<div id=“flash_video”>*Install Flash player</div>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 41
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

Video Size
The size of a video must be known when it is downloaded the larger video has more file size. These big files can be
considered as a problem due to following reasons,
(i) If the size of a file is less or small then it is downloaded very quickly. Users loose interest to watch videos which consume
more time for downloading. User’s might pause them for a while.
(ii) If the size of the file is big then it consumes more bandwidth. Some companies that contains websites may charge for
bandwidth.
The long video can be divided into sections for the users to watched.
Q43. How audio is added to web site?
Answer :
Adding Audio to Website
An audio can be added to web site by considering the following things.
(i) File Format
Various types of compression techniques are used to store various types of audio files that effect the quality and size of
file recording.
(ii) Plug in Required for Playing the File
The player is required by the user for playing audio using plug-in.
File Types
The following are the file types used popularly.
(a) MP3
The MP3 is the audio file of the MPEG format. MP3 is popular format for music and songs that are of good quality. Files
can be saved with .mp3 extension and are played in most of the browsers. MIME type for MP3 is given by audio/mpeg.
(b) WAVE
Microsoft and IBM developed the WAVE format for audio files that can be played in most of the browsers. These wave
files can be saved with the .wav file extension. The quality of wave is better compared to MP3. The file size of wave is
more compared to MP3 file. The MIME type for wave file is given by audio/x – wav.
The following are the different formats used on the web that require plug-ins.
(i) Windows Media Audio
It meeds the plug-in of windows media.
(ii) Quicktime
It needs the plug-in of Quicktime.
(iii) Real Audio
It needs the plug-in of Real Media.
42 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Adding Audio using Default Media Players
An extra plugin is not required to download in some browser for playing on MP3 or WAVE files.
An <object> element is used to add the audio file in the page. The type of plug in for playing in audio is determined
automatically by the browser and its value is specified by type attribute.
Program
<html>
<head>
<title>Adding Audio using Default Media Players</title>
</head>
<body>
<h1>Adding Audio using Default Media Players</h1>
<object width=“250” height=“100” type=“audio/mpeg”>
<param name=“src” value=“Sleep Away.mp3” />
<param name=“autoplay” value=“true” />
<param name=“autostart” value=“1” />
<embed src=“Sleep Aay.mp3” width=“250” height=“100” ></embed>
</object>
</body>
</html>
Output

Q44. How MP3s are added to web page using flash?

Answer :
Adding MP3s to Web-Pages Using Flash
Flash is used to add the MP3s to the web pages. They are used to create playlists that contain multiple tracks. The code
for an MP3 player can be written from scratch using flash authoring tool and the code will be available in the following sites.
(i) http://musicplayer.sourceforge.net/
(ii) http://www.wimpyplayer.com/
(iii) http://code.google.com/p/mp3player/
(iv) http://developer.yahoo.com/mediaplayer/
Example
<html>
<head>
<title>Adding an MP3 player using Flash</title>
</head>
<body>
<h2>Flash MP3 Player Using &lt;object&gt; element</h2>
<object type=“application/x-shockwave-flash” width=“400” height=“200”
data=“flash/xspf_player.swf?playlist_url=flash/playlist.xspf”>
<param name=“movie” value=“flash/xspf_player.swf?playlist_url=flash/playlist.xspf” />
</object>
</body>
</html>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 43

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

Q45. How the audio or video is played automatically when an page is loaded?
Answer :
There are several techniques that are used to add the audio or video to the web page. Consider the following issues while
playing audio or video automatically when a page is loaded.
(i) Users expect to watch or listen to the file when a page is loaded. Some users will skip the audio or video file when the
page is loaded and some of the users watch it.
(ii) A pause or clear or mute button must be provided for an audio or video so that user can turn off the sound when a page
is loaded.
(iii) The options should be provided to avoid the repetitions of the track i.e. audio or video.
(iv) Some of the audio and video files are charged for the bandwidth of the files if they are hosted on the server. Whenever a
file starts playing automatically when an page is loaded then the user has to pay for watching or listening the file.
Q46. What are the attributes of an <object> element?
Answer :
<Object> Element
HTML uses an object element to insert the multimedia objects directly into the page. This object tag replaces the <img>
tag using the object element is a good approach, because it allows to embed any type of data.
Commonly used HTML tags, devoted for inserting objects on webpages are listed below.
<object classid = “URL” data = “URL” [codebase = “URL] type = “string”
[standby = “string”] height = “n” width = “n” [title = “string”] > ----- < /object>
The attributes of an <object> element are as follows,
1. archive Attributes
Archive attribute is used specifically by Java based applications. Its value is the list of URLS separated by spaces from
the resources.
2. border Attribute
Border attribute creates a border around an object. Its value is provided in the form of pixels.
3. class id Attribute
This attribute is mandatory for every object to specify its URL of the object. If classid specifies only a filename, then
assume that the object is present in the same directory as the HTML page.
Example
class id = “clsid1:02CG36E6 – 9D28 – 2D41 – DE91 – B2398 BCDDB9C”
4. codebase Attribute
This attribute specifies the URL of identify the directory in which the object is present. Codebase attribute is placed in
square brackets which means it is optional. If this attribute is not specified, the full URL of the classid is placed.
Example
codebase = “http://www.yahoo.org/java/”
44 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
5. codetype Atrribute
Codetype attribute specifies the MIME type of an application. These are used to skip unsupported media types in the
browsers.
Example
<object data = “details.xls” code type = “application/vnd.ms-excel”>
6. declare Attribute
declare attribute is used for declaring an object that is not instantiated.
Example
declare = “declare”
7. data Attribute
data attribute specifies the URL of the resource to be used by the object.
Example
data = “http://www.yahoo.com/mp4/song.mp4”
8. height and width Attributes
height and width attribute specifies the height and width of an object respectively. The values for these attributes are
provided in pixels or percentages.
9. hspace and vspace Attributes
hspace attributes defines the whitespaces on left side and right side of an object. The vspace attribute defines the whitespaces
on the objects top and bottom.
10. name Attribute
name attribute specifies the name for referring an object in scripts. This attribute is replaced with an id attribute in xhtml.
11. standby Attribute
This attribute displays alternative text while the object is loading from server.
Example
standby = “The page is loading”
12. tabindex Attribute
tabindex attribute specifies the tabindex of an object in a page.
13. usemap Attribute
usemap attribute specifies the object in an image map with hyperlinks. The value used with an object is map file.
Q47. What is <param> element? Explain the attributes of it.
Answer :
<param> element
<param> element is used for passing parameters to an object.
This tag is used whenever an object requires command-line parameters. Syntax of the param tag is
<param name = “string” value = “string” type = “string”
valuetype = [“ref”/”object”/“data”] >
The attributes of an <param> element are as follows,
1. name Attribute
It specifies a name for every parameter.
Example
<param name = “src” value = “show.mov”/>
<param name = “autoplay” value = “true”/>
2. value Attribute
This attribute specifies the value that is to be is passed to the object. The value passed need not be numerical or textual
but can be any of other type.
Example
<param name = “src” value = “onlinesite.com”/>
<param name = “autoplay” value = “true”/>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 45

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
3. valuetype Attribute
This attribute specifies the format of the parameter of the browser. It may be original data or the URL (ref) or another
object (object).
The values that are possible for valuetype attribute are as follows.
(i) data
This parameter value is a string and used as default.
(ii) ref
This parameter value is a URL.
(iii) Object
This parameter value is an other object.
4. type Attribute
This attribute specifies the MIME type of the object.
Example
<param name = “src” value = “show.mid” valuetype = “ref” type = “audio/mid”>

1.4 TABLES

1.4.1 Introducing Tables

Q48. Explain how basic table is created in xhtml.
Answer : Model Paper-I, Q9(b)

In HTML, data can also be represented in table format. In this approach a data is usually organized in terms of rows and
columns. The tags and attributes that helps in creating HTML table are as follows,
1. <TABLE>...</TABLE>
Entire code corresponding to a given table should be inscribed within these tags.
Relative Attributes
(i) ALIGN
This attribute allows a user to direct the placement of a given table in the web browser window. Here alignment is usually
performed horizontally by assigning values LEFT/RIGHT/CENTER respectively.
(ii) BACKGROUND
This attribute enhances the visualization of the table by setting an image or other graphics as background. It usually car-
ries a URL path corresponding to the given image or graphics.
(iii) BGCOLOR
This attributes sets the colour of the window in which the table is currently being displayed.
(iv) BORDERCOLOR
This attribute specifies the colour for the given table border.
(v) BORDER
This attribute sets the width of the table border. Hence a value ‘0’ provided to it, displays a table with no border.
(vi) COLS
This attribute specifies the number of columns that the given table should contain.
(vii) HEIGHT
This attribute specifies the height of the given table.
(viii) WIDTH
This attribute specifies the width of a given table.
2. <TR>...</TR>
It corresponds to a single row of a given table. Data supplied within these tags is usually displayed in a particular row of
that table. These tags may have <TH> and <TD> tags within them.
46 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Relative Attributes
(i) ALIGN
It directs the alignment of the text in a given row of a table. It’s value can be LEFT/CENTER/RIGHT.
(ii) BGCOLOR
It is used to set the background colour of the blocks of a table.
(iii) BORDERCOLOR
It sets the border colour for a given row of the table.
(iv) VALIGN
It directs vertical placement of data corresponding to a given row of the table. It can have values as TOP/BOTTOM/
MIDDLE.
3. <TH>...</TH>
This tag is specifically used to set the headings of the available columns. As the data is inserted into the table in row-wise
format, hence <TH> tag usually is followed by <TR> tag. Major difference between <TH> and <TD> tags is that, <TH> makes
the data bold and places it at the centre of the table’s block. On the other hand <TD> inserts data into the block (of table) in
normal font and its positioning depends on its attributes.
Relative Attributes
(i) ALIGN
It directs alignment of data in the header column of the table. Its value can be LEFT/RIGHT/CENTER.
(ii) BGCOLOR
It is used to set the back ground colour for the table headers.
(iii) BORDERCOLOR
It is used to set the border color for the corresponding table headers.
(iv) VALIGN
It directs vertical alignment of data in the table header row.
(v) WIDTH
It sets the width of the table header.
4. <TD>...</TD>
It inserts data into each block of the table. Its supported attributes are ALIGN/BACKGROUND/BGCOLOR/BOR-
DERCOLOR/HEIGHT/SCOPE/VALIGN/WIDTH respectively.
5. <CAPTION>...</CAPTION>
It specifies title to the table. This tag can be placed at the bottom or above the table. Its relative attributes can be ALIGN/
VALIGN respectively.
6. <THEAD>...</THEAD>
It groups certain headers and provides them with single name. This can be accomplished by means of <THEAD> tag. Its
relative attributes are ALIGN/VALIGN/BGCOLOR respectively.
7. <TBODY>...</TBODY>
It is same as <THEAD>. The only difference here is, it groups the specified rows to frame the table body. Its relative at-
tributes are ALIGN/VALIGN/BGCOLOR respectively.
8. <TFOOT>...</TFOOT>
It specifies the table footer by combining its columns. Its relative attributes are ALIGN/ BGCOLOR/VALIGN.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 47

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Program
<HTML>
<HEAD>
<TITLE>Table displaying the details of various computer courses. </TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT SIZE=7 COLOR=BLUE><H1>KNZ INSTITUTE OF COMPUTER SCIENCES
</H1></FONT>
<FONT SIZE=7 COLOR=RED><P><P><H2>MALAKPET HYDERABAD</H2></P></P></FONT>
<TABLE BORDER=3 ALIGN=“CENTER” BGCOLOR=“CYAN”>
<CAPTION><H3>COURSE DETAILS</H3></CAPTION>
<TR>
<TH>COURSES</TH>
<TH>DURATION</TH>
<TH>FACULTY</TH>
<TH>FEES</TH>
</TR>
<TR>
<TD>C++</TD>
<TD>45 Days</TD>
<TD>Mr.NADEEM</TD>
<TD> Rs:1200</TD>
</TR>
<TR>
<TD>JAVA AND J2EE</TD>
<TD>3 MONTHS</TD>
<TD>Mr.KHAJA NAZIMUDDIN</TD>
<TD>Rs:8000</TD>
</TR>
<TR>
<TD>C PROGRAMMING</TD>
<TD>45 Days</TD>
<TD>Mr.JANI</TD>
<TD>Rs:1200</TD>
</TR>
</TABLE>
</BODY>
</HTML>
48 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Output

1.4.2 Grouping Section of a Table

Q49. What are the techniques used to group cells, rows and columns of a table? Explain.
Answer :
The techniques used to group cells, rows and columns of a table are as follows.
1. Spanning Columns Using the Colspan Attribute
The colspan attribute can be used to stretch a cell horizontally across more than one column. The following example
shows the effects of colspan and <caption> elements on the table.
Example
Colspan.html
<html>
<head></head>
<body>
<table border = “1”>
<caption>caption for the following table that spans the columns</caption>
<tr>
<td colspan = “3” bgcolor = “pink” height = “100”> Spanned cell</td>
</tr>
<tr>
<td bgcolor = “pink” width = “100” height = “100”>cell1</td>
<td bgcolor = “yellow” width = “100” height = “100”>cell2</td>
<td bgcolor = “grey” width = “100” height = “100”>cell3</td>
</tr>
<tr>
<td bgcolor = “green” colspan = “2”>Spanned cell</td>
<td bgcolor = “silver” width = “100” height = “100”>cell4</td>
</tr>
</body>
</table>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 49
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

2. Spanning Rows Using the Rowspan Tag

The rowspan attribute can be used to stretch a cell vertically through multiple rows. The following example shows the
effect of rowspan attribute on the table.
Example
rowspan.html
<html>
<head></head>
<body>
<center>
<table border = “1”>
<caption>Spanning of Rows</caption>
<tr>
<td bgcolor = “pink” width = “100” height = “100”>cell1</td>
<td rowspan = “2” bgcolor = “silver” width = “100” height = “200”>Spanned Row1</td>
<td bgcolor = “pink” width = “100” height = “100”>cell2</td>
</tr>
<tr>
<td rowspan = “2” bgcolor = “silver” width = “100” height = “200”>Spanned Row2</td>
<td rowspan = “2” bgcolor = “silver” width = “100” height = “200”>Spanned Row3</td>
</tr>
<tr>
<td bgcolor = “pink” width = “100” height = “100”>cell3</td>
</tr>
</table>
</center>
<body>
</html>
50 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)

3. Splitting up Tables Using a Head, Body and Foot

The following three elements are used in order to define the header, body and foot of a table,
 <thead>
 <tbody>
 <tfoot>
(a) <thead>: The <thead> element defines the head of a table.
(b) <tbody>: The <tbody> element defines the body of a table.
(c) <tfoot>: The <tfoot> element defines the foot of a table. It should always appear before the <tbody> element.
The above elements can be used to provide rich formatting to tables. These elements are not supported by majority of the
browsers.
4. Grouping Columns Usign the <colgroup> Element
The <colgroup> element can be used to group multiple columns together. This allows us to provide the formatting to the
group of columns. The <colgroup> element should be used after the <table> element.
Example
colgroup.html
<html>
<head></head>
<body>
<table>
<colgroup span = “6” bgcolor = “pink” width = “60%” height = “500”/>
<colgroup span = “3” bgcolor = “pink” width = “30%” height = “500”/>
<colgroup span = “2” bgcolor = “pink” width = “20%” height = “500”/>
<tr>
<td>group of 6 columns</td>
<td>group of 3 columns</td>
<td>group of 2 columns</td>
</table>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 51
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

5. Columns Sharing Styles Using the <col> Element

The col element is used to format or group the table columns in the colgroup element.
colgroup
The colgroup element is used to group the columns of a table and add semantic context to the column data.
Example
<html>
<body>
<table>
<caption>Student Information </caption>
<col Span = “1”>
<colgroup>
<col span = “1”>
<col span = “1”>
</colgroup>
<thead>
<tr>
<th scope = “col”>Student_name </th>
<th scope = “col”> Roll.no </th>
<th scope = “column”> location </th>
</tr>
</thead>
<tbody>
<tr>
<td> nymisha </td>
<td> 101 </td>
<td> Hyderabad </td>
</tr>
<tr>
<td> Satya </td>
<td> 102 </td>
<td> Vizag</td>
</tr>
</tbody>
52 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
<tfoot>
<tr>
<td> Copyritht@</td>
<td>Inc. of all taxes </td>
</tr>
</tfoot>
</table>
</body>
</html>
Output

1.4.3 Nested Tables

Q50. Write about Nested tables.
Answer :
Nested Tables
The table that is embedded inside another table is known as nested table.

This is the inner table 1

This is the inner table 2

<HTML>
<HEAD>
<BODY>
<H1 align=“center”> Displaying Marks of the student </H1>
<TABLE BORDER = 3 align=“center”>
<TR>
<TH> NAME </TH>
<TH> ROLL NO</TH>
<TH> MARKS </TH>
</TR>
<TR>
<TD> XYZ </TD>
<TD> 12 </TD >
<TD>
<TABLE BORDER = 3 ALIGN = “CENTER” >
<TR>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 53
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<TH> TEL </TH>
<TH> HIN </TH>
<TH> ENG </TH>
<TH>MATH </TH>
<TH> SCI </TH>
<TH> SOC</TH>
</TR>
<TR>
<TD> 89 </TD>
<TD> 95 </TD>
<TD> 91 </TD>
<TD> 81 </TD>
<TD> 85 </TD>
<TD> 99 </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

1.4.4 Accessing Tables

Q51. How tables are accessible?
Answer :
Tables have huge data and they are scanned through rows, columns to find or compare a value. The content of the table
is not read to find out about situation or the work. The tables are difficult to the users who use voice browsers or a screen reader
to listen pages.
The following are the things to be remembered to understand the table.
1. Caption is added to the table using <caption> element. It is easily understood by a user who read a table using screen
reader.
2. <th> element must be used to specify a table heading.
3. Headings must be provided in first row and first column.
4. Nested tables should be avoided as user will find difficult to understand when using screen reader.
5. A user with a screen reader finds it difficult to use rowspan and colspan attributes. So it is better to avoid them.
6. The usage of voice browser or screen reader should be understood properly by a user to read a table.
7. By using scope and headers attributes, the users of screen readers can understand easily and retrieve the headings for a
specific cell.
54 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Q52. How Tables can be linearized?
Answer :
Tables can be linearized by using a screen reader for reading a table. Linearization is the process of reading a table by a
reader starting from the first row of a table and the cells are read from left to right in a row. Each and every cell in a row is read.
Example
<html>
<body>
<table border = “1”>
<tr>
<td> Column 1, Row 1 </td>
<td> Column 2, Row 1 </td>
</tr>
<tr>
<td> Column 1, Row 2 </td>
<td> Column 2, Row 2</td>
</tr>
</table>
</body>
</html>
Output

Q53. How Id, scope and headers attributes are used to make a table more accessible?
Answer :
Id, scope and headers attributes are used for storing the table structure and make it to be more accessible.
When a cell is made as the heading by adding the scope attribute to <th> element, then this will specify to know the
cells under that heading. If the value is given as row then it specifies that the given element/cell is the header for that row. If the
value is given as column then it specifies that given element is the header for that column. If the value is given as rowgroup then
it specifies that cell is the header for that rowgroup. If the value is given as colgroup then it specifies that cell is the header for
colgroup.
Headers attribute is used on <td> element to specify header for respective cells. Its value is the space-separated list of
header cell’s attribute value.
Example
headers = “income p1”
In the above example, the headers have the id attributes with the values income and P1.
Header attribute is used for voice browsers. The record of the table is difficult when a table is read so this is used to keep
the record about the rows and columns of the table and cell to which row and column belongs to.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 55

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q56. Explain about text input controls.
1.5 FORMS
Answer :
1.5.1 Introducing Forms Text Input
It is a simple text box in which certain text is entered.
Q54. Write about forms. Also, explain about different
The following are three of the text input control.
types of form controls.
Answer : 1. Single Line Text Input Control
Forms Text elements are data entry fields used in HTML forms.
Text fields accept a single line of text entry.
Form is a web page that contains elements like text
fields, check boxes, buttons etc which are used to takes input Properties
from the user. These web pages look like normal white sheet of NAME, VALUE
paper consisting of significant spaces information to be entered Syntax
by users. The forms can be used for different purposes such as <INPUT TYPE = “text” NAME = “name of the text
online registrations, order entry, subscription etc. field” VALUE = “default value”>
Form Controls Example
The following are different types of form controls. <INPUT TYPE = “text” NAME = “t1” VALUE =
1. Text Input “Vaseem”>
It is a simple text box where a text is entered to search. ( double quotes for optional values)
2. Submit Button This places a text field (i.e., a single line text edit area)
It is a button that submits the form when clicked on it. within an HTML form which can be referred by the name t1.
3. Select Boxes The text field displays a default value of Vaseem that can be
It is a drop-down box containing multiple options. changed by the user later.
4. Radio Buttons Attributes
Radio buttons have two options (Yes or No). Only one The following are the attributes of <input element> used
option is selected when a group of radio buttons are for text input control.
available. (i) type Attribute
5. Check Boxes Type attribute in the text input control is used to indicate
It is a small box that can be checked and used during the type. The value for type attribute must be text.
selection. (ii) name Attribute
6. Text Area name attribute in the text input control is used to provide
It is a large box that can contain text upto a paragraph. a name along with the value to forward to the server.
(iii) value Attribute
1.5.2 Form Controls
value attribute in the text input control is used to assign
Q55. What are different types of Form controls in a intial value to the text input field which is displayed
xhtml? when a page is loaded.
Answer : Model Paper-II, Q9(b) (iv) size Attribute
The different types of form controls in xhtml are as fol- size attribute in the text input control is used for specify-
lows, ing the width of the text input field. This is measured in
1. Text Input terms of characters.
For answer refer Unit-I, Page No. 56, Q.No. 56. (v) max Length
2. Buttons max length attribute in the text input control is used for
For answer refer Unit-I, Page No. 58, Q.No. 57. specifying the maximum value of an entered text by a
3. Check Boxes user.
For answer refer Unit-I, Page No. 61, Q.No. 58(i). Example
4. Radio Buttons <html>
For answer refer Unit-I, Page No. 62, Q.No. 58(ii). <body>
5. Select Boxes <form action= ““method=”get”>
For answer refer Unit-I, Page No. 63, Q.No. 59. First name:<input type=”text” name=”first_name” />
6. File Select Boxes <input type= “submit” value= “submit” />
For answer refer Unit-I, Page No. 67, Q.No. 62(i). </form>
7. Hidden Controls </body>
For answer refer Unit-I, Page No. 67, Q.No. 62(ii). </html>
56 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Output

2. Password-Input Control
For answer refer Unit-I, Page No. 3, Q.No. 2, Topic: The PASSWORD Element.
Example
<html>
<body>
<form action=“” method=“get”>
Login : <input type=“text” name=“login” />
<br>
Password: <input type=“Password” name=“password” />
<input type=“submit” value=“submit” />
</form>
</body>
</html>
Output

3. Multiple-line Text Input Control

Multiple line text input control is created by using <textarea> element for creating multiple lines of text.
The TEXTAREA Element
The TEXTAREA form element provides a way to create a customized and multiple line text entry form element that can
be placed in an HTML form.
Syntax
<TEXTAREA NAME = “text area name” ROWS= “no of rows” COLS = “no of columns”>
some text
</TEXTAREA>
Attributes
The following are the attributes of an <textarea> element.
(a) name Attribute
name attribute is used to specify the name of a control that is transmitted to the server.
(b) rows Attribute
rows attribute is used for specifying the number of rows of text present in the <textarea> element.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 57

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
(c) cols Attribute
cols attribute is used for specifying the size and number of columns of text present in the <textarea> element.
Example
<html>
<body>
<form action=“” method=“get”>
Description : <br />
<textarea rows=“5” cols=“50” name=“description”>
Enter the text:
</textarea>
<input type=“submit” value=“submit”/>
</form>
</body>
</html>
Output

Q57. Discuss in detail about Buttons.

Answer :
Buttons
Buttons are form elements that are used for various purposes such as submitting a form, clearing or resetting a form and
triggering the client-side scripts. Buttons are created using the following three ways.
1. An <input> Element with a Type Attribute Whose Values are Submit, Reset or Button
An <input> element is used for creating a button and its type is specified by a type attribute. Type attribute has three dif-
ferent values such as,
(i) Submit
It is a button that submits the form when clicked on it.
(ii) reset
It is a button that resets the form into its original state.
(iii) button
It is a button that triggers a client-side script whenever a user clicks on it.
Attributes
The following are the attributes used by buttons.
(i) Type
It is used to specify the type of button a user creates and the values for this type attribute can be submit, reset button.
(ii) name
It is used to provide a name for the button.
58 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
(iii) Value
It is used for specifying the text value for a button.
(iv) onclick
It is used for triggering a script whenever a user clicks on this button.
Example
<html>
<body>
<form action=“” method=“get”>
Username: <input type=“text” name=“Username”><br>
Password: <input type=“Password” name=“Password” maxlength=“10”><br>
<input type=“reset” value=“Reset”>
<input type=“submit” value=“Submit”>
<input type=“button” value=“Click” onclick=“msg()”>
</form>
<script>
function msg()
{
alert(“Hello!”);
}
</script>
</body>
</html>
Output

2. An <input> Element with a Type Attribute Whose Value is Image

A button is created with the value image for the type attribute as shown below,
<input type = “image” src = “submit.jpg” alt = “submit” name = “button4”/>
Attributes
The following are the attributes used for an image button.
(i) src
It is used to specify the source path of an image file.
(ii) alt
It is used to provide an alternative text for an image.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 59
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Example
<html>
<body>
<form method=“get” action=“”>
<input type=“image” src=“D:image.jpg” alt=“Submit” width=“100” height=“150”>
</form>
</body>
</html>
Output

<button> Element
Element is used for specifying the text provided between opening and closing tag of <button>.
Example
<!DOCTYPE html>
<html>
<body>
<p>button element</p>
<form>
<input type=“button” value=“Click” onclick=“msg()”>
</form>
<script>
function msg() {
alert(“welcome!”);
}
</script>
</body>
</html>
Output

60 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Q58. Write about the following,
(i) Checkboxes
(ii) Radiobuttons.
Answer :
(i) Checkboxes
It is a small box that can be checked and used for multiple selection/multiple input.
When the user is left with two multiple options only (like Yes or No), we prefer to use check boxes. Checkbox behaves
as a toggle switch (toggles between two options). This means a check box can be in either one of the multiple states, either
checked(true state) or unchecked(false state). A checkbox returns either single or multiple value to the Web server, either ‘T’
or ‘F’ (or ‘1’ or ‘0’ ) depending on the checkbox whether checked or unchecked. Basing on the value returned from the HTML
form, a Web server script does further processing. Using checkboxes the user can give multiple input to the server.
Properties
NAME, VALUE, CHECKED
Syntax
< INPUT TYPE = “checkbox” NAME = “name of the checkbox” VALUE = “a string that indicates what for the checkbox
is meant” CHECKED(optional)>
Example
<INPUT TYPE = “checkbox” NAME = “box1” VALUE = “Male” CHECKED>
This places a checkbox on the HTML form, which can be referenced by the name box1. The VALUE attribute assigns a
meaning to the check box. This is the value that is returned if the check box is ‘checked’.
Attributes
The following are the attributes used for checkboxes,
(a) type
It is used to specify the checkbox.
(b) name
It is used to provide the name for checkbox.
(c) value
It is used to specify the value that is sent to server when a checkbox is selected.
(d) checked
It is used to select a checkbox when a page is loaded.
Example
<html>
<body>
<form action = “” method = “get” >
Select any option:
<br/>
<input type = “checkbox” name = “skill1” value = “html”/> html <br/>
<input type = “checkbox” name = “skill2” value = “xhtml”/> xhtml <br/>
<input type = “checkbox” name = “skill3” value “css”/>css <br/>
<input type=“submit” value=“Submit”>
</form>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 61
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

(ii) Radio Buttons

The radio button element has two states and can toggle between them. When several radio buttons are combined into a
group, only one radio button can be selected at any given time. Providing the same name to all the radio buttons will place them
in the same radio group.
The occurrence of the CHECKED attribute in the INPUT element will preselect the radio button. Only one radio button
can be selected at any time in a group.
Syntax
<INPUT TYPE = “radio” NAME = “RadioGroupName” VALUE = “What for the radio button is meant”>
Attributes
The following are the attributes for an <input> element that contains the value radio for type attribute.
(a) type
It is used to specify radio button.
(b) name
It is used to specify the name for a radiobutton.
(c) value
It is used to specify the value that is sent to the server when this option is selected.
(d) checked
It is used to specify that this option must be choosen by default whenever a page is loaded.
(e) size
It is used to specify the size of an radio button in terms of pixel.
Example
<html>
<body>
<form action=“”>
<input type=“radio” name=“language” value=“css”> CSS<br>
<input type=“radio” name=“language” value=“xhtml”> XHTML<br>
<input type=“radio” name=“language” value=“javascript”> JAVASCRIPT<br>
<input type=“submit” value=“Submit”>
</form>
</body>
</html>
62 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Output

Q59. Write about select boxes.

Answer :
Select Boxes
It is a drop-down select box in which only one item is selected from a list of options. A drop down select box contains
<select> element and <option> element.
The following are the elements of select box.,
(a) <select> element
<select> element contains the following attributes,
(i) name
It is used to specify the name.
(ii) size
It is used to present a scrolling list box.
(iii) multiple
It is used to select multiple items from the drop down menu.
<select> element should contain at least one <option> element.
(b) <option> element
Atleast one <option> should be used in <select> element. The following are the attributes of <option> element.
(i) value
It is used to specify the value that is sent to the server whenever this option is choosen.
(ii) selected
It is used to specify the option that must be selected initially whenever a page is loaded.
(iii) lable
It is used to label an option.
Example
<html>
<body>
<form action=“” >
<select name = “colors”>
<option selected = “selected” value = “ ”> Select any one </option>
<option value = “red”> Red </option>
<option value = “pink”> Pink </option>
<option value = “blue”> Blue</option>
</select>
</form>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 63
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

Q60. How scrolling select boxes are created?

Answer :
Scrolling Select Boxes
Scrolling select boxes are created by using the <select> element and size attribute is added to it. The value of size attribute
is the number of options that are displayed only one time.
Example
<html>
<body>
<form action = “” name = “Days” method = “get”>
Select any one:
<br/>
<select size = “7”>
<option value = “Mon”> Monday </option>
<option value = “Tue”> Tuesday </option>
<option value = “Wed”> Wednesday </option>
<option value = “Thu”> Thursday </option>
<option value = “Fri”> Friday </option>
<option value = “Sat”> Saturday </option>
<option value = “Sun”> Sunday </option>
</select>
<br/> <br/> <input type = “submit” value = “submit”/>
</form>
</body>
</html>
Output

64 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Multiple Options using Multiple Attribute
Multiple attribute is used for selecting more than one item from a selectbox.
Example
<html>
<body>
<form action = “ ” method = “get” name = “Days”>
Select more than one : <br/>
<select name = “select day” multiple = multiple”>
<option value = “Mon”> Monday </option>
<option value = “Tue”> Tuesday </option>
<option value = “Wed”> Wednesday </option>
<option value = “Thu”> Thursday </option>
<option value = “Fri”> Friday </option>
<option value = “Sat”> Saturday </option>
<option value = “Sun”> Sunday </option>
</select>
<br/> <br/> <input type = “submit” value = “submit”>
</form>
</body>
</html>
Output

Q61. How the options are grouped in the select box?

Answer :
The options are grouped using <optgroup> element in the selectbox. <optgroup> element has a label attribute and its value
is provided as label.
Example
<html>
<body>
<form action = “” method = “get” name = “Info”>
select any product:<br/>
<select name = “select Info”>
<optgroup label = “Hardware”>
<option value = “Desktop”> Desktop computers</option>
<option value = “Laptop”> Laptop computers </option>
</optgroup>
<optgroup label = “software”>
<option value = “office software”> office software </option>
<option value = “Games”> Games </option>
</optgroup>
</select>
<br/> <br/> <input type = “submit” value = “submit”/> </form>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 65
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

<option> element
An <option> element with disabled attribute is used for grouping the options.
Example
<html>
<body>
<form action = “” method = “get” name = “Info”>
select any one product:<br/>
<select name = “selectInfor”>
<option disabled = “disabled” value = “ ”> Hardware </option>
<option value = “Desktop”> Desktop computers</option>
<option value = “Laptop”> Laptop computers </option>
<option disabled = “disabled” value = “ ”> Software </option>
<option value = “officesoftware”> Office Software </option>
<option value = “games”> games </option>
</select>
<br/> <input type = “submit” value = “submit”/>
</form>
</body>
</html>
Output

Attributes for Select Boxes

The <select> element contains the following attributes name, size, multiple, disabled, tabindex all universal attributes
and UI event attributes.
The <option> element contains the following attributes label, disabled, all universal attributes and UI event attributes.
66 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Q62. Write about the following,
(i) File select boxes
(ii) Hidden controls.
Answer :
(i) File Select Boxes
The file select box or the file upload box is used to include a file from user’s computer to the website. This can be done
by using the value of the “type” attribute (of the <input> element) as “file” when the file select box is used the ‘method’ attribute
of the <form> element must have the value “post”.
When the file upload box is used, the other two attributes that must be used are as follows,
(a) The Enctype Attribute
The enctype attribute is used in the <form> tag to send form controls to the server. It takes the value of multipart form-
data.
(b) The Accept Attribute
The accept attribute is used in the <form> tag to specify the MIME type of the files that are uploaded through file upload
box. Any type of the image can be included along with wildcard character (*).
Example
<html>
<body>
<form action = “” method = “post” name = “FromImage” entype = “multipart/form-data”>
<input type = “file” name = “file upload” accept = “image/*”/> <br/>
<input type = “submit” value = “submit”/>
</form>
</body>
</html>
Output

(ii) Hidden Controls

This tag <INPUT TYPE = HIDDEN>, stores hidden data. The data is not visible unless the user views the Page Source
from View menu of the browser.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 67

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Syntax
<INPUT TYPE= “HIDDEN” NAME= “stdpassword” value = “MyWord”>
The data MyWord is forwarded to the Web server along with other data users. The advantage of this tag is, the data
MyWord is not displayed in the browser. Through these fields, the programmer or user can pass secret data like standard password
or actual sales figures etc., to the Web server. This is because they are not displayed in the browser and they are not known to
others.
Example
<html>
<head></head>
<body>
<form action = “http://www. siaedugroup.com/ vote.aspx” method = “get” name = “form1”>
<p>This page contains the hidden controls, to view the contents of the hidden control go to the View menu and select the
source..</p>
<input type = “hidden” name = “hiddencontrol” value = “main page”/>
<input type = “submit” value = “click this to select the favourite page of our site”/>
</form>
</body>
</html>
Output

In addition to these controls there is also another control called object control.
Object are embedded in the <object> element within the <form> element of HTML page. For example to use the object
for activating graphical inter action and the value must be stored with its object name.

1.5.3 Sending Form Data to the Server

Q63. How the form data is sent to the server?
Answer :
HTTP is used when a browser requests for a webpage and when the server sends this page to the browser. HTTP get and
HTTP post are the methods used by the browser to send form data to the server.
(a) HTTP Get
HTTP get method is used to access form data from the server. The form data is appended with the URL written in action
attribute of an <form> element by using a question mark in between them. The name/value pairs for each form control is separated
using ampersand (&).

68 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Example
<form action = “http://www.google.com/login.aspx” method = “get”>
Usename:
<input type = “text” name = “Username” value = “ ” size = “20” maxlength = “20”> <br/>
Password:
<input type = “password” name = “password” value = “ ” size = “10” maxlength = “10”>
<input type = “submit”/>
</form>
After clicking on the submit button, the username and password are appended to the URL as shown below,
http://www.google.com/login.aspx?Username = harrys&password = ph123
The above query is known to be query string.
An advantage of sending form data to the server is that it can be bookmarked,
(b) HTTP Post
HTTP Post method is used to send data from a form to the server.
The login form that is sent to the server using post method can be represented in the given HTTP headers.
User_agent : MSIE 7
Content_Type : application/x-www_form_urlencoded
Content_length : 35
..... other headers go here....
Username = harry & password = h123.

1.6 FRAMES

1.6.1 Introducing Frameset, <frame> Element, Creating Links Between Frames

Q64. Discuss about frameset.
Answer : Model Paper-III, Q9(b)

<frameset>
The entire code corresponding to frame(s) is usually embedded between <FRAMESET> ... </FRAMESET> tag. This tag
must be included in <HEAD> region of code not in <BODY> region of XHTML code.
Attributes of <frameset>
The <frameset> tag supports the following attributes.
(a) COLS
It displays the total number of columns and the size of frameset. It is measured in pixels.
(b) ROWS
It displays the total number of rows and the size of frameset. It is measured in pixels.
Program
The following code creates a multiple frames on screen. This frames are created using <frameset> tag.
Frame1.HTML
<HTML>
<HEAD>
<TITLE> PROGRAM 1 </TITLE>
<BODY BGCOLOR = “pink”>
<CENTER> <STRONG> <H1> This is program1 </H1> </STRONG> </CENTER>
</BODY>
</HTML>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 69
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Frame2.HTML
<HTML>
<HEAD>
<TITLE> PROGRAM2</TITLE>
</HEAD>
<BODY BGCOLOR = “Cyan”>
<CENTER> <STRONG> <H1> This is progam2 </H1> </STRONG></CENTER>
</BODY>
</HTML>
Frame3.HTML
<HTML>
<HEAD>
<TITLE> PROGRAM3 </TITLE>
</HEAD>
<BODY BGCOLOR = “Blue”>
<CENTER> <STRONG> <H1> This is program3 </H1> </STRONG> </CENTER>
</BODY>
</HTML>
Mainframe.HTML
<HTML>
<HEAD>
<TITLE> Program to create multiple frames </TITLE>
<FRAMESET ROWS = “25%, 25%, 25%”>
<FRAME SRC = “Frame1.HTML”>
<FRAME SRC = “Frame2.HTML”>
<FRAME SRC = “Frame3.HTML”>
</FRAMESET>
</HEAD>
</HTML>
Output

70 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Q65. Write about <frame> element.
Answer :
<frame> element
The <frame> element should contained within the <frameset>element. It specifies one or more frames within the frameset.
It is an empty element. It should always carry an attribute called “src” which indicates the location of the html document to be
loaded in the specific frame.
Attributes
(i) src Attribute
It is used to specify the file that must be displayed in the frame.
Example
src = “program.html”
(ii) name Attribute
It is used to provide the name for a frame. This name is used when the links are created in one frame and used as a target
in other frame for loading the pages.
Example
name = “program”
(iii) frameborder Attribute
It is used to define the borders around the frames. The values for frameborder attribute is given below.
(a) 1 or yes value
It is the default value that specifies borders that must be shown.
(b) 0 or no value
It is used to specify borders that must not be shown.
(iv) marginwidth and marginheight Attribute
This attribute sets left and right margin size of a frame.
This attribute sets the top and bottom margin of a frame. It is usually measured in pixel.
Example
marginwidth = “15” marginheight = “15”
(v) noresize Attribute
It is used to prevent the resize of a frame. Its value is noresize.
Example
noresize = “noresize”
(vi) scrolling Attribute
The scrolling attribute is used within the <frame> element to provide the scrolling bar if the content of the frame does not
fit into the available size of the frame. It can take three possible values they are,
(a) Yes
It specifies that the frame should always have the scroll bar.
(b) No
It specifies that the frame should never have the scroll bar.
(c) Auto
It specifies that the browser can automatically create the scrolling bar if the content of the frame does not fit in the
size of the frame.
(vi) longdesc Attribute
This attribute displays the pages that contain long content description
Its value must be URL that points the description.
longdesc = “framedescription.html”

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 71

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Program
Frame.html
<!DOCTYPE html>
<html>
<frameset cols=“80%,50%”>
<frame src=“frame1.html”>
<frame frameborder=“1”>
<frame marginheight=“12” >
<frame noresize=“noresize”>
<frame name=“frame1”>
<frame marginwidth=“15”>
<frame scrolling=“yes”>
</frameset>
</html>
Frame1.html
<HTML>
<HEAD>
<TITLE> PROGRAM 1 </TITLE>
<BODY BGCOLOR = “pink”>
<CENTER> <STRONG> <H1> This is program1 </H1> </STRONG> </CENTER>
</BODY>
</HTML>
Output

Q66. How the links can be created between frames?

Answer :
The linking between frames is provided in the three conditions,
 When the main document is lengthy, the navigation bar is used to provide the shortcuts to the parts of the main document.
 When a user does not want to reload the whole page
 When the size of the navigation bar is too large, the usage of frames prevents the user to reload the navigation bar each
time they view the new page.
The linking between frames can be provided by using the two main attributes they are,
The name attribute and the target attribute.
The name attribute specifies the name of the frame in which the new page can be loaded. The value of the target attribute
can be the name of the frame in which the new page is going to be loaded. The difference between name and target attribute is
that, the name attribute is used in the <frame> element where as the target attribute is used in the <a> element. The other possible
values that can be accepted by the “target” attribute are,
 Self
It loads the page into the current frame.
 Blank
It loads the page into the new window.
 Parent
It loads the page into the parent window i.e., in the case of a single set of frames, the new page will replace all the frames.
In case of nested frames, the new page will replace the frame containing the sets of frames.
72 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
 Top
It loads the page into the current window by replacing any current frame.
This concept of frame can be explained with the help of the following program,
Program
frames.html
<html>
<frameset cols = 30%, 70%”>
<frame src = “links.html”/>
<frame src = “linksinfo.html” name = “main_frame”/>
</frameset>
</html>
In the above example of (frames.html), 2 frames are created, one frame loads the page (links.html) where as the other
frame initializes it with the page (linksinfo.html)
The code for (linksinfo.html) is as follows,
<html>
<head></head>
<body>
<h1>Main page<h1>
<h3>This page provide you the information about books present in the navigation frame. Just click any one them and
obtain the relevant information here</h3>
</body>
</html>
Output

It is the step to link the above two frames. This can be done as follows,
Consider the code for (links.html).
<html>
<head></head>
<body>
<h1>About Books</h1>
<u1>
<li><a href = “b1.html” target = “main_frame”>Web Technologies</a></li>
<li><a href = “b2.html” target = “main_frame”>J2ME<a></li>
<li><a href = “b3.html” target = “main_frame”>Software Engineering<a></li>
</u1>
</body>
</html>
In the above example program (links.html), when the link “Web Technologies” is clicked, the contents of the page “b1.
html” gets loaded into the target frame named “main_frame”. Similarly when the other links are clicked their associated pages
“b2.html” and “b3.html” gets loaded into the target-frame. This can be shown as follows,

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 73

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
1.6.2 Setting a Default Target Frame Using <base> Element, Nested Framesets, Inline or
Floating Frames with <iframe>
Q67. (a) How <base> element is used to set as a default target frame.
(b) Write about nested framesets.
Answer :
(a) <base> Element
The <base> element is used to set the default target frame in any webpage. The links are provided in other frame. It has
target attribute with the value as name for the frame. LinksNav.html is added in the code as a default frame target.
<head>
<base target = “main_page”/>
</head>
(b) Nested Framesets
A frameset specifies the grid-like structure for displaying rows and columns. A nested frameset is created by a placing the
second<frameset> element instead of one of the <frame> element.
Example
<!DOCTYPE HTML>
<html>
<frameset rows=“60%,40%”>
<frame src=“http://java2s.com”>
<frameset cols=“25%,75%”>
<frame src=“http://java2s.com”>
<frame src=“http://java2s.com”>
</frameset>
</frameset>
</html>
Output

74 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
Q68. Explain <iframe> element.
Answer :
<iframe> Element
It is also called as inline or floating frames. This tag helps in defining an inline frame. An inline frame embeds one HTML
document in another HTML document.
Attributes
The following are the attributes of <iframe> element.
1. src Attribute
It defines a URL path (address) to the iframe.
2. align Attribute
It directs the alignment of <iframe>. Its values are top, bottom, middle, left and right.
The values for the align attribute are as follows,
(a) left: The frame is set at the left margin of the page and text is displayed at the right side.
(b) right: The frame is set at the right margin of the page and text is displayed at the left side.
(c) top: The frame is set at the top and is inlined with the text.
(d) middle: The frame is set at the middle and is inlined with the text.
(e) bottom: The frame is set at the bottom and is inlined with the text.
3. height and width Attributes
(a) height:It defines the height of <iframe>.
Example: height = “120”
(b) width: It defines the width of <iframe>.
Example: width = “400”
4. frameborder Attribute
It sets a border around <iframe>. The value for a frameborder must be number of pixels. The value 0 represents no border.
Example: frameborder = “0”
5. longdesc Attribute
The longdesc attribute is used for specifying indicating a link to another page and a description is given in the form of
text. This includes images, charts and graphs in the frame.
Example: longdesc = “../textDescription/iframepgm.html”
6. marginheight and marginwidth Attributes
(a) marginheight Attribute: It sets left and right margin around iframe content. It is used to provide the distance
between border and content of the frame interms of pixels.
Example: marginheight = “5”
(b) marginwidth Attribute: It sets left and right margins around iframe content. It provides the distance between border
and content of the frame interms of pixels.
7. scrolling Attribute
scrolling attribute is used to specify whether the frame must contain scrollbars.
Example
<iframe> element.
<!DOCTYPE html>
<html>
<body>
<h2>iframe element</h2>
<iframe height=“300px” width=“100%” src=“frame1.html” name=“iframe element”></iframe>
<p><a href=“https://www.google.com/” target=“iframe element”>Google page</a></p>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 75

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

INTERNAL ASSESSMENT

OBJECTIVE TYPE
I. Multiple Choice
1. HTML code should begin with __________ tag and ends with __________ tag. [ ]

(a) </html>, <html> (b) <html>, </html>

(c) </html>, </html> (d) <html>, <html>

2. Which of the following is a type of list in HTML? [ ]

(a) Order list (b) Unordered list

(c) Nested lists (d) All of the above

3. ________ aligns the text at the centre of the screen. [ ]

(a) <CENTER> . . . </CENTER> (b) <CENTER> . . . </CENTER>

(c) </CENTER> . . . <CENTER> (d) </CENTER> . . . </CENTER>

4. ________ inserts a button in the HTML page. [ ]

(a) <button> (b) Insert button

(c) ins_button (d) None of the above

5. ________ attribute provides the URL for an image. [ ]

(a) id (b) href

(c) src (d) sc

6. __________ attribute is used to specify the number of columns in a givne page. [ ]

(a) columns (b) clmn

(c) col (d) cols

7. Which of the following is not a formatting tag? [ ]

(a) <br> (b) <i>

(c) <p> (d) None of the above

8. __________ tag is used to create a link from one page to another page. [ ]

(a) Anchor (b) Llink

(c) Blink (d) Linker

9. The vertical alignment of the data in a table can be done by using __________ attribute. [ ]

(a) veralign (b) vertical_align

(c) valign (d) None of the above

10. Tags are classified into ___________ types. [ ]

(a) 3 (b) 2

(c) 5 (d) None of the above

76 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-1 COMPUTER SCIENCE PAPER-VIII (B)
II. Fill in the Blanks

1. ________ tag is used to add the images to the web page.

2. ________ tag allows the text to be written in paragraph.

3. ________ attribute provide the color to the background of a page.

4. href is used to provide the ________ for a link.

5. The output screen of every HTML page is a ________.

6. A table can be created by using ________ tags.

7. Tables can be linearized by using a __________ for reading a table.

8. In HTML, forms can be created by inserting ________ tags.

9. Break tag in xhtml is given as ______.

10. The process of placing one table inside another table is known as _______.

KEY
I. Multiple Choice

1. (b) 2. (d) 3. (a) 4. (a) 5. (c)

6. (d) 7. (d) 8. (a) 9. (c) 10. (b)

II. Fill in the Blanks

1. <img>

2. <P>

3. bgcolor

4. URL/web address

5. Frame

6. <table> . . . </table>

7. Screen reader

8. <FORM> . . . </FORM>

9. <br/>

10. Nested table

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 77

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
III. Very Short Questions and Answers
Q1. Write a short note on HTML.
Answer :
HTML stands for HyperText Markup Language. It is a markup language immensely used in developing web pages.
Here the word “markup” in real sense refers to highlighted instance of a given aspect i.e., an author can highlight a particular
word of his written document to grab attention of readers. In similar way, the Hyper Text Markup Language highlights
different views of a given web page in terms of headers, titles, plain text, images, sounds etc.
Q2. List any five formatting tags.
Answer :
Formatting tags in HTML are as follows,
1. Paragraph Tag <P>
2. Center Tag <center>
3. Break Tag <br>
4. Bold Tag <b>
5. Italic Tag <i>
Q3. Write about the text element in HTML.
Answer :
Text Element
In HTML, Text elements are considered as data entry fields. These fields generally accept single line of text.
Syntax
<INPUT TYPE = “text” Name = “name of text field” VALUE = “default value”>
Example
<INPUT TYPE = “text” NAME = “L1” VALUE = “JOHN”>
Q4. Define form.
Answer :
Form is a web page which carry elements like text fields, check boxes, buttons etc. These web pages look like normal
white sheet of paper consisting of significant spaces for information to be entered by users. Online forms can be used for
different purposes. For example it is used, for online registrations, order entry, subscription etc.
Q5. Define list in HTML.
Answer :
“List” refers to a record that gives small amount of information arranged in specific format. Examples in this aspect
can be a shopping list, list of names of employees in an organization, list of names of places etc. In HTML, concepts of
list is used for displaying information in specific order.

78 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)

Marketed by:

UNIT CASCADING
STYLE SHEETS
2
LEARNING OBJECTIVES

After studying this unit, a student will have thorough knowledge about the following key concepts,
Ø Cascading Style Sheets

Ø Various CSS properties

Ø More Cascading Style Sheets like Links, List, Tables and Outlines

Ø Pseudo classes like :focus and :active

Ø Page layout, Designing pages, Coding your design and developing for mobile devices.

Ø Various design issues.

INTRODUCTION

Cascading Style Sheets (CSS) is one of the most interesting concepts of HTML as it specifies the rules for styling
elements of a web document. It not only extends it features in controlling colors and sizes of fonts, but also
controls spaces between various elements, the color and width of a given line etc. Thus, CSS are used to determine
the style and layout of web pages. There are four different types of column-layouts available for structuring the
pages i.e., two-column layout, three-column layout, four-column layout and six-column layout. In CSS syntax
value should end with semicolon.

Typography refers to an art and technique used in type design which consists of decisions related to type faces,
point size, line length, letter spacing, etc. It means that this keeps a lot of efforts to make the page easy to read,
navigate and to provide the messages clearly. Form is a web page which contains elements like text fields, check
boxes etc. Usually forms are created by inserting <FORM>---</FORM> tags in the HTML code.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 79

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

PART-A
SHORT QUESTIONS WITH SOLUTIONS
Q1. What is CSS?
Answer : Model Paper-II, Q3

Cascading Style Sheets (CSS), forms one of the most interesting concepts of HTML as it specifies the rules for organiz-
ing elements of a given web document. It not only extends its features in controlling colors and sizes of fonts, but also controls
spaces between various elements, the color and width of a given line etc. Thus, CSS are used to determine the style and layout
of web pages. Generally, style defines the way in which the HTML elements are shown on the web pages. A style can be used in
the following format,
selector{property : value;}
Q2. Write about style rule.
Answer : Model Paper-I, Q3

Style Rule
Style rules specify the appearance of a document. A style rule is composed of two units,
(a) Selector
It represents the elements to which the rule applies. (e.g. h1, h2, p etc.)
(b) Declaration
It represents the properties of an element(i.e., color, font-style, etc) and its value.
Syntax
Selector{Declaration;}
Selector{Property:value;}
Example
h1{Text-align:center;}
Q3. Write a short note on <link> element.
Answer :
The <link> element is an empty element. It is used to link two documents i.e., it is used to link the stylesheets with the
document in which it is present. It not only links a stylesheet but also links an RSS feed that correlate with the web page.
The <link> element has 3 attributes when it is used for associating a stylesheet with the document. They are type, rel and
href. In addition to these core attributes the <link> element can have other attributes they are, charset, dir, href, hreflang, media,
rel, rev, style, target, type.
Q4. List the properties that influence the appearance of the font.
Answer : Model Paper-III, Q3

The properties that directly influence the appearance of the font are as follows,
1. font
2. font-family
3. font-size
4. font-weight
5. font-style
6. font-variant
7. font-stretch
8. font-size-adjust.
80 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Q5. What is a selector? List the types of selectors Q8. Discuss in brief about tracking.
in CSS.
Answer : Model Paper-I, Q4
Answer : Model Paper-I, Q5

Selector Tracking
Selector is an element to which the style rule is applied. It is also called as letter spacing. It referred to as the
It provides a way to select the element (s) for applying the style space between the letters. In CSS, the letter-spacing property
rules. The elements can be selected in several ways by using is used to control the space between the items on the page. The
the different types of selectors. letter spacing is required when dealing with the headings that
Types of Selectors in CSS is in uppercase letters because reading the headings is little bit
The following are eight different types of selectors in CSS, difficult than reading a sentence.
1. Universal selector Example: h1{letterspacing : 0.1 em;}
2. The Type selector
Q9. Write a short note on,
3. The Class selector
4. The ID selector (i) list-style-position property
5. The child selector (ii) list-style-image property.
6. The descendent selector Answer : Model Paper-II, Q5
7. The general sibling selector
(i) list-style-position Property
8. The adjacent sibling selector
The list-style property specifies the bullet points for
9. The attribute selector.
multiple lines of text by aligning the second line with the start
Q6. Write about vertical-align property. of the first line or aligning it underneath the start of the marker
Answer : Model Paper-II, Q4 (bullets or numbering). This property has 2 values, they are,
Vertical-align Property (a) inside : The second line is aligned underneath the start
This property is used to control the vertical position of of the marker
text or an image.
(b) outside : The second line is aligned with the start of the
Syntax first line.
h1 {vertical-align : value;}
(ii) list-style-image Property
It takes different values. They are,
1. baseline The list-style-image property is used to specify the
2. sub images as the marker rather than a bullet point or number. It
requires the URL of the image as its value.
3. super
4. middle Q10. List the advantages of fixed-width design and
liquid design.
5. top
6. text-top Answer : Model Paper-III, Q5

7. bottom Advantages of Fixed-width Design

8. text-bottom. 1. The line length of the text can be controlled without
Q7. What are the different properties that are used bothering about the size of user’s window.
to position the items on the page.
2. The page size remains the same.
Answer : Model Paper-III, Q4
The different properties that are used to position the 3. The designer has full control on the position and ap-
items on the page are as follows, pearance of items on the page.
1. The XHTML <div> Property 4. The width and position of elements can be controlled
It is used to group the items of the XHTML pages to exactly by pixel values.
chunks or blocks. Advantages of Liquid Design
2. The CSS margin Property
1. The page expands and fills the browser window without
It is used to set margin of the element or property. leaving any gaps around it.
3. The CSS width property
2. The users are allowed to set font size lager than intended
It is used to set the width of the box.
because page layout is stretchable.
4. The CSS float Property
It is used to align the <div> elements to the left or right 3. The page can even fit in a small size window, there is
of the page. no need for scrolling it.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 81

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
PART-B
ESSAY QUESTIONS WITH SOLUTIONS
2.1 CASCADING STYLE SHEETS

2.1.1 Introducing CSS

Q11. What is CSS? Give an example.
Answer :
Cascading Style Sheet (CSS)
For answer refer Unit-II, Page No. 80, Q.No. 1.
Example
<html>
<head>
<title>HTML CSS EXAMPLE</title>
</head>
<body>
<h3 style = “color:green;font-size:24px;font-style:normal;”>Hello SIA GROUP!</h3>
</body>
</html>
Output

Q12. How style sheets are specified into HTML document?

Answer : Model Paper-I, Q10(a)
Rule
A rule is considered as a guide or principle that helps in conducting an action.
CSS Rule
A CSS rule can be associated with the element of the html document. They specify the styles for the content of the elements.
CSS Rules

Selectors Declaration

Property Value
A CSS rule consist of two parts,
1. Selector
2. Declaration.
1. Selector
Selector indicates the elements to be styled. There are three types of selectors namely HTML selector, class selector and
ID selector.
2. Declaration
The declaration indicates the type of the styles that can be applied to an element. The declaration part is again divided
into two parts namely a property and value.
(a) Property: It indicates the property of the attributes of the selected element(s).
(b) Value: Value acts as the specification for the property.
82 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Example
Property Value

H2 { Color : green ; }
Selector Declaration
A CSS rule can be applied to more than one element. This can be explained with the help of following example.
H1, P, H2 {
color : green;
Rule
font-size : 32 px;
font-family : times new roman ;}

Properties Values
The above example shows a rule which is applied to <H1> <P> and <H2> elements of the document. These elements are
seperated by comma. The rule also consists of property-value pair in the curly braces{ }. The property and value is separated by
a colon(:). Whereas each of the property-value pair separated by semicolon.
An xhtml Code and a CSS Containing Rules
The following is an Xhtml code, to which, the CSS containing different rules are applied. The XHTML code is saved as
“fruits.html”.
The CSS should be saved with the file extension ·css. Here, the stylesheet that used is “style.css”. The stylesheets should
be created in the editors such as windows notepad or text editor on the Mac.
fruits.html
<html>
<body>
<link rel= “stylesheet” type= “text/css” href= “style.css”>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>
<h3>This is h3 text</h3>
</body>
</html>
style.css
body {
color: #000000;
background-color: #ffffff;
font-family: arial; }
h1 {
background-color: #efefef ;
border-style: solid;
border-width: 2px;
border-color: #999999;}
h2 {
background-color: #cccccc;
font-weight: bold;
padding: 6px;
}
h3 { padding: 6px;}
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 83

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Style.css
The following is the css file for the above xhtml document.
/*Rule 1*/
body {
color: #000000;
background-color: #ffffff;
font-family: arial; }
/*Rule 2*/
h1 {
background-color: #efefef ;
border-style: solid;
border-width: 2px;
border-color: #999999;}
/*Rule 3*/
h2 {
background-color: #cccccc;
font-weight: bold;
padding: 6px;
}
/*Rule 4*/
h3 { padding: 6px;}
Output

Effect of each of the CSS Rule on the xhtml Document’s Elements

The Rule 1 in the styleapply.css is prepared to apply the default color to any text and lines used in the document. The
default color of the text and lines of the document is taken as black. The background of the page is specified as white. The type
face is arial.
The Rule 2 is used to affect the appearance of the h1. The background-color of the table is specified as light gray and the
border’s color is specified as dark gray with broadness of 1-pixel.
The Rule 3 affects the appearance of the table h2. The background-color of the table header is taken as medium gray. The
distance between the edge of the cell and the text known as padding is taken as 6px. The weight of the font is taken as bold.
The Rule 4 affects the h3 where the distance between the edge of the cell and the text known as padding is taken as 6px.
84 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Q13. Explain the concept of inheritance in CSS with an example program.
Answer :
In cascading style sheets, the element enclosed in another element inherits the styles of its outer element. The outer element
is the parent element and the inner element is child element. The child element inherits the styles of parent element. If the inner
element, the (child element) defines its own styles(that exist in the parent element), then the parent’s styles are overridden.
Cascading means overriding the global style sheet with local style sheet and overriding the local style sheet by a particular
element with its own style. Cascading effects allows a chain of precedence in overriding – even a document creator’s style by
a reader style.
Example
To make use of cascading effect.
File Name
Cascading.html
<HEAD>
<STYLE>
BODY{color: red; font-size: 15pt;}
P{color: green;}
.own{color: blue;}
</STYLE>
</HEAD>
<BODY>
This is in body and is in red color.
<P> This is in paragraph tag and is in green color.
<P> This is in span attribute and is in <SPAN CLASS = own>blue color.<SPAN>
</BODY>

Figure: Output of Cascading.html

In the above program, the body style( red color) is overridden by P element style( green color) and P element style is
overridden by SPAN style(blue color).

2.1.2 Where you can Add CSS Rules

Q14. What are the three different ways of adding CSS ruless into documents?
OR
Explain the types of CSS.
Answer :
CSS rules can be added into documents in three ways. They are,
1. External style sheet
2. Internal style sheet
3. Inline style sheet.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 85
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
1. External Style Sheet
External style sheets allow users to create application with multiple pages. In external style sheets, CSS rule multiple is
written in single document and it saved under file name with CSS extension. Hence if any web document wants to be adhered
to these rules, then a simple link to filename .css is made using <LINK> tag.
Program
Rule.CSS
body{color: BLACK; BACKGROUND-COLOR: lime; FONT-FAMILY:SANS-SERIF; ALIGN: CENTER;}
h1{FONT-SIZE: 20PT ;}
h2{BACKGROUND-COLOR: ORANGE; BORDER-WIDTH: 2PX; BORDER-COLOR: BLACK;}
h3{FONT-WEIGHT: ITALIC; COLOR: BLACK; PADDING: 2PX;}
h4{PADDING: 5PX;}
external.html
<html>
<head>
<title>External style sheet example</title>
<link rel = “stylesheet” Type=”Text/css” href = “rule.css”/>
</head>
<body>
<h1>This is h1<h1>
<h2>This is h2<h2>
<h3>This is h3<h3>
<h4>This is h4<h4>
</body>
</html>
Output

2. Internal Style Sheet

In internal style sheets (also called embedded style sheet) the properties (depending on requirement) are declared in
<HEAD> section of HTML code along with their selectors. Whereas the elements are declared in <BODY> region of HTML
code along with their selectors. While displaying the output, the browser considers the selectors declared in <BODY> region of
code and accordingly searches for their equivalent selector in <HEAD> region and applies the effect as required.
Program
<HTML>
<HEAD>
<TITLE> Embedded style sheet example </TITLE>
<style type = “text/CSS”>
H1{Font-family: SANS-SERIF; COLOR:GREEN; TEXT-ALIGN:CENTER; FONT-SIZE: 30PT;}
P{FONT-FAMILY: SANS-SERIF; TEXT-ALIGN: LEFT; TEXT-INDENT: 0.5; FONT-SIZE: 15PT;}
BODY{Background: Yellow; Margin-left: 1.5 In; Margin-right: 1.5 IN;}
</style>
</HEAD>
<BODY>
Welcome to Universal Book Mall!
86 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
<P> This passage gets effected to CSS properties accertained to P selector in head region</P>
<H1> This passage gets affected to CSS properties accertained to H1 selector in head region</H1>
</BODY>
</HTML>
Output

3. Inline Style Sheet

In inline style sheets, the configuration of current web document (with respect to CSS) is declared in the body
region of HTML code and the rules are applied to only single element where given configuration is declared. Moreover, the
configuration is rendered by using ‘STYLE’ attribute as an attribute of selector.
Syntax
<element style = “property : value;”> Text </element>
Example
<html>
<body>
<h1 style = “color : blue;”>Heading</h1>
</body>
</html>
Output

Q15. Explain about <link> and <style> elements.

Answer :
The <link> Element
The <link> element is an empty element. It is used to link two documents i.e., it is used to link the stylesheets to the
document in which it is present. It not only links a stylesheet but also links an RSS feed that correlate with the web page.
The <link> element has 3 attributes when it is used for associating a stylesheet with the document. They are type, rel and
href. In addition to these core attributes the <link> element can have other attributes they are, charset, dir, href, hreflang, media,
rel, rev, style, target, type.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 87
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
1. The Type Attribute
The type attribute indicates the MIME type of the document which a user need to link. Since the document is css, its
MIME type is “text/css”.
type = “text/css”
2. The rel Attribute
The rel attribute is used to indicate the relationship between the document in which the link is present and the document
which has to be linked with it. The key value which is provided to rel attribute is “stylesheet”.
rel = “stylesheet”
3. The href Attribute
The href attribute indicates the URL of the stylesheet. The URL can either be absolute or relative.
href = “../stylesheets/interface.css”
4. The hreflang Attribute
The hreflang attribute indicates the language in which the document to be linked is written.
hreflang = “en – US”.
The <style> Element
When a user need to use an inline type of stylesheet, the <style> element is used. This element is used within the <head>
element of the document. The style rules are enclosed within the <style> element.
The media Attribute
The media attribute indicates the media/output device that is optimized for the document.
media = “value”;
Here, print, screen, tv, tty, projection, handled, aural, all, embossed, Braille are the different possible values of this attribute.
Example
<head>
<title>Style Element </title>
<style type = “text/css”>
P{color : pink ;}
</style>
</head>
dir, title, type, lang and media are the attributes that are used by the <style> element.
Q16. What are the advantages of external stylesheets?
Answer :
The following are the advantages of external stylesheets,
1. External stylesheets can be reused for each page of the website.
2. External stylesheets can be used to avoid the use of stylistic markup in each page of the website.
3. A stylesheet can import the rules from other stylesheets to make the development modular and to obtain good reusability.
4. The site can be made more accessible by removing the stylesheet.
5. The stylesheets can be used as a template by different authors to obtain the same type in their documents.
6. If the first document downloads the stylesheet, the subsequent documents are not needed to download it again because,
the browser retains a copy of stylesheet rather than each individual page.
7. Several stylesheets can be associated with a single document.

88 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)

2.2 CSS PROPERTIES

Q17. List all the main properties available in CSS1 and CSS2.
Answer :
The following table shows all the main properties available in CSS1 and CSS2.
Category Properties
FONT font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant,
font-weight.
TEXT color, direction, letter-spacing, text-align, text-decoration, text-indent, text-shadow,
text-transform, unicode-bidi, white-space, word-spacing
BACKGROUND background, background-attachment, background-color, background-image, back
ground-position, background-repeat.
BORDER border, border-style, border-width, border-bottom, border-bottom-color, border-bottom-style,
border-bottom-width, border-color, border-left, border-left-color, border-left-style,
border-left-width, border-right, border-right-color, border-right-style, border-right-width,
border-style, border-top, border-top-color, border-top-style, border-top-width, border-width.
CLASSIFICATION clear, cursor, display, float, position, visibility.
GENERATED content, counter-increment, counter-reset, quotes.
CONTENT
LIST and MARKER list-style, list-style-image, list-style-position, list-style-type, marker-offset.
TABLE border-collapse, border-spacing, caption-side, empty-cells, table-layout.
OUTLINES outline, outline-width, outline-style, outline-color.
POSITIONING bottom, clip, z-index, vertical-align, left, overflow, top, right.
DIMENSIONS height, line-height, Max-height, width, min-width, max-width, min-height.
PADDING padding, padding-bottom, padding-top, padding-right, padding-left.
MARGIN margin, margin-top, margin-bottom, margin-left, margin-right.

2.2.1 Controlling Text

Q18. Explain how the fonts can be controlled. List and explain each of the properties that directly affect the
font and its appearance.
Answer : Model Paper-II, Q10(a)
Controlling Fonts
The fonts can be controlled by using the different available font properties. These properties are categorized into two
groups,
(a) The properties that directly influence the appearance of the font.
(b) The properties that have other formatting influences upon the font.
(a) Properties that Influence the Appearance of the Font
The properties that directly influence the appearance of the font are as follows,
1. font
2. font-family
3. font-size
4. font-weight
5. font-style
6. font-variant
7. font-stretch
8. font-size-adjust.
1. font
Font is used to combine several properties into one. A font is different from a typeface. A typeface is a family of fonts
where as a font is the member of typeface.
The example of typeface is, Arial
The example of font is, Arial 12-point bold.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 89
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Example
<html>
<head>
<title> Font Example</title>
</head>
<body>
<p style=“font: 15px arial, sans-serif;”>first paragraph</p>
<p style=“font: italic bold 12px/30px Georgia, serif;”>second paragraph</p>
</body>
</html>
Output

2. font-family
The font-family property is used to specify the typeface for the text. Multiple font-family properties can be specified so
that if the first choice of the value is not available in the system, then the browser can select the next font in the list. This can be
shown with the help of following example html code. ( program.html ) which is applied with stylesheet ( s2.css )
Example
<html>
<head>
<title> Font-family Example</title>
</head>
<body>
<p style= “font-family: verdana, arial, sans-serif ;” >first paragraph</p>
</body>
</html>
Output

The comma-separated list of font should end with one of the following generic font names. These generic font names
allow the computer to select its default font type when none of the specified fonts are available in the system. The generic font
names are serif, sans-serif, monospace, cursive, fantasy.
3. font-size
The font-size property is used to specify the size of the font. The value of font-size property can be specified in several
ways. They are,
 Absolute xx-small, x-small, Small, medium, large, x-large, xx-large
 Relative size smaller, larger
 Length px , em, ex, pt, in, cm, pc, mm
 Percentage ( in relation to parent element)
2% , 10% , 25% , 50% , 100%.
Program
<html>
<head>
<title> Font-size Example</title>
</head>
<body>
<p style= “font-size: 35px;” >first paragraph</p>
</body>
</html>
Output

90 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
4. font-weight
The font-weight property represents the text either in thick or light form. The possible values of font-weight property are
normal, lighter, bold, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Example
<html>
<head>
<title> Font-weight Example</title>
</head>
<body>
<p style= “font-weight: bold;” >First paragraph</p>
<p style= “font-weight: lighter;” >Second paragraph</p>
</body>
</html>
Output

5. font-style
The font-style property is used to specify the style of the font. The styles are, normal, italic, oblique etc,. That can be
provided as the values of font-style property.
Example
<html>
<head>
<title> Font-Style Example</title>
</head>
<body>
<p style= “font-style: italic;” >First paragraph</p>
<p style= “font-style: normal;” >Second paragraph</p>
</body>
</html>
Output

6. font-variant
The font-variant property can take two possible values namely normal and small caps. The font-variant property specifies
that the font can be either in normal or small caps. The value small caps of the font-variant allows the appearance of the font
appear like a smaller version of the uppercase letter set. This can be shown with an example.
Example
<html>
<head>
<title>Font-variant Example </title>
</head>
<body>
<p style= “font-variant: normal”> Normal font <span style= “font-variant: small-caps;”>
is represented in small caps </span> in the middle </p>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 91
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

7. font-stretch
The font-stretch property is used to control the width of text in a font but not the spaces between them. The values that it
can take is of two types,
1. Relative-normal, wider, narrower
2. Fixed: ultra-condensed, extra-condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
following is a stylesheet (stretch.css ) which is applied to the html document (program.html).
Program
<html>
<head>
<title> Font-Strech Example</title>
</head>
<body>
<p style= “font-family: verdana, arial, sans-serif; font-stretch: semi-expanded;” >First paragraph</p>
<p style= “font-family: “Arial Black”; font-stretch: condensed;” >Second paragraph</p>
</body>
</html>
Output

8. font-size-adjust
The font-size-adjust attribute is used to modify the font’s aspect value. The font’s aspect value is a ratio. This ratio is
between the height of the lowercase letter ‘x’ in the font and the height of the font.
Example
<html>
<head>
<title> Font-size-adjust Example</title>
</head>
<body>
<p style=“font-family: Times, serif; font-size: 35px;”>SIA</p>
<p style=“font-family: Verdana, sans-serif; font-size: 35px;”>SIA</p>
<p style=“font-family: Times, sans-serif; font-size-adjust: 0.58; font-size: 35px;”>SIA</p>
</body>
</html>
Output

(b) Properties that have other Formatting Influences upon the Font
For answer refer Unit-II, Page No. 93, Q.No. 19.
92 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)

2.2.2 Text Formatting

Q19. List and explain each of the properties that have other formatting affects on the text.
Answer :
The following are the properties that have other formatting influences upon the font,
1. color
2. text-align
3. text-decoration
4. text-indent
5. text shadow
6. text-transform
7. letter-spacing
8. word-spacing
9. white-spacing
10. direction
11. vertical-align.
1. The color Property
The color property is used to apply the color to the text. The values assigned to it can be either a hexadecimal code or a
color name.
Example
color.html
<html>
<head>
<style type=“text/css”>
p { color : red; font-size : 28pt ; }
</style>
</head>
<body>
<p> This paragraph shows the effect of color property. it is red in color </p>
</body>
</html>
Output

2. The text-align Property

The text-align property places the text in the browser’s window based on the specified value. These values can be speci-
fied by text-align property as left, right, center and justify.
(i) left: Positions the text at the left side of the browser’s window
(ii) right: Positions the text at the right side of the browser’s window
(iii) center: Positions the text at the middle of the browser’s window
(iv) justify: Spreads the text across the whole width of the browser’s window.
Example
align.html
<html>
<head>
<style type= “text /css”>
p.id1 {text-align : left ; font-size : 28pt ; }
p.id2 {text-align : right ; font-size : 28pt ; }
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 93
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
p.id3 {text-align : center ; font-size : 28pt ; }
p.id4 {text-align : justify ; font-size : 28pt ; }
</style>
</head>
<body>
<p class= “id1”> left alignment</p>
<p class= “id2”> right alignment</p>
<p class= “id3”> center alignment</p>
<p class= “id4”> justify alignment</p>
</body>
</html>
Output

3. The text-decoration Property

The text-decoration property will apply the effects such as underline, overline , strike through or blinking to the text. The
values taken by text-decoration property are,
(i) underline : It draws a line under the content
(ii) overline : It draws a line over the top of the content
(iii) line-through : It draws a line in the middle of the content to show the deletion of text
(iv) blink : It creates blinking effect on the text
Example
decoration.html
<html>
<head>
<style type= “text/CSS”>
p.id1 {text-decoration : underline ; font-size : 28pt ; }
p.id2 {text-decoration : overline ; font-size : 28pt ; }
p.id3 {text-decoration : line-through ; font-size : 28pt ; }
p.id4 {text-decoration : blink ; font-size : 28pt ; }
</style>
</head>
<body>
<p class= “id1”> This paragraph is underlined </p>
<p class= “id2”> This paragraph is overlined </p>
<p class= “id3”> This paragraph is line-through </p>
<p class= “id4”> This paragraph is applied with a blinking effect </p>
</body>
</html>
94 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Output

4. The text-indent property

The text-indent property is used to set the indent for first line of the text.
Example
indent.html
<html>
<head>
<style type= “text/css”>
p.indent {text-indent : 5em ; font-size : 28pt ; }
p.noindent {font-size : 28pt ; }
</style>
</head>
<body>
<p class= “noindent”>The first line of the this paragraph is intendent
</p>
<p class= “indent”> The first line of the this paragraph is intendent</p>
</body>
</html>
Output

5. The text-shadow Property

The text-shadow property is used to apply the drop shadowing effect to the text. This property is often used in print me-
dia. Its property includes three lengths , optionally followed by a color as its value. Hence the value is complicated. This can be
shown as follows,
drop shadow { text-shadow : 0.4em 0.4em 0.6em green }
In the above example , first two values of text-shadow indicates the x and y coordinates of the offset of the drop shadow.
The third value followed by a color indicates the blur effect.
This property is not supported by IEZ and firefox.
shadow.html
<html>
<head>
<style type= “text/css”>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 95
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
p.shadow { text-shadow : 0.7 em 0.7em 0.9em red; font-size : 28pt; }
</style>
</head>
<body>
<p class= “shadow”> This paragraph is applied with the drop shadowing effect</p>
</body>
</html>
Output

6. The text-transform Property

The text-transform property is used to apply the cases such as the lowercase or uppercase to the text.
The possible values taken by text-transform property are,
(i) none: Applies no effect
(ii) Capitalize: Capitalizes the first letter of every word.
(iii) Uppercase: Converts the entire content of an element into uppercase
(iv) Lowercase: Converts the entire content of an elements into lowercase.
Example
<html>
<head>
<style type= “text/css”>
</style>
</head>
<body>
<p style=“text-transform : none ; font-size : 20pt ;”> no effect </p>
<p style=“text-transform : capitalize ; font-size : 20pt ;”> capitalized effect </p>
<p style=“text-transform : uppercase ; font-size : 20pt ;”> uppercase effect </p>
<p style=“text-transform : lowercase ; font-size : 20pt ;”> lowercase effect </p>
</body>
</html>
Output

7. The letter-spacing Property

The letter-spacing property is used to track the number of spaces between letters. The tracking of space is of three types,
(i) Loose tracking indicates a lot of space between the letters.
(ii) No tracking indicates the normal space between the letters.
(iii) Tight tracking indicates that the letters are squeezed together. The value it accepts is a unit of length.
Example
letterspacing.html
<html>
<head>
<style type= “text/css”>
p { letter-spacing : 12px ; font-size : 28pt ; }
</style>
96 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
</head>
<body>
<p> This paragraph shows the effect of letter-spacing property </p>
</body>
</html>
Output

8. The word-spacing Property

The word-spacing property is used to provide the space between words. The value it accepts is a unit of length.
Example
wordspace.html
<html>
<head>
<style type= “text/css”>
p.wordspace {word-spacing : 22px ; font-size : 28pt ; }
p.nospace {font-size : 28pt ; }
</style>
</head>
<body>
<p class= “wordspace”> This paragraph shows the effect of word-spacing property </p>
<p class= “no space”> This paragraph does not show the effect of word-spacing property </p>
</body>
</html>
Output

9. The white-space Property

The white-space property is used to control the number of spaces between any two words in the document. The possible
values of white-space property are normal , pre and nowrap
(i) Pre: The “pre” value preserves the white spaces and does not break the line until the <br> element is used explicitly
(ii) Nowrap: The “nowrap” value does not preserve the white spaces. Instead it collapses the sequence of white
spaces into a single space. It does not break the line until the <br> element is used explicitly.
(iii) Normal: The “normal” is the default value. It does not preserves the white spaces. Instead it collapses the sequence
of white spaces into a single space. It breaks the line if it exceeds the available line space of the browser screen.
Example
<html>
<head>
<style type= “text/css”>
p.pre {white-space:pre;}
p.nowrap{white-space:nowrap;}
p.normal{white-space:normal;}
</style>
</head>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 97
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<body>
<h1>EFFECT OF PRE VALUE</h1>
<p class= “pre”> This paragraph demonstrates the use of pre value of the white space property, this paragraph demon-
strates the use of pre value of the white space property, this paragraph demonstrates the use of pre value of the white space
property..</p>.
<h1>EFFECT OF NOWRAP VALUE</h1>
<p class= “nowrap”> This paragraph demonstrates the use of nowrap value of the white space property, this paragraph
demonstrates the use of nowrap value of the white space property, this paragraph demonstrates the use of nowrap value
of the white space property. </p>
<h1>EFFECT OF NORMAL VALUE</h1>
<p class= “normal”> This paragraph demonstrates the use of normal value of the white space property, this paragraph
demonstrates the use of normal value of the white space property, this paragraph demonstrates the use of normal value of
the white space property. </p>
</body>
</html>
Output

10. The direction Property

The direction property is used to specifies the direction in which the text must flow such as left direction or right direction.
The possible values accepted by direction property are,
(i) ltr: Allows the text to flow from left to right direction
(ii) rtl: Allows the text to flow from right to left direction
(iii) inherit: allows to flow the text in the direction similar to the direction of its parent element.
Example
<html>
<head>
<style type= “text/css”>
p.ltr {direction : ltr ; font-size : 28pt ; }
p.rtl {direction : rtl ; font-size : 28pt ; }
p.inh {direction : inherit ; font-size : 28pt ; }
</style>
</head>
<body>
<p class= “ltr”>left to right direction </p>
<p class= “rtl”>right to left direction </p>
<p class= “inh”>direction similar to the parent’s direction </p>
</body>
</head>
98 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Output

11. The vertical-align Property

This property is used to control the vertical positioning of text or an image.
Syntax
p.a{
vertical-align: value;
}
It takes different values. They are,
(i) baseline: It is the default value. It aligns the elements on the baseline.
(ii) sub: It aligns the element as subscript of the baseline element.
(iii) super: It aligns the element as superscript of the baseline element.
(iv) middle: It aligns the element with the midpoint of the parent element.
(v) top: It aligns the top of the text and the top of the image at the top of the tallest element on the line.
(vi) text-top: It aligns the top of the text and the top of the image at the top of the text on the line.
(vii) bottom: It aligns the bottom of the text and the bottom of the image at the bottom of the lowest element on the line.
(viii) text-bottom: It aligns the bottom of the text and the bottom of the image at the bottom of the lowest text on the line.
Example
<html>
<head>
<style type = text/cs></style>
</head>
<body>
<title>The vertical Property</title>
<h2>baseline:</h2>
<p>An <img class= “a” src= “download.jpg” width=“20” height=“20” style = “vertical-align : baseline;”>
image with a default alignment.</p>
<h2>text-top:</h2>
<p>An <img class= “b” src= “download.jpg” width=“20” height=“20” style = “vertical-align : text-top;”> image with a
text-top alignment.</p>
<h2>text-bottom:</h2>
<p>An <img class= “c” src= “download.jpg” width=“20” height=“20” style = “vertical-align : text-bottom;” > image
with a text-bottom alignment.</p>
<h2>sub:</h2>
<p>An <img class= “d” src= “download.jpg” width=“20” height=“20” style = “vertical-align : sub;” > image with a sub
alignment.</p>
<h2>super:</h2>
<p>An <img class= “e” src= “download.jpg” width=“20” height=“20” style = “vertical-align : super;” > image with a
super alignment.</p>
<h2>middle:</h2>
<p>An <img class= “f” src= “download.jpg” width=“20” height=“20” style = “vertical-align : middle;” > image with a
middle alignment.</p>
<h2>bottom:</h2>
<p>An <img class= “g” src= “download.jpg” width=“20” height=“20” style = “vertical-align : bottom;” > image with a
bottom alignment.</p>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 99
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<h2>top:</h2>
<p>An <img class= “h” src= “download.jpg” width=“20” height=“20” “vertical_align : top;” > image with a top align-
ment.</p>
</body>
</html>
Output

2.2.3 Text Pseudo Classes

Q20. Explain in detail about different types of pseudo classes.
Answer :
Pseudo Classes and Pseudo Elements
Pseudo classes and pseudo elements apply the style to the elements that cannot be handled by traditional selectors. Pseudo
classes and pseudo elements are used to provide the style to the first character of the first line of a paragraph.
Pseudo classes compare the elements by using the information other than the elements name or their attributes. Pseudo
classes are preceded by a colon.
Pseudo elements deal with the subparts of an element. They are also preceded by a colon.
Pseudo classes and pseudo elements are represented as follows,
Selector: pseudo-element {declaration}
Selector: pseudo-class {declaration}
Types of Pseudo Classes
The different types of pseudo classes are as follows,
1. The :first-line Pseudo Class
The :first-line pseudo class applies the styles to the first line of the element. It is generally used for the <P> element. It
has the following properties,
1. color
2. vertical-align
3. text-decoration
4. font
100 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
5. background Types of Selectors
6. line-height The following are eight different types of selectors in
7. text-transform CSS,
1. Universal selector
8. word-spacing
2. The Type selector
9. letter-spacing
3. The Class selector
10. clear.
4. The ID selector
Example: p:first-line {color: Red; text-decoration: underline;}
5. The child selector
2. The :first-letter pseudo Class
6. The descendent selector
The :first letter pseudo class applies the styles to the first
7. The general sibling selector
letter of the element. It is generally used for <P>, <div> <span>
elements. 8. The adjacent sibling selector
Example: P: first-letter {font-size : 400% float : left ;} 9. The attribute selector.
3. The :before and :after Pseudo Elements 1. Universal Selector
:before and :after pseudo elements are used for inserting The universal selector is represented as asterisk (*). It
some new content into an HTML document. can be used to apply a rule to all the elements of a docu-
ment.
To insert any new thing before an existing element;
:before pseudo element is used where as to insert any new thing Example: * { }.
after an existing element, the :after pseudo element is used. 2. The Type Selector
The new content may be text, images, audio or video. The type selector is used to apply the same rule to various
These pseudo classes are not supported by the internet explorer elements. The type selector compares all of the elements
before and : after pseudo classes use the ‘content’ property to present in the comma - delimited list. It reduces the size
add the content within the document. The following example of stylesheet, saves the bandwidth and load on the server.
shows the effect of : before pseudo class, Example: h1 , h2 , p{ }
Example The above selector matches all of the h1, h2 and p ele-
<html> ments of the document and applies the same rule to all
of them.
<head>
3. The Class Selector
<style type = “text/css” >
The class selector matches the rule with the element that
body >ol>li :before { content : “Examples:”; }
has a class attribute and whose value is specified in the
ol { list-style-type: none; } class selector.
</style> Example: <p> is the element in the document containing
</head> the “class” attribute with the value as “ val ”.
<body> < p class = “val”> this is an example of class selector < /p >
<o> The class selector can be used in the following two ways,
<li> First example of :before class </li> (a) If a user wants to apply the rule to all these ele-
<li> Second example of :before class </li> ments that have a class attribute with the value “
val “, then the class selector can be specified as
</ol>
follows,
</body>
.val{ }
</html>
(b) If a user wants to select all the <p> elements that
Similarly :after pseudo class can be used as shown above have a class attribute with the value “ val ” then ,
but it adds the content after the element. the class selector can be specified as follows,
p.val{ }
2.2.4 Selectors
4. The ID Selector
Q21. What are selectors? Explain in detail about
It is used for unique style. It is same as the class selector
different types of selectors.
but it uses the id attribute instead of the class attribute.
Answer : Example: <p id = “ val”> Example of ID selector </p>
Selectors The ID selector can be represented by using the pound
A selector provides a way to select the element (s) for ( # ) sign before the value of id attribute instead of using
applying the style rules. The elements can be selected in several a period or full stop as used in class selector.
ways by using the different types of selectors. p # val { }
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 101
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
5. The Child Selector
The child selector is used to apply the style to an element that is the child of some other element. This selector includes
less than symbol known as combinator to separate the direct child element and the parent element.
Example: td > b{ }
In the above example, <b> is the direct child of <td>. Hence, the style rule is applied to all such < b > elements that are
direct children of all the <td> elements.
6. The Descendent Selector
The descendent selector is used to apply the style rule to an element that is a descendent of another element. It may not
be a direct child at any level of nesting. It includes space symbol as the separator.
Example: table b { }
In the above example , the style rule is applied to all these <b> elements that are children of <td> and <th> elements. <b>
element , can never be the direct child of <table> element , but at the level of nesting it is a descendent of <table> ele-
ment i.e., <b> may be direct child of <td> or <th>. It is opposite to the child selector because , it selects all the children
of <table> rather than just selecting the direct children.
7. The General Sibling Selector
The general sibling selector applies the style to an element that is sibling of another.
Example: h1~p{ }
A user can use this selector when both the sibling elements are required to be styled.
8. The Adjacent Sibling Selector
The adjacent sibling selector applies the style to an element that is the next sibling of another.
Example
Suppose a user want to provide a style to the first paragraph after every level of heading , then the adjacent sibling selector
can be used as follows,
h1 + p{ }
Using Child and Adjacent Sibling Selectors
The child and adjacent sibling selectors are used to reduce the number of class attributes in an XHTML document. They
can be used to control the presentation of pages. They make the mark up very clean. They provide a lot of flexibility in styling
the document.
Example
exm.css
body {
color:#000000;
background-color:#ffffff;
font-size:15px;}
p {font-family:arial, verdana, sans-serif;}
div>p {border:1px solid #000000;}
p+p+p {background-color:#d6d6d6;}
<html>
<head>
<link rel= “stylesheet” type= “text/css” href= “exm.css”/>
</head>
<body>
<p>Example to show some adjacent sibling and child selectors</p>
<div>
<p>First paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<p>Fourth Paragraph</p>
<p>Fifth Paragraph</p>
</div>
</body>
</html>

102 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Output

The first rule is applied to control the font of all the paragraph elements. The second rule is applied to provide a solid border
of 1px to all the paragraph elements that are children of <div>. The first paragraph is not the child of < div >. Hence, the
second rule is not applicable to it. The third rule is applied to provide the color to last three paragraphs.
9. The Attribute Selector
Attribute selectors select the elements based on the availability of the value of one or more attributes. Attribute selectors
are supported by Firefox and Opera but they are not supported by IE.
There are totally seven attribute selectors out of which four are provided by CSS2 and 3 are extended by CSS3.
(a) Existence Selector
The existence selector matches the elements that have the specified attribute.
Syntax
element [name of attribute]
(or)
[name of attribute]
Example
p [id] it selects all the paragraph elements <p> in the document that have the attribute ‘ id ’. If there is no element name
in the selector, all of the elements are selected by default.
(b) Equality Selector
The equality selector selects the elements depending on their attribute value.
Syntax
element [name attribute = “ value of attribute”]
(or)
[name of attribute = “ value of attribute”]
Example
p [id = “note”] selects all the <p> elements that have the attribute value “note”.
(c) Space Selector
Space selector selects the elements that have same values.
Syntax
element [name of attribute ~ = “ value”]
(or)
[name of attribute ~ = “value”]
Example
p [class ~ = “one”] selector matches with both of the following,
<p class = “one two”> --- </p>
<p class = “underlined one”> --- </p>
(d) Hyphen Selector
The hyphen selector matches an element with attribute value similar to the specified value or starting with the specified
value followed by “-”. The main purpose of this selector is to match the language sub code.
Syntax
element[attribute name | = “value”]
Example
p [long | = “tel”]
matches with,
<p lang = “tel”> - - </p>
<p lang = “tel’ - ANDHRA”> - - </p>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 103
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
(e) Prefix Selector
The prefix selector matches the elements in which the starting of attribute-value matches with the specified attribute value.
Syntax
element [name of attribute ∧ = “ value of attribute”]
(or)
[name of attribute ∧ = “value of attribute”]
Example
p [id ∧ = “match”] matches
<p id = “matching”> matching -- </p> as well as
<p id = “matchless” > matchless ... </p>
(f) Suffix Selector
The suffix selector matches the elements in which the ending part of attribute-value matches with the specified attribute
value.
Syntax
element [name of attribute $ = “value-of-attribute”]
(or)
[name of attribute $ = “value-of-attribute”]
Example
p [href $ = “.com”] matches
<p href = “http: // www.google.com”> Google </p>
(g) Substring Selector
The substring selector matches the element in which at least one occurrence of the specified attribute value is present.
Syntax
element [attribute-name * = “attribute-value”]
(or)
[attribute-name * = “attribute-value”]
Example
p [id * = “match”] selects all these paragraph elements that have the attribute-value as “match”. The above selector matches
<p id = “Bestmatch Bestmatch > substring </p>.

2.2.5 Lengths
Q22. How lengths can be measured used in CSS?
Answer :
Lengths
In CSS, the lengths can be measured in three ways. They are,
1. Absolute Units
These units are fixed and the different length units in CSS properties are as follows,
(i) pt: It defines the length in points.
(ii) pc: It defines the length in picas.
(iii) in: It defines the length in inches.
(iv) cm: It defines the length in centimeters.
(v) mm: It defines the length in millimeters.
Example
An example to illustrate the absolute units in CSS length properties are as follows,
<html>
<head>
<style>
a {font-size: 4.5pc;}
b {font-size: 25pt;}
c {font-size: 1in;}
d {font-size: 2cm;}
e {font-size: 25mm;}
</style>
</head>
<body>
104 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
<title>Absolute Units</title>
<a>SIA</a><br>
<b>Publishers</b><br>
<c>and</c><br>
<d>Distributors</d><br>
<e>Pvt. Ltd</e>
</body>
</html>
Output

2. Relative Units
The three different types of relative units in CSS properties are as follows,
(i) px: px is known as pixel which is a small part of a digital image. This is used to define the size of the layout.
(ii) em: It is used to define the font-size of the element.
(iii) ex: It is used to define the font-height of the element.
Example
An example to illustrate the Absolute units in CSS Length properties is given below,
<html>
<head>
<style>
a{
font-size: 30px;
}
b{
font-size: 2ex;
}
c{
font-size: 16px;
line-height: 0.5em;
}
</style>
</head>
<body>
<title>Relative Units</title>
<a>SIA Publishers</a>
<b>and</b>
<c>Distributors Pvt Ltd.</c>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 105

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
3. Percentages
This unit is used provide a value in a relation to another value. By using the percentage value, the element occupies the
width of the web browser.
Example
<html>
<head>
<style>
a {font-size: 80%;}
b {font-size: 100%;}
</style>
</head>
<body>
<title>Percentages</title>
<a>SIA Publishers and Distributors </a>
<b>Pvt Ltd.</b>
</body>
</html>
Output

2.2.6 Introducing the Box Model

Q23. Discuss in detail about box model.
Answer :
Box Model
This model helps in defining the layout of a web document. In HTML each element will be in the form of “box”. Wherein
the position of each box (or) element is determined based on the order (flow) of web page. This box can be of two types
(a) Block level box and
(b) Inline box.
(a) Block Level Box
A Block level box allows <div>, paragraph, or heading to utilize the horizontal space available at the begining of the line.
(b) Inline Box
An Inline Box allows <span> or image to utilize the space available before and after the inline element. A box model is
responsible for managing the height and width of elements and also the horizontal and vertical space available beside the elements.
The below figure represents the architecture of the box model.
Margin

Border

Padding

Content

Figure: Diagramatical Representation of the Box Model

106 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
CSS model specifies the process of applying borders. padding, margin across the block level elements. The above area
consists of the following.
(i) Content Area: It is an area which must include the content element like: video player, text, image etc. Dimensions of the
content area are the content width and content height. The size of the content area is determined by evaluating the width,
min width, max width, height, min height, and max height content properties.
(ii) Padding Area: It is an area that is surrounded by padding edge. The dimensions of the padding area are the padding width
and the padding height. The size of the padding area is determined by evaluating the padding-top, padding-right, padding
bottom, padding-left and shorthand padding properties. It inherits the background color designed by content area.
(iii) Border Area: It is an area that includes border edge. The dimensions of the border area are the border width and border
height. The size of the Border area is determined by evaluating the border width and border properties.
(iv) Margin Area: It is the area that adds margin edge. It is an outmost area around the border area. The dimensions of the
margin area are margin width and margin height. The size of the margin area is determined by evaluating the margin top,
margin-right, margin bottom, margin left and shorthand margin properties.
Total width of an element is calculated as:
Element width = width + left padding + right padding + Left border + right border + left margin + right margin.
Total height of an element is calculated as:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.
Example
//CSS3 Box Model
<!DOCTYPE html>
<html lang= “en”>
<head>
<meta charset= “UTF-8”>
<title> box model </title>
<style>
div {
background-color: linen;
width: 250px;
border: 15px solid black;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<h2>Box Model Example</h2>
<div>SIA Publishers and Distributors Private Limited.</div>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 107

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q24. What are the different border properties? 3. The border-width Property
Explain.
This property is used to set the border width.
Answer :
Border Properties Syntax
Border properties will set the borders of the box. The a{
three different border properties are,
border-width: value; }
1. The border-color Property
This property is used to set the color of the border Where, the value may be thin or medium or thick.
surrounding a box. User can specify the width of the top, bottom, left and
Syntax right of a border by using the properties such as border-top-
a {border-color : colorname;} width, border-bottom-width, border-left-width and border-right-
width respectively.
The different colors in CSS are represented either with
color names or hex codes, or RGB values. Some of the colors Expressing Border Properties Using Shorthand
are as shown in the below table,
This property is used to set all the properties of border
Color Hex in a single statement.
RGB value RGB Percentage
Name value
Syntax
RGB
yellow #FFFF00 rgb(100%,100%,0%) a{
(255, 255, 0)
RGB border: 5px, solid, green; }
black #000000 rgb(0%,0%,0%)
(0, 0, 0)
User can specify the color of the top, bottom, left and
RGB right of a border by using border-top, border-bottom, border-left
blue #0000FF rgb(0%,0%,100%)
(0, 0, 255) and border-right properties respectively.
RGB
lime #00FF00 rgb(0%,100%,0%) Example
(0, 255, 0)
User can specify the colors for top, bottom, left and right An example to illustrate all the border properties is as
of a border by using the properties such as border-top-column, follows,
border-bottom-color, border-left-color and border-right-color
<html>
respectively.
2. The border-style Property <head>
This property is used to set the style for border line. <style> (or) <style type = “text/ess”>
Syntax a{
a{
border-style: solid;
border-style: value; }
The different border-style values in CSS are as follows, border-width: thin;
 none: It displays the border with no line. If no value is border-color: red;
specified then the value none is taken by default.
}
 dotted: It displays the border with a dotted line.
 solid: It displays the border with a solid line. b{
 dashed: It displays the border with dashed line. border: 5px solid green;
 hidden: It is similar to the none but not in terms of the }
border-conflict resolution for table elements.
 double: It displays the border with two solid lines. </style>
 groove: It displays the border that it carves into the page. </head>
 ridge: It is completely opposite to the groove value. <body>
 inset: It displays the border that looks like the border is
<title>Border Properties Example</title>
embedded into the page.
 outset: It displays the border that looks like the border <a>SIA Publishers and Distributors pvt Ltd.</a><br>
coming out from the canvas. <br><b>SIA Publishers and Distributors pvt Ltd.</b>
User can specify the style of the top, bottom, left and
right of a border by using border-top-style, border-bottom-style, </body>
border-left-style and border-right-style properties respectively. </html>
108 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Output

Q25. Explain in detail about padding property.

Answer :
Padding
The CSS padding property allows a user to set the spaces between the content and border of an element in HTML docu-
ment. That is CSS property allows user to specify adjust padding for each side using the following properties.
 Padding-top
 padding-bottom
 Padding-left
 Padding-right.
A padding property has following values,
1. Length: It defines padding in terms of pixels and centimeters.
2. %: It defines padding in the form of % of width of containing element.
3. Inherit: It defines padding value by inheriting from the parent element.
Program
<html>
<head>
<title> CSS padding </title>
<style>
p.e {
border:2px;solid: blue;
background-color:pink;
padding-top: 100 px;
padding-right: 50 px;
padding-bottom: 100 px;
padding-left: 75 px;
}
</style>
</head>
<body><h1> Padding property </h1>
<br/>
<P> This paragraph is not specified under CSS padding property </P>
<br/>
<br/>
<P class = “e”> CSS padding property is specified on top, bottom, right and left </P>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 109

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q26. Explain in detail about margin property.
Answer :
Margin
The CSS property allows the user to set the margin size of the HTML page. This property helps in adjusting white space
outside the page border.
A margin can be specified on each side (i.e., top, bottom, right, left) using the following properties.
 Margin-top
 Margin-bottom
 Margin-left
 Margin-right.
A margin has following values.
(a) Auto: If a margin value is set to auto, then the browser automatically sets the margin length in terms of pixels, cm etc.
(b) %: It specifies that the margin should be % of width of containing element.
(c) Inherit: It defines that the value must be derived from its parent element.
Program
<html>
<head>
<style>
P
{
background-color : pink;
}
P.e {
border: 1px;
solid: yellow;
margin-top: 50 px;
margin-bottom: 50 px;
margin-right: 75 px;
margin-left: 80 px;
}
</style>
</head>
<body>
<h1> A paragraph without margin: </h1>
<br/>
<P class = “e”> This paragraph has top, bottom, left and right margin.
</P>
</body>
</html>
Output

110 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Q27. Discuss in detail about the dimensions of a box.
Answer : Model Paper-III, Q10(a)
Dimensions of a Box
Every box has some dimensions. The properties to control the dimensions of a box are as follows,
1. Height and Width Properties
The height and width properties are used to set the height and width of a box. They take the percentage, length or auto
keywords as values.
Program
<html>
<head>
<style>
p.a {
height: 210px;
width: 210px;
border: 1px solid black;
}
p.b {
height: 300px;
width: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<title>The height and width Properties</title>
<p class=“a”>Web design encompasses many different skills and disciplines in the production and maintenance of websites.
The different areas of web design include web graphic design; interface design; authoring, including standardised code
and proprietary software; user experience design and search engine optimization.</p>
<p class=“b”>Web design encompasses many different skills and disciplines in the production and maintenance of websites.
The different areas of web design include web graphic design; interface design; authoring, including standardised code
and proprietary software; user experience design and search engine optimization.</p>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 111

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
2. The line-height Property
This property is used to increase the space between the lines of text in a box. This property takes the length or a percentage
as values.
Program
<html>
<head>
<style>
p{
background-color: lime;
border: 1px solid #000000;
}
p.a {
line-height: normal;
}
p.b {
line-height: 1.5;
}
p.c {
line-height: 80%;
}
p.d {
line-height: 150%;
}
</style>
</head>
<body>
<title>The line-height Property</title>
<h2>line-height: normal (default):</h2>
<p class=“a”>happiness is.... being able to shop in the middle of the night and happiness is.... being able to shop in the
middle of the night and happiness is.... being able to shop in the middle of the night and happiness is.... being able to shop
in the middle of the night</p><br>
<h2>line-height: 1.6 (recommended):</h2>
<p class=“b”>happiness is.... being able to shop in the middle of the night and happiness is.... being able to shop in the
middle of the night and happiness is.... being able to shop in the middle of the night and happiness is.... being able to shop
in the middle of the night</p><br>
<h2>line-height: 60%:</h2>
<p class=“c”>happiness is.... being able to shop in the middle of the night and happiness is.... being able to shop in the
middle of the night and happiness is.... being able to shop in the middle of the night and happiness is.... being able to shop
in the middle of the night</p><br>
<h2>line-height: 200%:</h2>
<p class=“d”>happiness is.... being able to shop in the middle of the night and happiness is.... being able to shop in the
middle of the night and happiness is.... being able to shop in the middle of the night and happiness is.... being able to shop
in the middle of the night</p>
</body>
</html>

112 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Output

3. The max-width and min-width Properties

The max-width and min-width properties are used to set the maximum and minimum width for a box. These properties
take the length and percentages as values. These properties will not accept negative values.
Program
<html>
<head>
<style>
p{
background-color: lime;
border: 1px solid #000000;
}
p.ex1 {
min-width: 100px;
}
p.ex2 {
max-width: 300px;
}
</style>
</head>
<body>
<title>min and max width properties</title>
<h1>The min-width Property</h1>
<p class=“ex1”>Web design encompasses many different skills and disciplines in the production and maintenance of
websites. The different areas of web design include web graphic design; interface design; authoring, including standardised
code and proprietary software; user experience design; and search engine optimization.</p>
<h1>The max-width Property</h1>
<p class=“ex2”>Web design encompasses many different skills and disciplines in the production and maintenance of
websites. The different areas of web design include web graphic design; interface design; authoring, including standardised
code and proprietary software; user experience design; and search engine optimization.</p>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 113
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

4. The min-height and max-height Properties

The min-height and max-height properties are used to set the minimum and maximum height for a box.
Program
<html>
<head>
<style>
p{
background-color: lime;
border: 1px solid #000000;
}
p.ex1 {
min-height: 100px;
}
p.ex2 {
max-height: 200px;
}
</style>
</head>
<body>
<title>min and max height properties</title>
<h1>The min-height Property</h1>
<p class=“ex1”>Web design encompasses many different skills and disciplines in the production and maintenance of
websites. The different areas of web design include web graphic design; interface design; authoring, including standardised
code and proprietary software; user experience design; and search engine optimization.</p>
<h1>The max-height Property</h1>
<p class=“ex2”>Web design encompasses many different skills and disciplines in the production and maintenance of
websites. The different areas of web design include web graphic design; interface design; authoring, including standardised
code and proprietary software; user experience design; and search engine optimization.</p>
</body>
</html>
114 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Output

5. The overflow Property

This property is used when the content in the box exceeds the box dimensions (i.e., when the text overflows from the
box). The different values in overflow property are,
(i) hidden: It hides the overflowing content.
(ii) scroll: It allows the user to see the text by scrolling.
Program
<html>
<head>
<style>
div.a {
background-color: yellow;
width: 200px;
height: 120px;
overflow: scroll;
}
div.b {
background-color: lime;
width: 200px;
height: 120px;
overflow: hidden;
}
</style>
</head>
<body>
<title>The overflow Property</title>
<h2>overflow: scroll;</h2>
<div class=“a”>Web design encompasses many different skills and disciplines in the production and maintenance of
websites. The different areas of web design include web graphic design; interface design; authoring, including standardized
code and proprietary software; user experience design; and search engine optimization.</div>
<h2>overflow: hidden;</h2>
<div class=“b”>Web design encompasses many different skills and disciplines in the production and maintenance of
websites. The different areas of web design include web graphic design; interface design; authoring, including standardized
code and proprietary software; user experience design; and search engine optimization.</div>
</body>
</html>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 115

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

2.3 MORE CASCADING STYLE SHEETS

2.3.1 Links
Q28. Explain how the links can be styled. Give an example.
Answer :
Styling the Links
The links can be styled by using the following pseudo classes presented in the table,

Pseudo-Class Purpose
link Provides the general style to links
active Provides the styles for links that are currently being activated
visited Provides the styles for links that have already been visited
hover Provides the styles when someone is hovering the link
The following are the properties that can be used with these pseudo classes,
 color: provides color to the link
 text-decoration: underlines the link
 background-color: highlights the link when someone hovers the link.
Example
body {background-color: pink ;}
a{
font-family: arial, Times new Roman;
font-size : 15px; font-weight: bold; }
a: link {
color: green;
text-decoration; none; }
a: visited {
color: blue;
text-decoration : none; }
a: active {
color: yellow;
text-decoration: underline; }
a: link: hover {
background-color: silver;
text-decoration: underline; }
116 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Q29. Explain in detail about background properties (c) Left: It specifies that images should be positioned
of CSS3 with an example. at left corner
Answer : Model Paper-I, Q10(b) (d) Right: It specifies that images should be positioned
Background Properties at right corner.
Background properties/module of CSS3 are used to (e) Center: It specifies that images should be specified
in add color, images, attachments etc as background to an both horizontal and vertical position.
element. Besides this, it is also used for positioning the size of (f) Length: It specifies the actual length of the pixels.
the background elements. (g) Percentage: It specifies the percentage of the
In CSS3, the color, images etc are specified in the element size of the given document.
background using Background property. 4. background – Size Property
This property is a shorthand property that is used for This property defines the actual size of background
defining each single background properties. The various image.
background properties are as follows,
Syntax
1. background – color
background – size : length | percentage | auto | cover |
2. background – image contain.
3. background – position In the above syntax,
4. background – size
(a) length: It specifies the width and height of the
5. background – repeat background image.
6. background – attachment (b) percentage: It specifies the width and height of
7. background – clip. the background image as percentage.
Syntax (c) auto: It specifies that the background image should
background:color | image | position | size | repeat | have default width and height values.
attachment | clip (d) cover: It specifies that images must be scaled in
1. background – color Property such a way that the background positioning area
This property defines color ‘of’ background : behind the completely covered to the smallest size.
elements in a document. (e) contain: It specifies that images must be
Syntax completely fixed within the display size.
Selector {background – color : color | transparent;} 5. background – repeat Property
In the above syntax, This property defines the directions in which background
images must be displayed.
(a) color: It defines the color of the background.
Syntax
(b) transparent: It specifies that no color must be
added to background so that it should be transparent. background – repeat : repeat | repeat-x | repeat-y |
no-repeat.
2. background – image Property
In the above Syntax, repeat defines the repetitions of
This property helps in adding multiple images as
background image in horizontal and vertical directions,
background to a text element.
repeat-x defines that images must move horizontally,
Syntax repeat-y defines that images must move vertically and
background – image : Url | none no-repeat defines no repetition of background images.
In the above syntax, 6. background – attachment Property
(a) Url: It defines the exact location of the image. This property is used for scrolling the background image
(b) none: It displays empty background image. or for display them at fixed position on the viewing area of the
3. background – position Property given document.
This property specifies the initial position for background Syntax
image. background – attachment : scroll | fixed | local.
Syntax In the above syntax,
background – position: percentage | length | left | (a) fixed: It specifies that the background image must
center | right. be fixed with respect to the viewport.
In the above syntax, (b) scroll: It defines that, the background images must
(a) Bottom: It specifies that images should be be scrolled within the viewport and translated with
positioned vertically its containing element.
(b) Top: It specifies that images should be positioned (c) local: It defines that, the background images must
horizontally be scrolled with respect to the content elements.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 117
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
7. background – Clip Property
It defines the area of region within which the background image or colon must be extended for an element.
background – Clip : border – box | padding – box | content – box.
In the above syntax,
(a) border – box: It defines that a background color | image can extend its position behind the edge if the is specified
border.
(b) padding – box: It defines that a background can extend its position over inner edge of the given padding border
and does not allow any background below its border.
(c) content – box: It defines that a background can extend its position in content box. It does not allow any background
below the padding area and border.
Example
<html>
<head>
<style>
body {
background-image: url(“download.jpg”);
background-color: lime;
background-position: center;
background-size: auto;
background-repeat: repeat-y;
background-attachment: fixed;
background-clip: padding-box;
}
</style>
</head>
<body>
<h1>The background properties</h1>
<p>Welcome to SIA</p>
</body>
</html>
Output

118 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)

2.3.2 Lists
Q30. What are the different properties associated with lists? Explain them in detail with an example for each.
Answer :
The different types of properties associated with lists are,
1. list-style-type
2. list-style-position
3. list-style-image
4. list-style
5. marker-offset.
1. list-style-type Property
The list-style-type property is used to control the shape or appearance of the bullet point or number (known as marker)
The following are the standard styles for an unordered list,
(a) none : None
(b) disk (default) : A filled-in circle ex : • • •
(c) circle : An empty circle ex :   
(d) square : A filled-in square ex :   
The following are the values that can be used for the ordered lists,
(a) decimal : Number
Example: 1, 2, 3, 4, 5
(b) decimal-leading-zero : ‘0’ before the number
Example: 01, 02, 03, 04, 05
(c) lower-alpha : Lowercase alpha numeric characters
Example: a , b , c , d , e
(d) upper-alpha : Uppercase alpha numeric characters
Example: A , B , C , D , E
(e) lower-roman : Lowercase roman numerals
Example: i, ii, iii, iv, v
(f) upper-roman : Uppercase roman numerals
Example: I , II , III , IV , V
Program
lists styletype.html
<html>
<head>
<style type= “text/css”>
li .a {list-style-type : decimal}
li .b {list-style-type : decimal-leading-zero}
li .c {list-style-type : lower-alpha}
li .d {list-style-type : upper-alpha}
li .e {list-style-type : lower-roman}
li .f {list-style-type : upper-roman}
li.h {list-style-type : none}
li.i {list-style-type : disc}
li.j {list-style-type : circle}
li.k {list-style-type : square}
</style>
</head>
<body>
<h1>styles for ordered lists</h1>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 119

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<ol>
<li class= “a”>ordered list style one</li>
<li class= “b”>ordered list style two</li>
<li class= “c”>ordered list style three</li>
<li class= “d”>ordered list style four</li>
<li class= “e”>ordered list style five</li>
<li class= “f ”>ordered list style six</li>
</ol>
<h1>styles for unordered list<h1>
<ul>
<li class= “h”>unordered list style one</li>
<li class= “i”>unordered list style two</li>
<li class= “j”>unordered list style three</li>
<li class= “k”>unordered list style four</li>
</ul>
</body>
</html>
Output

2. list-style-position property
The list-style property specifies the bullet points that have multiple lines of text by aligning the second line according to
the beginning of the first line or. This property has 2 values, they are,
(a) inside : The second line is aligned underneath the start of the marker
(b) outside : The second line is aligned with the start of the first line
Example
<html>
<head>
<style type= “text/css”>
ul {list-style-position : inside ;}
ol {list-style-position : outside ;}
</style>
</head>
<body>
<ul>
120 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
<li> This bullet point specifies the effect of ‘inside’ value of the list-style-position property..</li>
</ul>
<ol>
<li> This specifies the effect of ‘outside’ value of the list-style-position property..</li>
</ol>
</body>
</html>
Output

3. list-style-image Property
The list-style-image property specifies images as marker instead of a bullet points or numbers. It requires the URL of the
image as its value.
Example
<html>
<head>
<style type= “text/css”>
ul {list-style-image: url(/pix/printer_icon.gif)}
</style>
</head>
<body>
<h4> Remember to print out info on the following : </h4>
<ul class= “outside”>
<li>list-style-type</li>
<li>list-style-position</li>
<li>list-style-image</li>
</ul>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 121

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
4. list-style Property
The list-style property can be used for representing the values of list-style-image , list-style-position and list-style-type
at once.
Example: ol {list-style : outside decimal ;}
Program
(liststyle . html)
<html>
<head>
<style type= “text /css”>
li {list-style : inside decimal ; }
</style>
</head>
<body>
<ol>
<li> this bullet point shows the effect of list-style property that uses ‘outside’ and ‘decimal’ as its values. It can take more
than one value. This bullet point shows the effect of list-style property that uses ‘outside’ and ‘decimal’ as its values. It
can take more than one value. This bullet point shows the effect of list-style property that uses ‘outside’ and ‘decimal’
as its values. It can take more than one value. </li>
</ol>
</body>
</html>
Output

5. marker-offset Property
The marker-offset property is used to specify the number of spaces between the marker and the text. The length is provided
as value for it. It is not supported by IE2 and firefox2.
Example: li {marker-offset-3em ;}

2.3.3 Tables
Q31. What are the specific properties associated with tables? Explain them in detail with an example for
each.
Answer :
The different <table> specific properties are as follows,
1. border-collapse
2. border-spacing
3. caption-side
4. empty-cells
5. table-layout.
122 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
1. border-collapse
The border-collapse property is used for the two purposes,
(a) It allows the border to control the appearance of the adjacent borders. The border is made to collapse with the borders
of its adjacent cells.
(b) It allows the cells border to maintain their own style. The border is separated from the borders of its adjacent cells.
The border-collapse property can take two values they are collapse and separate. The value collapse maintains the first
purpose of the border-collapse property whereas the value ‘separate’ maintains the second purpose of the border-collapse property.
Example
<html>
<head>
<style type= “text/css”>
table.table1 {border-collapse : separate ;}
table.table2 {border-collapse : collapse ;}
td.a {border-style : solid ; border-width : 4px ; border-color : green ; padding : 15px ;}
td. b {border-style-dotted ; border-width : 4px ; border-color : red ; padding : 15px ; )
</style>
</head>
<body>
<h2>separate</h2>
<table class= “table1”>
<tr>
<td class= “a”>cell1</td>
<td class= “b”>cell2</td>
<td class= “a”>cell3</td>
</tr>
<tr>
<td class= “b”>cell4</td>
<td class= “a”>cell5</td>
<td class= “b”>cell6</td>
</tr>
<tr>
<td class= “a”>cell7<td>
<td class= “b”>cell8<td>
<td class= “a”>cell9<td>
</tr>
</table>
<h2>collapse</h2>
<table class= “table2”>
</tr>
<td class= “a”>cell a</td>
<td class= “b”>cell b</td>
<td class= “a”>cell c</td>
</tr>
<tr>
<td class= “b”>cell d</td>
<td class= “a”>cell e</td>
<td class= “b”>cell f</td>
</tr>
<tr>
<td class= “a”>cell g</td>
<td class= “b”>cell h</td>
<td class= “a”>cell i</td>
</tr>
</table>
</body>
</html>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 123

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

2. border-spacing
The border-spacing property is used to specify the distance between any two cells in the table. The value of it can be one
or more units of length. If it accepts one value then it can be applied for both the vertical and horizontal distance. If it accepts
two values, the first value is specified for the horizontal distance and the second value is specified for the vertical distance. It is
not supported by IE7.
Example
<html>
<head>
<style type= “text /css”>
table {width : 350px ; border-collapse : separate ;}
td {font-size : 17px ; text-align : center ; border-width : 4px ; border-color : green ; border-style : solid ; border-spacing
: 3pxpx ; 3px}
</style>
</head>
<body>
<table>
<tr>
<th>Fruits</th>
<th>color</th>
</tr>
<tr>
<td>Apple</td>
<td>green</td>
</tr>
<tr>
<td>Banana</td>
<td>yellow</td>
</tr>
<table>
</body>
</html>
124 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Output

3. caption-side
The caption-side property is used to specify the direction of the caption with respect to the table. The position of the cap-
tion can be specified by using four values they are top, right, bottom, left.
(i) top : The position of the caption will be at the top of the table.
(ii) right : The position of the caption will be at the right of the table.
(iii) bottom : The position of the caption will be at the bottom of the table.
(iv) left : The position of the caption will be at the left of the table.
Example
<html>
<head>
<style type= “text /css”>
caption {caption-side : top ; font-size : 20px ;}
table {border-style : solid ;}
th, td {font-size : 20px ; text-align : center ;}
table {width : 350px}
</style>
</head>
<body>
<table>
<caption>vegetable colours</caption>
<tr>
<th>vegetable</th>
<th>color</th>
</tr>
<tr>
<td>carrot</td>
<td>orange</td>
</tr>
<tr>
<td>tomato</td>
<td>red</td>
</tr>
<tr>
<td>beans</td>
<td>green</td>
</tr>
</table>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 125

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
4. empty-cells
The empty-cell property is used to determine the border of an empty cell. If the empty-cell property has the value ‘show’
the border of an empty cell gets displayed. If it has value ‘hide’, the border of the empty cell cannot be displayed and if it has
the value “inherit” (in case of nested tables) the empty cells border inherits the properties of its parent table.
Example
<html>
<head>
<style type= “text /css”>
table {width : 350px ; border-spacing : 3px ; border-collapse : separate ;
empty-cells : hide ; padding : 25px ;}
td , th {font-size : 20px ; border-style : solid ;}
</style>
</head>
<body>
<table border>
<tr>
<th>vegetable</th>
<th>color</th>
</tr>
<tr>
<td></td>
<td>orange</td>
</tr>
<tr>
<td>tomato</td>
<td>red</td>
</tr>
<tr>
<td>beans</td>
<td></td>
</tr>
</table>
</body>
</html>
Output

5. table-layout
The table-layout property allows the user to specify the table layout. It can take three values, namely fixed, auto and
inherit. This property can only be used when the table is too large and requires long time to load.
(a) fixed
The value ‘fixed’ allows the browser to calculate the layout of the table by considering the fixed width specified for a cell
in the column and by calculating the width of other cells in that column.
(b) auto
The value ‘auto’ allows the browser to calculate the layout of the table by considering each cell and calculating the size
based on the settings for all cells. This value is used when the exact size of each column is not known.
(c) inherit
The value ‘inherit’ allows the browser to inherit the properties for a table from its parent table. It is used in case of nested
tables.
126 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Example
<html>
<head>
<style>
table {
border-collapse: collapse;
border:1px solid black;
}
th,td {
border: 1px solid black;
}
table.one {
table-layout: auto;
width: 180px;
}
table.two {
table-layout: fixed;
width: 180px;
}
</style>
</head>
<body>
<title>The table-layout property</title>
<h2>table-layout:auto Property</h2>
<table class=“one”>
<tr>
<th>Name</th>
<th>Date of joining</th>
<th>Salary</th>
</tr>
<tr>
<td>Nikhil</td>
<td>12-06-2017</td>
<td>15000</td>
</tr>
<tr>
<td>Vara</td>
<td>22-01-2013</td>
<td>25000</td>
</tr>
<tr>
<td>Veera</td>
<td>31-10-2018</td>
<td>10000</td>
</tr>
</table>
<h2>table-layout:fixed Property</h2>
<table class=“two”>
<tr>
<th>Name</th>
<th>Date of Joining</th>
<th>Salary</th>
</tr>
<tr>
<td>Nikhil</td>
<td>12-06-2017</td>
<td>15000</td>
</tr>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 127
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<tr>
<td>Vara</td>
<td>22-01-2013</td>
<td>25000</td>
</tr>
<tr>
<td>Veera</td>
<td>31-10-2018</td>
<td>10000</td>
</tr>
</table>
</body>
</html>
Output

2.3.4 Outlines
Q32. What are the different outline properties in CSS? Give an example.
Answer :
Outline Properties
The outline properties are used to highlight certain parts of the page without affecting the page content. The different
outline- properties in CSS are as follows,
1. The outline-width property
2. The outline-style property
3. The outline-color property
4. The outline property
1. The outline-width Property
This property is used to set the width of the outline that is to be added to the box.
Example
a{outline-width: thick;}
2. The outline-style Property
This property is used to set the style of the outline that is to be added to the box. Dashed, dotted, solid are the different
styles of the outline.
Example
a {outline-style: solid;}
(or)
a {outline-style: dashed;}
(or)
a {outline-style: dotted;}
128 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
3. The outline-color Property
This property is used to set the color of the outline that is to be added to the box. It accepts the color value either by color
name, or RGB value, or hex color value.
Example
a { outline-color: blue; }
(or)
a { outline-color: #0000FF ; }
(or)
a { outline-color: rgb(0,0,255); }
4. The outline Property
This property is used to set the three properties at a time to the outline.
Example
a {outline: 5px dotted pink; }
A simple html program with all the outline properties is as follows,
outline-properties.html
<html>
<head>
<style>
p.a
{
border: 1px solid black;
outline-width: thick;
outline-style: solid;
outline-color: blue;
}
</style>
</head>
<body>
<title>Outline-Properties</title>
<p class=“a”>A solid outline in Blue color</p>
</body>
</html>
Output

2.3.5 The :focus and :activate Pseudo Classes

Q33. Discuss in brief about the :focus and :activate pseudo classes.
Answer :
The :focus Pseudo Class
The :focus pseudo class is used to add additional rules to the element that is focused.
Example
<html>
<head>
<style>
input:focus {
background-color: yellow;
}
</style>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 129
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
</head>
<body>
<title>Focus Example</title>
<p>Enter the Login credentials :</p>
<form>
User name: <input type= “text” name= “User name”><br>
Password : <input type= “text” name= “password”><br>
<button type= “submit” form= “name form” value= “Login”>Login</button>
</form>
</body>
</html>
Output

The :activate Pseudo Class

The :activate pseudo class is used to style a active link that is selected.
Example
active-Example.html
<html>
<head>
<style>
a:active {
background-color: blue;
}
</style>
</head>
<body>
<title>The: active Pseudo-class Example</title>
<a href= “http://www.siapublishers.com”>Sia publishers</a><br>
<a href= “https://siagroup.hrstoppro.com”>HRStop</a>
<p><b>*</b> The :active selector styles the active link.</p>
</body>
</html>
Output

2.3.6 Generated Content

Q34. Discuss in detail about content property in generated content.
Answer :
The Content Property
This property is used to specify the type of content that is to be added to the document. The various values that add different
type of content to the document are as follows,
130 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
 A string: It is used to add a plain text consists alpha-numeric characters and it doesn’t include quotes.
 A Counter: It is used to add a counter for numbering page elements.
 A URL: It is used to specify the URL of an image, text file or HTML file to be added to the document.
 attr(x): The value of the x element will be contained in this element.
 open-quote: It is used to add the suitable opening quote mark.
 close-quote: It is used to add the suitable closing quote mark.
 no-open-quote: This value doesn’t use any opening quote marks.
 no-close-quote: This value doesn’t use any closing quote marks.
Counters
Generally, <ol> element is used to create a number list. But, here the counter() function is used to create number list
automatically by using a counter. When the browser comes across a new element then it automatically increments the number.
This is mainly used when the user need to number the sections without formatting them as list.
Example
ex1.css
body {counter-reset: type; counter-reset: section; }
h1:before {content: “Type” counter(type) “:”; }
h1 {counter-increment: type; counter-reset: section;}
h2:before { content: counter(type) “.” counter(section) “ ”; }
h2 {counter-increment: section; }
counters.html
<html>
<head>
<title>CSS Counters</title>
<link rel= “stylesheet” type= “text/css” href= “ex1.css” />
</head>
<body>
<h1> Indoor Games</h1>
<h2>Table Tennis</h2>
<h2>Badminton</h2>
<h2>Carroms</h2>
<h1> Outdoor Games </h1>
<h2>Cricket</h2>
<h2>Football</h2>
<h2>Hockey</h2>
<h2>Rugby</h2>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 131

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Quotation Marks
open-quote and close-quote are the two values used in content property to specify the quote marks at the required position.
Example
ex2.css
body {
color:#000000;
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-size:12px;}
blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}
quotes.html
<html>
<head>
<title>Generated Quotes</title>
<link rel= “stylesheet” type= “text/css” href= “ex2.css” />
</head>
<body>
<h1>Quotes</h1>
<blockquote>Strive for progress not perfection</blockquote>
<blockquote>It always seems impossible until it was done</blockquote>
<blockquote>Don’t let what you cannot do.. interfere with what you can do </blockquote>
</body>
</html>
Output

2.3.7 Miscellaneous Properties

Q35. What are the different miscellaneous properties?
Answer :
The different miscellaneous properties in CSS are as follows,
1. The cursor property
2. The display property
3. The visibility property.
1. The cursor Property
This property is used to display the type of mouse pointer to be displayed when a user points over the element.
The various types of cursor types and their possible values are as follows,
(a) auto: This is the default value of the cursor. By default, browser sets its value.
Code
div
{
cursor: auto;
}

132 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
(b) crosshair: This indicates a crosshair or a plus (i) url: This indicates source of a cursor image file.
symbol. Code
Code div
div {
{ cursor: url;
cursor: crosshair; }
} 2. The display Property
(c) default: This indicates a normal arrow symbol. This property is used to specify the display behavior
Code (i.e., block, inline, none) of an element.
div Syntax
{ class {
cursor: default; display: block;
} }
(d) pointer: This indicates a pointing hand. (or)
Code class {
div display: inline;
{ }
cursor: pointer; (or)
} class {
(e) move: This indicates a grasping hand using which display: none;
user can move in a direction. }
Code 3. The visibility Property
div This property is used to specify whether the element must
{ be visible or invisible on the webpage. The different values of
cursor: move; this property are as follows,
} (a) visible: It makes the box and the elements visible to the
user.
(f) text: This indicates a text which can be selected
by a user. (b) hidden: It makes the box and the elements invisible to
the user.
Code
Example
div
<html>
{
<head>
cursor: text;
<style>
}
p.one {
(g) wait: This indicates that the specific program is
busy. visibility: visible;
Code }
div p.two {
{ visibility: hidden;
cursor: wait; }
} </style>
(h) help: This indicates a question mark that is asking </head>
for help. <body>
Code <title>visibility Property Example</title>
div <p class=“one”>It is visible to the user</p>
{ <p class=“two”>It is invisible to the user</p>
cursor: help; </body>
} </html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 133
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

2.3.8 Additional Rules

Q36. Explain the various additional rules in CSS.
Answer :
Additional Rules
The additional rules in CSS are,
1. The @import rule
2. The !important rule
3. The @charset rule.
1. The @import Rule
This rule is used to import a style sheet into the current style sheet. This can be written in two ways,
@import “x.css”
(or)
@import url(“x.css”);
Example
@import “x.css”
p{
background-color: #00FF00;
font-family: times, verdana, Helvetica, sans-serif;}
h1{ font-size: 30pt; }
The above example, imports the x.css style sheet and executes.
2. The !important Rule
This rule is used to specify particular style sheet from multiple style sheets.
Example
<style>
p{
color: green !important;
}
p{
color: yellow;
}
</style>
The above example provides the green color to the element because it is assigned with !important rule.
3. The @charset Rule
This property is used to indicate the character encoding that to be used in the style sheet. The @charset rule should be
mentioned at the top of the style sheets without spaces.
Example
@charset “iso-8859-1”

2.3.9 Positioning and Layout with CSS

Q37. What are the different positioning schemes in CSS?
Answer :
There are three different positioning schemes in CSS. They are,
1. Normal positioning
2. Float positioning
3. Absolute positioning.
134 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
1. Normal Positioning
In CSS normal position is known as the default position. In this, the flow of block-level elements will be from top to
bottom and the flow of inline elements will be from left to right.
Position Property
This property is used to set the position of the box. It takes different values and they are as follows,
(a) static: It is by default value just like the normal flow.
(b) relative: It sets the position of the element offset from the default position.
(c) absolute: It sets the position of the box using x and y coordinates from the top-left corner of the element.
(d) fixed: It sets the position of the box from top-left corner of the window and it cannot be changed further.
Example
ex7.css
body {
color:#000000;
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-size:12px;}
p{
border-style:solid;
border-color:#000000;
border-width:2px;
padding:5px;
width:200px;
background-color:#FFFFFF;}
Normal-flow.html
<html>
<head>
<title>Normal Flow</title>
<link rel=“stylesheet” type= “text/css” href= “ex7.css” />
</head>
<body>
<p>Paragraph <b>1</b>. The content that will be at the top of the page.</p>
<p>Paragraph <b>2</b>. The content that will be at the middle of the page.</p>
<p>Paragraph <b>3</b>. The content that will be at the bottom of the page.</p>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 135

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
2. Float Positioning
Float positioning is used to move block-level elements to the normal flow.
Example
ex.css
body {
color:#000000;
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-size:12px;}
p{
border-style:solid;
border-color:#000000;
border-width:2px;
padding:5px;
width:200px;
background-color:#FFFFFF;
}
p.two {
position:relative;
left:40px;
top: -40px;
}
relative-positioning.html
<html>
<head>
<title>Relative Positioning</title>
<link rel= “stylesheet” type= “text/css” href= “ex.css” />
</head>
<body>
<p>Here is paragraph <b>one</b>. This will be at the top of the page.</p>
<p class= “two”>Here is paragraph <b>two</b>. This will be in the middle of the page.</p>
<p>Here is paragraph <b>three</b>. This will be at the bottom of the page.</p></body>
</html>
Output

3. Absolute Positioning
Absolute positioning scheme is used to fix the position of an element. To do this, set the position property of the element
to absolute.
Example
ex9.css
body {
color:#000000;
background-color:#ffffff;
136 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
font-family:arial, verdana, sans-serif;
font-size:12px;}
div.page {
position:absolute;
left:50px;
top: 100px;
padding:20px;
border-style:solid; border-width:2px; border-color:#000000;}
absolute-positioning.html
<html>
<head>
<title>Absolute Positioning</title>
<link rel= “stylesheet” type= “text/css” href= “ex9.css” />
</head>
<body>
<div class= “page”><p>Here is paragraph <b>1</b>. This will be at the top of the page.</p>
<p class= “two”>Here is paragraph <b>2</b>. This will be in the middle of the page.</p>
<p>Here is paragraph <b>3</b>. This will be at the bottom of the page.</p>
</div>
</body>
</html>
Output

2.4 PAGE LAYOUT

2.4.1 Understanding the Site’s Audience

Q38. Write about web designing principles.
Answer :
Web Designing Principles
1. Understanding the Site Aims
The site aims and ensures whether user has defined the object for the site clearly. A site may have several purposes, by
asking some questions such as product or service that the user is dealing with, what is special about it etc., will clarify us what
user is trying to achieve.
A site might be designed to push a product or service or to teach new skills to create a community etc. Each of these have
their own set of questions, but it is important to know what the site is trying to achieve and what is required to meet those goals.
2. Whom You Expect to Visit Our Site
While creating a web site, every the page is created for the target audience also other than clients. So, through the design
process, it might be choosing the position of elements or adding a feature a technology etc., user should keep in mind what the
target audience want. And it is important to understand the target audience first.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 137
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
It is important for a site related to company to provide Home
information that a customer needs and is interested in and not
the information for investors or any other. So, we need to be College Department
clear with the answers for the questions such as who will be
visiting our site and what for, what might be their underlying
motivation etc. Computer Electronics

3. Defining Our Sites Content

IT CSE ECE EEE EIE
After knowing the goals of our site, the aimed visitors Figure: Site Map
and how often the contents is to be changed. The programmer
Once you have drawn the site map, you will know about
need to decide the actual content of the site. The content should
the number of pages on your site, the information to be displayed
be what the visitors expect from our site, not just what we want
on each page and the links to be appeared on each page. Finally,
them to see. It should include a detailed description about the you need to observe that, does your site contain all the informa-
product and services, time taken to complete a service and who tion for which you expect the users to visit your site and how the
will perform it etc. user’s should navigate through the site for the information they
required.
User need to observe other sites which address the
similar topic and look what they do and don’t do, so that user 6. Identification of Key Elements for Each Page
can present in different way and stand better. We should add all The last step that has to be performed before starting
the important things from our logo and branding to copyright to design a page is to identify what are the key elements that
notice, privacy policy etc. should appear on each page. The elements such as branding or
logos, primary navigation, category navigation, heading, main
4. Grouping and Categorization content, search box and space for self promotions advertising
other companies, products or services will be included in these
All the ideas covered by user now be grouped together. If
elements.
the site is about advertising several products and services then.
They all can be grouped and placed together and can even be These elements will be reflecting the aim of the size.
divided into subgroups. The information about the company, A site must be less cluttered for it to be easily navigation. For
this, everything should not be included in each page we need
its history etc., can be placed in about us section. In this way
to have good design and simple navigation and avoid putting
all the related information can be grouped and categorized.
everything on each page for the users to find what they want
On the whole there should not be more than six or seven on the page easily.
sections and these form primary or global navigation items of
2.4.2 Page Size
our site. There might be subsection with several pages of their
own and more than seven subsections in each category. These Q39. How the size of the page can be decided before
form secondary or category navigation. designing?

These categories and subcategories are like table of con- Answer :

tents and form the basis of navigation of our site. These should Before designing the pages, the designer need to under-
take part in main menu. The customers should be able to easily stand what all is needed to be done to design a site and what
navigate and understand our products services or subject. information should be contained on each page. The first step
of it would be to decide the size of the page to be used for the
5. Creating a Site Map site. After deciding the page size, the page may not look alike
on all the computers because different visitors will have differ-
Once you have got idea about which sections and pages
ent size monitors with different resolutions. So, while deciding
are needed to add to your site, then you can start up drawing a
the page size the designer need to consider the aspects such as
site map as you imagined. It should be like a family tree or folder different size monitors with different resolutions and people
in windows explorer. If at all the categories have subcategories may also prefer to browse the small screen which shows even
or more than one page, they should be shown as the subcat- toolbars and other applications as a part of it.
egories or sub pages of the first page. The site should start-up
While designing and building our site, the designer need
with the home page with all the required main categories at
to use sensible dimensions for a page otherwise he would end
the top of the page. Example if ‘department’ is one of the main
up with rebuilding the whole site once again when the page
category then, each of the department in this category will be does not fit on all monitor screen’s. The pixels that make up a
the subsections and each of them can be displayed in separate picture are the subject matter of screen resolution. For example,
pages. These subsections can also have subsections in addition if a screen has 1280 × 1024 resolution, it means that the screen
such as, is 1280 pixels width and 1024 pixels height.
138 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
The below table shows the percentage of visitors www.xyz.com who have different screen resolutions.
Resolution Jan.-2008 Jan.-2007 Jan.-2006 Jan.-2005 Jan.-2004
640 × 480 0% 0% 0% 0% 1%
800 × 600 8% 13% 21% 28% 37%
1024 × 768 48% 53% 58% 54% 49%
1152 × 864 3% 3% 3% 3% 3%
1280 × 1024 28% 22% 12% 10% 6%
Table: Statistics of Screen Resolution
In the above table, one can observe that, in Jan 2008, 8% of users had 800 × 600 resolution and almost 90% of users had
1024×768 or higher resolution. So, designer need to decide the width of the page by considering all the users with all the screen
resolutions. The design should be usable on 21-inch monitor at 1280 × 1024 resolution as well as on 15-inch monitor at 800
× 600 resolution. The designer should consider different toolbars which appear in the window because most of the users will
be having menu or toolbars as a part of their windows horizontally. Users must not scroll horizontally rather they should scroll
vertically. And all the main parts of the page should appear within top 500 pixels of page so that the user can easily understand
what is the page about without scrolling.
Deciding the Width of a Page
Generally, the designer does not want the page to be scrolled horizontally that is from left to right to view the content.
Therefore, set the width of a page to 1024 pixels that fits to the screen. The designer should consider different toolbars which
appear in a window because most of the users will be having menu or toolbars as a part of their windows horizontally. Therefore,
the width of a page for the information will be between 960 to 980 pixels.
Deciding the Height of a Page
The designers expect that the user should scroll vertically rather than to scroll horizontally to view the information that
they required. Note that, after loading a page the user should know about the type of information to be displayed in a page with-
out scrolling down. The designer should consider different toolbars that appear in a window because most of the users will have
menu or a taskbar. Therefore, on an average the height of a page for content will be in between 570-600 pixels.
Q40. Explain fixed-width design.
Answer :
The web pages whose dimensions such as pixels, ems and centimeters are fixed to some value are called fixed-width
design . The designers have the complete control on the appearance of page because they are one who decide and know the size
of the page. They cannot be stretched or shrinked or resized by the users. The proportions of the page remain same but the design
may appear in different size on different resolution.
When the width of the page is fixed it remains same, how much ever large the user’s browser window might be. If the
user’s window is smaller than the layout, then horizontal scroll bars appear on the screen and if the user’s window is larger than
our layout then there will be gaps at left and right sides of the page. The below figure shows a fixed width layout.

Figure: Fixed-width Layout

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 139
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
The html code for the above web page will be,
<body>
<div id = “fixed-width layout”>
<!--content of the page -->
</div>
</body>
Here, the <div> element hold the page by carrying the id attribute whose value will be the page. The CSS for the above
page is as follows,
div#page
{
width : 800px;
margin-left : auto;
margin-right : auto;
background-color : red;
border : 1px solid #666666;
padding : 20px;
font-size : 12px;
text-align : left;
}
The width attribute in the above example is most often assigned the value in pixels. Here, it is assigned 800 pixels to
make the page 800 pixels wide no matter the browser may be more or less than 800 pixels. The margin-left and margin-right are
assigned the values auto which indicate the page is centered in the browser. When dimensions of the page is fixed to between 700
and 1000 pixels then the page can be used only on desktop computers or on laptop. The users with small-screen devices such as
PDAs or mobile phones or set-top boxes cannot access because their resolutions are less than the computer screens.
Q41. Explain liquid design.
Answer :
The web page whose dimensions are not fixed is called liquid design. These pages are stretchable and skewable upto the
browser window. If browser size is increased the page size also increases and if the browser size is decreased the page size also
decreases with it. The below figure shows the liquid design,

Figure: Liquid Design

140 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
The html code for the above web page would be like this,
<body>
<div id = “liquid design”>
<!-- content of the page -->
</div>
</body>
The CSS for the above page would be,
div. page
{
width : 95%
background-color : red;
border : 1px solid #222222;
padding : 20px;
font-size : 10px;
}
Here, the width property is set to value 95%, that means the page occupies up to 95% of the window leaving the gap of
5% of the window around it. The page size increases and decreases along with the window size retaining the border around it.
Q42. Differentiate between fixed-width design and liquid design.
Answer :

Fixed-width Design Liquid Design

1. The design of webpage whose dimensions are fixed 1. The design of webpage whose dimensions are not fixed
is known as fixed-width design. is known as liquid design.
2. In this, the designers can control over the view of a 2. In this, the designers cannot control over the view of a
page. page.
3. It can not be stretched or shrinked or resized by the 3. It can be stretched and skewed to the browser window.
user.
4. The size of the page remains same even if the win- 4. The size of page varies with the change in browser’s
dow size has changed. window size.
5. It is used in the sites that consists of more text. 5. It is used in sites that features many lists and online tools
or applications.
6. Example 6. Example
http://new.bbc.co.uk www.maps.google.com
www.amazon.com

Q43. Give the advantages and disadvantages of fixed width design and liquid design.
Answer :
Advantages of Fixed-width Design
1. The line length of the text can be controlled without bothering about the size of user’s window.
2. The page size remains the same.
3. The designer has full control on the position and appearance of items on the page.
4. The width and position of elements can be controlled exactly by pixel values.
Disadvantages of Fixed-width Design
1. The text may not fit in the space allotted to it, if its size is set to large.
2. The web page might look smaller if browsed at higher resolution than it is designed for and page elements will not be
clear enough to read.
3. Page must be in the middle of the window leaving gaps around it sometimes.
4. The container elements which are used to control the page layout might remain at the end of the code. By this the page
becomes cluttered and can easily break.
5. This design is applicable only on the devices whose size and screen resolution is same as for desktop computers.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 141
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Advantages of Liquid Design
1. The page expands and fills the browser window without leaving any gaps around it.
2. The users are allowed to set font size lager than intended because page layout is stretchable.
3. The page can even fit in a small size window, there is no need for scrolling it.
Disadvantages of Liquid Design
1. The width of the sections of the page need to be controlled, otherwise the design looks different or might display gaps
around elements or elements may squash together.
2. If the window is very wide, then the lines of text become long making it hard to read. And if the window is too narrow,
then each line might have a word or two.

2.4.3 Designing Pages

Q44. Discuss in brief about the composition and grids.
Answer : Model Paper-II, Q10(b)
Composition and Grids
Composition in a visual art will organize the visual elements. A grid is used to arrange or organize these visual elements
on a web page to be displayed. The famous UK news paper website is as shown in below figure,

The following figure with the set of super imposed lines indicates how the site is designed using the grid system.

142 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Since the main objective is to create a good design, there exists a link between mathematics and art for many centuries.
For instance, many artists make use of Golden Ratio because of renaissance. The concept of golden ratio was studied by many
mathematicians (Euclid and Pythagoras) because of its pleasing nature and architecture. The approximate value of golden ratio
is 1.618 that states a+b is to a as a is to b. The designers creates some complex grids based upon the golden ratio (i.e., as shown
in the below figure).

Drawing a grid on the basis of golden ratio becomes complicated. Therefore, use some other alternative method such as
rule of thirds to draw grids i.e., divide the page into 3*3 equal parts and figure out the intersecting points. Suppose the width of a
web page is 960 pixels then it is divided into three columns each of 320 pixels. And also vertical lines should be drawn for each
320 pixels width. This will create grid boxes which will be further divided into thirds.

There should be some space between the columns in order to avoid the jumping of text or image from one column to
another column. The space is called as “Gutter”.
Consider a page of width 960 pixels. Make the page as a 12 column grid which is as shown in the below figure,

In the above figure, each column is of width 80 pixels and every column is separated by 20 pixels.
A grid is used to create two columns of equal size in layout or single column layout that is as shown in the below figure,

Designers might even make use of same units of measurement for vertical spaces to produce vertical lines. But this is not
possible, so vertical measurements are used to divide by the width of single column. A 12 column grid in the form of vertical
lines set with same distance is shown as follows,
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 143
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

Q45. Explain the process of sketching the placement of elements.

Answer :
The designer must decide where the elements must be placed on page after knowing the number of pages, the pages to be
linked, main elements of the page and type of layout to be used. This should be done before building the page. Leaving all other
things such as colors, fonts, images or other design issues, designer need to sketch out where the elements should be placed and
how much space they occupy.
Rather than focusing on visual presentation it is required to focus on whether every element needed by the user and the
data with which the user can interact is included in the page. This process is called wireframing. The below figure shows the
example of wireframe for a website.

Links to
other
pages of
the site

Product A and
description price

Product B and
description price

Picture of Product A Product B

upcoming products picture picture

Figure

144 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
After creating a wireframe model, designer need to Common Page Elements
check whether the end users are easily able to find for what they There should be some degree of consistency maintained
visited the site. With this he/she get to know where the links across all pages of a site. This helps the users to identify the site
navigate from the site and get a good idea of functionality of from its look. So, elements which appear on every page starting
the model. This is important to know because the users when from branding and primary navigation need to be checked. If
visit the designed site prototype will focus on visual elements these are placed in the same place on every page, the users can
rather than on the proposed function. Thus, designer can ensure learn how to use the site more quickly and easily.
that the user or client is focusing on structure and function of the
If at all our site dedicates a page to each product or ser-
content rather than on its appearance by using skeletal model.
vice that we offer, or article or story then each of them should
At this stage designer need to decide which elements will follow the consistent design. Their heading, logo, description,
go on the top of the page. The mostly used functions should take header, footer and primary navigation should be placed in the
higher priority as per the general rule. So, while designing the same place across all the pages.
site designer need to think from visitors point of view to make
Q47. Which of the page elements are grouped together?
the site successful.
Answer :
Visitors mostly scan the pages to know whether they are A web page contains several related elements. All the
useful to them or not. So, designer need to provide the elements related elements are grouped together. Example, elements of
to focus on by making the heading and subheading clear and a login form or details of a product are grouped together. The
concise. The items given below should be visible to users as below methods help to group the elements and make them clear
soon as the page loads. that which elements are related to each other.
 Branding 1. Location
 Global and subsection navigations Similar element must be placed in same location or
nearer to each other.
 Heading of the page 2. Color
 Enough description about the page The foreground and background color of the related
elements can be selected as same so that they can be
 Promotions or advertising and
identified easily.
 Option to search. 3. Styles
The items given below need not be visible when the The interrelated items can be applied with same styles.
page loads, Such as using similar buttons for navigation items.
4. Borders and Padding
 Details about the remaining page
The groups can be separated by creating a gap between
 Advertising them to identify the groups of related elements easily.
 Unwanted links to related information or other 5. Headings
sites By using headings, the user can understand the type of
content available under it.
 Footer navigation such as copy right, terms and
condition, privacy policies etc. Q48. Briefly explain how a home page must be designed.
Q46. What are the default and common page ele- Answer :
ments used in designing? While designing a site, the front page should be in such
as that it impresses because it is the page displayed on the first
Answer : visit of site. The main purpose of the site should be shown in
Default Page Elements the front page itself such as by using a one-sentence tagline or
a logo.
While designing a website or page for companies,
remember that easily identifiable style will make the brand All the tasks for which that user’s will most likely visit
stronger. So, by using default page elements such as logo and the site need to be emphasized. And also the information for
colors in the site designing, the users can easily identify brand which the users visit the site should be made possible to find
of the site. The designer should ask the company for the digital as soon as possible. The links names, images and headings
copy of the logo instead of scanning it from brochures. The should begin with important keywords so that they make the
electronic versions of the ad’s or leaflets can also be used. The user understand their purpose and what are they about.
color scheme of the site can feature the company colors. To For example, a website of a company should cover the
make the site look professional some of the materials such as details of its product and about company’s marketing depart-
photographs products or work done for any of the customers ment. If the users doesn’t find the information they need then
along with any text can also be used if the company is able to the site will not have expected level of visitors to their site. Not
provide. only this, the site must also address the needs of the visitors.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 145
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q49. How a content page should display its content? Q51. What are the different tactics used to make the
site easier to scan?
Answer :
Answer :
Most of the sites such as news sites and e-commerce
sites use the content pages for displaying their articles, product The different tactics used to make the site easier to scan
details etc. A content page should display its content in an easily are as follows,
understandable way for the users. The information should be
1. Use Subheadings
placed or displayed in the content pages in the following ways.
In some cases, it is difficult for the user to scan the
 The information provided must be consistent for each
lengthy text. So, divided the text into descriptive sub-
item when there are several products or services.
headings. Note that, while splitting the text the meaning
 Equivalent information of the similar products should should not be broken.
be placed in all the pages. For this it is enough to design
2. Text should be Concise in Some Specific Headings
only one article page or product page and other pages
will follow that template. Provide the heading in such a way that user should
understand the text provided by it.
 When lot of information is available to be displayed
in the same page, then present it in a clean manner so 3. Use Bold and Other Styles
that users to focus on the content. It would be better to
Highlight the important keywords so that it is helpful
maintain gaps between different elements, make the
for the users. This avoid users from searching for the key
text to be split into appropriate subheadings and short
terms, using which they can decide whether the page is
paragraphs because wide lines of text are difficult to be
useful to them or not.
read.
4. Stimulate Users with Visuals
 Images that are used should be relevant for the product,
service or topic in the question. It would be better if Provide the visuals such as images or videos to provide
they are placed at left or right side of the page with text better understanding of the concept.
around them. There should be enough space between
different images and text around them. 5. Make Links Descriptive

 The page need to be action oriented if they are display- Provide the description for the text links then only user
ing product information and also allow the customer to will get to know what will be the content when the link
locate or select the item, to find required information is opened.
about a product and also buy lit. 2.4.4 Coding Your Design
 Content pages should avoid using unrelated text and
Q52. What are the different properties that are used
images which make users distracted from knowing the
to position the items on the page. Discuss in
actual purpose of the page.
detail about IE Box Model Bug.
Q50. What influence does images have on design?
Answer :
Answer :
Properties that used for Position the Items on the Page
The images that are incorporated in sites have a strong
The different properties that are used to position the
influence on the visitors. Use of good images, logos and graph-
items on the page are as follows,
ics in the sites attract most of the visitors towards it. If the front
page has a poor photo then the users does to visit that site how 1. The XHTML <div> Property
much ever good the content might be.
It is used to group the items of the XHTML pages to
The photographs that are shot especially for that com- chunks or blocks.
pany which represent the product or company or life-style of
2. The CSS margin Property
company are featured in the site mostly. The quality of the
images depend upon the budget for the site. If clients already It is used to separate the blocks.
have the photos then they are used or else if the hired clients
budget is large then photographers are being hired in order to 3. The CSS width Property
take appropriate shots. Most of the multinational companies It is used to set the width of the box.
and popular brands are hiring photographers to take impressive
photos and their sites contain impressive graphics. 4. The CSS float Property

There are number of stock photo sites from which the It is used to align the <div> elements to the left or right
appropriate images can be obtained but they need to be paid. of the page.

146 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
The IE Box Model Bug <title>Background grid</title>
The programmer must use DOCTYPE in the XHTML <link rel= “stylesheet” type= “text/css” href= “s6.css” />
pages to represent them correctly in internet explorer. If the </head>
DOCTYPE is not declared then the internet explorer will ap- <body>
ply the different versions of the box model to the remaining
browsers. With this the pages will look bigger in IE than in <div id= “frame”>
other browsers, this is shown in below figure, <div id= “page”>
<h1>Testing the background grid</h1>
<p>Web design encompasses many different skills
and disciplines in the production and maintenance of
websites. The different areas of web design include web
graphic design; interface design; authoring, including
standardised code and proprietary software; user ex-
perience design; and search engine optimization. Web
design encompasses many different skills and disciplines
in the production and maintenance of websites. The dif-
ferent areas of web design include web graphic design;
interface design; authoring, including standardised code
and proprietary software; user experience design; and
search engine optimization.</p>
<p>Web design encompasses many different skills and
disciplines in the production and maintenance of web-
sites. The different areas of web design include web
graphic design; interface design; authoring, including
standardised code and proprietary software; user ex-
The following are the two different declarations that perience design; and search engine optimization. Web
make the IE version 6 and later versions to render the page design encompasses many different skills and disciplines
correctly. in the production and maintenance of websites. The dif-
 Transactional XHTML DOCTYPE ferent areas of web design include web graphic design;
< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML interface design; authoring, including standardised code
1.0 Transitionalt//EN” and proprietary software; user experience design; and
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition- search engine optimization. </p>
al.dtd” > </div>
 Strict XHTML DOCTYPE </div>
< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML </body>
1.0 Transitionalt//EN” </html>
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition- s6.css
al.dtd” > body {
Q53. Explain the process of working with grid. background-color:yellow;
Answer : margin:0px;
A grid can be added to the background of the page by padding:0px;}
using CSS background-image property when the page is de- h1 {
signed using the fixed width design. This will help programmer
margin:0px;}
to confirm the items position. For this, a 1-pixel height image
is required to be repeated vertically on the grid. #frame {
Example width:960px;
<?xml version= “1.0” ?> margin-left:auto;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML margin-right:auto;
1.0 Transitionalt//EN” background-image:url(“image.jpg”);
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition- background-repeat:repeat-y;}
al.dtd”> #page {
<html xmlns= “http://www.w3.org/1999/xhtml” lang= width:940px;
“en” xml:lang= “en”> margin-left:auto;
<head> margin-right:auto;}
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 147
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

In the above example, two <div> items are used. First one is the id attribute with the frame value (width of the grid) and
the second one is the id attribute with page value.
Q54. Explain the multi-column layouts with examples.
Answer :
A layout that contains multiple layouts is called multi-column layout. Examples of it are two column layout, four column
layout etc.
Two-column Layout
A two-column layout contains two columns with multiple rows in a page. It contains heading that spans for both the
columns. It contains a navigation bar below the header and footer at the bottom of the page.
Example
ex4.css
body {
margin:0px;
background-color:lime;
font-family:arial, verdana, sans-serif;
text-align:center;}
#frame{
margin-left:auto;
margin-right:auto;
text-align:left;
width:960px;
background-image:url(“image.jpg”);
background-repeat:repeat-y;}
#page {
margin:0px 10px 10px 10px;}
#header {
background-color:yellow;
padding:10px;
height:120px;}
#navigation {
background-color:orange;
padding:10px;
height:40px;}
#footer {
background-color:pink;

148 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
padding:10px;
height:40px;
clear:both;
border-top:20px solid #ffffff;}
/* 3 columns */
.column1of3, .column2of3, .column3of3 {
float:left;
width:280px;
background-color:#cccccc;
padding:10px;
margin-top:20px;
height:173px;}
.column1of3, .column2of3, .columns1and2of3 {
margin-right:20px;}
.columns1and2of3, .columns2and3of3 {
float:left;
width:600px;
background-color:#cccccc;
padding:10px;
margin-top:20px;
height:173px;}
two-column.html:
<html>
<head>
<title>2-column Layout Example</title>
<link rel= “stylesheet” type= “text/css” href= “ex4.css” />
</head>
<body>
<div id= “frame”>
<div id= “page”>
<div id= “header”>Header</div>
<div id= “navigation”>Navigation</div>
<div class= “columns1and2of3”>column 1 and 2 of 3</div>
<div class= “column3of3”>column 3 of 3</div>
<div class= “column1of3”>column 1 of 3</div>
<div class= “columns2and3of3”>columns 2 and 3 of 3</div>
<div id= “footer”>Footer</div>
</div>
</div>
</body>
</html>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 149

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

Four-column Layout
A four-column layout contains four columns with multiple rows in each of them. It contains heading that might span for
all the four columns. It contains a navigation bar below the header and footer at the bottom of the page.
Example
ex5.css
body {
margin:0px;
background-color:lime;
font-family:arial, verdana, sans-serif;}
#frame {
margin-left:auto;
margin-right:auto;
width:960px;
background-image:url(“image.jpg”);
background-repeat:repeat-y;}
#page {
margin:0px 10px 10px 10px;}
#header {
background-color:yellow;
padding:10px;
height:120px;}
#navigation {
background-color:orange;
padding:10px;
height:40px;}
#footer {
background-color:pink;
padding:10px;
height:40px;
clear:both;
border-top:20px solid #ffffff;}
/* 4 columns */
150 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
.column1of4, .column2of4, .column3of4, .column4of4 {
float:left;
width:200px;
background-color:#cccccc;
padding:10px;
margin-top:20px;
height:175px;}
.columns1and2of4 {
float:left;
width:440px;
background-color:#cccccc;
padding:10px;
margin-top:20px;
height:175px;}
.columns2and3and4of4 {
float:left;
width:680px;
background-color:#cccccc;
padding:10px;
margin-top:20px;
height:175px;}
.column1of4, .column2of4, .column3of4, .columns1and2of4 {
margin-right:20px;}
four-column.html
<html>
<head>
<title>4-column Layout Example</title>
<link rel= “stylesheet” type= “text/css” href= “ex5.css” />
</head>
<body>
<div id=“frame”>
<div id= “page”>
<div id= “header”>Header</div>
<div id= “navigation”>Navigation</div>
<div class= “column1of4”>column 1 of 4</div>
<div class= “column2of4”>column 2 of 4</div>
<div class= “column3of4”>column 3 of 4</div>
<div class= “column4of4”>column 4 of 4</div>
<div class= “columns1and2of4”>columns 1 and 2 of 4</div>
<div class= “column3of4”>column 3 of 4</div>
<div class= “column4of4”>column 4 of 4</div>
<div class= “column1of4”>column 1 of 4</div>
<div class= “columns2and3and4of4”>columns 2 and 3 and 4 of 4</div>
<div id= “footer”>Footer</div>
</div>
</div>
</body>
</html>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 151

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

2.4.5 Developing for Mobile Devices

Q55. What are the important aspects about the usage of web on mobile?

Answer :

Most of the users think that the use of internet on mobile phones is not much relevant to them or their company. But, by
considering the following observations user may change their decisions.

 The success rate of certain high profile mobile devices such as iPhone and Blackberry.

 The statistics that represent number of users who are using the web or internet on mobile devices.

The British government has conducted a survey in 2009. It says that the 11% of the UK web users are using web through
mobiles. This is equal to the 1/5th of the web users over the world.

Understanding the Medium and How it is Used

The main aspects to use the web on mobiles are as follows,

1. Context: What is the mobile user doing?

People use their mobile phone while moving from one place to another when they are in hurry. And they can be used
with one hand. Using mobile, the user can get the same result as the personal computer. One more advantage is mobile phones
are portable devices. Mobile phones are also used to perform some specific things such as finding nearby places, weather report,
latest news regarding sports, politics and etc.

2. Relationship: How do users treat their mobile phones?

The relationship between the user and the mobile phones is personal. Most of the users have their own mobile phones
rather than having a personal computer (Desktop computer). Desktop computer is shared between the friends and family where
the mobile phones are treated as personal. A user can carry mobiles phones everywhere 24 by 7.
152 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
3. Capabilities: How do features of mobiles compare with desktop PCs?
The comparison between the features of mobiles and desktop PCs are as follows,
Feature Mobile Phones Desktop PCs
Location Specific Services It is provided with the GPS or triangulation The Desktop PCs don’t have any GPS system.
to specify the user location.
Built-in Camera They are provided with Built-in camera. These are not provided with Built-in cameras.
User can connect the web cameras whenever
required.
Built-in Payment System The mobile phones are provided with the These PCs also have the payment system but
payment system where a user can have deb- most of the users prefer mobile phone payment
it/credit card details. systems.
Voice Data Mobile phones are integrated with voice Desktop PCs allows phone calls through sky-
data. They allow phone calls. pe.
Other Features Mobile phones are provided with the servic- PCs doesn’t provided with the SMS & MMS
es like SMS, MMS and etc. services.

Limitations of Mobile Phones Over Desktop Computers

Some of the limitations of mobile phones over desktop computers are as follows,
 Small Screens
The screens of mobile phones are very small compared to desktop computers.
 Connection may be Isolated
When a user is moving from one place to another, the connection may be isolated sometimes because of the weak signals.
And some rural areas don’t have a proper connection.
 Slower Connection Speeds
The speed of mobile networks is slow compared to the other broadband services.
 Less Control over the Appearance
Previously, most of the phones are introduced with the default fonts, font size, and images to be displayed on the mobile
screen. Therefore, it is not users choice.
 Input Devices are Harder to Use
Even though the mobile users are highly skilled in using mobile, they cannot use the keyboard and mouse with the same
accuracy and speed.
Q56. Explain how to approach the mobile development.
Answer :
The development of mobiles will depend on the mobile strategies and the resources available to the manufacturer company.
The different approaches for the mobile development are mainly categorized into three types. They are,
1. Do not Develop a Mobile Site
The simple and cheapest way for the mobile development is ‘do nothing’. Most of the mobile phones provide access to
the content of the site. Some of the famous mobile phones like Blackberry provides a resized website to fit to the screen and it
permits the user to zoom into the content of the pages.
Drawback
This approach provides the content of the site which does not show the main aim of the implementation to the users or
visitors.
2. Provide an alternative View of your Site
The middle ground is used to re-use the information that is available. But, provide the information in a simple, easy and
user understandable way. The two common approaches in middle ground are as follows,
(i) Add a secondary style sheet to the same pages. Therefore, the mobile devices can make use of different set of CSS rules
to control the flow of the pages that appear to the users. This type of approach helps the user to use a page with different
dimensions, font styles, font size and layout.
Example
<link href= “ex1.css” rel= “stylesheet” type= “text/css” media= “handled”>
This approach cannot be applicable to all the devices because all the mobile phones are not familiar to use this version
of the style sheet. The mobile phones that are familiar are required to download the same file i.e., created for the desktop
computers which may take long time to download the file.
(ii) Use various set of templates when the visitors visit the site through a mobile phone. Here, some of the famous companies
use the same content with different designs rather than using a latest style sheet.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 153
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Drawback Design Tips
These approaches provide the content of the site which The main aim of the mobile browsers is to provide the
doesn’t show the main aim of the implementation to the content in such a way that the user can understand easily and
users or visitors. complete their tasks quickly. Therefore, the design of the site
3. Create a Separate Mobile that is Optimized with its should be good. The different tips to be followed in the design
own Content of a mobile site are as follows,
If the user has all the resources for the development of (a) Content
a site that is useful to the mobile users then it clearly Some of the tips to be followed while providing the
explains the aim of the site to the visitors. content in a page are as follows,
Example 1. Provide a title to the page using which user should easily
understand the type of information the page consists of.
http://m.facebook.com/ and http://m.youtube.com/.
2. Use simple semantic markup like paragraphs in <p>
These two are mainly designed for the mobiles users
elements, headings in <h> elements and etc.
only.
3. Use simple, clear and user understandable language.
Q57. What are the different key based on which the 4. User should be able to download the images in short
creation of site for mobile devices is decided? time.
Answer : (b) Color
Domain Name Some of the mobiles are not provided with good screen
The most frequently asked query about the mobile site resolution and contrasts, so follow the below tips at the time
development is whether a top-level domain is required for the of designing to provide good screen resolution and contrasts.
site or not. This is because the top-level domain called .mobi 1. Try not to use background colors.
is designed especially only for the mobile devices. In recent
2. Try to provide enough contrast in the design.
times, most of the companies acquired different addresses like
mobile.domainname.com, m.domainname.com, and domain- (c) Navigation
name.com/mobile. Navigation is also one of the important concept in de-
Example signing a page.
m.facebook.com, or youtube.com/mobile etc. 1. Designers should provide the main navigation link in the
main page only. If not provide the minimum number of
Device Detection
options.
Device detection is used to find whether a user is on 2. Use the access keys for accessing links.
personal computer or on mobile phone and provides the suitable
site to the user. 3. Designers should provide the home link and the back
link at the end of each page for easy navigation. Ensure
The two URLs http://wurfl.sourceforge.net or www. that the links are not repeated.
andymoore.info are used to make a good start to the develop-
ment. (d) Links
Rules to be followed while providing the links in the
Provide a link of the complete website to the user only
page are as follows,
when mobile protection is provided to them and direct users to
the mobile version of the site. If the user is satisfied with this 1. Provide the links in blue color and remaining text in
link then you can target the same site to the user in future. black color. Try to ignore the other colors to avoid con-
fusion.
Provide the link of mobile version of the site the main
site so that, users may get to know about the mobile site and 2. Some of the famous mobile phones like blackberry and
have chances of using. iPhone automatically identify the mobile numbers so
try to provide the numbers in <a> tag.
Languages for Creating Mobile Web Sites
3. Mention the active link clearly because it is difficult to
Most of the mobile phones are able to display the basic
find the active link in mobile phones.
CSS and XHTML. But some of them doesnot display the ac-
curate results as expected. Some devices display the site styles (e) Forms
and font in different ways. Technically, most of mobiles support In mobile devices filling a form is difficult. Therefore,
two subsets of XHTML i.e., XHTML basic and XHTML-mobile ignore the forms as much as possible.
profile. The DOCTYPE declaration for the XHTML-profile is 1. Use the links instead of using form controls.
as follows,
2. Do not hide the password with dots(.) and asterisks(*)
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD because in mobile devices the appearance of password
XHTML Mobile 1.0//EN” does not make any problem.
“http://www.wapforum.org/DTD/xhtml-mobile10.dtd” > 3. Try to ignore the logins to make an efficient site.
154 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Testing Every line should end properly and the readers should
Testing of a mobile site on all the different mobiles is have to understand the starting of the next line before the user
not much easy because many types of phones with different lost the reading flow. If the length of the line is long then it is
versions available. The tester will choose some mobiles and very difficult to go back and re-read.
test the mobile site in those mobile phones. But, it is possible Font Sizes
to compare the view of site in your mobile and other mobiles.
Some of the emulators that replicate about the abilities of the Font sizes allow the designer to design a page that looks
phone are as follows, like more balanced. Select the font size in pixel which follows
scale of size such as,
 iPhoney (www.marketcirce.com/iphoney).
 Nokia Mobile Browser Simulator (www.forum.nokia.com/) body {font-size: 12px;}
 Blackberry (http://na.blackberry.com/eng/developers/ h1 {font-size: 24px ;}
resources/simulators.jsp)
h2 {font-size: 18px ;}
 Opera Mini Simulator (www.operamini.com/)
 dotMobi emulator- Simulates Sony Ericsson K750 and h3 {font-size: 16px ;}
Nokia N70 (http://mtld.mobi/emulator.php) But specifying the font sizes in pixels is not allowed
 Openwave phone simulator (http://developer.openwave. in internet explorer. Therefore, select the font size in em or
com/dvl/tools_and_sdk/phone_simulator). percentages for a similar effect.
Firefox web developer toolbar is another toolbar that All the browsers take the default font size as 16 pixels.
permits users to test pages on small screen (https://addons. Thus, create the font sizes using this default feature.
mozilla.org/en-US/firefox/addon/60). This type of feature is
available from the miscellaneous menu, under the small screen body { font-size: 75%; } // 16*0.75=12
rendering option as shown in the below figure, h1 {font-size: 200%; } // 12*2=24
h2 {font-size: 150%; } // 12*1.5=18
h3 {font-size: 133%; } // 12*1.33=16
The font sizes can also be specified in em.
body {font-size: 100%; }
h1 {font-size: 0.75em; } // 16*0.75=12
h2 {font-size: 1.5em; } // 16*1.5=24
h3 {font-size: 1.3px; } // 16*1.33=18
Choosing Fonts
Choose the fonts that are familiar to the users and
install on their systems. Because, if the user don’t have the font
installed on their system then it is waste of providing font in
that style. Some of the fonts that are used by many users are as
follows,
2.5 DESIGN ISSUES  Serif: Times New Roman, Times, Georgia
 Monospace: Courier, Courier New
2.5.1 Typography
 Sans-serif: Helvetica, Verdana, Arial
Q58. What is Typography? Discuss some of the Line Height - Leading
issues while designing a page.
Leading is referred as the vertical space between the
Answer :
lines of text. The text that lies in the baseline and the height of
Typography the letters like o, u and v are collectively known as the x height.
Typography refers to an art and technique used in type The parts of letters that will rise above the x height are known
design that contains decisions related to type faces, point size, line as ascenders and the parts of the letters that will drop below
length, letter spacing, etc. That is it needs a lot of efforts to make the x height are known as descenders. Leading (line height) is
the page easy to read, navigate and to provide the messages clearly. measured from the bottom line of the descenders to the top line
Some of the design issues while designing a page are as follows, of the ascenders that is shown clearly in the below figure,
Line Length-A Measure
A measure is referred as the number of characters
available in a single line of text. It counts the letters,
punctuations and spaces also. Generally, the line length will be
45 to 75 characters and for a small column the length would be
30 to 50 characters.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 155
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
CSS Resets
When the designer controls the designs to the pixel, the
output may be changed from one browser to another browser.
This can be achieved by providing a set of rules at the time
of designing the style sheet (set the padding and margins of
the elements to zero). The full version of different set of rules
for this is Eric Meyer’s CSS Reset and one can see that from
http://meyerweb.com/eric/tools/css/reset. For example, a few
lines that specifies a long list of elements and a set of handful
of their properties is as follows,
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td{
margin: 0;
padding: 0; Practically, the height above the heading should be more
border: 0; than the height below the heading. This can be solved by using
outline: 0; the following lines,
 Initially, divide the baseline grid size by the font size.
font-size: 100%;
For <h1> 18 ÷ 24 = 0.75
vertical-align: baseline;
For <h2> 18 ÷ 18 = 1
background: transparent; }
For <h3> 18 ÷ 14 = 1.286
body {line-height: 1; }
 Set the margin-top, margin-bottom and line-height to
Include the above mentioned lines at the top of the style the resulting values.
sheet or import them using @import or @include commands.
p{
Line Height - Baseline Grids font-size:0.75em; /* 16 x 0.75 = 12 */
The baseline grids are used to align the bottom of the line-height:1.5em;} /* 12 x 1.5 = 18 */
main text to the grid. These are used by many typographers
h1 {
called as baseline grids.
font-size:1.5em; /* 16 x 1.5 = 24 */
This involves in the following steps,
line-height:0.75em; /* 24 x 0.75 = 18 */
 Reset the size of the padding and margins to the items
margin-top:1.2em;
by using some CSS Reset rules.
margin-bottom:0.3em; }
 Decide the line height of the body text i.e., the gap
between the lines. h2 {
Here, the line height is 18 pixels and the distance font-size:1.125em; /* 16 x 1.125 = 18 */
between the text is 12 pixels and to make sure the text line-height:1em; /* 18 x 1 = 18 */
lines up I created a GIF with 1 pixel width by 18 pixels margin-top:1.7em;
height which is as shown in the below figure, margin-bottom:0.3em; }
h3 {
font-size:0.875em; /* 16 x 0.875 = 14 */
line-height:1.286em; /* 14 x 1.286 = 18 */
margin-top:2.172em;
margin-bottom:0.4em; }
Now, check the measurements in the browser and adjust
them when required.
Aligning Other Items to the Grid
Setting Headings on the Grid The two different ways to keep the text on a grid are as
To set the headings on the grid set the line-height follows,
property in CSS to an integer that can be divided equally into 1. Set the line height as the body of the text.
the height of the grid which is as shown in the below figure, 2. Set the line height to 3/4th of the baseline grid height.
156 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
With the second approach add a margin at the top of the
item to confirm that the very first line is on the grid.
The important points to be remember while aligning
other items to the grid are as follows,
 The units of the padding and the border should be same
then only the text appears on the grid even if the text
size is changed.
 On the left part, no element has margin and padding.
 Padding and borders on boxes can throw items off-grid;  In the middle part, the elements are with normal default
if this is required then set the margin around the item margins with even spacing.
within the box to confirm that the text appears on the
grid.  On the right part, the headings are closer to the text.
Chunking
Space between Letters - Tracking
Chunking is the process of collecting independent blocks
Tracking is referred to as the space between the letters.
of information and grouping them together to produce a lengthy
In CSS, the letter-spacing property is used to control the space
content. Consider the below figure that explains the use of white
between the items on the page. The letter spacing is required
spaces that groups the related items.
when dealing with the headings that is in uppercase letters
because reading the headings is little bit difficult than reading
a sentence.
Example
h1.header_spacing {
letter-spacing: 0.1em;
}
White Space
White space or a negative space is referred as the space
between the items in the page. It is used to specify the gaps
between the items in a page. The two different white spaces
are,
 Micro White Space: It is the space defined between the
elements like headings, text and lists.
 Macro White Space: It is the space defined between Another way to chunk the information is using a border
the lengthy elements in a page. on a box, or providing a box a background color. Consider
the below example that uses a background color to group the
information together.

Contrast
The above figure explains the space between the large The contrast of a page should be good between the items
elements (Macro white space). and the background to provide better presentation to the users
Consider the below figure that shows a page with some even when they have bad quality monitors or light focus on
items that are separated with different spaces. their screens.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 157
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Even if the contrast is high then the user may suffer. 1. Menus Must Focus on What the Users Want to
Therefore provide enough contrast. For instance consider the Achieves
below figure, For all the sites especially commercial sites, the main
priority of the menus must be to satisfy the users satisfy the fol-
lowing,
 Provide the required information for users in the
size.
 Provide this information in clear and concise man-
ner.
 Priorities the item for which the site is mostly
visited.
2. Menus must be Separated from the Content
A menu must be easily identifiable for the users to navi-
gate the site. This can be achieved by the following techniques,
 By using different font size for the menu compared
to main content
 By adding extra space around menu
 By placing the menu is a box with colored back-
Notice that the black color text on the white background ground or separating a menu from the main content
color is not much easier to the user to read but the white color text with a time.
on the black color background is good enough. In this examples,  By using images for the menus. But large images
the contrast can be reduced by providing a dark gray color text slow down the loading of a site.
on a white background rather than using black on white. In the 3. Icons Used as Menus must be Understandable and
same way, light gray on a black background color is easy to read. Add a Link also
In case if you are using an image as background then Many web sites use images called as icons for links
choose the low contrast image to read the page easily and clearly. as menus. For example, a magnifying glass indicates search
features. Such type of images must be understandable if not
2.5.2 Navigation the users may not use them. Mostly the icons such as a house
for home page, envelope for email address, a question for help
Q59. What is the need of navigation? List the meth-
files are used. It would be better if a link is provided in words
ods of navigation.
with the icons that are less common.
Answer :
Although site is planned in a perfect manner, the users 4. Menus must be Quickly and Easily Readable
will use the site in their own way. For example, a site contains The visitors usually do not read the pages while brows-
various pages that can be visited from its home page, but the ing, rather they scan them. So, the menus should be distinct and
visitors might visit from some other page that is linked to other clear from the main part of the page so that users can easily
site links. The users visit according their needs. So, site must be scan and register the navigation.
designed in such a way that visitors find the required informa- The images used on a menu must be large enough and
tion easily and quickly. There are three methods of navigation the text must contrast with its background with enough size.
using which the users navigate the site. Their links also must be short and concise. For example, a link
1. Users can navigate by using the menu that is provided. “Home” is easily readable and understandable.
2. Users can navigate by browsing through the links that 5. Menu Items must be Logically Grouped
are provided in between of text or any other parts of When many pages are available then use submenus. The
page rather than the menu. menu items must be carefully grouped so that visitors can eas-
3. Users can also navigate by searching for relevant items ily understand where to look for the required information with
of information. searching through several categories. The submenus must be
Q60. How menus helps the users to navigate your easily distinguishable from the main menu and should be clear
site? Explain. which items belong to which section. The submenus mostly
Answer : appear in different color background, smaller font, an idented
A keypart of any website that features more than one page position, or an alternate color from the main menu.
is called a menu. A menu represents various sections of a site. It 6. Menu Items must be Easy to be Selected
allows the users to get where they want to go on site. A site can A menu item should be in such a way that a user can
contain more than one menu. It can have a primary navigation in easily select it. A menu item which is small or has less space
one menu and secondary navigation in a submenu or in a separate between menu items or moving seems harder to select. And the
menu. The guiding rules for the menus are as follows, menu items which are large are easier to select.
158 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Make sure while creating the menus that they work on Q62. How a user can navigate your site using search
all the main browsers and avoid complex code in menus. The feature? Explain.
experimental types of menus that move and slide between the
Answer :
items as the user moves the mouse over an item need fine control
of a pointing device such menus look great on experimental A search feature allows the user to find the information
site. that they need from our site by looking a keyword relating to
7. Menus must Load Quickly the information. Hence, user can also navigate the site using
Every visitor to the site may not have a internet connec- the search feature. This features decreases the difficulty of the
tion. So, menus must load quickly an any connection. Although users in finding what they came for to the site and saves them
speed of connection improves, a menu should load within a from learning the navigation scheme.
couple of seconds. If it takes longer than 8 seconds to load then Search Feature makes the Site more Usable
users think that page is not loading or browser is frozen. The
Search feature is important as our site grows. This feature
users might reload the page or go to another page.
can be implemented in many ways. User can add simple features
Loading speed is very important for the menus that con-
in some ways and some methods need advanced programming
tain flash or graphics. The loading time doubles when the user
experience.
want to change the image or appear highlighted when mouse
is rolled over an image. In large commercial sites whose content is stored in
8. Menus must be Consistent Across a Site the database, user can use programming commands such as
A site with many pages requires a menu with many queries to ask for the required information. User can even use
navigation items. When submenus are introduced the navigation an indexing application to index the site using which the search
becomes difficult and also varies from page to page. But it is feature becomes available.
important to maintain the primary navigation consistent across The sites which doesn’t use databases or indexing tools
all the pages. can simply added a searched feature by creating a search box
The submenus in each section must be in the same posi- when the users enter their queries in the search box, they will
tion on every page and also look similarly to help the users to be sent to the server of the company which offers the search
know the exact place to navigate. service and then the server will return the answers to the user.
Q61. How a user can navigate your site using links? Google is one of the best known company which offers this
Explain. service for free.
Answer : Adding Google Search to our Site
The web pages not only provide menus for the users to Google is most widely used search engine on the internet
navigate the site, they also contain hyper links in the text which at present. It offers a very powerful and flexible service and
is in the body of the document. The users can also navigate us- user can use this service to provide the search feature on the
ing these links. These links are not the part of main menu. Two site. User have to do this by registering for it while writing the
different types of links are as follows, code for the site. The instructions, setup for it are very simple
1. Text links on the site and service is also free.
2. Image links.
1. Text Links 2.5.3 Tables
The text links will be represented in blue color with a
underline by default. It is suggested by some of the ex- Q63. Explain in detail about tables.
perts that, it would be easy for the users to identify the Answer :
links if they are left to their default appearance. Using a
The different techniques that allows the user to read the
different color from the main menu for the links makes
tables quickly are as follows,
it easy to tell which text makes up the link.
In addition to this one can also change the appearance 1. Padding
of the link as the user hovers the link, by changing their 2. Headings
color, gaining a background color or the links getting
underlined. Changing the shade of the links which the 3. Shading rows.
users have already visited reminds them where they have 1. Padding
been earlier.
The padding is used to define the space between each
2. Image Links item and the border.
Images can used as links in menus, advertisements, photo,
graphical icons etc. Two attributes need to be used when Example
an image is used as link. One attribute is ‘alt’ which tells th, td{
the description of the image and another is the title of the
padding: 10px;
link. In case if not using CSS, user need to add the border
attribute for the images that are used as links. }
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 159
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Program
<html>
<head>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Rollno </th>
<th> Course </th>
<th> Subject</th>
</tr>
<tr class = “even”>
<td> Ashok </td>
<td> 120 </td>
<td> BTECH </td>
<td> IT </td>
</tr>
<tr class = “odd”>
<td> Ujmala </td>
<td> 121 </td>
<td> BTECH </td>
<td> IT </td>
</tr>
</table>
</body>
</html>
Output

160 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
2. Headings
Generally, all the heading of a table should be in bold, also make the heading in bold and uppercase and the upper line of
the heading should be a dark line that separates the content from the headings.
Example
th{
border_bottom: 2px solid #FFFFFF;
text-transfom: uppercase;
background-color: yellow;
text-align: left;
}
Program
<html>
<head>
<style>
table, td, th {
border-bottom:2px solid red;
text-transform:uppercase;
background-color:yellow;
text-align:left;}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Rollno </th>
<th> Course </th>
<th> Subject</th>
</tr>
<tr class = “even”>
<td> Ashok </td>
<td> 120 </td>
<td> BTECH </td>
<td> IT </td>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 161
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
</tr>
<tr class = “odd”>
<td> Ujmala </td>
<td> 121 </td>
<td> BTECH </td>
<td> IT </td>
</tr>
</table>
</body>
</html>
Output

Shading Alternate Rows

This helps the users to follow along the lines. In this, every alternate row will be shaded with some light color than heading
color. Note that the, background color should be in contrast with the text so that user can read the table data easily.
Example
th, td{
padding: 10px;
margin: 0px; }
th{
border_bottom: 2px solid #FFFFFF;
text-transfom: uppercase;
background-color: yellow;
text-align: left;
.even {background-color: #0F0F0F;}
.number {text-align: right; }
}
Program
<html>
<head>
<title> Font-family Example</title>
<link rel = “stylesheet” type = “text/css” href = “s1.css”/>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Rollno </th>
<th> Course </th>
<th> Subject</th>
162 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
</tr>
<tr class = “even”>
<td> Ashok </td>
<td> 120 </td>
<td> BTECH </td>
<td> IT </td>
</tr>
<tr class = “odd”>
<td> Ujmala </td>
<td> 121 </td>
<td> BTECH </td>
<td> IT </td>
</tr>
</table>
</body>
</html>
Output

2.5.4 Forms
Q64. What is a form? Discuss the steps to be followed before designing the form.
Answer :
Form
Form is a webpage which contains various elements like text fields, checkboxes, buttons etc. Online forms can be used
for different purposes.
Example
Online registration, order entry, subscription etc.
Steps to be followed before Designing the Form
Before designing the form the designer should follow the below steps,
1. List the Required Information
List all the requirements that you want to provide in the form. For a registration form the following information is required,
(a) Login information
(b) User name
(c) User address
(d) Contact details.
The above listing include the exact information as,
(a) Login Information
It includes user id and password
(b) User Name
It includes First name and last name
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 163
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
(c) User Address
It includes colony, city, state, pin code
(d) Contact Details
It includes mobile number, e-mail id, address
2. Group the Related Information
After listing the required information check for the related information and group them accordingly. In the above example,
the related information can be grouped like the following,
 Name and E-mail id
 Login information
 Other details
Q65. Explain the process of designing a form.
Answer :
Design the form when you know all the form controls that are to be added to the page by grouping them together and
labeling them accordingly.
Selecting the Right Type of Form Control
After estimating the approximate length and layout of the form. Decide the different form controls to be added to the page.
The user can enter the text using three types of form controls. They are,
 Using <input> element whose type attribute has text as its value (when the text is one line).
 Using <textarea> element (when the text is more than one line).
 Using <input> element whose type attribute has password as its value (when the text is sensitive).
The user can choose one of the following controls when he/she wants to choose one option from all,
 Radio buttons when only one option is required to be selected from multiple.
 Check boxes or multiple checkbox when multiple options are required to be selected from multiple.
Note that while declaring the form controls, the names of the controls should be related to the information provided. The
different control names to describe the type of form controls use the following,
1. txtName for text areas and text boxes
2. chkName for checkboxes
3. selName for select boxes
4. radName for radio buttons.
1. Textboxes
Textbox control adds textboxes onto the form present on editor window. A textbox that allows the user to add text in the
area present in textbox. A text box control is added to order form. That is, a text box control basically accepts input from users. If
the text is small then you can use one line textbox or else use multi-line text area. For example, users are asked for their favorite
subject and why.
2. Radio Buttons and Check Boxes
 Radio button control adds radio button onto a form. A radio button can be used for selecting single options from a set of
options.
 Check box control adds check boxes to a form. A check box allows a user to select options by checking or unchecking it.
 Dropdown list control adds list of data as drop down list. A drop down list is used for making a single selection from the
list.
164 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Grouping Controls
Grouping of various controls can be done by using the <fieldset> element or by splitting the form into several pages.
Using <fieldset> Elements
It is used to group all the related elements in a form.
Example
<head>
<title>Login</title>
<link rel= “stylesheet” type= “text/css” href= “s1.css” />
</head>
<body>
<form name= “Example” action= “ ” method= “post”>
<fieldset>
<legend>Login info</legend>
User name: <input type= “text” size= “15” name= “txtUserId” /><br />
Password: <input type= “password” size= “15” name= “txtPassword” /><br />
Confirm password: <input type= “password” size= “15” name= “txtPasswordConfirm” /><br />
<input type= “submit” value= “Login” />
</fieldset>
</form>
</body>
</html>
Output

Splitting a Form into Separate Pages

When the length of the form is more then split the page into different pages to make the user comfortable and avoid users
from scrolling. For example, consider the below example that is divided into four forms for an efficient use.
But splitting the page into several pages leads to some new complexities i.e., the program needs to remember all the things
the user entered in between the steps.
Q66. Write in detail about layout of forms.
Answer : Model Paper-III, Q10(b)

Layout of Forms
The layout of a form will attract the user to use the pages. Some of the issues concerned with the layout of forms are as
follows,
Labeling Controls
The labeling of the form controls should be clear and user should quickly understand what actually it is. The two different
types of labels are as given below,
 Explicit labels: These labels use <label> element.
 Implicit labels: These labels use normal text and markup text to the control.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 165

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Generally, for checkboxes and radio buttons the label should appear at right to them. For textboxes, the label should appear
to the left of the text box or above the text box. And for buttons the label should be on the button itself.
Example
The simple example to illustrate the implicit labels is as follows,
<html>
<head>
<title>Implicit labels</title>
<link rel= “stylesheet” type= “text/css” href= “s2.css” />
</head>
<body> <form name= “Example” action= “ ” method= “post”>
<fieldset>
<legend>Sign Up</legend>
First name: <input type= “text” name= “txtFirstName” size= “15” /><br />
Last name: <input type= “text” name= “txtLastName” size= “15” /><br />
E-mail address: <input type= “text” name= “txtEmail” size= “15” /><br />
Phone: <input type= “text” name= “txtPhone” size= “15” /><br />
<input type= “submit” value= “Sign Up” />
</fieldset>
</form>
</body>
</html>
Output

Example
The simple example to illustrate the explicit labels is as follows,
<?xml version= “1.0” ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitionalt//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns= “http://www.w3.org/1999/xhtml” lang= “en” xml:lang= “en”>
<head>
<title>Implicit labels</title>
<link rel= “stylesheet” type= “text/css” href= “s3.css” />
</head>
<body>
<form name= “Example” action= “ ” method= “post”>
<fieldset>
<legend>Sign Up</legend>
<label for= “firstName”>First name: </label>
<div class= “control”>
<input type= “text” name= “txtFirstName” size= “20” id= “firstName” />
</div>
<label for= “lastName”>Last name: </label>
<div class= “control”>
<input type= “text” name= “txtLastName” size= “20” id= “lastName” />
166 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
</div>
<label for= “email”>E-mail address: </label>
<div class= “control”>
<input type= “text” name= “txtEmail” size= “20” id= “email” />
</div>
<label for= “phone”>Phone: </label>
<div class= “control”>
<input type= “text” name= “txtPhone” size= “20” id= “phone” />
</div>
<input type= “submit” value= “Sign Up” />
</fieldset>
</form> </body>
</html>
Output

Keep Relevant Information Next to or above Form Controls

Keeping relevant information next to or above the form controls is one more requirement for a good design. For example,
consider the below figure that consists of two separate text boxes with no indications. This type of declaration makes the user
feel difficult. Therefore keep the require information near to the form controls.
Required information is referred to as the information that is to be entered without fail. To provide such type of fields in
the form follow the below rules,
 Use an asterisk (*) symbol to indicate it as mandatory or required field.
 Use the “required” keyword next to the field.
Example
<?xml version= “1.0” ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitionalt//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns= “http://www.w3.org/1999/xhtml” lang= “en” xml:lang= “en”>
<head>
<title>Positioning of labels</title>
<link rel= “stylesheet” type= “text/css” href= “s4.css” />
</head>
<body>
<form name= “Example” action= “ ” method= “post”>
<fieldset>
<legend>Information</legend>
<table>
<tr>
<td class= “label”>Phone <span class= “required”>*</span></td>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 167
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<td>Area code:&nbsp;<input type= “text” name= “txtTelAreaCode” size= “5” />
Number:&nbsp;<input type= “text” name= “txtTelNo” size= “10” /></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Output

Careful Placement of Buttons

Provide the button at the required and proper place because misplacement of buttons leads the user to a wrong page. For
example, in online shopping websites the “add to cart” button will be exactly positioned at the product if it is misplaced then it
leads to the selection of other product.
Using the title Attribute on Form Controls
The title attribute is used to provide additional information to the users when the cursor moving over the form controls.
Example
<?xml version= “1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitionalt//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns= “http://www.w3.org/1999/xhtml” lang= “en” xml:lang= “en”>
<head>
<title>Using the title attribute</title>
<link rel= “stylesheet” type= “text/css” href= “s5.css” />
</head>
<body>
<form name= “frmExample” action= “ ” method= “post”>
<fieldset>
<legend>Enter the OTP</legend>
OTP:&nbsp;<input type= “text” name= “txtOTP” title= “Enter the otp sent to your registered mobile number to complete
the transaction” />
</fieldset>
</form>
</body>
</html>
Output

168 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
Color in html is known to be one of the important features to convey the information but depending too much on the
colors to pass the information is not good for the design. It must be confirmed that there is sufficient contrast between the colors
and make the difference clearly.
Using CSS with the Form Elements
Usage of CSS to control the elements of a form (like textbox, text area, buttons etc.,) makes the page more popular.
Example
<?xml version= “1.0” encoding= “iso-8859-1”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns= “http://www.w3.org/1999/xhtml”>
<head>
<title>Search form</title>
<meta http-equiv= “Content-Type” content= “text/html; charset=iso-8859-1” />
<style type= “text/css”>
input.search {
width:335px;
height:37px;
padding:10px 10px 10px 55px;
background-image:url(s.jpg);
border:none;
background-color:#cccccc;
font-size:30px;} #search_container input: focus {
outline: 0;}
</style>
</head>
<body>
<input type= “text” name= “search” class= “search” />
</body>
</html>
Output

Suppose, basic form is the main part of a page then the basic form contains many form controls. Login page, theasures.
com pages are the examples of large form inputs.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 169

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

INTERNAL ASSESSMENT

OBJECTIVE TYPE
I. Multiple Choice
1. CSS stands for ____________. [ ]

(a) Common Style Sheet (b) Cascading Synchronized Sheet

(c) Cascading Style Sheet (d) None of the above

2. ____________ property is used to specify the size of the font. [ ]

(a) The font_size (b) The size

(c) The font-size (d) The fontsize

3. ____________ property places the text in the browser’s window according to the specified value. [ ]

(a) text-align (b) browser-align

(c) align (d) All the above

4. ____________ value preserves the white spaces and does not break the line until <br> element is used. [ ]

(a) Post (b) Pre

(c) Nowrap (d) Normal

5. The ____________ pseudo class applies the styles to the first line of an element. [ ]

(a) :first-line (b) :f_line

(c) first_line (d) None of the above

6. ____________ selector applies the style to an element that is the next sibling of another. [ ]

(a) Sibling (b) Attribute

(c) Next sibling (d) Adjacent sibling

7. Which of the following is the way to represent colors in CSS? [ ]

(a) hexa decimal code (b) RGB value

(c) Color name (d) All the above

8. Which of the following methods help to group the elements? [ ]

(a) Styles (b) Location

(c) Color (d) All the above

9. The web page whose dimensions are not fixed is called as ____________. [ ]

(a) Fixed design (b) Fixed-width design

(c) Liquid design (d) Layout design

10. ____________ rule is used to import a style sheet into the present style sheet. [ ]

(a) @important (b) !import

(c) @import (d) import

170 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-2 COMPUTER SCIENCE PAPER-VIII (B)
II. Fill in the Blanks

1. _________ is a document written in any styling language.

2. _________ attribute indicates the URL of the style sheet.

3. The _________ is used to control the amount of space between each word.

4. The _________ selector can be used to apply a rule to all the elements of a document.

5. _________ in a visual art is defined as the organization of visual elements.

6. The web page whose dimensions are not fixed is called as _________.

7. _________ is a webpage that contains various form controls.

8. _________ is used to define the space between each item and the border.

9. _________ is the process of collecting independent units of information and grouping them together to form a large
unit.

10. _________ is the vertical space between the lines of text.

KEY
I. Multiple Choice
1. (c) 2. (c) 3. (a) 4. (b) 5. (a)

6. (d) 7. (d) 8. (d) 9. (c) 10. (c)

II. Fill in the Blanks

1. Style sheet

2. href

3. White-space property

4. Universal

5. Composition

6. Liquid design

7. Form

8. Padding

9. Chunking

10. Leading

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 171

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
III. Very Short Questions and Answers

Q1. What is a style sheet?

Answer :

Style sheet is a document written in any styling language. It consists of style information which can be prepared using
the specific formatted style rules.

Q2. What is the purpose of content property?

Answer :

Content property is used to specify the type of content that should be added to the document. The various values that add
different type of content to the document are as follows,

 A String

 A Counter

 A URL

 attr(x)

 open-quote

 close-quote

 no-open-quote

 no-close-quote.

Q3. List the different relative units in CSS.

Answer :

The different relative units in CSS are as follows,

1. px

2. em

3. ex.

Q4. Define a measure in Typography.

Answer :

Typography refers to an art and technique used in type design which comprises of decisions relating to type faces, point
size, line length, letter spacing, etc.

Q5. What is a form?

Answer :

Form is a webpage which contains elements like text fields, checkboxes, button etc. These web pages look like normal
white sheet of paper consisting of significant spaces information to be entered by users.

172 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)

Marketed by:

UNIT LEARNING AND WORKING

WITH JAVASCRIPT, PUTTING

3 YOUR SITE ON THE WEB SIA GROUP

LEARNING OBJECTIVES
After studying this unit, a student will have thorough knowledge about the following key concepts,
Ø Script tag , Document Object Model
Ø Document object, Forms collection and Images collection with its properties and methods
Ø Variables, Operators and its types and Functions
Ø Control Statements, Looping and Events
Ø Built-in Objects with its properties and methods
Ø Form Validation and Regular Expressions
Ø Select Box Options, Radio Buttons and check boxes,
Ø Form Enhancements and Java script Libraries
Ø Meta Tags, http-equiv and content attributes
Ø Pre-publishing Tests, Pre-release Tests, Link Checking and Checking Color Depths.
Ø Meta tags and its attributes
Ø Testing the site
Ø Different things to get the site on web
Ø Different pointers to make more people aware of the site
Ø Understanding the visitors.

INTRODUCTION
JavaScript is a programming language that supports to object oriented methodologies. It facilitates the inclusion of
certain executable data along with it. JavaScript can also contain dynamic data which can interact with the users,
dynamically create HTML context and can control the actions of browser. It provides various types of operators,
conditional statements, iterative statements, arrays, objects etc. JavaScript provides different types of objects such
as math object, string object, date object, boolean and number object and also some event handling techniques.
JavaScript can interact with web pages in various ways. Implementation of Javascript is described in this unit.The
javascripts can be created using basic scripts and Pre-written javascript libraries. The developed site is represented
to users and is put on the web. Tests are performed on it to validate the documents, links, and to make sure that
the site works in other browsers.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 173

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

PART-A
SHORT QUESTIONS WITH SOLUTIONS
Q1. Write the structure of java script program.
Answer :
The structure of javascript code begin with the tag <script language = “javascript”>. This tag validates the javascript and
minimizes the occurrence of errors. It ends with </script>.
<script language = “javascript”>
{
javascript code;
}
</script>
Q2. Write a short note on DOM.
Answer :
Document object model or DOM is an interface using which given programs/scripts can dynamically alter (arrange,
format etc.) the contents of a given web document. Here, one has to remember that DOM remains a language and platform
independent interface. Also, the given web document can further be processed (if required) and the result of which can be
induced in it again.
Q3. What is a variable in java script? How to declare a variable?
Answer : Model Paper-I, Q6

Variable
A variable is a data item that stores the values defined by the user. It can be manipulated at any time. In JavaScript, the
variables are same as the other programming language variables. If a value is assigned to a variable then this is called assignment.
Declaring a Variable
Variables declared with ‘var’ keyword.
var variable = value;
var a = 10;
Q4. Define functions in javascripts.
Answer : Model Paper-II, Q6

A function is a self contained block of code that performs specific and well defined tasks. It simplifies complex task by
dividing the program into modules.
A function definition is the complete description of a particular operation. Actually a function definition tells what a
function does and how it performs. A function definition contains a function body (a block of statements) in addition to function
name, arguments list and return type.
Q5. Write about ‘string’ object.
Answer :
String function forms one of the important consequences in JavaScript. In general terms, strings refer to series of
characters (such as alphabets, special characters, numerics or combination of them) that are closed within double quotes.
Like math, even strings are treated as object which supports numerous methods.
Length is the main property used for string object. It is used to specify the count or number of a characters given in a
string.
Q6. Write a short note on Date Objects.
Answer :
Date forms one of the important specifications in almost every programming discipline. Hence, Java scripts provides a
date class for this purpose. This class includes a set of methods to access the date.
174 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Globally, date/time is recognized in two ways i.e., UTC 1. schema
and local time. Universal time as the name suggests is a standard 2. name
that is followed all over the world. On the other hand, local time
3. content
is the time of the system where the script is currently residing.
4. http-equiv.
Date object can be created in the following way,
Here, the name and content attributes, http-equiv and
var currentdate = new date ( ); content attributes are used together.
On the execution, the date object simply captures the Q10. What are the two different stages of testing?
date of local system (in which it is executing) at that instant and
Answer :
returns the value (which is nothing but the time in milliseconds)
to current date variable. The returned value is the time started The two different stages in the process of testing are
from 0 clock, January 1st 1970. The date constructor in the above given below,
declaration is empty (i.e., without any parameters). Different 1. Pre-publishing Tests
values can be obtained by passing parameters to this constructor.
The tests that are performed on the system before
Q7. What is an array in java script? exposing them to the users are known as pre-publishing
Answer : Model Paper-II, Q6 tests.
An array contains a set of similar items. But in javascript 2. Pre-release Tests
an array can contain different items. Arrays here are similar The tests that are performed on a server before publishing
to structure variables. But they can be accessed randomly are known as pre-release tests.
by making use of index and the array name. Thus, arrays in
javascript are also called as associative arrays. This feature Q11. List the different points used to make people
makes javascript arrays distinct than arrays of other languages. aware of the site.
An array can be declared as follows, Answer : Model Paper-II, Q7

var arr; The different pointers to make more people aware of the
Elements can be allocated to this array by using the site are as follows,
below statement, 1. Always mention the URL
arr = new Array(10); 2. Forums, communities, and social Networks
An array is not initialized while it is allocated. 3. Check for trade sites and directories
Q8. List any two mathematical functions with syntax 4. Reciprocal links
and examples.
5. Look at your competition
Answer :
6. Make it easy for people to link to you
(i) Function : min( )
7. Pay-per-click advertising
Description : Displays minimum of two or list of
numerical values entered into it. 8. Display advertising
Usage : document.writeln(min(2, 5)); //output 2 9. Create an E-mail news letter.
(ii) Function : sqrt( ) Q12. Write a short note on domain name.
Description : It displays the square root of the value Answer : Model Paper-III, Q7
entered into it.
The domain name is an address that is provided to the
Usage : document.writeln(sqrt(4)); //output 2 users of the market for communicating through online/internet.
Q9. Write a short note on meta tags.
Example
Answer : Model Paper-I, Q7
siapublishers.com, hrstoppro.com
The meta tag provides the information related to the
There are many domain regestration companies for
page indexing for the search engines. The meta information is
simply defined as “information about information”. registering a domain name for the site. So, choose a company
and register your domain name. Most of the companies provide
Example
suffix as.com where as some other companies provides the
<meta name = “description” content = “SIA publishers
suffix based on the country. For example, .co.in for India, .co.
and distributors pvt Ltd”/>
for UK, and .ru for Russia, so on. .me.uk is the suffix given to
Generally, a meta tag can take four universal attributes
the personal sites in UK, .info is provided to the information-
(dir, lang, xml:lang and title) and four other attributes that are
specific to the <meta> element. They are as follows, based sites, .org is provided to the organizations.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 175

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

PART-B
ESSAY QUESTIONS WITH SOLUTIONS
3.1 LEARNING JAVASCRIPT

3.1.1 How to Add Script to Your Pages

Q13. How a script is added to the webpage.
Answer : Model Paper-I, Q11(a)

The web pages contain the XHTML code as well as javascript code. Javascripts can be added to the webpage in two ways.
One way is to add the code within <script> and </script> tags. The purpose of the <script> tag is to notify the browser that the
contents inside the <script> tag are to be considered as the script and they should be interpreted by the respective interpreter.
Consider the below example,
<script language = “JavaScript”>
Javascript statements
</script>
In the above code snippet, the language attribute is optional. Multiple scripts can be inserted in an XHTML document.
All together form a single program along with the order in which they are declared. The interpreter is responsible for interpreting
the program along with statements from top to bottom.
Example
<html>
<head>
<title>JavaScript program </title>
</head>
<body>
<script language = “JAVASCRIPT”>
document.writeln(“Welcome to SIA Group”);
</script>
</body>
</html>
Output

The second way to add the javascript into XHTML is to identify the code available in the external source file. This file
should be made to refer from within the XHTML. This file should be saved with extension .js. It is the XHTML program which
refers this external file. The <script> tag contains an attribute src that refers the external javascript file name.
<script language = “JavaScript” src = “source.js”>
</script>
The source file must be located in the directory which contains the XHTML file. Even this method allows multiple javascript
files to be referred. A script tag for every file must be used in case of multiple files. This method is useful when the javascript
code is lengthy.

176 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Example
external.html
<html>
<head>
<title>JavaScript program </title>
</head>
<body>
<script src=“js2.js”></script>
</body>
</html>
js2.js
document.writeln(“Welcome to SIA Group”);
Output

A single xhtml document can have any number of scripts and can be used in three different sections as follows,
(i) <head>
The script element is used in the <head> section of the page and is called whenever an event is triggered.
(ii) <body>
The script element is used in the <body> section of the page. Whenever a script is run a page is loaded.
(iii) External File
When an link is provided in <head> section then the script is treated as if it is in this <head> section. It occurrs whenever
an event is triggered. When it is provided in <body> section then the script is treated as it it is in the <body> section and executed
when the page is load.
Q14. Write about comments and <no script> element in Javascript.
Answer :
Comments
Comments in Javascript can be used in the following two ways,
(i) A comment is provided in a one line by using two forward slash(//) after the statement in the same line shown as below,
<script type = “text/javascript”>
document.write(“javascript Program”) //This text is displayed on screen
</script>
(ii) A comment can be provided in multiple lines by using the opening characters /* and closing characters */ shown as below,
/* this is a javascript program.
It contains multiline comments*/
<noscript> Element
This tag displays an alternative content with in a document for the javascript users who are disabled. It can contain
any XHTML content provided by the author.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 177
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
3.1.2 The Document Object Model (iii) Area Collection

Q15. Explain about Document Object Model. It specifies the image maps which use an
<area>element present in the document.
Answer :
(iv) Forms Collection
Document Object Model
It specifies the <form> tags present in the document.
Document object model or DOM is an interface (v) Image Collection
using which given programs/scripts can dynamically alter
(arrange, format etc.) the contents of a given web document. It specifies the images present in the document.
Here, one has to remember that DOM remains a language
(vi) Link Collection
and platform independent interface. Also the given web
document can further be processed (if required) and the It specifies the hyperlinks present in the document.
result of which can be induced in it again.
Forms contains the child objects which are used to
Level 0 HTML Document Object Model specify various types of form controls that are shown on
the form such as Button, Checkbox, File upload, Hidden,
The following figure illustrates the level 0 HTML Option, Password, Radio, Reset, Select, Submit, Text,
document object model which contains different child TextArea.
objects that specifies the collection of similar tags present
in a document. Example

Consider a document is accessed by using a DOM

Anchor that contains one form and two links.
Button <html>
Applet
Document Checkbox <head>

Fileupload <title>Document object model</title>

Area
Hidden </head>

Option <body>
Form
Password <script type=“text/javascript”>

function display()
Image Radio
{
Reset
var name=document.form1.name.value;
Link Select
alert(“Welcome:”+name);
Submit
}
Text
</script>
TextArea
<form name=“form1”>
Figure: Level 0 HTML Document Object Model Enter Name:<input type=“text” name=“name”/>
(i) Anchor Collection <input type=“button” onclick=“display()”
value=“print name”/>
It specifies the anchor elements used in a document
for linking. </form>
(ii) Applet Collection </body>
It specifies the applets present in a document. </html>
178 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Output

DOM provides a script to access the content of the form (forms collection) and the two links (links collection).
Accessing Values Using Dot Notation
The object can be accessed by a dot notation.
Example
document.links[0].href
In the above example, the first link in the document is accessed by the links i.e., a child object of the document object.
Here,
(i) The document specifies that document object is accessed by a user.
(ii) Links present in the links collection.
(iii) [0] specifies the first link of the document.
(iv) href specifies to retrieve the property for the given link.
Q16. Write about document object with its properties and methods.
Answer :
Document Object
The word “Document” in terms of programming aspects refers to the page which will be displayed as soon as the browser
window loads. It is a web page which can be created and displayed on browser.
Properties of Document Object
The following are the different properties of a document object.
1. alinkcolor
The color that has to be used to display the links in the document is defined by alinkcolor property.It can be used for both
read and write.
2. bgcolor
The bgcolor property indicates the background color of the document. It can be used for both read and write.
3. fgcolor
The fgcolor property indicates the foreground color (i.e., the text color in the document). It can be used for both read and
write.
4. lastModified
The lastModified property indicates the date on which the document was modified recently.
5. linkcolor
The linkcolor property indicates the color that has to be used for hyperlinks while displaying them in the document.
6. referrer
The referrer property indicates the URL of the document that refers the current document.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 179
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
7. title
This property defines the title of the document as it is defined between the <title></title> tags.
8. vlinkcolor
The vlinkcolor property indicates the color that has to be used for the links that are already visited by the current user
while displaying them in the document.
The above properties can be accessed by using dot notation.
Example
Title of the document can be accessed by using the following syntax,
document.title
Methods of Document Object
The following are the methods of document object.
(i) write(String)
It is used for adding text or elements to the document.
(ii) writeln(String)
It is used for adding a new line at the ending of the output.
Example
<!DOCTYPE html>
<html>
<body>
<p>Document Object Example</p>
<pre>
<script>
document.writeln(“Hello”);
document.writeln(“World!”);
</script>
</pre>
</body>
</html>
Output

Q17. Explain about forms collection and form elements with their properties and methods.
Answer :
Forms Collection
A form object is an array that contains elements of a form. The elements of this array object of the form can be
accessed by using elements property of that object. These elements contain only the form fields. The individual elements
are accessed using ordinal number or the name of the element as an index.
180 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Properties of Form Objects Properties of Form Elements
The following are the properties of form objects, The following are the properties of the form elements
(i) action used in the form.
(i) checked
It indicates the action attribute present in the <form>
element. It can be used for both read and write. Checked property returns true when a form element is
checked and it returns false when form element is not
(ii) length
checked. It is used for both read and write. This property
It specifies the number of form controls present in the is used by checkboxes and radiobuttons.
form. It is used only to read. (ii) disabled
(iii) method Disabled property returns true when it is disabled. It is
It indicates the value of an method attribute as get or used for both read and write. This property is used by
post in the <form> element. It is used for both read and all form elements except hidden elements.
write. (iii) form
(iv) name Form property is used to return a part of reference. It
It specifies the name attribute in the <form> element. It is used only to read. This property is used by all form
is used only to read. elements.
(v) target (iv) length
It specifies the target attribute in the <form> element. It Length property is used to return the count or the number
is used for both read and write. of options present in the <select> element. This is used
only to read. This can be used by select boxes.
Methods of Form Objects
(v) name
The following are the methods form objects,
Name property is used to access the value of the name
(a) submit( ) attribute. It is used only to read. This can be used by all
A form is submitted using submit( ) method. When the the form elements.
submit( ) method of the form is clicked, then the handler of (vi) Selectedindex
the submit event is called. All the form elements are checked Selectedindex property is used to return the index
inside the handler of submit event whether they contain correct number of the selected item in the form. It is used for
value. A form is submitted by calling submit( ) only when it both read and write. This can be used by select boxes.
passes this phase successfully. The URL that is specified by the (vii) type
action attribute is loaded or current page is loaded if no action
Type property is used to return the type of a form control.
attribute is specified.
It is used only to read. This can be used by all the form
All the desired tasks need to be performed before elements.
applying submit method. There must be a reference to the form (viii) value
object by using HTML DOM or other methods to invoke the
The value property is used to access the value attribute
submit( ) method on it.
given to the element or the content of a text input. It is
Example used for both read and write. This can be used by all the
document.forms[0]. submit( ); form elements.
(b) reset( ) Methods of Form Elements
The reset( )method is used to set the form fields to their The following are the methods of form elements.
default values. User need to have a reference to the form element (i) blur( )
before invoking this method. This is used by all the form elements except hidden
Form Elements elements. It forwards the focus present on the currently
The following are the different things used with the active element to the next element in the tabbing order.
elements in a form. (ii) click( )
(i) textfields This is used by all the form elements except text
elements. It simulates the mouse click on particular
This is used to read the user entered data or write the
element.
new data.
(iii) focus( )
(ii) checkboxes and radiobuttons
This is used by all the form elements except hidden
This is used for testing whether checked or unchecked. elements. It provides focus on the element.
(iii) buttons (iv) select( )
This is disabled whenever an user chooses any option. This is used by text elements except hidden elements.
(iv) select Boxes It is used to select the text of the element.
This is used for selecting an option from the list of pre- An example to illustrate different form elements is as
define options. given below,
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 181
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Example
<html>
<title>Forms</title>
<body>
<h1>Application Form</h1>
<form>
<table>
<tr>
<td>
<label for= “name”>Name</label>
</td>
<td>
<input type= “text” id= “name” name= “username”>
</td>
</tr>
<tr>
<td>
<label for= “email”>Email</label>
</td>
<td>
<input type= “text” id= “email” name= “usermail”>
</td>
</tr>
<tr>
<td>
<label for= “pass”>Password</label>
</td>
<td>
<input type= “password” id= “pass”>
</td>
</tr>
<tr>
<td>
<label for= “photo”>Photo</label>
</td>
<td>
<input type= “file” id= “photo”>
</td>
</tr>
<tr>
<td>
<label>Languages known</label>
</td>
<td>
<label>
<input type= “checkbox”> English</label>
<label>
<input type= “checkbox”> Telugu</label>
<label>
182 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
<input type= “checkbox”> Hindi</label>
</td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<label>
<input type= “radio” value= “f” name= “gender”>
Female</label>
<label>
<input value= “m” type= “radio” name= “gender”>
Male</label>
</td>
</tr>
<tr>
<td>
<label for= “city”>City</label>
</td>
<td>
<select id= “city” name= “city”>
<option>--Select City--</option>
<option>Hyderabad</option>
<option>Warangal</option>
<option>Bangalore</option>
<option>Chennai</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Address</label>
</td>
<td>
<textarea rows= “4” cols= “40”></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type= “submit” value= “Submit”>
<input type= “reset”>
</td>
</tr>
</table>
</form>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 183
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

Q18. Discuss about images collection with their properties.

Answer :
Images Collection
Images collection specifies the references for images. These are also referenced by name or using index number provided
in the collection. The src attribute for the second image can be denoted by the following syntax.
document.images[1].src
Properties of Image Object
The following are the properties of an image object.
(i) border
The border property of the <img> element is used to specify the width of the border in terms of pixels. It can be used for
both read and write.
(ii) complete
The complete property is used to specify whether the given image is loaded successfully. It is used only for reading.
(iii) height
The height property of an <img> element is used to specify the height of the image as pixels. It is used for both read and
write.
(iv) hspace
The hspace property of an <img> element is used to specify the space above and below the image to separate it from the
surrounding elements. It is used for both read and write.
(v) lowsrc
The lowsrc property of <img> element is used to specify the lower resolution version of the image. It is used for both
read and write.
(vi) name
The name property of an <img> element is used to specify the name of an image. It is used for both read and write.
(vii) src
The src property of an <img> element is used to specify the location of file. It can be used for both read and write.
(viii) vspace
The vspace property of an <img> element is used to specify the space between the left and right of the image that is
separated from the surrounding elements. It can be used for both read and write.
(ix) width
The width property of an <img> element is used to specify the width of an image interms of pixels. It can be used for
both read and write.
184 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Methods
Image object doesnot have any methods in the level 0 DOM.
Example
<!DOCTYPE html>
<html>
<body>
<img src=“D:\image.jpg” alt=“flower” width=“150” height=“120”>
<img src=“D:\image1.jpg” alt=“flower” width=“150” height=“120”>
<p>Click the below button to display the number of images in the document.</p>
<button onclick=“cal()”>click</button>
<p id=“demo”></p>
<script>
function cal()
{
var y = document.images.length;
document.getElementById(“demo”).innerHTML = y;
}
</script>
</body>
</html>
Output

Q19. What are the different types of objects in Javascript.

Answer :
The three different types of objects in javascript are as follows,
(i) W3C DOM Objects
Different browsers contain different objects that are provided to have control over a document.
(ii) Built-in Objects
Javascript contains many objects that are in built such as date, math, browser etc., these objects have their own usage and
functionality. For example, date object is used for providing date and time functions.
(iii) Custom Objects
When an advanced javascript is started then Javascript objects are created based on their functionality for example,
validation object is used for validating forms.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 185

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
3.1.3 Variables, Operators, Functions
Q20. Explain about variables in Javascript.
Answer :
Variable
A variable is a data item that stores the user defined values. It can be manipulated at any time. In JavaScript, the variables
are same as the other programming language variables. If a value is given to ‘a’ variable then this is called assignment.
Variable is declared with “var” keyword.
Syntax
var variable = value1, value2, ... valuen;
Example
var a, b, c;
a = 10
b = 20 + a
c=b*a
Here, a and b are two variables.
Names of Variables
A name given to a variable is called variable name. In JavaScript, there are some rules for naming variables,
1. A variable name should begin either with an underscore ( _ ) or a letter.
2. Spaces cannot be used in variable names.
3. Variable Names in JavaScript are case-sensitive. The meaning of ‘a’ is different from ‘A’ and ‘aA’ is different from ‘AA’, etc.
4. Unlike programming languages, reserved keywords in JavaScript cannot be used as variable names.
Example
College_name, a, A, sum, _ sum.
Declaration of a Variable in Java Script
A variable is created by preceding it with the keyword ‘var’ despite of any data will be stored in that variable.
Syntax
var variable_name;
Example
var x;
Assigning a Value to a Variable
A value can be assigned to a variable by using an assignment operator. The value can be changed even though the value
for a variable is already assigned.
Example
Var a = 10
a = 25
Now, the value for variable a is changed to 25.
Example
<html>
<body>
<script language=“javascript”>
var a=10,b=20,c=a+b;
document.write(“Sum=”,c);
</script>
</body>
</html>
Output

186 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Lifetime of a Variable
Generally, JavaScript supports outward scoping. This means that, the code present in a curly brackets can have access to
the code present outside it. But, the code outside curly brackets cannot have access to the code present inside the curly brackets.
Basically, scope rules are defined for variables and functions which specifies the portion of the program where a variable
or a function can be accessed.
Scope Rules for Variables
The scope rules for variables are of two types,
(i) Local scope
(ii) Global scope.
(i) Local Scope
If the variable is declared inside a function then the variable is said to have a local scope. In this case, a variable can be
accessed only within the function itself.
Example
<html>
<head>
<title>Local Scope</title>
</head>
<body>
<script language=“JAVASCRIPT”>
var x = “Global”;
function printValue()
{
var x = “Local”;
document.writeln(x);
}
printValue();
</script>
</body>
</html>
Output

(ii) Global Scope

If the variable is declared out of function then the variable is said to have global scope. In this case, the variable can be
accessed any where in the program.
Example
<html>
<head>
<title>Global Scope</title>
</head>
<body>
<script language=”JAVASCRIPT”>
var x = “Global”;
function chkScope()
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 187
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
{
var y = “Local”;
y = x;
document.writeln(y);
}
chkScope();
document.writeln(x);
</script>
</body>
</html>
Output

JavaScript does not support the blocked scope. This is the scope wherein every set of braces will have their own scope.
Q21. What is an operator? What are the different types of operators?
Answer : Model Paper-II, Q11(a)

Operator
An operator performs mathematical or logical operations. They are used to manipulate data and variables called operands.
It tells the computer about the operation to be performed on the operands.
Types of Operators
The various types of operators used in javascript are as follows,
1. Arithmetic Operators
Arithmetic operators are the mathematical operators that are used to perform basic arithmetic operations. Various
arithmetic operators are as follows,
(i) Addition (+)
(ii) Subtraction (–)
(iii) Multiplication (*)
(iv) Division (/)
(v) Modulus (%)
(vi) Increment (++)
(vii) Decrement (– –).
(i) Addition (+) Operator
It is a addition/plus operator which performs numeric addition. It performs addition operation when used on integers and
it performs concatenation when used on strings.
Examples
(a) var sum = 6 + 4; //result will be 10
(b) var value = “Hello” + “World”; //result will be Hello World
(ii) Subtraction(–) Operator
It is a subtraction/minus operator that is used to perform numerical subtraction.
Example
result = 5 – 2; //result will be 3.
188 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
(iii) Multiplication(*) Operator (b) Pre Decrement
It is a multiplication operator that is used to perform x=2
numerical multiplication.
y = – – x; //y will be 1
Example
Example
result = 6 * 2; //result will be 12
<html>
(iv) Division(/) Operator
<head>
It is a division operator which is used to perform
numerical division. <title>Arithmetic operators</title>
Example </head>
result = 10/2; //result will be 5 <body>
(v) Modulus(%) Operator <script language = “JAVASCRIPT”>
It is a modulus operator which returns remainder as the var a=5;
result.
var b=4;
Example
var linebreak = “<br/>”;
result = 5 % 2; //result will be 1
document.write(“a+b=” + (a+b));
(vi) Increment(++) Operator
document.write(linebreak);
It is an increment operator which increments the value
by 1. There are two types of increment operators namely document.write(“a - b =”+ (a-b));
pre increment and post increment. The pre increment
operator returns the final result after incrementing. document.write(linebreak);
The post increment operator returns the value before document.write(“a*b =”+ (a*b));
incrementing the value.
document.write(linebreak);
Example
document.write(“a / b =”+ (a/b));
(a) Post Increment
document.write(linebreak);
x = 2;
y = x + +; //y value will be 2 document.write(“a % b =”+ (a%b));

(b) Pre Increment document.write(linebreak);

x=2 document.write(“++a =” + (++a));

y = + + x //y value will be 3 document.write(linebreak);

(vii) Decrement(– –) Operator document.write(“a++ =” + (a++));

It is a decrement operator that decrements the value by document.write(linebreak);

1. There are two types of decrement operators, namely
document.write(“--b =”+ (--b));
pre decrement and post decrement. The pre decrement
operator returns final result after decrementing the value. document.write(linebreak);
The post decrement operator returns the initial value
before decrementing it. document.write(“b-- =”+ (b--));

Example document.write(linebreak);

(a) Post Decrement </script>

x = 2; </body>
y = x – –; //y will be 2 </html>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 189

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

2. Assignment Operators
Assignment operators are used to assign values to variables. The basic assignment operator is ‘=’ which assigns the value
at the right side to the operand at its left side. The below tables shows various assignment operators.
Operator Example
(i) += x + = y (or) x = x + y
(ii) –= a – = b (or) a = a – b
(iii) *= a* = b (or) a = a * b
(iv) /= a / = b (or) a = a / b
(v) %= a % = b (or) a = a % b
(vi) << = a << = b (or)a = a << b
(vii) >> = a >> = b (or) a = a >> b
(viii) >>> = a >>> = b (or) a = a >>> b
(ix) &= a & = b (or) a = a & b
(x) |= a | = n (or) a = a | b
(xi) ^= a ^ = b (or) a = a ^ b
Example
<html>
<body>
<title>Assignment Operators</title>
<script type=“text/javascript”>
var a = 15;
var b = 12;
var linebreak = “<br />”;
document.write(“Value of a => (a = b) =>”);
result = (a = b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a += b) =>”);
result = (a += b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a -= b) =>”);
result = (a -= b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a *= b) =>”);
result = (a *= b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a /= b) => “);
190 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
result = (a /= b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a %= b) =>”);
result = (a %= b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a <<= b) =>”);
result = (a <<= b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a >>= b) =>”);
result = (a >>= b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a >>>= b) =>”);
result = (a >>>= b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a &= b) =>”);
result = (a &= b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a != b) =>”);
result = (a != b);
document.write(result);
document.write(linebreak);
document.write(“Value of a => (a ^= b) =>”);
result = (a ^= b);
document.write(result);
document.write(linebreak);
</script>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 191

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
3. Comparison Operators
These operators are used to compare numeric and string operands. Some of the comparison operators are as follows,
v >: It returns true if the operand at left side is greater than the operand at right side.
v <: It returns true if the operand at left side is less than the operand at right side.
v > =: It returns true if the operand at left side is greater than or equal to the operand at the right side.
v < =: It returns true if the operand at left side is less than or equal to the operand at the right side.
= = (equal) and ! = (not equal) Operator
The equal to (= =) operator is used to compare two operands. It returns true if they are equal. The not equal (! =) operator
is used to compare the operands for the opposite condition. It returns true if the two operands are not equal. But they work
differently when used with different data types. The boolean, numeric and string types are tested by value whereas arrays,
functions and objects are tested by reference. If the operands differ in their type, they are converted to same type.
Example
<html>
<body>
<title>Comparison Operators</title>
<script type= “text/javascript”>
var a =7;
var b =25;
var linebreak = “<br />”;
document.write(“(a == b) =>”);
result = (a == b);
document.write(result);
document.write(linebreak);
document.write(“(a < b) =>”);
result = (a < b);
document.write(result);
document.write(linebreak);
document.write(“(a > b) =>”);
result = (a > b);
document.write(result);
document.write(linebreak);
document.write(“(a != b) =>”);
result = (a != b);
document.write(result);
document.write(linebreak);
document.write(“(a >= b) =>”);
result = (a >= b);
document.write(result);
document.write(linebreak);
document.write(“(a <= b) =>”);
result = (a <= b);
document.write(result);
document.write(linebreak);
</script>
</body>
</html>
192 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Output

4. Logical or Boolean Operators

The operators which return the boolean values true or false are called as logical operators or boolean operators. Various
logical operators are &&, | | and !.
(a) && Operator
&& operator is used for checking whether the two conditions are true.
Example
(x > y && a = = 1)
The above expression when evaluated returns true if the two conditions are satisfied.
(b) \\ Operator
\\ operator is used for checking if any one of the condition is true among the given expression.
Example
(x > 5 \\ a = 1)
The above expression when evaluated returns true if any one of the condition is satisfied.
(c) ! Operator
! operator is used for checking the given condition is true or not.
Example
!(x > y)
The above expression when evaluated returns true if the values given to it satisfy the condition.
Example
<html>
<body>
<title>Logical Operators</title>
<script type=“text/javascript”>
var a = true;
var b = false;
var linebreak = “<br />”;
document.write(“(a && b) =>”);
result = (a && b);
document.write(result);
document.write(linebreak);
document.write(“(a || b) =>”);
result = (a || b);
document.write(result);
document.write(linebreak);
document.write(“!(a && b) =>”);
result = (!(a && b));
document.write(result);
document.write(linebreak);
</script>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 193
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

5. String Operators
“+” operator is used for adding the text to the strings.
Example
word1 = “Hello”
word2 = “World”
word = word1 + word2
Concatenation is defined as the addition operation on two strings
Program
<html>
<body>
<title>String Operator</title>
<p id=“demo”></p>
<script>
var a = “Hello”;
var b = “World”;
c=a+b;
document.write(c);
</script>
</body>
</html>
Output

Q22. Explain about functions used in Javascript.

Answer :
Functions
A function is a self contained block of code that performs specific and well defined tasks. It simplifies complex task by
dividing the program into modules. They are as follows,
(i) Function Declaration
Function declaration declares a function that consists of a function type (or return type), function name parameter (or
argument) list and a terminating semicolon. Function declaration is also called function prototype. A function must be declared
before it is invoked.
194 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Syntax
Function function_name (parameters)
(ii) Function Definition
A function definition is the complete description of a particular operation. Actually a function definition tells the operation
to be performed. A function definition contains a function body (a block of statements) in addition to function name, arguments
list and return type.
Syntax
Function function_name(parameters)
{
statements;

}
(iii) Function Call
A function can be called by using function name and a list of actual parameters enclosed in paranthesis. When a function
call is encountered, the control is transferred to the respective function, it is executed and the return value is returned to the
function which called it.
Syntax
function_name(parameters)
Example
<HTML>
<HEAD>
<TITLE>Functions</TITLE>
<SCRIPT>
function hello( )
{
document.write(“Hello”);
}
hello(); //function calling
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Output

Return Statement
Return statement is used to return a value or a result. This statement is used to specify the value that is returned when
a function is called.
Example
Consider the below example that calculates the area of a rectangle by using a function,
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 195
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Program
<html>
<head>
<script type=“text/JavaScript”>
function Area_Rectangle(length, width)
{
area = length * width;
return area;
}
</script>
<title>Area of a Rectangle</title>
</head>
<body>
<form name=“frmArea”>
Enter the length and width of your rectangle to calculate the area:<br />
Length: <input type=“text” name=“txtLength” size=“4” /><br />
Width: <input type=“text” name=“txtWidth” size=“4” /><br />
<input type=“button” value= “Calculate Area” onclick= “alert(Area_Rectangle(document.frmArea.txtLength.value,
document.frmArea.txtWidth.value))” />
</form>
</body>
</html>
Output

3.1.4 Control Statements, Looping, Events

Q23. What are the different types of conditional or control statements.
Answer :
Conditional Statements
Conditional statements can be defined as the statements get executed based on a specific condition. If the condition is
true, block of statements are executed. Otherwise, control flow comes out of the block.
1. if
‘if’ is the most basic control statement which supports execution of certain statements after satisfying a condition contained
in it.
Syntax
if (condition)
statement;
Example
<html>
<head>
<title>Example of If Statement</title>
196 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
</head>
<body>
<script language = “JAVASCRIPT”>
var x=2;
if(x>0)
{
document.write(x + “is a positive number”);
}
</script>
</body>
</html>
Output

2. if-else
‘if-else’ is an extension to ‘if’ control statement. The only difference between them is the ‘else’ statement contain certain
block of statement(s) which get’s executed only if its superior ‘if’ condition becomes false.
Syntax
if (condition)
statement;
else
statement;
Example
<html>
<head>
<title>Example of If-else Statement</title>
</head>
<body>
<script language = “JAVASCRIPT”>
var x=-2;
if(x>0)
{
document.write(x + “is a positive number”);
}
else
{
document.write(x + “is a negative number”);
}
</script>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 197

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
3. Switch
A ‘switch’ statement is a multi-way decision making statement.
Syntax
switch(expression)
{
case constant1: statement-1;
break;
case constant2: statement-2;
break;
case constantn: statement-n;
break;
default: default-statement;
break;
}
statement next;
Here, the expression is a valid expression and constant is the result of the expression. When the constant value is a character,
it has to be enclosed within single quotes.
The value of the expression is evaluated and it is compared with constant case values. When match is found, the
corresponding statement block associated with the case is executed.
Example
<html>
<title>Example of Switch</title>
<body>
<script>
switch(new Date( ).getDay( ))
{
case 0:
day = “Sunday”;
break;
case 1:
day = “Monday”;
break;
case 2:
day = “Tuesday”;
break;
case 3:
day = “Wednesday”;
break;
case 4:
day = “Thursday”;
break;
case 5:
day = “Friday”;
break;
case 6:
day = “Saturday”;
break;
} document.write(day);
</script>
</body>
</html>
198 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Output

Q24. What are the different types of loops?

Answer :
Looping
Looping is a process of executing a statement until the given condition is true. It is necessary to terminate the loop as soon
as the required task is completed. Hence, a condition is used to control the loop before or after the execution of every block of
code. Various types of loops used in JavaScript are illustrated as follows,
1. for loop
2. while loop
3. do-while loop.
1. for Loop
A set of instructions can be executed repeatedly for a specific number of times by using for loop. The general syntax of
it is as follows,
Syntax
for([initial exp]; [condition]; [update exp])
{
statements;
}
The for loop contains three parts namely the initial expression, a conditional expression and the update expression. The
initial expression will be executed only once while entering the loop. The body of the loop will be executed if and only if
the condition is true. The ‘update exp’ will be executed at the end of the loop to update the variable. This procedure will
be continued until the condition satisfies.
Example
<html>
<title>Example of for</title>
<body>
<script>
for(i=0;i<5;i++)
{document.writeln(i+ ‘ ’);}
</script>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 199

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
2. while Loop
This loop is used to execute a set of statements until the condition remains true. The general syntax of it is as follows,
Syntax
while(condition)
{
Statements;
}
The condition will be executed at the beginning of the loop and in every iteration. The body of the loop will be executed
only if the condition is true. If not, the control of execution goes to the end of while loop. The variable will be updated at
the end of the loop.
Example
<html>
<title>Example of while</title>
<body>
<script>
i=0;
while(i<5)
{
document.writeln(i+’ ‘);
i++;
}
</script>
</body>
</html>
Output

3. do-while Loop
do-while loop is same as that of while loop but the condition for it is specified at the end of the loop. The general syntax
of it is as follows,
Syntax
do
{
Statements;
}
while(condition);
The body of the loop gets executed atleast once even if the specified condition is false.
Example
<html>
<body>
<script type=”text/javascript”>

200 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
var i = 0;
do
{
document.write(+ i + “<br />”);
i++;
}
while (i < 5);
</script>
</body>
</html>
Output

Infinite Loops and Break Statement

An expression that returns true will end with an infinite loop. This will lead to hangup of the program and may even crash
the computer, webbrowsers are trying to find infinite loops and stop that loop. A break statement is used to skip the infinite loop.
This is used to prevent a loop from executing multiple times.
Example
<html>
<body>
<title> Infinte Loop</title>
<script>
var text = “”;
var i = 0;
while (i < 5) {
document.write(“The number is ” + i + “<br/>”);
i++;
if (i == 3)
{
break;
}
}
</script>
</body>
</html>
Output

In the above program, the execution terminates when a break statement is encountered.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 201

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q25. Explain about events in Javascript with its event handlers.
Answer :
Event
Responses provided by the browser as a response to user’s interactions are referred as events. For example, playing audio
clip as soon as the page is loaded, generating informative text when mouse pointer is moved through a certain region of the web
page, submtting user entered data to the server when submit button is clicked etc., are the types of events.
Event Handler
Once the event is generated, there is often requirement of code to process these events. Such code is known as event
handler. In general, event handlers are of two types.
(a) Interactive Event Handlers
The event handlers which simply rely on the user’s activity to be invoked are interactive event handlers.
Example: onClick, onBlur, etc.
(b) Non-Interactive Event Handlers
The event handlers which do not rely on the user’s to be invoked are non-interactive event handlers.
Example: onPageLoad.
Types of Events
The two types of events are used to trigger scripts are as follows,
1. Window Events
Window events are the events that occur as soon as something happens to the window. They occur when a page loads or
windows load or when the focus moves to and from a window or frame.
2. User Event
User events are the events that occur when user interacts with page elements by using mouse or keyboard or other pointing
device.
Commonly Used Event Handlers

Event Description
onload It occurs when the page loads (this can be used to load images, documents, frameset).
onunload It occurs when the user quits a document or frameset i.e., a page is unloaded.
onclick It occurs when a link, client side image map area, or a form element (like button) is clicked.
ondbclick It occurs when an element is double clicked.
onmousedown It occurs when the user presses a mouse button
onmouseup It occurs when the user releases a mouse button
onmouseover It occurs when the mouse is moved over a link or an area of client side image map.
onmousemove It occurs when the user moves the mouse.
onmouseout It occurs when the mouse is moved out of a link or an area of client side image map.
onkeypress It occurs when the key is pressed and released over the element.
onkeydown It occurs when the user presses a key.
onkeyup It occur when the user releases the key.
onfocus This event will be called when an element like a document, window, frameset, or form element
gets the current input focus.
onsubmit It occurs when the user presses a submit button.
onreset It occurs when the user clicks the reset button.
onselect It occurs when the text is selected in a text field or a text area.
onblur It invokes as soon as any text, data or image turns blur (or object losses its focus).
onchange It invokes whenever data in any of the HTML control (textarea, textfield etc.) gets changed.
202 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Example
<a href = “ ”
onmouseover = “document.images.link.src = ‘images/click-img1.fig’;”
onmouseout = “document.images.link.src = ‘images/click-img2.gif’;”>
<img src = “images/click-img2.gif” width = “150” height = “100” border = “0” name = “links”>
</a>
Program
Events
<HTML>
<HEAD>
<TITLE>Script to demonstrate the usage of frequently used events</TITLE>
</HEAD>
<BODY onLoad=’alert(“Examples of javascript events”)’ >
<H1 align=”center”>Javascript Events</H1>
<ul>
<li>onBlur EventHandler:
<input type=text value=”click here and see the result”
size=”20” onBlur= ‘alert(“NOT CLEAR!”)’>
<BR>
<BR>
<li>Onclick Eventhandler:
<input type=button value=”click here” onClick= ‘alert(“Clicked”)’>
<BR>
<BR>
<li>onChangeEventHandler:
<input type=text value=”Alter the text here” size=20 onChange=’alert(“Changed”)’)>
<BR>
<BR>
<li>onDblclick Eventhandler:
<input type=button value=”Double click here” onDblClick=’alert(“Double clicked”)’>
<BR>
<BR>
<li>onFocus Eventhandler:
<input type=text value=”click here” onFocus=’alert(“Focus gained”)’>
<BR>
<BR>
<li>onKeyDown Eventhandler:
<input type=text value=”Press any key and release” size=20 onKeyDown=’alert (“Key Down!”)’>
<BR>
<BR>
<li>onKeyPress Eventhandler:
<input type=text value=”Press any key here” size=20 onKeyPress=’alert (“key was pressed”)’>
<BR>
<BR>
<li>onKeyUp Eventhandler:
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 203
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<input type=text value=”Press any key and release” onKeyUp=’alert(“Key up”)’>
<BR>
<BR>
<li>onMouseDown Eventhandler:
<input type=text value=”click mouse key don’t release”size=20
onMouseDown=’alert(“Mouse Down”)’>
<BR>
<BR>
<li>onMouseMove Eventhandler:
Traverse the mouse through this text
<A href=” “onMouseMove=’alert(“mouse traversed”)’>Sure Publications</A>
<BR>
<BR>
<li>onMouseOut Eventhandler:
Place the mouse pointer here
<A href=” “onMouseOut=’alert(“mouse out”)’>Javascript programming</A> Release here
<BR>
<BR>
<li>onMouseUp EventHandler:
<input type=”Button” value=”Click Me” onMouseUp=’alert(“MouseUp”)’>
<BR>
<BR>
<li>onReset EventHandler:
<input type=”RESET” value=”ResetDemo”>
<BR>
<BR>
<li>onSelect EventHandler:
<input type=”text” value=”Select me” size=20 onSelect=’alert(“TextSelected”)’>
<BR>
<BR>
<li>onSubmit EventHandler:
<input type=”submit” value=”submit”>
<BR>
<BR>
<li>onUnLoad event handler:
Follow the given link <a href=”https://globaljobfair.com”>GlobalJobFair</a>
</A>
<BR>
<BR>
</ul>
</BODY>
</HTML>
204 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Output

3.1.5 Built-in Objects

Q26. What are the different types of Built-in objects in Javascript?
Answer :
The following are the different types of Built-in objects in javascript.
1. String Object
For answer refer Unit-III, Page No. 205, Q.No. 27.
2. Date Object
For answer refer Unit-III, Page No. 208, Q.No. 28.
3. Math Object
For answer refer Unit-III, Page No. 211, Q.No. 29.
4. Window Object
For answer refer Unit-III, Page No. 215, Q.No. 31.
5. Array Object
For answer refer Unit-III, Page No. 213, Q.No. 30.
Q27. Discuss about string object with its properties and methods.
Answer :
String Object
String function forms one of the important consequences in JavaScript. In general terms, strings refer to set of characters
(such as alphabets, special characters, numerals, combination of them) enclosed within double quotes. Like math, even strings
are treated as object which supports numerous methods.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 205
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Property of String Object
Length
It is the property used for string object. It is used to specify the count or number of a characters given in a string.
Methods
The following are the different methods or string objects.

Method Description

1. anchor(name) It creates an anchor element with the name attribute.

2. big( ) It is used to display the text as given in a <big> element.
3. bold( ) It is used to display the text as given in a <bold> element.
4. charAt(index) It returns a character whose index value is supplied as an argument to the method.
5. fixed It is used to display the text as given in a <tt> element.
6. fontcolor(color) It is used to display the text as given in a <font> element along with the value of color attribute.
7. fontsize(fontsize) It is used to display the text given as in a <font> element along with the value of size attribute.
8. indexof(search value, It usually takes character(s) as argument and returns the numeric value, which is nothing
[FromIndex]) but the position of that character(s) in the given string.
9. italics( ) It is used to display the text given as in a <i> element.
10. lastIndexOf(search val- It again takes character(s) as an argument and returns the numeric value, which is nothing
ue, [fromIndex]) but the position of that character (s) in the given string. The difference between lastIndexOf( ) and
index Of( ) is that the prior start searching string (for the given character(s)) from the end
of the string and post from the beginning. But both of the methods returns numeric values
starting from the beginning of the string.
11. link(targetURL) It is used to create a link in the given document.
12. small( ) It is used to display the text as given in the <small> element.
13. strike( ) It is used to display the text as given in the <strike> element.
14. sub( ) It is used to display the text as given in the <sub> element.
15. substr(start, [length]) It takes two arguments “index” and “length” respectively. The index argument specifies the
initiating character and the length argument specifies the length of characters to be displayed.
16. substring(start position, It takes two arguments “index” and “end” respectively. Here, index argument specifies the
end position) initiating character and the end specifies the last character to be displayed.
17. sup( ) It is used to display the text given as in the <sup> element.
18. toLowerCase( ) It takes a string of all uppercase characters and convert them into their equivalent lowercase
strings. If the string contains few non-characters, then they remain unchanged.
19. toUpperCase( ) It takes a string of all lowercase characters and converts them into their equivalent upper
case string. If the string contains few non-characters, then they remain unchanged.

Example
<html>
<head>
<title>String Objects</title>
</head>
<body>
<script type=”text/javascript”>
var str = new String( “SIA Publishers & Distributors” );
var URL = “http://www.siapublishers.com/”;
206 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
var index = str.indexOf( “Publishers” );
document.writeln(“This is a method of str.charAt(0) :” + str.charAt(0));
document.write(“<br /><br />This is a method of indexOf found String :” + index );
var index = str.lastIndexOf( “Distributors” );
document.write(“<br /><br /> This is a method of lastIndexOf found String :” + index );
document.write(“<br /><br />This is a method of substr of (2,3) : “ + str.substr(2,3));
document.write(“<br /><br />This is a method of substring of (4,5) : “ + str.substring(4,5));
document.write(“<br /><br /> This is a method of LowerCase : “+str.toLowerCase( ));
document.write(“<br /><br /> This is a method of UpperCase : “ +str.toUpperCase( ));
document.write(“<br /><br /> This is a method of bold : “ +str.bold());
document.write(“<br /><br /> This is a method of fontcolor : “ +str.fontcolor( “Red” ));
document.write(“<br /><br /> This is a method of fontsize : “ +str.fontsize( 2 ));
document.write(“<br /><br /> This is a method of italics : “ +str.italics( 4));
document.write(“<br /><br /> This is a method of link : “ +str.link( URL ));
document.write(“<br /><br />This is a method of small : “ +str.small());
document.write(“<br /><br /> This is a method of strike : “ +str.strike());
document.write(“<br /><br />This is a method of sub : “ +str.sub());
document.write(“<br /><br /> This is a method of sup : “ +str.sup());
</script>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 207

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q28. Explain about date object with its properties and methods.
Answer :
Date Object
Date is one of the important specifications in almost every programming discipline. Hence, JavaScript has reserved a
separate class in this aspect. This date class includes variety of methods to access the date.
Globally date/time is recognized in two ways i.e., UTC(Universal Time Coordinated) and local time. Universal time as
the name suggests is a standard followed through out the world. On the other hand, local time is the time of the system where
the script is currently residing.
Methods of Date Object
The following are the methods of date object.

Method Description
1. date( ) It is used to return a date object.
2. getDate( ) It is used to return the date of a date object i.e., from 1 to 31
3. getDay( ) It is used to return the day of a Date object. i.e., from 0 to 6 where 0 = Sunday, 1 =
Monday.
4. getMonth( ) It is used to return the month of a Date object i.e. From 0 to 11 where 0 = january.
5. getFullYear( ) It is used to return the year of a date object i.e., four digits.
6. getYear( ) It is used to return the year of a Date object by using only two digits i.e., from 0 to 99.
7. getHours( ) It is used to return the hours of a Date object. i.e., from 0 to 23.
8. getMinutes( ) It is used to return the minutes of a Date object. i.e., from 0 to 59.
9. getSeconds( ) It is used to return the seconds of a Date object. i.e., from 0 to 59.
10. getTime( ) It is used to return the number of milliseconds from midnight 1/1/1970.
11. getTimezoneOffset( ) It is used to return the time difference between the user’s computer and GMT.
12. parse( ) It is used to return the string date value that contains the number of Milliseconds from
january 01 1970 00 : 00 : 00.
13. setDate( ) It is used to set the date of the month in the Date object i.e., from 1 to 31.
14. setFullYear( ) It is used to set the year in the Date object. i.e., four digits.

15. setHours( ) It is used to set the hours in the Date object i.e., from 0 to 23.

16. setMinutes( ) It is used to set the minutes in the Date object. i.e., from 0 to 59.
17. setMonth( ) It is used to set the months in the Date object. i.e., from 0 to 11 where 0 = january.
18. setSeconds( ) It is used to set the seconds in the Date object. i.e., from 0 to 59.
19. setTime( ) It is used to set the milliseconds after 1/1/1970.
20. setYear( ) It is used to set the year in the Date object. i.e., from 00 to 99.
21. toGMTString( ) It is used for converting the Date object to string and set to GMT time zone.
22. toLocaleString( ) It is used for converting the Date object to a string and set to the current time zone
of the user.
23. toString( ) It is used for converting the Date object to the string.
Example
(i) Getting the Values
<html>
<head>
<title>Date Methods</title>
</head>
<body>
208 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
<script type=”text/javascript”>
var dt = Date();
document.write(“Date and Time :” + dt );
var dt = new Date( “Nov 27, 2018 12:35:00” );
document.write(“<br/><br/>Date is:” + dt.getDate() );
document.write(“<br/><br/>Day is :” + dt.getDay() );
document.write(“<br/><br/>Month is :” + dt.getMonth() );
document.write(“<br/><br/>FullYear is :” + dt.getFullYear() );
document.write(“<br/><br/>Year is :” + dt.getYear() );
document.write(“<br/><br/>Hours is :” + dt.getHours() );
document.write(“<br/><br/>Minutes is :” + dt.getMinutes() );
document.write(“<br/><br/>Seconds is :” + dt.getSeconds() )
document.write(“<br/><br/>Time is :” + dt.getTime() );
document.write(“<br/><br/>TimezoneOffset is :” + tz );
</script>
</body>
</html>
Output

(ii) Setting the Values

<html>
<head>
<title>Date Methods</title>
</head>
<body>
<script type=”text/javascript”>
var dt = Date();
document.write(“Date and Time :” + dt );
var dt = new Date( “Nov 27, 2018 02:40:00” );
document.write(“<br/>”);

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 209

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
document.write(“<br/>”);
dt.setDate(25);
document.write(“Date is set as :”+dt );
document.write(“<br/>”);
document.write(“<br/>”);
dt.setMonth(07) ;
document.write(“Month is set as :”+dt );
document.write(“<br/>”);
document.write(“<br/>”);
dt.setFullYear(2004);
document.write(“FullYear is set as :”+dt );
document.write(“<br/>”);
document.write(“<br/>”);
dt.setYear(2000 );
document.write(“Year is set as :”+dt );
document.write(“<br/>”);
document.write(“<br/>”);
dt.setHours(13);
document.write(“Hours is set as :”+dt );
document.write(“<br/>”);
document.write(“<br/>”);
dt.setMinutes(20) ;
document.write(“Minutes is set as :”+dt );
document.write(“<br/>”);
document.write(“<br/>”);
dt.setSeconds(50) ;
document.write(“Seconds is set as :”+dt );
document.write(“<br/>”);
</script>
</body>
</html>
Output

210 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Q29. Write about Math object with its properties and methods.
Answer :
Math Object
Javascript has introduced various mathematical functions in order to perform various mathematical operations. These
mathematical functions or methods are entities of “Math” object.
Properties of Math Object
The following are the properties of math object.

Property Description
1. E It is used to return the value of base of a natural logarithm.
2. LN2 It is used to return the value of a natural logarithm of base 2.
3. LN10 It is used to return the value of a natural logarithm of base 10.
4. LOG2E It is used to return the value of a base-2 logarithm of E.
5. LOG10E It is used to return the value of a base-10 logarithm of E.
6. PI It is used to return the value of Pi.
7. SQRT1-2 It is used to return the value of 1 divided by the square root
of 2.
8. SQRT2 It is used to return the value of square root of 2.

Methods of Math Object

The following are the methods or math object.

Method Description
1. abs(x) It displays the absolute value of the numeric entity entered into it.
2. acos(x) It displays the arc cosine value of x.
3. asin(x) It displays the arcsine value of x.
4. atan(x) It displays the arctangent value of x.
5. atan2(y, x) It displays the tangent angle from the x-axis to a point.
6. ceil(x) It displays the rounded value of the integer entered into it. The values
displayed as output always remains greater than the value supplied.
7. cos(x) It displays trigonometric cosine value for the numeric value passed to it.

8. exp(x) It displays exponential(i.e., enumeric) value of the numeric value passed to it.

9. floor(x) It usually rounds the numeric(supplied to it) to the largest integer.

10. log(x) It displays logarithmic(loge) equivalent value for the numeric value
supplied.
11. max(x, y) It displays maximum of two numerical values entered into it.
12. min(x, y) It displays minimum of two numerical values entered into it.
13. pow(x, y) When two numerals n1, n2 are supplied to it, then n1 forms the power
of n2 and the result displayed as an output.
14. random( ) It displays the random number between 0 and 1.
15. round(x) It rounds the value entered to its nearest integer.
16. sin(x) It displays trigonometric sine value for the numeric value passed to it.
17. sqrt(x) It displays the square root of the value entered into it.
18. tan(x) It displays trigonometric tangent values for the numeric value passed to it.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 211

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Example
<html>
<head>
<title>Math Objects</title>
</head>
<body>
<script type=“text/javascript”>
var value = Math.abs(20);
document.write(“<br /> abs Value is:” + value );
var value = Math.acos(-1);
document.write(“<br />acos Value :” + value );
var value = Math.asin(-1);
document.write(“<br />asin Value :” + value );
value = Math.atan(30);
document.write(“<br />atan Value :” + value );
var value = Math.atan2(30,85);
document.write(“<br />atan2 Value :” + value );
var value = Math.ceil(40.15);
document.write(“<br />ceil Value :” + value );
var value = Math.cos(40);
document.write(“<br />cos Value :” + value );
var value = Math.exp(20);
document.write(“<br />exp Value :” + value );
var value = Math.floor(35.9);
document.write(“<br />floor Value :” + value );
var value = Math.log(10);
document.write(“<br />log Value :” + value );
var value = Math.max(25, 7);
document.write(“<br />max Value :” + value );
var value = Math.min(12,10);
document.write(“<br />min Value :” + value );
var value = Math.pow(4,3);
document.write(“<br />pow Value :” + value );
var value = Math.random( );
document.write(“<br />random Value :” + value );
var value = Math.round( 55.7 );
document.write(“<br />round Value :” + value );
var value = Math.sin( 1 );
document.write(“<br />sin Value :” + value );
var value = Math.sqrt( 12 );
document.write(“<br />sqrt Value :” + value );
var value = Math.tan( 60 );
document.write(“<br />tan Value :” + value );
</script>
</body>
</html>
212 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Output

Q30. Write about Arrays in Javascript.

Answer :
Array
An array contains a set of similar items. But, in javascript an array contains different items. Arrays are similar to structure
variables and they can be accessed randomly by making use of index and the array name. Thus, arrays in javascript are also called
as associative arrays. This feature makes javascript arrays distinct than arrays of other languages.
Creating and Accessing the Array Elements
An array can be declared as follows,
var arr;
Elements can be allocated to this array by using the below statement,
arr = new Array(10);
An array is not initialized while it is allocated.
Arrays in javascript are considered as objects. They can also be created by making use of constructors. Constructors in
javascript are of three types. They are as follows,
v Array( );
v Array(number of elements);
v Array(List of elements separated by commas);
In the above statements, the first constructor will not accept any arguments. It creates an empty array. Elements can be
added to it when required. Consider the below statement,
var arr = new Array( );
It creates an array with length zero. Consider the below statement,
arr[3] = 5; //length 4
It adds an element at the location arr[3]. In addition to this, it also creates arr[0], arr[1] and arr[2]. But the values of them
are not defined but they can be assigned later on. If the value that is assigned is greater than or equal to the length of the array,
then the size of the array can be increased as per the requirement. This method is useful when the number of elements are not
known while array declaration.
The length property of an array object is used to store the number of array elements i.e., size of an array. The size of an
array can be changed modified by assigning a new value to the length property which is greater than the previous value of current
length.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 213
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Example
Week = new Array(“Sunday”, “Monday”, “Tuesday”, “Wednesday”);
document.write(week.length);
tostring( ) Method
tostring( ) method is used for converting the array into a string.
Example
document.write(‘value is’ + week.tostring( ));
Methods
The following are the methods of an array.
Method Description
1. concat( ) This method concatenates or merges arrays and returns a new array.
2. join(separator) This method joins the elements in an array into one string by using a default comma
as a separator. It is also possible to specify any separator between the array elements.
3. reverse( ) It is used to return the array elements in an reverse order.
4. slice( ) It is used to return a selected part of elements of an array.
5. sort( ) It is used to return the sorted array elements in an alphabetical or numerical order.
Example
<html>
<head>
<title>Array Objects</title>
</head>
<body>
<script type=”text/javascript”>
var alphabets = [“R”, “E”, “D”];
var numbers = [1, 3, 5];
var result = alphabets.concat(numbers);
document.write(“<br /> <br /> Concat value is:” +result );
var Fruits= [“Apple”, “Banana”, “Mango”, “Grapes”];
var str = Fruits.join(“+”);
document.write(“<br /><br /> Join value is :” + str );
var num = [7, 4, 9].reverse();
document.write(“<br /> <br /> Reverse value is :” + num );
document.write(“<br /><br /> Slice(0, 1) is :” +num.slice( 0, 1) );
var sorted = num.sort();
document.write(“<br /><br /> Sorted value is :” + sorted );
</script>
</body>
</html>
Output

214 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Q31. Discuss about window object with its properties and methods.

Answer :

Window Object

Each and every browser window or a frame contains a window object that is created by an instance of a <body> or
<frameset> element.

Example

The status property is used to change the text displayed on the browser’s status bar.

<script type = “text/javascript”>

function statusBarTexts( )

window.status = “can you see the window”;

</script>

The above code can be called in the <body> element as shown below,

<body onload = “statusBarText( )”>

Properties of Window Object

The following are the properties of a window object.

Property Description
1. closed A boolean value is used to indicate as true if a window is
closed.
2. defaultstatus It is used to display the default message on the browser’s
window status bar.
3. document It is used to show a document object which is saved in that
window.
4. frames An array consists of named child frames in the current
window.
5. history A history object that has the information of visited URL’s in
the same window.
6. location The location object specifies the URL of the current window.
7. name The name is used to specify the name of the window.
8. status A status is a temporary message that is set at any time to
display in the status bar.
9. statusbar A statusbar specifies whether the status bar can be visible or
not. It can be known by a boolean value (true or false).
10. toolbar The toolbar specifies whether the toolbar can be visible or
not. Its can be known by a boolean value (true or false).
11. top Top specifies the reference for the topmost window when
different windows are opened on the desktop.
12. window Window specifies the currently opened window or a frame.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 215

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Methods of an Window Object
The following are the methods of an window object.
Method Description
1. alert( ) It is used for displaying an alertbox with message and ok button.
2. back( ) It has the same effect as the browser’s back button.
3. blur( ) It is used for removing and focus or making it to loose its focus from the current
window.
4. close( ) It is used to close the current window.
5. confirm( ) It is used to confirm whether the user want to perform any action or not by
choosing any one option ok or cancel shown in the dialog box.
6. focus( ) It is used to provide focus to a particular window and make it as a top.
7. forward( ) It is similar to the clicking of the browser’s forward button.
8. home( ) It is used to allow the user to reach their browser’s designated homepage.
9. moveBy(horizantal pixels, vertical It is used to move the window by a given number of pixels with its current co-
pixels) ordinates.
10. moveTo(Xposition, Yposition) It is used to move the top left side of the window to the given x-y coordinates.
11. openlURL1name [1features]) It is used for opening a new browser window.
12. print( ) It is used to print the content of the current window.
13. prompt( ) It is used for creating a dialog box to enter an input by the user.
14. stop( ) It is used same as clicking the stop button in the browser.
Example
<html>
<body>
<title>Window Objects</title>
<script type= “text/javascript”>
function msg()
{
alert(“This is Alert method”);
var a= confirm(“This is Confirm method”);
if(a==true){
alert(“ok”);
}
else{
alert(“cancel”);
}
var b= prompt(“This is Prompt method”);
alert(“I am ”+b);
open(“http://www.google.com”);
setTimeout(
function(){
alert(“Google page is closed”)
},2000);
var myWindow = window.open(“ ”, “ ”, “width=200, height=100”);
myWindow.document.write(“<p>A new window!</p>”);
myWindow.blur();
}
</script>
<input type=“button” value=“Click it” onclick=“msg()”/>
</body>
</html>

216 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 217

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

3.2 WORKING WITH JAVASCRIPT

3.2.1 Practical Tips for Writing Scripts, Form Validation

Q32. What are the practical tips for writing Java Scripts?
Answer :
The following are the tips used for writing java scripts.
(i) There are many sites available on the internet which provide javascirpt code for the programmers. The examples of such
sites are www.HotScripts.com, www.JavaScriptKit.com, www.webreference.com/programming/javascript/, http://JavaS-
cript.Internet.com. The programmer need to check these sites on internet before writing the script.
(ii) The programmer can write usable code in addition to reusing the scripts and folders of others. Consider an example, user
creates many sites which has similar form that permits the users to contacts with the site owners. A form contains different
fields which are required to be filled/entered. A script can be created only once by a user and is used on any contact form
for any number of times.
(iii) External java script files are used for writing the script in one page and using it in more than one page. Example a newslet-
ter sign up from is created on every page of the site and the text entered by a user in the address field is checked by using
a script. If this script saved in any external javascript file then the script is not included in each page.
(iv) A special script folder is created to save the external scripts. This is used for improving the organization of site and direc-
tory structure.
218 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Q33. Write about form validation.
Answer : Model Paper-III, Q11(a)
Form Validation
Form validation is the process of verifying or validating the data that is entered by the user. That is form validation is
done inorder to check whether the user has entered data in all the mandatory fields and whether the user entered valid data in
valid fields etc. JavaScript is used to perform form validation.
Basic Validation
It checks whether all the mandatory fields have been filled. It uses a loop for this purpose. This loop goes through all the
fields in the form for checking the data.
Date Format Validation
It checks the correctness of the data entered in the form. This requires necessary logic in the code of the form.
Validation can be performed on both client-side and server-side. Java script allows the data to be validated on client side
itself so as to enable faster validation on server-side. This feature of JavaScript is attracting most of the developers.
Client-side Validation
The client side validation is generally performed on forms that gather information from the users. The JavaScript programs
written for this purpose connect event handlers to the form elements. This enhances the user interface and restricts the invalid
data to be sent to the server.
Server-side Validation
Web servers are responsible for performing server-side validation. It is basically done after the user input is sent to the
server.
Server-side javascript performs execution of program/script on webserver. Server-side scripts are usually written using
JSP. These languages are later embedded in HTML documents on servers file system. It (server-side script) deals with creation
of interactive websites. A user can directly connect to the databases using server-side statements.
Data validation is carried out with the help of certain function and attributes.
A form can be checked in different ways. Wherever a user clicks on submit button of the form then it is triggered by the
onsubmit event handler present in the <form> element. It is used for calling the validation function that is present in some other
script or in the head of the current document. This function returns true when a form is sent and it returns false when an error
occurred while sending a form. This has to be informed to the user. The values are assigned in the validation functions to return
whether script contains errors or not. Initially, true value is assigned and the script is verified with the user entered data. If an
error is found then it returns false value.
Example
Validation_Example.html
<html>
<head>
<title>Form validation Example</title>
<script type=”text/JavaScript”>
function validate(form)
{
var returnValue = true;
var username = form.txtUserName.value;
var password1 = form.txtPassword.value;
var password2 = form.txtPassword2.value;
if(username.length < 6)
{
returnValue = false;
alert(“Your user name should be at least \n 6 characters”);
form1.txtUserName.focus();
}
if (password1.length < 8)
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 219
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
{
returnValue = false;
alert(“Your password should be at least \n 8 characters”);
form1.txtPassword.value = “ ”;
form1.txtPassword2.value = “ ”;
form1.txtPassword.focus();
}
if (password1 != password2)
{
returnValue = false;
alert(“Your passwords did not match”);
form1.txtPassword.value = “”;
form1.txtPassword2.value = “”;
form1.txtPassword.focus();
}
return returnValue;
}
</script>
</head>
<body>
<form name= “form1” method= “post” action= “thanku.html” onsubmit= “return validate(this);”>
<div>
<label for= “txtUsername”>Username:</label>
<input type= “text” name= “txtUserName” id= “txtUserName” size= “12” />
</div>
<div>
<label for=”txtPassword”>Password: </td></label>
<input type=”password” name=”txtPassword” id=”txtPassword” size=”12” />
</div>
<div>
<label for= “txtPassword2”>Confirm your password:</label>
<input type= “password” name= “txtPassword2” id= “txtPassword2” size= “12” />
</div>
<div>
<input type=”submit” value=”Submit” />
</div>
</form>
</body>
</html>
thanku.html
<html>
<head></head>
<body>
<p> Thank you for your submission </p>
</body>
</html>
220 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Output
When the user enters two different passwords then the output will be as shown below,

When the user enters the correct details then the output will be as follows,

Q34. How the text fields in a form are checked?

Answer :
Consider the below example,
<!DOCTYPE html>
<html>
<head>
<script>
function validateF() {
var n = document.forms[“Form1”][“Name”].value;
var e = document.getElementById(“email”).value.indexOf(“@”);
if (n == “”) {
alert(“Name field must be filled “);
return false;
}
if (e == -1) {
alert(“E-mail id is invalid”);
return false;
}
}
</script>
</head>
<body>
<form name=“Form1” action=“Thanku.html” onsubmit=“return validateF()” method=“post”>
Name: <input type=“text” name=“Name”><br>
E-mail: <input type=“text” id=“email” size=“20” name=“mail”>
<input type=“submit” value=“Submit”>
</form>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 221
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Thanku.html
<html>
<body>
<p> Thank you for your submission </p>
</body>
</html>
Output

The <form> tag contains onsubmit attribute whenever as user clicks on submit button then the value specified to it
is run/executed. The validate function is called to return true or false.
When the above code is executed then the following things are checked.
(i) Username should be of minimum length
(ii) Password should be of minimum length
(iii) The two passwords should match.
Validate( ) function can be implemented in two ways,
(a) By creating a single function for checking form
(b) By creating re-usable functions.
(a) Single Function Approach
A single function is created to check a form by using validate( ) function. The validate function is called and notified
about the current form by passing the parameter value.
function validate<form>
{
}
This keyword is used in the <form> element to call a function to indicate a form.
Variable contains the values of the user entered in the text controls. Value property is used to store the value entered
by the user.
Example
For answer refer Unit-III, Page No. 219, Q.No. 33, Topic: Example.
(b) Reusable Functions Approach
Reusable functions are also used for checking a form. JavaScript files contain functions which can be reused.
validate( ) function is used to call two more functions present in the javascript library.
(i) Validate( ) Confirm Password( )
It checks for the passwords field whether they are valid.
(ii) Validate Maximum Length( )
It checks for the minimum number of characters entered by the user in the field.
222 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Example
<!DOCTYPE html>
<html>
<head>
<script>
function checkPassword(form)
{
password1 = form.password1.value;
password2 = form.password2.value;
if (password1 == ‘’)
alert (“Please enter the Password”);
else if (password2 == ‘’)
alert (“Please re-enter to confirm password”);
else if (password1 != password2) {
alert (“\n Passwords did not match!”)
return false;
}
else{
alert(“Passwords are matched: Welcome!”)
return true;
}
}
</script>
</head>
<body>
<form onSubmit = “return checkPassword(this)”>
<label for = “Username”>Username:</label>
<input type = “text” id = “Username” size = “10”/>
<span class = “msg”></span>
</div>
<div>
<label for = “password1”>password:</label>
<input type = “password” id = “password1” size “10”/>
<span class = “msg”></span>
</div>
<div>
<label for = “password2”>Confirm your password:</label>
<input type = “password” id = “password2” size = “10”/>
<span class = “msg”></span>
</div>
<div>
<input type = “submit” value = “login”/>
</div>
<div>
</form>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 223
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
The above function is used for checking whether the user has entered minimum number of characters.
Output

replace( ) method
The replace( ) method in javascript is used for replacing certain characters in the document with the specified
characters.
Syntax
string.replace(Old String, new String);
Example
<!DOCTYPE html>
<html>
<body>
<p id=”demo”>hello world!</p>
<button onclick=”rep()”>Click</button>
<script>
function rep() {
var str = document.getElementById(“demo”).innerHTML;
var str1 = str.replace(“hello”, “hi”);
document.getElementById(“demo”).innerHTML = str1;
}
</script>
</body>
</html>
Output

224 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Q35. Explain about regular expressions.
Answer :
Regular Expression
A regular expression is a string used in the process of pattern matching. In JavaScirpts, regular expressions are objects
supporting numerous predefined methods. Following are two examples of declaring regular expressions.
Method 1
var sample = “world”;
var data = “Welcome to the world of stars”;
data.match(sample);
Predefined method is used in order to search the string “data” using the regular expression “sample”.
Method 2
var sample = new RegExp (“world”);
var data = “welcome to the world of stars”;
sample.exec(data);
Predefined method is used in order to search the string “data” using the regular expression “sample”.
Method1 refers to static way of declaring the regular expression. Whereas method 2 is dynamic
The above two methods contain set of characters that are defined as regular expression. In order to implement the pattern
matching concept efficiently. The regular expression should contain certain symbolic templates. The usage of these symbolic
templates are governed by strict grammatical rules.
Following are the regular expression grammar applied while using the symbolic templates in javascripts.
\n
It is used for linefeed.
\r
It is used for carriage return.
\t
It is used for tab.
\v
It is used for vertical tab
\f
It is used for form-feed
\d
It is used for specifying a digit i.e, 0 to 9.
\D
It used for specifying the non-digit [i.e., (^ 0 – 9)].
\w
It is used to specify a word or a alphanumeric character i.e., [a – z or A – Z or 0 –9]
\W
It is used to specify a non-word character i.e., (^ a – z or A – Z or 0 – 9]
\s
It is used for a white-space character i.e.,[\t \v \n \r \f]
\S
It is used for a non-white space character i.e., [^\t \v \n \r \f]
The carriage return or linefeeds can be replaced with the <br/> tag as shown below,
replace (/ \r | \n | \r \n | \n \r | /g), <‘br/>’;
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 225
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Example
<!DOCTYPE html>
<html>
<body>
<title>Regular Expression</title>
<p>Click the below Button</p>
<button onclick=”func()”>Click</button>
<script>
function func() {
var str = “hello world\n”;
var pattern1 = /\n/;
var result1 = str.search(pattern1);
document.write(“This is the result of \\n :” +result1);
var str = “good morning\r”;
var pattern2 = /\r/;
var result2 = str.search(pattern2);
document.write(“<br> This is the result of \\r : ” +result2);
var str = “good \t afternoon”;
var pattern3 = /\t/;
var result3 = str.search(pattern3);
document.write(“<br> This is the result of \\t : ” +result3);
var str = “good evening\v”;
var pattern4 = /\v/;
var result4 = str.search(pattern4);
document.write(“<br> This is the result of \\v : ” +result4);
var str = “good night\f”;
var pattern5 = /\f/;
var result5 = str.search(pattern5);
document.write(“<br> This is the result of \\f : ” +result5);
var str = “monday 03-12”;
var pattern6 = /\d/g;
var result6 = str.match(pattern6);
document.write(“<br> This is the result of \\d :” +result6);
var str = “This is Alexa”;
var pattern7 = /\D/g;
var result7 = str.match(pattern7);
document.write(“<br> This is the result of \\D :” +result7);
var str = “Hello siri!”;
var pattern8 = /\w/g;
var result8 = str.match(pattern8);
document.write(“<br> This is the result of \\w :” +result8);
var str = “06/12 & 07/12”;
var pattern9 = /\W/g;
var result9 = str.match(pattern9);
document.write(“<br> This is the result of \\W :” +result9);
226 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
var str = “Wel come to the party”;
var pattern10 = /\s/g;
var result10 = str.match(pattern10);
document.write(“<br> This is the result of \\s :” +result10);
var str = “Harry is good”;
var pattern11 = /\S/g;
var result11 = str.match(pattern11);
document.write(“<br> This is the result of \\S :” +result11);
}
</script>
</body>
</html>
Output

Q36. How the characters are tested using test( )?

Answer :
The characters in the regular expression are verified using test method.
test( ) Method
It takes string as it’s argument and searches for a match in it by considering the sample characters string. Upon success it
return true, else false.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Test method</h2>
<p>Search for an letter “o” in the below line </p>
<p id=“demo”>Web Technologies</p>
<p id= “demo1”></p>
<script>
str= document.getElementById(“demo”).innerHTML;
document.getElementById(“demo1”).innerHTML = /o/.test(str);
</script>
</body>
</html>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 227

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

Q37. Discuss about the following,

(a) Select box options
(b) Radio buttons.
Answer :
(a) Select Box Options
Select Box has the select object that contains selected Index property that specifies the option selected by user. Its value
starts form 0.
Example
<!DOCTYPE html>
<html>
<body>
<form>
<select id= “Colors”>
<option> select any option</option>
<option>Red</option>
<option>Blue</option>
<option>Pink</option>
<option>Green</option>
<option>Yellow</option>
</select>
</form>
<p>Click the button to display the number of options available in the Select box options.</p>
<button onclick= “func1()”>Click it</button>
<p id=”demo”></p>
<script>
function func1() {
var x = document.getElementById(“Colors”).options.length;
document.getElementById(“demo”).innerHTML = “There are “ + x + “ options available in the list.”;
}
</script>
</body>
</html>
Output

228 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)

(b) Radio Buttons

A form contains a set of radio buttons from which only one can be selected. An array is used to represent the set of radio
buttons in javascript to specify which option is selected.
Example
<!DOCTYPE html>
<html>
<body>
<form>
Select anyone<br>
<input type=“radio” name=“colors” id=“Red”>Red<br>
<input type=“radio” name=“colors” id=“Blue”>Blue
</form>
<button onclick=“check()”>Check “Red”</button>
<button onclick=“uncheck()”>Uncheck “Red”</button>
<script>
function check() {
document.getElementById(“Red”).checked = true;
}
function uncheck() {
document.getElementById(“Red”).checked = false;
}
</script>
</body>
</html>
Output

Q38. Write about check boxes.

Answer :
Check Boxes
Check boxes provide a set of choices to the user from which only one item can be selected. An array is used to represent
the group of check boxes that share the same name.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 229
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Example
<!DOCTYPE html>
<html>
<body>
<title>checkboxes</title>
Checkbox: <input type=“checkbox” id=“Check”>
<button onclick=“check()”>Check Checkbox</button>
<button onclick=“uncheck()”>Uncheck Checkbox</button>
<script>
function check() {
document.getElementById(“Check”).checked = true;
}
function uncheck() {
document.getElementById(“Check”).checked = false;
}
</script>
</body>
</html>
Output

Q39. How the form submission is prevented?

Answer :
Preventing a Form Submission Until a Checkbox has been Selected
The function is used to check whether the checkbox is cheked or not. If it returns true to then the form gets submitted.
When the function returns false then the user will be prompted to check the box.
Example
prevention.html
<html>
<head>
<title>Form validation</title>
</head>
<body onload=“document.myform.submit_btn.disabled=true”>
<form name= “myform” action= “process.html” method= “post”>
<input type= “checkbox” value= “0” name= “chk_Agree” id= “chk_Agree”
onclick= “document.myform.submit_btn.disabled=false” />
I accept the aggrement
<br/><input type= “submit” name= “submit_btn” value= “Install” /><br />
</form>
</body>
</html>
process.html
<html>
<head></head>
<h1>Installing....</h1>
</html>
230 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Output

3.2.2 Form Enhancements

Q40. Write short notes on following,
(i) Focusing on first form item
(ii) Auto tabbing between fields.
Answer : Model Paper-I, Q11(b)

(i) Focusing on First Form Item

Several users might visit the web page and interact with it through a form. So, rather than allowing them to move the
mouse and click on the form elements like text boxes etc., programmers can provide focus to the form elements as soon as the
page loads. Mostly the form with login box or search option will be provided with focus option.
In order to provide focus to the first text input on a form, add onload event handler to the <body> element of the document.
This will choose the form control to be highlighted and provides focus to it by using the control’s focus( ) method. The cursor
will be flashing in this particular form control ready for the user to enter some text into it when the page loads. The onload event
fires as soon as the page gets loaded.

(ii) Auto Tabbing between Item

The focus( ) method can be used to focus a particular control. Consider the example of adjusting data in the system. The
focus can be moved among the three boxes for the user to enter day, month and year.
<form name = “Form1”>
Enter the joining date : <br/>
<input name = “txtm” id = “txtm” size = “3” maxlength = “2” onkeyup = “if(This.value.length> = 2)
this.form.to.focus( );”/>
<input.name = “to” id = “to” size = “3” maxlength = “2” onkeyup = “if(this.value.length> = 2)
this.form.ty.focus( );”/>
<input name = “ty” id = “ty” size = “5” maxlength = “4” onkeyup = “if(this.value.length> = 4)
this.form.submit.focus( );”/>
<input type = “submit” name = “submit” value = “send”/>
</form>
In the above code onkeyup event handler is used to check the equality between length of text that is entered by the user and
the required number of characters for that field. The focus will be moved to the next box when user enters the required number
of characters. The this keyword will represent the current form control and the value property represents the value entered for a
control. The length property indicates the length of value in the current form.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 231

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q41. Discuss about disabling a text input.
Answer :
The programmers might sometimes need to disable the text input until a given condition is satisfied. For example the text
“agree to terms and condition” option will be disabled in a form until the checkbox beside it is selected. Consider the below code.
<body onload = “document.frmRef.txt.disabled = true”;
document.frmRef.txt.value = “not applicable”>
<h2> How do you know about us? </h2> <form name = “frmRef”>
<input type = “radio” name=“Hear” value = “1” onclick = “handleOther(this.value);”/> Web Technologies <br/>
<input type = “radio” name = “Hear” value = “2” onclick = “handleOther (this.value);”/> Computer Networks <br/>
<input type = “radio” name = “Hear” value = “3” onclick = “handleOther(this.value);”/> Information Technologies <br/>
<input type = “radio” name = “Hear” value = “4” onclick = “handleOther(this.value);”/> Programming in C++ <br/>
<input type = “radio” name = “Hear” value = “5” onclick “handleother(this.value);”/> Other .... Please mention <br/>
</form>
</body>
The above form will ask the user about how they know about the site. Radio buttons are used to provide options for the
user to select. Initially, the text is disabled by using the onload( ) event handler of <body> element.
When the user selects an option from set of radio buttons, then the text beside the selected radio button gets enabled. For
each selection the onclick event calls the “handleOther( )” function to which the form control value is passed as parameter. This
function contains a simple “if else” statement that checks whether the value of selected form control and text “other” are equal
or not. If the selected radio button has the value “other” then the “disabled” property of the textbox is set to false. The text box
will be disabled for all other options and its value will be set to “not applicable”.
function handleOther (sRadio)
{
if(sRadio = = “other”)
{
document.frmRef.txtOther.disabled = false;
document.frmRef.txtOther.value = ‘ ’;
}
else
{
document.frmRef.txtOther.disabled = true;
document.frmRef.txtOther.value = ‘not applicable’;
}
}

232 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Q42. Explain in brief about the following,
(i) Case conversion
(ii) Trimming spaces from beginning and end of fields.
Answer :
(i) Case Conversion
In some circumstances, the case of user input need to be changed from lowercase to uppercase or vice versa since the
Java script is case-sensitive. There are two methods provided by Javascript’s string object for conversion of text case.
 toLowerCase( ) : It changes the text from uppercase to lowercase
 toUpperCase( ) : It changes the text from lowercase to uppercase.
<form>
<input type = “text” name = “case” size = “20” onblur = “this.value = this. value.toLowerCase( );”/>
</form.>
(ii) Trimming Spaces from Beginning and End of Fields
The programmer might sometimes need to remove the spaces from the starting and ending of the form field. For this
purpose the substring( ) method of the string object is used.
substring (beg, end)
The above method returns the part of string that is specified by start and end points. The default value for end is end of
string.
The initial positions of the first character must be ‘0’ since they are zero based. To remove the spaces from the beginning
of the string, the substring( ) is used twice. The first call retrieves the first character entered by the user. The second call will
remove the space if the user input is ‘space’.
First call of substring( )
while (this.value.substring(0, 1) = = ‘ ’)
Second call of substring( )
this.value = this.value.substring(1, this.value.length);
This statement will select from second character to end of string in control value. This will be the new form value because
the first space is removed. Removing of first space is done in the onblur event handler.
<form>
<input type = “text” name = “frame” size = “100” value = “Enter some text, let the first character be a space”
onblur = “while(this.value.substring (this.value.length-1, this.value.length) = = ‘ ’)
this.value = this.value substring (0, This.value.length);”/>
<br/>
</form>
The above process is similar to trim any of the trailing spaces but it is reversed.
The first call of substring( ) will collect the last character of string and removes it at all it is a blank.
<form>
<input type = “text” name = “+Name” size = “100” value = “Enter any text, let the first character be space.” onblur =
“while(this.value.substring (this.value.length.1, this.value.length = = ‘ ’) )
this.value = this.value.substring (0, this.value.length-1);”/> <br/>
</form>
An alternative method for the above code is to use regular expression.
<form>
<input type = “text” name = “remove space” size = “100” value = “Enter some text, let the first character be space.”
onblur = “this.value = this.value.replace (/^\ \s+/, ”)
replace(/\ s + $/,”);”
/> <br/>
</form>
The above code removes both the trailing and leading space.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 233
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q43. Write in short about the following,
(i) Selecting all the content of a text area
(ii) Check and uncheck all checkboxes.
Answer :
(i) Selecting All the Content of a Text Area
Users are allowed to select the complete text of the text area by using focus( ) and select( ) methods. The selectAll( )
function accepts two parameters.
<html>
<head> <title> Selection of text area
<script language=“JavaScript”>
function selectAll(str) {
str.focus();
str.select();
}
</script>
</head>
<body>
<form name=“form1” >
<textarea name=“myText” rows=“4” cols=”10”> Users can select the complete content of text area by using focus( ) and
select( ) methods. </textarea>
<input type= “Button” name= “btnSelectAll” value= “Select all”
onclick= “selectAll(document.form1.myText);” />
</form>
</body>
</head>
</html>
Output

The button through which user can select all will have a onclick event handler that calls SelectAll( ) function. It provides
the from control focus through focus( ) method and selects the control through select( ) method.
(ii) Check and Uncheck All Checkboxes
When a set of checkboxes are used the user must be able to select all the checkboxes or reset all of them at a time. This
is possible by using check( ) and uncheck( ) methods.
function check(field)
{
for(var i = 0; i > field.length; i++)
{
field[i].checked = true;
}
}
function uncheck(field)
{
for(var i = 0; i < field.length;i++)

234 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
{
field [i].checked = false;
}
}
The above functions work only when there are multiple checkboxes in the group and two buttons in the form. These
buttons will call the check or uncheck function by passing in the array of checkbox elements that are under same group.
<form name = “frm” action = “ ”> select any colors <br/>
<input type = “checkbox” name = “color” value = “1”/> Red <br/>
<input type = “checkbox” name = “color” value = “2”/> Blue <br/>
<input type = “checkbox” name = “color” value = “3”/> Green <br/>
<input type = “checkbox” name = “color” value = “4”/> Yellow <br/>
<input type = “button” value = “Select All” onclick = “check(document.frm.color);”/>
<input type = “button” value = “Deselect All” onclick = “uncheck(document.frm.color);”/>
</form>
Output

The above code can be combined into a function that will be called through a button.
function checkUncheckAll (field)
{
var frm = field.form, i = 0;
for (i = 0; i < frm.length;i++)
{
if(frm [i].type = = ‘checkbox’ & & frm[i].name ! = ‘checkall’)
{
frm [i].checked = field.checked;
}
}
}

3.2.3 Javascript Libraries

Q44. Define javascript libraries.
Answer :
The javascript files which consist of functions that can be used in various pages are referred to as javascript libraries.
Some of the different types of such scripts are as follows,
1. Animated Effects and Drag-and-Droplists
For answer refer Unit-III, Page No. 236, Q.No. 46(i).
2. Lightboxes and Modal Windows
For answer refer Unit-III, Page No. 237, Q.No. 46(ii) and Page No. 238, Q.No. 47(i).
3. Sortable Tables
For answer refer Unit-III, Page No. 238, Q.No. 47(ii).
4. Calender Controls
For answer refer Unit-III, Page No. 239, Q.No. 48(i).
5. Auto-completing Text Inputs
For answer refer Unit-III, Page No. 239, Q.No. 48(ii).
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 235
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q45. Explain about the animated effects using scriptaculous.
Answer :
Javascript allows several types of animated effects by using scriptaculous. It allows users to perform tasks such as animation,
adding drag-and-drop functionality, building editing tools and creating autocompleting text inputs. In addition to these, it even
allows to create DOM fragments. It contains huge number of functions to create the animations. The real life objects or concepts
are represented by using the javascript objects. For scriptaculous library the object called effect is used to handle the animated
effects. Various methods are used to create different types of effects. For example, the shake( ) of effect object method can be
used to create shaking effect, fade( ) method can be used to create fading effect. These methods work only when prototype. js
and scriptaculous .js libraries are placed in scriptaculous.
<script src = “scripts/scriptaculous/prototype.js” type = “text/javascript”> </script>
<script src = “scripts/scriptaculous/scriptaculous.js” type = “text/javascript”> </script>
Consider a page that contains three effects namely shake( ), shrink( ) and Fade( ). When one of the box is clicked the
respective effect will be triggered.
<div id = “effect – shake” onclick = “effect.shake(this)”> Effect.shake( ) </div>
<a onclick = “effect.shake (‘effect-shake’)”> shake the box
</a>
<div id = “demo-effect-shrink” onclick = “effect.shrink(this);”> effect.shrink
</div>
<div d = “demo” onclick = “effect.Fade(this);
window.settimeout(‘Effect.Appear(\’effect-fude\’)’,3000);”>
Effect.Fade( )
</div>
The above code results the following output,

Q46. Write in short about the following,

(i) Drag and drop sortable lists using scriptaculous
(ii) Creating a lightbox.
Answer :
(i) Drag and Drop Sortable Lists Using Scriptaculous
Consider an example of reordering the lists by dragging and dropping the elements. Creation of a simple unordered list
is as follows,
<script src = “scripts/prototype.js” type = “text/javascript”> </script>
<script src = “scripts/scriptaculous.js” type = “text/javascript”> </script>
<stype type = “text/css”>
li { porder; 1Px solid # 000000;
Padding: 10Px;
margin-top: 10px;
list-style-type:none;
width:150 Px;}
236 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
</style>
</head>
<body>
<ul id = “items”>
<li id = “item1”> <Item1 </li>
<li id = “item2”> Item2 </li>
<li id = “item3”> Item3 </li>
</ul>
The above list can be made sortable by adding the <script> element
<script type = “text/javascript” language = “javascript”>
sortable.create(“items”, {dropOnEmpty:true, constraint: false});
</script>
The list is made sortabel by using the sortable object and create( ) method of scriptaculous library and this method accepts
few parameter, one is the value of id attribute of unordered list and the other is option that indicates the working of the list.
(ii) Creating a Lightbox
A lightbox is an image that will open in foreground of browser even without reloading the page. It will be shown at the
middle of the page.

The above light box can be created by adding the below three scripts.
<script type = “text/javascript” src = “scripts/scriptaculous/prototype.js>
</script>
<script type = “text/javascript” src = “scripts/scriptaculous.js? load = effects, builder”> </script>
<script type = “text/javascript” src = “scripts/lightbox.js”> </script>
Code for creating the lines to the images in lightbox is as follows,
<a href = “images/img1.jpg” rel = “light box[Japan]”>
Image1</a>
<a href = “images/img2.jpg” rel = “light box[Japan]”>
Image2</a>
<a href = “images/img3.jpg” rel = “light box[Japan]”>
Image3</a>
Users can even add multiple lightboxes on the same page but with different names.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 237
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q47. Explain in brief about the following,
(i) Creating a Modal Window
(ii) Sortable tables with Mochikit.
Answer :
(i) Creating a Modal Window
A model window is a child window with which the user need to interact to return to main window.

The above model window makes use of script “Thickbox” along with Jquery library.
<script type = “text/javascript” src = “scripts/jquery/jquery –1.3.2.js”>
</script>
<script type = “text/javascript” src = “scripts/thickbox js”>
</script>
<link rel = “stylesheet” href = “scripts/thickbox.css” type = “text/css” media = “screen”/>
Code to add the content to modal window is,
<div id = “mypage”> <P>
Here is the modal window
</P> </div>
This code can be disabled on the page by using style sheet rule. Other than this, a link can also be added to the modal
window by using <a> element. It should start with class attribute with value thickbox.
(ii) Sortable Table with Mochikit
Users are allowed to create sortable table to reorder the table contents just by clicking the column heading. It is useful
to handle large tables where several users sort the data in several ways. The below table contains set of students details. The up
arrow beside “Id” heading represents that tables contents are sorted according to the id.
This concept makes use of a javascript library called Mochikit. The code to create sortable table is as follows,
<script type = “text/javascript” src = “scripts/Mochikit/Mochikit.js”> </script>
<script type = “text/javascript” src = “scripts/mochikit/examples/sorttab/sorttab.js”>
</script>
The headers must be differentiated from coloumns by using CSS styles. Inorder to sort the table the below three things
are needed.
 The <table> element needs id attribute with value sortable table.
 The <th> element must contains an attribute mochi for every column.
 The <td> elements first row must be mochi:content.
238 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Q48. Discuss about the following,
(i) Creating calendar with YUI
(ii) Auto completing text inputs with YUI.
Answer :
(i) Creating Calendar with YUI
YUI stands for Yahoo User Interface library. It is a large library that contains various types of functionalities in several
scripts. It is split into four sections, described as follows,
1. The heart of YUI contains three scripts namely Yahoo Global Object, DOM collection and event utility. Sometimes all
three are needed and sometimes only one or two of them are required.
2. The library utilities that offer the functionality that are useful in various tasks like libraries to create animated effects,
drag-and-drop functionality and image loading.
3. The library consists of scripts for creating various types of user interface controls like calendars, color pickers, text editors
and image carousels. The ‘cheat sheets” help to create the user interface components quickly.
4. A set of CSS stype sheets are used with UI controls to represent as desired.
Consider an example of YUI to add a calender to the web page. This needs three javascript files from YUI to be added
and a calender is script file.
<script type = “text/javascript” src = “scripts/yui/yahoo/yahoo.js”> </script>
<script type = “text/javascript” src = “scripts/yui/event/events.js”> </script>
<script type = “text/javascript” src = “scripts/yui/dom/dom.js”> </script>
<script type = “text/javascript” src = “scripts/yui/build/calendar”> </script>
A css file must above be added with YUI download.
<link type = “text/css” rel = “stylesheet” href = “scripts/YUI/sam/calendar.css”>
Finally, this can also be included in the script that calls the YUI library and files the <div> element with calender
<script>
Yahoo.namespace(“ex.calender”);
Yahoo.ex.calender.init = func( )
{
Yahoo.ex.calender.c1 = new Yahoo.widget.calender(“c1” “c1container”);
Yahoo.ex.calender.c1.render( );
}
Yahoo.util.event.onDomReddy(Yahoo.ex.Calendar.init);
</script>

(ii) Auto Completing Text Inputs with YUI

To illustrate the auto completion of text input with YUI consider the example of creating text input where users are provided
with help such as options for the users to type.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 239
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

Initially, add three JavaScript files:

<script type = “text/javascript” src = “scripts/yui/yahoo/yahoo.js”> </script>
<script type = “text/javascript” src = “scripts/yui/event/event.js”> </script>
<script type = “text/javascript” src = “scripts/yui/dom/dom.js”> </script>
Now, add the animation and data source library utilities.
<script type = “text/javascript”
src = “scripts/yui/animation/animation.js”> </script>
<script type = “text/javascript”
src = “scripts/yui/datasource/ds.js”> </script>
Finally, add the autocomplete.js JavaScript file:
<script type = “text/javascript”
src = “scripts/yui/automcomplete/ac.js”> </script>
Add the text input and a <div> to provide suggestions about the data to be entered
select a country :
<input id = “Input” type = “text”>
<div id = “Container”> </div>
Now a JavaScript array is created with the possibilities user this to enter
<script type = “text/javascript”>
example.arr = [
“Alebama”
“Australia”
// other states go here
];
</script>
Finally add the JavaScript the page to tie the text input form control to the array and call the Auto-Complete function
<script type = “text/javascript”>
yahoo.example.ACJSArray = new func( ){
//Instantiate first JS array data source
this.OACDS = new yahoo.widget.DS_JSArray(yahoo.example.statesArray);
// Instantiate first AutoComplete
this.oAutoComp = new yahoo.widget.AutoComplete(‘Input’, ‘Container’, this.oACDS);
this.oAutoComp.prehighlightClassName = “yui-ac-prehighlight”;
this.oAutoComp.typeAhead = true;
this.oAutoComp.useShadow = true;
this.oAutoComp.minQueryLength = 0;
var sInputValue = yahoo.util.Dom.get(‘statesinput’).value;
if(sInputValue.length = = 0) {
var oSelf = this;
setTimeout(function( ){oSelf.sedQuery(sInputValue);}, 0);
}
});
};
</script>
240 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
3.3 PUTTING YOUR SITE ON THE WEB

3.3.1 Meta Tags

Q49. Explain in detail about the meta tags.
Answer :
Meta Tags
The meta tag is used to provide the information related to the page indexing for the search engines. The meta information
is simply defined as “information about information”.
Example
<meta name = “description” content = “SIA publishers and distributors pvt Ltd”/>
Generally, a meta tag can take four universal attributes (dir, lang, xml:lang and title, and four other attributes that are
specific to the <meta> element. They are as follows,
1. schema
2. name
3. content
4. http-equiv.
Here, the name and content attributes, http-equiv and content attributes are used together.
(i) The Name and Content Attributes
This attribute type is used to specify the properties of a complete page.
Example
<meta name = “description” content = “SIA publishers and distributors pvt Ltd.”>
Here, the value of name is “description”, and the content provides the company information.
The value of the name attribute can be anything because it doesnot have publishing standards. But, there exists some
predefined values for the name attribute and they are as follows,
 description
It is used to provide the description of a web page. The description value should not exceed 200 characters. Already some
search engines like Google displays only the first 100 characters. Thus, the main information must be provided in the first 100
characters.
Example
Consider a <meta> tag with value as description displaying information about SIA company.
<meta name = “description” content = “SIA Publishers, a leading Educational publishers trusted by millions of students
across twin states of Telangana & Andhrapradesh”/>
But, when it is sent to a search engine, it shows the following,
“SIA Publishers, a leading Educational publishers trusted by millions of students across twin...”
 keywords
It is used to specify a list of comma separated keywords that are used in the site indexes. For example, tutorialpoint website
consists of coding ground with various languages that might use keywords such as,
<meta name = “keywords” content = “C, C++, java, C#, ASP.NET, ADO.NET, python, R”/>
Note that the text in the content should not exceed 200 characters, and the keywords that are not related to the site can
not be used.
A user can also use the lang keyword along with the keywords and description to specify the language.
Example
If the language used is americal English. Then,
<meta name = ‘keywords’, content = “go, went, gone” lang = “en-us”/>
If the language used is french. Then,
<meta name = “keywords”, content = “aller, allel , parti” lang = “fr”/>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 241

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
 robots
It is used to specify indexing for search engine. Using this value you can say to a search engine that not to index the given
page or from following links on a page.
Example
<meta name = “robots” content = “noindex,nofollow”/>
Here, the meta tag informs the search engine not to do index to the present page and not to follow any of the links in the
page.
Here, the content attribute has some different values. They are,
 all: It informs the search engine to index all the pages.
 none: It informs the search engine not to index any page.
 index: It informs the search engine to index the current page.
 noindex: It informs the search engine not to index the current page.
 follow: It informs the search engine to follow the links from the current page.
 nofollow: It informs the search engine not to follow any link in the current page.
(ii) Scheme Attribute
The scheme attribute is used to specify the format or scheme for a property value. Consider the example of working with
dates. The date format is different in different countries. In India, mostly date is written in dd-mm-yyyy format and in united
states, the date can be written in mm-dd-yyyy format. In such cases. Use the following,
/*India*/ <meta scheme = “India” name = “date” content = “12-11-2018”/>
/*US*/ <meta scheme = “US” name = “date” content = “11-12-2018”/>
Note that, this attribute is not supported in HTML5.
(iii) http-equiv And Content Attributes
For answer refer Unit-III, Page No. 242, Q.No. 50.
Q50. Explain about the http-equiv and content attributes.
Answer :
The combination of http-equiv and content attributes are used to specify the header values. When a browser requests a
page, the headers are sent along with the request, where the header consists of information like browser type, OS, date, format,
screen resolution and some other information about the configuration of a user. And, the server responds to the request and sends
the requested page along with the header that consists of information like date and time of the page sent to the client, date and
time of the page altered previously and the type of the web server.
The header can also consists of information about page expiration, and a period of time to refresh the page etc. The values
that are accepted by http-equiv attribute are as follows,
expires
It is used to specify the date and time of page expiration.
Example
<meta http-equiv = “expires” content-“Tue, 13 April 2018 10:59:59 GMT”/>
It means that the page will be expired on Tuesday, 13th April 2018 at 10:59:59 A.M.
pragma
It is used to prevent a browser from caching a page altogether.
Example
<meta http-equiv = “pragma” content = “no-cache”/>
refresh
It is used to refresh a page after a given period of time.
Example
<meta http-equiv = “refresh” content = “10; www.cricbuzz.com”/>
author
It is used to provide the author name of the document.

242 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Example
<meta http-equiv = “author” content = “SIA Team of Experts”/>
Content-Type
It is used to set the character encoding.
Example
<meta http-equiv = “Content-Type” content = “ISO-8859-1”/>

3.3.2 Testing Your Site

Q51. What are the two different states of testing? Explain about validating HTML, XHTML and CSS.
Answer : Model Paper-II, Q11(b)

The two different stages in the process of testing are given below,
1. Pre-publishing Tests
The tests that are performed on your system before showing it to anyone else are known as pre-publishing tests.
2. Pre-release Tests
The tests that are performed on a server before publishing are known as pre-release tests.
Validating HTML, XHTML and CSS
A validator is used to validate the opening and closing tags, the various attributes of the respective tags etc. Suppose if
a simple tag like </td> is missed in the code, it doesnot make any effect on the present browser but, it might not provide same
result on other systems when used.
Every version of HTML and XHTML has its own set of rules that directs the version of the language called as schema
or DTD. Here, the validator is used to check whether the page follows the rules of schema or DTD. The validator provides tags
that are missing in the page or any missing part of the markup.
An online validation tool at http://validator.w3.org/ is provided by W3C. It allows user to enter the URL of the page. The
markup validation service screen will be as shown in the below figure,

When the URL is entered, it will check for the errors in the page.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 243
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Example

One disadvantage of W3C validation tool is that it validates the documents one after the other.
There are some other authoring tools that are used to validate the complete site. For example, Dreamwaver consists of
many new features to perform validation for XHTML pages in its Dreamweaver Mx version. A user can validate a page by simply
clicking on “shift + F6”. It generates the errors in the page as shown in the below diagram,

To make the Dreamweaver work properly, right-click on the run panel and select the setting dialog box in windows or option-
clic on mac operating system. The dialog box displays a wide range of document standards. Note that, all the checkboxes should
be unchecked except the one which user want to check. For example, if a user is trying to validate a XHTML 1.0 Transactional
document, then the respective box should be checked. This is shown in the below figure,

244 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Q52. Discuss in detail about different stages in testing a site.
Answer :
The different stages in testing a site are as follows,
1. Validating HTML, XHTML and CSS
2. Link checking
3. Checking color depths
4. Accessibility checkers
5. Checking in different versions of browsers
6. Pilot testing
7. Proofreading.
1. Validating HTML, XHTML and CSS
For answer refer Unit-III, Page No. 243, Q.No. 51, Topic: Validating HTML, XHTML and CSS.
2. Link Checking
The link of a web page need to be checked before and after it is published on web. There are many tools to check the links
of the pages. Some of the tools charge some money and the other are free. The following are the different free link checking
tools.
1. HTMLHELP’s link valet at “www.htmlhelp.com/tools/valet/
2. The W3C’s link checker at “http://validator.w3.org/checklink/
The following figure shows the result for checking the link at “http://validator.w3.org/checklink/”,

Dreamweaver has its own tools for checking links. This can be done by simpling clicking on ctrl + shift + F9.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 245
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
3. Checking Color Depths
Check the color contrast to confirm whether it is clearly visible to people with colorblindness. This can be done by some
color checking tools. Some of them are as follows,
 http://graybit.com/main.php
 www.vischeck.com/vischeck/vischeckURL.php
 www.snook.ca/technical/colour_contrast/colour.html.

4. Accessibility Checkers
Accessibility checkers are used to check whether the site has all the accessibility requirements. This also helps the site to
run efficiently on a wide range of devices that access the web. Some of the different online Accessibility checkers are as follows,
 www.section508.info/
 www.webaim.org/resources/wave
For instance, the above tools check whether an ‘alt’ attribute is used as an alternative but it doesnt inform about the text
that is to be displayed an behalf of the alternate image.
5. Checking in Different Versions of Browsers
It is very important to check the site in different versions of browsers. This is because, some of the browsers support the
elements used in coding and some don’t. Therefore, check the site in as many browsers as possible. Atleast, check in the latest
versions of browsers because the versions of the browser in a system cannot be installed simultaneously.
Most importantly, the site need to be checked in IE6, chrome, opera and safari browsers.
There are some tools that permit user to take screenshots about the presentation of web site in the different browsers.
Some of them are as follows,
 www. browsercom.com/
 http://browserlab.adobe.com/
 http://browsershots.org/.

246 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
7. Proof Reading
Proofreading is important to make the site content with out accurate errors. This is because, the errors in the site makes
the client to feel bad about the site and the developers. Therefore, proof reading of the webpage avoids the errors and attracts the
viewers towards the site.
6. Pilot Testing
Pilot testing is defined as validation of different modules of the site under the real-time circumstances. This test should
be done before publishing the site. In this testing, the end user will ask to perform the different tasks on the site. For example,
consider the site you have developed is an online book store. Some of the tasks that end users should try are given below,
 Find a story book that would be helpful to a 7-years kid.
 Find the cost of a specific book.
 Find the process of visiting the store when it is opened.
 Find whether a student can get all the requirements in the store or not.
Observe the operations performed by end users and help them in finding their requirement. And also observe what was
the time taken to complete the given tasks and navigation from one page to another.
There are two types of observers while performing the above tasks. One observer watches operations performed by the
user and the other asks the user to say something while performing the tasks called as “talking-aloud protocol”. At that time,
they provide some positive or negative information about the working of the site. These are helpful in making the site effective
to the users.
The example of transcript that an observer end up with is as follows,
1. “I am supposed to find a book for Nithisha”
2. “Looking at....home, store...”
3. “Clicking on store”
4. “List of novels appears on the left, in which some of them not heard yet”
5. “Pictures on the right showing the “novels, storybooks...”
6. “Click on the image for novels...”
7. “Shows authors, so click the required....”
8. “Looking at the images...”
9. “This one is looking good; click on the image”
10. “Doesn’t do anything... even it shows extra information about it”
11. “Click on “two-states”
12. “There, that one looks good”
Provide cameras on users shoulders to know the operations performed by them and their results including the audio.

3.3.3 Taking the Leap to Live

Q53. What are different things required to get the site on web.
Answer :
The different things required to get the site on the web are as follows,
1. The Domain name
2. The hosting space
3. Transfer the site to a new server using an FTP program.
1. The Domain Name
The domain name is an address that is provided to the users for communicating through online/internet.
Example
siapublishers.com, hrstoppro.com
There are many domain regestration companies to register a domain name for the site. So, choose a company and register
the domain name. Most of the companies provide suffix as.com where as some other companies provide the suffix based on the
country. For example, .co.in for India, .co. for UK, and .ru for Russia, so on. .me.uk is the suffix given to the personal sites in
UK, .info is provided to the information-based sites, .org is provided to the organizations.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 247

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
The different things that need to be checked and confirmed before choosing a domain name are as follows,
1. Check the availability of your domain name.
2. Check whether the name of the site is similar to any other sites or not.
3. Ensure that the name of the site should be simple to remember. For example, for a company sia publishers and distributors
private Ltd, choose www.siapublishers.com rather than choosing www.siapublishersanddistributorsprivateLtd.com.
4. Register a name in such a way that it can also be used in mails. For example, vc@siapublishers.com.
Some domain registration companies provide hosting also. But, choose an other company for hosting then only the
registration company to point the domain to the provided hosting company server.
Remember that, a domain name can also be registered before building the site. But, should not be content in it until and
unless the site is built completely.
2. Hosting
Users can create their own web pages through ISP’s. Inorder to create this, the ISP allots a specific amount of disk
space to each user. So that they can create set of web pages. The users using Internet should be allowed to access these
web pages just like any other web pages on internet. The additional hardware required for this apart from disk space is
web server with in the premises of ISP. Therefore, this server plays as host to the subscribes’s web pages and also if any
request arises, the server issue them to any user i.e., web client or browser.
3. Transfer Your Site to a New Server Using an FTP Program
For answer refer Unit-III, Page No. 249, Q.No. 55.
Q54. What are the various key considerations for choosing a host?
Answer :
The various key considerations for choosing a host are as follows,
1. Bandwidth
Bandwidth is defined as the amount of data that is permitted to the users on the web site. Suppose the average size of the
site is 100 KB with all the images and documents, and allow 100 visitors to visit the site per month, let each access be 10
pages, then the required bandwidth is 100 × 100 × 10 = 100000 kb(or 100 MB).
Never mention that the website is highly popular because the host companies may charge more. Suppose, if the site exceeds
the size of bandwith then the company will charge some additional amount.
2. Country
Choose the server in a country in which the site has most visitors. Then the data can be transfered quickly and can be
visible to the users in milliseconds. For example, the visitor in India will view the data quickly from the host server in
India.
3. Backups
Backup is defined as an other copy of the site that is stored when any problem occurs in the computer. The host companies
stores the copy of the site in case of server break down and some other backups of data when the site breaks suddenly.
Suppose if the site updates frequently request the hosting company to check for the frequent backups.
4. Disk Space
Disk space is defined as the size of memory to store the files on a computer from which the site will run. Generally, the
disk space will be in Mega Bytes (MB) or Giga Bytes (GB). It depicts the size of the site. Ensure that the diskspace should
be more than the size of the files that run the site.
5. Data Centers
A data center is defined as a large group of servers that hosts various sites. Most of the companies tell that they have a
multimillion data centre which doesn’t makes the site a big operation. This is because maximum of the companies hire
the data from the huge data centres.
6. Uptime
Uptime is defined as the percentage of time that the site is available to the user. The uptime for most of the companies is
99 out of 100 minutes. But, this also shorts 1 minute that means 87.6 hours for a year (approximately 4 days).
7. E-mail Accounts
Most of the hosting companies offer E-mail service with the web hosting. Here, consider the following two factors,
 The size of mailbox is provided.
 The number of mailboxes that are given.
248 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Here, some hosting companies provide unlimited size of mailbox and limited number of mailboxes, some provide unlimited
number of mailboxes and with limited size of mailbox. In such cases, it is difficult to provide the data to as many mails as
user needs. Finally, some of the hosting companies allow the user to use the maximum of mailboxes and sizes but here,
the size will depend on the storage device.
8. Statistics Packages
When a user requests for a file from the system then the server will record some information about the user like IP address,
OS, browser and stores them in a file called as log file. The statistic packages are used to check the log file to find the
useful information from such as like the operations performed by the user on the site? Keywords used by them to redirect
the page and so on.
9. Shared Versus Dedicated Hosting
A web server that has many sites in it is known as a shared host because, only a few people visit the smaller site.
Some web sites have many visitors all the time. Some times the users may use the data more than the provided band width.
It means the site needs to pay some additional amount to the hosting companies. Thus, it makes the site more popular. In
such cases, the host own website with the server that is known as decidated server. This means the complete server will
be sticked to the site only.
Q55. Explain about putting your site on a server using FTP.
Answer :
Putting the site on a server using FTP is an easy and efficient way. FTP stands for “File Transfer Protocol” that is used
to send the binary files across the internet. This method has a transfer rate greater than the HTTP so that user can send the files
faster than HTTP.
Maximum of the host providers need user to use the FTP to send the files to a server across the internet that means user
requires a FTP program to put the site on a web server.
Generally, FTP consists of two windows, one displays the folders or files in the computer and the other displays the folders
in the server. Some of the different FTP programs to send the files into the server are shown in the below table,
Product Name Operating System Path/URl
Cute FTP windows and MAC OS X www.cuteftp.com/
FireFTP windows and MAC OS X http://fireftp.mozdev.org/
FTPX windows www.ftpx.com/
Transmit Mac www.panic.com/transmit/
Fetch Mac www.fetchsoftworks.com/
The above mentioned programs follow same principle with small variations in the code.
Once the registration is done with the FTP, it sends the details to FTP the site to its servers. It includes the following
details:
 An FTP Address (like ftp.example.com)
 An FTP Username (The same name as the domain username)
 An FTP Passward (The same password as the domain password).
The process of entering the details into the FTP program called Transmit on a Mac is as shown in the below figure,

Some of the hosting companies support SFTP or secure FTP which is the variant of FTP. SFTP is known to be highly
secured and standard because the details like username and password will be encrypted when they sent to the server.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 249
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q56. Discuss in brief about the importance of directory structures and URLs.
Answer :
Importance of Directory Structures and URLs
Most of the people develop their very first website on their desktop or computer using relative URLs for all the images,
styles sheets, links and scripts. That means, all the links provided in the coding of a site will work on the web server without
modifications.
When a site is opened, it shows the URL in the browser window as like given below,
C:\User\webdesigning\example\Ex1.html
But when the site can switch to new site or URL then the URL will appears as follows,
http://www.ex.com/Ex1.html
Generally, in a site the relative URLs for images, styles, links and scripts will be declared as,
<img src = “c:\User\webdesigning\example\Ex1.jpg” alt = “logo”/>
But, when the site is switched to a new site or URL onto the web server, it doesn’t load the source image file. Therefore,
provide the image URL something like the following,
<img src = “examples/ex1.jpg” alt = “logo”/>
Thus, the page loads the image until and unless the example directory is deleted for the computer.
3.3.4 Telling the World About Your Site
Q57. What are the different pointers used to make more people aware of the site?
Answer : Model Paper-III, Q11(b)

The different pointers used to make more people aware of the site are as follows,
1. Always mention the URL
2. Content is king
3. Forums, communities, and social Networks
4. Check for trade sites and directories
5. Reciprocal links
6. Look at your competition
7. Make it easy for people to link to you
8. Pay-per-click advertising
9. Display advertising
10. Create an E-mail news letter.
1. Always Mention the URL
Mention the URL of the site where ever possible. Provide the URL in the brouchers, business cards, letterheads, adverts
and posters then the people will get to know about the site.
2. Content is King
Content is the king of the page. If the content provided is effective, useful, entertaining and informative then the people
will attract to the site easily. Try to provide the information in an easy and unique way rather than providing regularly.
Provide the updated information and update the existing information periodically by mentioning, “last update on particular
time and date”. Then, the user will get to know the information in the page is latest.
Publish the benefited from a Press Release, in PR news services like PR web(www.PRweb.com). Thus, the other bloggers
or journalist will choose the content and mentions it.
3. Forums, Communities and Social Networks
Different hobbies and industries have their own forums and online communities. Group of people that interested in the
same topic can be found on the social media like Facebook, Twitter etc.
Suppose, if user is a member of online community which is related to the site then they can start your profile in it with its
URL and photographs, and providing the URL of the site in the social media profiles. Then the site will become popular
among the people.
Interact with the other people by reacting and replying to their posts rather than only posting the site information and
publishing the website.
250 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
4. Check for Trade Sites and Directories
Now a days, most of the trades and hobbies have their own site which provides the list of all other sites. Check for the
site which is relevant to the information of the site and request the relative sites.
For the listing of related sites, some trades may charge some money. In such situations, know the average number of visitors
visits the site and the monthly traffic before subscribing to their sites. Try to take a trail period to check the monthly traffic
and the number of visitors per month.
5. Reciprocal Links
Most of the smaller websites provide reciprocal links that means, their site will link to present site for linking itself to
them. In such cases, do not provide others links on the front page because it leads to populate their site than present site.
With this, the site will get better traffic from the sites that are related to the information in the site.
6. Look at Your Competition
Find the different competitors of the site and check who is linking to them. And, request them to link to the site as well.
7. Make it Easy for People to Link to You
Most of the webpage provides links to bookmark a page on services like Email, Twitter and facebook, etc. This is shown
in the below figure,

A simple and easier way to link these options is using the website known as www.addthis.com/ that offeres some simple
tools to create a link to share the link of the site with others.
Create a page with banners or button that helps the visitors to link to the site easily. Some websites like Oxfam include
the ads that are with attractive images and effective content.
Example

8. Pay-per-click Advertising
Pay-per-click is a type of advertising techniques in which marketer pay a specified amount for listing the web site on all
search engine results, which will appear by entering various keywords.
Two main factors decides the order of the advertisements to be appeared on the page. They are,
 The amount of money paid for every click of an ad.
 The count of users that clicks on the ad.
This is known as a best and cost-effective way to produce the traffic to the site. Some other like microsoft and Yahoo
provides similar services called adcenter and Yahoo! search marketing respectively.
Example
An example for pay-per-click advertising is given below,
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 251
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

9. Display Advertising
Display advertising is an online advertising technique that forces the user to pay some amount for advertising about the
site on some other sites. It includes banner ads.
The companies charge for adverting the site in two ways. They are,
1. Cost-per-thousand impressions, named as CPM.
2. Cost to occupy some space on a particular site for some months or years.
10. Create an E-mail Newsletter
E-mail newsletter is a feature that is required when the content of the page is changing frequently. In this, when the
content is changed then an email will be sent to the subscriber saying the content is updated.
The following are the different tools to create and manage the e-mail lists,
 www.MailChimp.com
 www.CampaignMonitor.com.
These tools are used to send mail to the visitors and also helps in creating the subscription forms that are used to signup
for the users.
3.3.5 Understanding Your Visitors
Q58. What are the two different ways to learn about the visitors to the site?
Answer :
The two different ways to learn about the visitors to the site are as follows,
1. Log file analysis
2. Analytics software.
1. Log File Analysis
When a user requested for a file from the system then the server will record certain information about them like IP address,
operating system, browser type and stores them in a file called as log file. Most of the companies offers some tools to analyze
the visitors information.
2. Analytics Software
Analytics software uses a script for checking the log file and collected information about the visitors that is similar to
other. It also offers the tools to analyze the collected information.
Google ofters a free service tool called as Google Analytics (www.google.com/analytics). This provides a detail analysis
about the visitors like how they entered the site, how many times they have visited, how many files they have downloaded
(referred as hits). This uses the different static packages and collects the information which is useful to the site, and analyzes it.
The example of a report from the Google Analystics is as shown in the below figure,

252 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
Q59. What are the ten different things to check in google analytics report for a site?
Answer :
The ten different things to check in google analytics report for a site are as follows,
1. Pageviews
It displays the number of pages visited by the visitors on the site.
2. Views
It displays the number of times that visitors visited the site in a period of time.
3. Unique Visits
It displays the number of visitors visited the site in a period of time. Here, each visitor is counted once.
4. Referres
Referrers are defined as the different sites that sends the visitors to visit the page. These increases the traffic for the site.
User can also view the referres and work together to maintain the same traffic for the site.
5. Search Terms
Search terms are terms that a user enters in the search engine like google before redirecting to the site. This is used to
know about the different terms they used for visiting the site.
6. User’s Browser, Operating System and Screen Resolution
It displays the type of browser, operating system and screen resolution from which user visited the site.
7. Top Content
It displays the highly populated sections and pages of the site.
8. Top Entry Pages
It displays the pages that are visited firstly and mostly in the site.
9. Top Exit pages
It displays the pages from which the users left.
10. Bounce Rate
It displays the count of the visitors who left from the same page that they have entered.
Q60. Explain the concept of measuring everything.
Answer :
The locations of the site visitors can be tracked by using Google Analytics. In addition to this, it also helps user to measure
the success of marketing activity and that permits user to find the Return on Investment (ROI). And using this user can also find
the time to initiate the marketing activity.
Example
Consider that user can spend a $200 in a month on Google Adwords and it consumed a day to set everything, writing ads,
and checking how the ads are running. Here, it may cost something but no one will do all these things with out pay.
Confidence is necessary to measure each and every awareness and marketing activities that user performs. Google Analytis
also permits user to provide an additional information to the URL. Thus, one can measure the effectiveness of the links. The
additional information provided by Google Analytics is as follows,
Term Description Query string property
Campaign term It provides different keywords for the campaign utm_term
Campaign name It provides a readable term using which the source can be determined utm_campaign
Campaign source It provides the referring site utm_source
Campaign medium It provides the medium like a blog, e-mail, PPC, display utm_medium
Campaign content It is used to differentiate multiple links from the same campaigns utm_content
Google Analytics URL Builder is a handy tool that allows user to add these links to the URL
Example
http://www.example.com/?utm_source = referrer.org&utm_medium = display&utm_term=cheese&utm_content=
cheddar&utm_campaign = taste%2Bthe%2Ocheese
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 253
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

INTERNAL ASSESSMENT

OBJECTIVE TYPE
I. Multiple Choice
1. The structure of a javascript code begins with the tag ______. [ ]

(a) <scripting javascript> (b) <script type = “language/javascript”>

(c) <script language = “type/javascript”> (d) <script “Code = javascript”>

2. ______ is a programming language with direct support to the object oriented methodologies. [ ]

(a) JavaScript (b) Java

(c) C++ (d) None of the above

3. ______ function is used to convert the all lowercase letters to the equivalent upper case letters/characters. [ ]

(a) toUpper() (b) toUpperCase()

(c) Upper() (d) None of the above

4. Which of the following is an object based array function _______. [ ]

(a) push( ) (b) reverse( )

(c) pop( ) (d) All the above

5. Which of the following is an object provided by javascript? [ ]

(a) Match object (b) Date object

(c) Both (a) and (b) (d) None of the above

6. Which of the following method is uesd to manipulate an array? [ ]

(a) reverse( ) (b) slice( )

(c) sort( ) (d) All the above

7. ________ function is used to display the minimum of two number given to it. [ ]

(a) Min( ) (b) Minimum( )

(c) Both (a) and (b) (d) None of the above

8. Which of the following is a universal attribute of meta tag. [ ]

(a) dir (b) title

(c) lang (d) All the above

9. ______ is defined as a large group of servers that hosts various sites. [ ]

(a) Data center (b) Server

(c) Host (d) None of the above

10. ______ displays the number of times that visitors visited the site in a period of time. [ ]

(a) Unique visits (b) Visits

(c) Views (d) Page views

254 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

UNIT-3 COMPUTER SCIENCE PAPER-VIII (B)
II. Fill in the Blanks

1. _______ performs execution of program/script on webserver.

2. JavaScript is ________ side scripting language.

3. Arrays in javascript are also called as ________.

4. ________ is a data item that stores the user defined values.

5. ________ function is used to combine two strings.

6. ________ is a self contained block of code that performs specific and well defined tasks.

7. ________ function displays the rounded value of the integer.

8. ________ is used to provide the information regarding the page indexing to the search engines.

9. ________ is defined as verifying different modules of the site under the real-time circumstances.

10. ________ displays the number of pages visited by the visitors on the site.

KEY

I. Multiple Choice
1. (c) 2. (a) 3. (b) 4. (d) 5. (c)

6. (d) 7. (a) 8. (d) 9. (a) 10. (c)

II. Fill in the Blanks

1. Server-side javascript

2. Client

3. Associative arrys

4. Variable

5. concat( )

6. Function

7. ceil( )

8. Meta tag

9. Pilot testing

10. Page views

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. 255

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
III. Very Short Questions and Answers
Q1. What is javascript?

Answer :
Java script is a programming language that support object oriented methodologies. It facilitates inclusion of certain
executable data along with it.
Q2. What are the uses of javascript?

Answer :
The uses of javascript are as follows,
(i) Java script is multi-functional i.e., it can be used as a client side scripting as well as server side.
(ii) It is used to provide an easy way of accessing document objects as well as it can manipulate almost all of these
objects.
Q3. Define variable in JavaScirpt.

Answer :
A variable is a data item that stores the user defined values. It can be manipulated at any time. In JavaScript, the variables
are same as the other programming language variables.
Q4. Define bandwidth.

Answer :
Bandwidth is defined as the amount of data that is permitted to the users to use on the site.

Q5. Define uptime.

Answer :
Uptime is defined as the percentage of time that the site is available to the user.

256 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Important Questions COMPUTER SCIENCE PAPER-VIII (B)

Unit-wise Important Questions

Unit- 1 Q12. Explain about images and supported attributes

in HTML.

Answer : Important Question

SHORT QUESTIONS
For answer refer Unit-I, Page No. 30, Q.No. 31.
Q1. Write about different formatting tags.
Q13. Explain how basic table is created in xhtml.
Answer : Important Question
Answer : Important Question
For answer refer Unit-I, Page No. 2, Q.No. 1.
Q2. Write about various controls of forms. For answer refer Unit-I, Page No. 46, Q.No. 48.
Answer : Important Question Q14. What are different types of Form controls in
For answer refer Unit-I, Page No. 2, Q.No. 2. xhtml?
Q3. Write about types of lists. Answer : Important Question
Answer : Important Question
For answer refer Unit-I, Page No. 56, Q.No. 55.
For answer refer Unit-I, Page No. 3, Q.No. 3.
Q15. Discuss about frameset.
Q4. Write about the tags used for creating table.
Answer : Important Question Answer : Important Question

For answer refer Unit-I, Page No. 3, Q.No. 4. For answer refer Unit-I, Page No. 69, Q.No. 64.
Q5. What is a frame in HTML? Give an example.
Answer : Important Question

For answer refer Unit-I, Page No. 3, Q.No. 5. Unit- 2

Q6. Explain <img> tag in HTML.
Answer : Important Question SHORT QUESTIONS
For answer refer Unit-I, Page No. 4, Q.No. 6. Q1. What is CSS?
Q7. What are head, title, body tags in HTML?
Answer : Important Question
Answer : Important Question
For answer refer Unit-II, Page No. 80, Q.No. 1.
For answer refer Unit-I, Page No. 4, Q.No. 7.
Q2. Write about style rule.
Q8. What is hyperlink? Explain the anchor tag with
syntax. Answer : Important Question

Answer : Important Question For answer refer Unit-II, Page No. 80, Q.No. 2.
For answer refer Unit-I, Page No. 4, Q.No. 9. Q3. List the properties that influence the appearance
of the font.
Q9. Define with syntax <FONT> tag.
Answer : Important Question
Answer : Important Question

For answer refer Unit-I, Page No. 4, Q.No. 10. For answer refer Unit-II, Page No. 80, Q.No. 4.
ESSAY QUESTIONS Q4. What is a selector? List the types of selectors
in CSS.
Q10. Explain in detail about HTML.
Answer : Important Question
Answer : Important Question

For answer refer Unit-I, Page No. 5, Q.No. 11. For answer refer Unit-II, Page No. 81, Q.No. 5.
Q11. Discuss about presentational elements. Q5. Write about vertical-align property.
Answer : Important Question Answer : Important Question

For answer refer Unit-I, Page No. 15, Q.No. 20. For answer refer Unit-II, Page No. 81, Q.No. 6.
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. IQ.1
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES

3
Q6. What are the different properties that are used

Unit-
to position the items on the page.
Answer : Important Question

For answer refer Unit-II, Page No. 81, Q.No. 7.

SHORT QUESTIONS
Q7. Discuss in brief about tracking.
Q1. What is a variable in java script? How to declare
Answer : Important Question
a variable.
For answer refer Unit-II, Page No. 81, Q.No. 8.
Answer : Important Question
Q8. Write a short note on,
(i) list-style-position property
For answer refer Unit-III, Page No. 174, Q.No. 3.

(ii) list-style-image property. Q2. Define functions in javascripts.

Answer : Important Question Answer : Important Question

For answer refer Unit-II, Page No. 81, Q.No. 9. For answer refer Unit-III, Page No. 1744, Q.No. 4.
Q9. List the advantages of fixed-width design and
Q3. What is an array in java script?
liquid design.
Answer : Important Question
Answer : Important Question

For answer refer Unit-II, Page No. 81, Q.No. 10. For answer refer Unit-III, Page No. 175, Q.No. 7.
ESSAY QUESTIONS Q4. Write a short note on meta tags.
Q10. How style sheets are specified into HTML Answer : Important Question
document?
For answer refer Unit-III, Page No. 175, Q.No. 9.
Answer : Important Question

For answer refer Unit-II, Page No. 82, Q.No. 12. Q5. List the different points used to make people
aware of the site.
Q11. Explain how the fonts can be controlled. List
and explain each of the properties that directly Answer : Important Question
affect the font and its appearance.
For answer refer Unit-III, Page No. 175, Q.No. 11.
Answer : Important Question
Q6. Write a short note on domain name.
For answer refer Unit-II, Page No. 89, Q.No. 18.
Q12. Discuss in detail about the dimensions of a Answer : Important Question

box. For answer refer Unit-III, Page No. 175, Q.No. 12.
Answer : Important Question
ESSAY QUESTIONS
For answer refer Unit-II, Page No. 111, Q.No. 27.
Q7. How a script is added to the webpage.
Q13. Explain in detail about background properties
of CSS3 with an example. Answer : Important Question

Answer : Important Question For answer refer Unit-III, Page No. 176, Q.No. 13.
For answer refer Unit-II, Page No. 117, Q.No. 29. Q8. What is an operator? What are the different
Q14. Discuss in brief about the composition and types of operators?
grids.
Answer : Important Question
Answer : Important Question
For answer refer Unit-III, Page No. 188, Q.No. 21.
For answer refer Unit-II, Page No. 142, Q.No. 44.
Q15. Write in detail about layout of forms. Q9. Write about form validation.

Answer : Important Question Answer : Important Question

For answer refer Unit-II, Page No. 165, Q.No. 66. For answer refer Unit-III, Page No. 219, Q.No. 33.
IQ.2 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
Important Questions COMPUTER SCIENCE PAPER-VIII (B)
Q10. Write short notes on following,
(i) Focusing on first form item
(ii) Auto tabbing between fields.
Answer : Important Question

For answer refer Unit-III, Page No. 231, Q.No. 40.

Q11. Write in short about the following,
(i) Drag and drop sortable lists using scriptaculous
(ii) Creating a lightbox.
Answer : Important Question

For answer refer Unit-III, Page No. 236, Q.No. 46.

Q12. Discuss about the following,
(i) Creating calendar with YUI
(ii) Auto completing text inputs with YUI.
Answer : Important Question

For answer refer Unit-III, Page No. 239, Q.No. 48.

Q13. What are the two different states of testing? Explain about validating HTML, XHTML and CSS.
Answer : Important Question

For answer refer Unit-III, Page No. 243, Q.No. 51.

Q14. What are the different pointers used to make more people aware of the site?
Answer : Important Question

For answer refer Unit-III, Page No. 250, Q.No. 57.

Q15. Explain the concept of measuring everything.
Answer : Important Question

For answer refer Unit-III, Page No. 253, Q.No. 60.

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. IQ.3

LIST OF PROGRAMS COMPUTER SCIENCE PAPER-VIII (B)

LIST OF PROGRAMS

UNIT - I

S.No. Program Page No.

1. HTML program to illustrate hyperlinks 9
2. HTML program to illustrate basic text formatting tags 10
3. HTML program to illustrate heading tags 12
4. HTML program to illustrate attributes of text-align property 13
5. HTML program to illustrate <p>, <br/>, <pre> elements 13-14
6. HTML program to illustrate presentational elements 16
7. HTML program to illustrate phrase elements 18
8. HTML program to illustrate types of lists 19
9. HTML program to illustrate elements used for editing text 21
10. HTML program to illustrate images, images as links 31-32
11. HTML program to illustrate client-side, server-side image maps 33-35
12. HTML program to add youtube flash video player to a webpage 38
13. HTML program to add a flash to a webpage using <object> and <embed> elements 39
14. HTML program to add a flash to a webpage using SWF object 40
15. HTML program to add videos to a website using OS FLV player 41
16. HTML program to add audio using default media players 43
17. HTML program to add MP3s to web pages using flash 43
18. HTML program to illustrate the concept of tables 48
19. HTML program to illustrate different techniques used to group cells, rows and columns of a table 49-52
20. HTML program to illustrate the concept of nested tables 53
21. HTML program to illustrate linearization of tables 55
22. HTML program to illustrate various form controls 56-67
23. HTML program to create multiple frames on screen using <frameset> tag 69
24. HTML program to illustrate the concept of frames 72
25. HTML programs to illustrate nested framesets and <iframe> element 74-75

UNIT - II

S.No. Program Page No.

1. HTML program to illustrate a simple CSS 82
2. HTML program to illustrate the concept of inheritance in CSS 85
3. HTML programs to illustrate types of CSS 86-87
4. HTML programs to control the appearance of font 90-92
5. HTML programs to illustrate different text formatting properties 93-99
6. HTML program to show some adjacent sibling and child selectors 102
7. HTML programs to illustrate Absolute units, relative units and percentages 104-106
8. HTML program to illustrate CSS box model 107
9. HTML program to illustrate properties of box model 108
10. HTML program to illustrate padding property 109
11. HTML program to illustrate margin property 110
12. HTML programs to illustrate various properties to control the dimensions of a box 111-115

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. L.1

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
13. HTML program to illustrate different background properties of CSS3 118
14. HTML programs to illustrate different properties associated with lists 119-122
15. HTML programs to illustrate different properties of tables 123-127
16. HTML program to illustrate different outline-properties 129
17. HTML programs to illustrate :focus and :active pseudo classes 129-130
18. HTML programs to illustrate the CSS counters and Quotation marks 131-132
19. HTML programs to illustrate the positioning schemes in CSS 135-137
20. HTML program to illustrate the process of working with grids 147
21. HTML programs to illustrate two-column layout and four-column layout 148-150
22. HTML program to illustrate padding technique to read the tables 160
23. HTML program to illustrate heading technique to read the tables 161
24. HTML program to illustrate shading rows technique to read the tables 162
25. HTML program to illustrate implicit labels 166
26. HTML program to illustrate positioning of labels 167
27. HTML program to illustrate careful placement of buttons using the title attribute on form controls 168
28. HTML program to illustrate careful placement of buttons using CSS with the form elements 169

UNIT - III

S.No. Program Page No.

1. JavaScript program to illustrate Document Object Model 178
2. JavaScript program to illustrate forms collection and form elements with their properties and methods 182
3. JavaScript program to illustrate Images collection with their properties 185
4. JavaScript program to illustrate variables 186
5. JavaScript programs to illustrate scope of variables 187
6. JavaScript programs to illustrate different types of operators 189-194
7. JavaScript programs to illustrate conditional or control statements 196-198
8. JavaScript programs to illustrate different types of loops 199-201
9. JavaScript program to illustrate different events and event handlers 203
10. JavaScript program to illustrate string object 206
11. JavaScript programs to illustrate the concept of date object 208-210
12. JavaScript program to illustrate math object 212
13. JavaScript program to illustrate array object 214
14. JavaScript program to illustrate window object 216
15. JavaScript program to illustrate form validation 223
16. JavaScript program to illustrate replace() method 224
17. JavaScript program to illustrate regular expressions 226
18. JavaScript programs to illustrate select box options, radio buttons and check boxes 228-230
19. JavaScript program to illustrate the prevention of form submission 230
20. JavaScript program to select all the content of a text area 234
21. JavaScript program to check and uncheck all checkboxes 234
22. JavaScript program to create calendar with YUI 239

L.2 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)

LAB PRACTICAL WITH SOLUTIONS

Q1. (a) Write a HTML program using basic text formatting tags, <hn>, <p>, <br>, <pre>.
Answer :
Program
<html>
<title>Text Formatting tags</title>
<body>
<h1>h1 tag</h1>
<h2>h2 tag</h2>
<h3>h3 tag</h3>
<h4>h4 tag</h4>
<h5>h5 tag</h5>
<h6>h6 tag</h6>
<p>The different programming languages are,<br>C, C++, Java, .Net <p>
<pre>
‘pre’ tag is used to display the text
in a fixed-width font, and it protects
the line breaks and spaces
</pre>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.1

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
(b) Write a HTML page for Example Cafe using above text formatting tags.

Answer :

Program

<html>

<title>Cafe site</title>

<body>

<h1>Irani Cafe</h1>

<h2>Near makka masjid </h2>

<h3>Charminar</h3>

<h4>Hyderabad</h4>

<h5>040-123456</h5>

<p>Branches:<br>Hyderabad<br>Bangalore</p>

<pre>

There are many branches of

Irani cafes in Hyderabad

</pre>

<h6>iranicafe@gmail.com</h6>

</body>

</html>
Output

LP.2 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
Q2. (a) Write a HTML program using presentational element tags <b>, <i>, <strike>, <sup>, <sub>, <big>,
<small>, <hr>.
Answer :
Program
<html>
<title>Presentational element tags</title>
<body>
<p><b>ROBO 2.O</b> is <strike>not yet released!</strike><i> now available in Amazon Prime!</i></p>
<p>ROBO _2.O slated to be released on 23-11-2018</p>
<p>ROBO ^2.O slated to be released on 23-11-2018</p>
<hr>
<p><big>ROBO 2.O slated to be released on 23-11-2018</big></p>
<p><small>ROBO 2.O slated to be released on 23-11-2018</small></p>
</body>
</html>
Output

(b) Write a HTML program using phrase element tags <blockquote>, <cite>, <abbr>, <acronym>, <kbd>,
<address>.
Answer :
Program
<html>
<title>Phrase Element Tags</title>
<body>
<blockquote cite= “http://www.siapublishers.com/”>
About Us
</blockquote>
<img src= “SIAMAINLOGO.png” alt= “Error”>
<p><cite>SIA Group</cite> is one of the leading Publishers and book Distributors across the South India </p>
<p><abbr title= “Syed Ibadat Ali”>SIA</abbr> was initiated in the year 1979.</p>
<p><acronym title= “Syed Ibadat Ali”>SIA</acronym> was initiated in the year 1979.</p>
<address><a href= “support@siapublishers.com”>SIA</a>.<br>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.3
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Visit us at:<br>
Putli Bowli Lane,<br>
Koti, Hyderabad,<br>
Telangana
</address><br>
<kbd>Enlightening Lives through Education</kbd>
</body>
</html>
Output

Q3. (a) Write a HTML program using different list types.

Answer :
Program
<html>
<title>Types of lists</title>
<body>
<h2>Ordered Lists</h2>
<ol>
<li> Ordered Lists </li>
<li> Unordered Lists </li>
<li> Definition Lists </li>
</ol>
<h2>Unordered Lists</h2>
<ul>
<li> Ordered Lists </li>
<li> Unordered Lists </li>

LP.4 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
<li> Definition Lists </li>
</ul>
<h2>Definition Lists</h2>
<dl>
<dt>Ordered Lists</dt>
<dd> Ordered list display the text carrying large roman numbers, small roman numbers, capital letters etc.</dd>
<dt>Unordered Lists</dt>
<dd>Unordered lists display certain text on the console, with each independent sentence being initiated with a bullet
mark</dd>
<dt>Definition Lists</dt>
<dd> Definition list is different from the first two lists. It donot use the list items. It is used for defining the items.</dd>
</dl>
</body>
</html>
Output

(b) Write a HTML page that displays ingredients and instructions to prepare a recipe.
Answer :
Program
<html>
<head>
<title>Recipe- Basic Vanilla Cake</title>
</head>
<body>
<h1>Recipe- Basic Vanilla Cake</h1>
<h2>Ingredients:</h2>
<ul>
<li>1 1/2 cup sifted cake flour</li>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.5
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<li>1 1/2 table spoon baking powder</li>
<li>1/4 table spoon salt</li>
<li>1/2 cup unsalted butter</li>
<li>1 cup sugar</li>
<li>2 large eggs</li>
<li>1/2 table spoon vanilla extract</li>
<li>1/2 cup whole milk</li>
</ul>
<h2>Instructions:</h2>
<ol>
<li>Heat the oven to 400 degrees F. Lightly coat an 8-inch cake pan with butter and dust with all-purpose flour. Sift the
cake flour, baking powder, and salt into a large mixing bowl.</li>
<li>Beat in the butter one heaping 1/4 teaspoonful at a time, using an electric mixer set on low speed, until the mixture
resembles coarse sand. Beat in the sugar a tablespoon at a time, until the mixture resembles fine damp sand. Beat in the
eggs one at a time. Add the vanilla and milk, and beat on medium-high, just until blended. Do not overbeat.</li>
<li>Pour into the prepared pan and bake until a wooden skewer inserted in the center comes out clean—30 to 35 minutes.
Cool cake in the pan on a wire rack for 5 minutes.</li>
<li>Un-mold and cool completely. Ice with Browned-Butter Glaze.</li>
</ol>
<p>Before you begin, check baking powder expiration date. If it has passed, buy a fresh canister.</p>
</body>
</html>
Output

LP.6 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
Q4. (a) Write a HTML program using grouping elements <div> and <span>.
Answer :
Program
<html>
<title>Grouping Elements</title>
<body>
<div class=“Footnotes”>
<p>Welcome to <i><span style = “color:green;”>
SIA</span></i> Group</p>
<p>Contact us at: <b><span style = “color:blue;”>
support@siapublishers.com</span></b></p>
</div>
</body>
</html>
Output

(b) Write a HTML Menu page for example cafe site.

Answer :
Program
<html>
<head>
<title>Menu page for a cafe</title>
</head>
<body>
<h1>Irani Cafe, Hyderabad</h1>
<h2>Hot Beverages</h2>
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Irani Black Tea</li>
</ul>
<h2>Bakery</h2>
<ul>
<li>Cream Roll</li>
<li>Fruity Cake</li>
<li>Nankatai</li>
</ul>
<h2>Cold Beverages</h2>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.7
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<ul>
<li>Areated Drinks</li>
<li>Doogh</li>
<li>Shekanjabeen</li>
</ul>
</body>
</html>
Output

Q5. (a) Write a HTML program using images, audios, videos.

Answer :
Program
<html>
<head>
<title>HTML Media</title>
</head>
<body>
<h1>Image</h1>
<img src=“Penguins.jpg” height=“100” width= “100 “alt=”error”><br>
<h1>Audio</h1>
<audio controls>
<source src= “Kalimba.mp3” type= “audio/mpeg”>
</audio><br>
<h1>Video</h1>
<video width= “320” height= “240” controls>
<source src= “videoplayback.mp4” type= “video/mp4”>
</video>
</body>
</html>

LP.8 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
Output

(b) Write a HTML program to create your time table.

Answer :
Program
<html>
<head>
<title>Time Table</title>
</head>
<body>
<H1>TIME TABLE</H1>
<table border= “2” cellspacing= “3” align= “center”>
<tr>
<td align=“center”>
<td>9:00-10:00
<td>10:00-11:00
<td>11:00-12:00
<td>12:00-1:00
<td>1:00-2:00
<td>2:00-3:00
<td>3:00-4:00
<td>4:00-5:00
</tr>
<tr>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.9
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<td align= “center”>MONDAY
<td align= “center”>---<td align= “center”>DBMS<br>
<td align= “center”>DE&M<br>
<td align= “center”>EM&E<br>
<td rowspan= “6”align= “center”>L<br>U<br>N<br>C<br>H
<td align= “center”>LA&VC<br>
<td align= “center”>WT<br>
<td align= “center”>Remedial class
</tr>
<tr>
<td align= “center”>TUESDAY
<td align= “center”>DE&M<br>
<td align= “center”>EM&E<br>
<td align= “center”>WT<br>
<td align= “center”>---
<td align= “center”>DBMS<BR>
<td align= “center”>LA&VC<br>
<td align= “center”>Library
</tr>
<tr>
<td align= “center”>WEDNESDAY
<td align= “center”>DBMS<br>
<td align= “center”>DE&M<BR>
<td align= “center”>WT<br>
<td align= “center”>---
<td colspan= “3” align= “center”>DBMS LAB
</tr>
<tr>
<td align= “center”>THURSDAY
<td align= “center”>LA&VC<br>
<td align= “center”>EM&E<br>
<td align= “center”>WT<BR>
<td align= “center”>DE&M
<td align= “center”>---<br>
<td align= “center”>DBMS<br>
<td align= “center”>Library
</tr>
<tr>
<td align= “center”>FRIDAY
<td align= “center”>EM&E<BR>
<td align= “center”>LA&VC<br>
<td align= “center”>EM&E<br>
<td align= “center”>---
<td align= “center”>WT<br>
<td align= “center”>---<br>

LP.10 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
<td align= “center”>---
</tr>
<tr>
<td align= “center”>SATURDAY
<td align= “center”>WT<br>
<td colspan= “3” align= “center”>WT LAB
<td align= “center”>---<br>
<td align= “center”>DBMS<br>
<td align= “center”>Library
</tr>
</body>
</html>
Output

Q6. Write a HTML program to create a form using text inputs, password inputs, multiple line text input,
buttons, check boxes, radio buttons, select boxes, file select boxes.
Answer :
Program
<html>
<title>Forms</title>
<body>
<h1>Application Form</h1>
<form>
<table>
<tr>
<td>
<label for= “name”>Name</label>
</td>
<td>
<input type= “text” id= “name” name= “username”>
</td>
</tr>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.11
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<tr> <input type= “radio” value= “f” name= “gender”>
<td> Female</label>
<label for= “email”>Email</label>
<label>
</td>
<input value= “m” type= “radio” name= “gender”>
<td>
Male</label>
<input type= “text” id= “email” name= “usermail”>
</td>
</td>
</tr>
</tr>
<tr>
<tr>
<td> <td>

<label for= “pass”>Password</label> <label for= “city”>City</label>

</td> </td>
<td> <td>
<input type= “password” id= “pass”> <select id= “city” name= “city”>
</td> <option>--Select City--</option>
</tr> <option>Hyderabad</option>
<tr> <option>Warangal</option>
<td> <option>Bangalore</option>
<label for= “photo”>Photo</label>
<option>Chennai</option>
</td>
</select>
<td>
</td>
<input type= “file” id= “photo”>
</tr>
</td>
<tr>
</tr>
<tr> <td>

<td> <label>Address</label>
<label>Languages known</label> </td>
</td> <td>
<td> <textarea rows= “4” cols= “40”></textarea>
<label> </td>
<input type= “checkbox”> English</label> </tr>
<label> <tr>
<input type= “checkbox”> Telugu</label> <td></td>
<label>
<td>
<input type= “checkbox”> Hindi</label>
<input type= “submit” value= “Submit”>
</td>
<input type= “reset”>
</tr>
</td>
<tr>
</tr>
<td>
<label>Gender</label> </table>

</td> </form>
<td> </body>
<label> </html>

LP.12 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
Output

Q7. Write a HTML program to create a frames and links between frames.
Answer :
Program
f.html
<html>
<head>
<title>Master Page</title>
</head>
<frameset cols= “50%,50%”>
<frame src= “f1.html”>
<frame src= “f2.html”>
</frameset>
</html>
f1.html
<html>
<head>
<title>PAGE1</title>
</head>
<body>
Welcome to Page 1
<br>
Click Here <a href= “f3.html”> to link to page 3 </a>
</body>
</html>

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.13

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
f2.htm
<html>
<head>
<title> PAGE2 </title>
</head>
<body>
Welcome to Page 2
</body>
</html>
f3.html
<html>
<head>
<title>Page3</title>
</head>
<body>
Welcome to Page 3
</body>
</html>
Output

When the user clicks on the ‘Click Here’ then the output will be as shown in below figure,

LP.14 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
Q8. Write a HTML program to create different types of style sheets.
Answer :
Program
style.css
h1 {
color: red;
}
style-sheets.html
<html>
<head>
<title>Different Style Sheets</title>
<style type=“text/css”>
@import url(“style.css”);
body {
background-color: aqua;
font-size: 16px;
}<!--Internal Style Sheet-->
</style>
</head>
<body>
<h1>Using External Style Sheet</h1>
<p style=“color:blue;font-size:18px;”>Inline Style Sheet</p>
</body>
</html>
Output
Background : aquacolor

Red color

Blue color

Q9. Write a HTML program to create CSS on links, lists, tables and generated content.
Answer :
Program
<html>
<title>CSS onlinks, lists, tables and generated content</title>
<head>
<style type= “text/css”>
links.c { color: blue; }
li .a, b {list-style-type : decimal}
table {width : 350px ; border-collapse : separate ;}
td {font-size : 17px ; text-align : center ; border-width : 4px ; border-color : green ; border-style : solid ; border-spacing:
3pxpx ; 3px}
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.15
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
blockquote:before{ content: open-quote; }
blockquote:after{ content: close-quote; }
</style>
</head>
<body>
<h1>CSS on Links</h1>
<links class= “c”><p><b><a href= “default.asp” target= “_blank”>Click here</a></b></p></links>
<h1>CSS on Lists</h1>
<ol>
<li class= “a”>ordered list style one</li>
<li class= “b”>ordered list style two</li>
</ol>
<h1>CSS on Tables<h1>
<table>
<tr>
<th>Fruits</th>
<th>color</th>
</tr>
<tr>
<td>Apple</td>
<td>green</td>
</tr>
<tr>
<td>Banana</td>
<td>yellow</td>
</tr>
<table>
<h3>CSS on Generated Content</h3>
<blockquote>Example of css on generated content</blockquote>
</body>
</html>
Output

LP.16 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
Q10. Write a HTML program to create your college float: left;
web site using multi column layouts.
padding: 8px;
Answer :
}
Program
.column.side {
<html>
width: 25%;
<head>
background-color: silver;
<title>SIA Home</title>
}
<meta charset= “utf-8”>
.column.middle {
<meta name= “viewport” content= “width=device-
width: 50%;
width, initial-scale=1”>
}
<style>
.row:after {
*{
content: “ ”;
box-sizing: border-box;
display: table;
}
clear: both;
body {
}
margin: 0;
@media screen and (max-width: 600px) {
}
.column.side, .column.middle {
.header {
width: 100%;
background-color: AQUA;
}
padding: 9px;
}
font-size: 40px;
.footer {
}
background-color: olive;
.topnav {
padding: 7px;
overflow: hidden;
text-align: center;
background-color: gray;
}
}
</style>
.topnav a {
</head>
float: left;
<body>
display: block;
<div class= “header”>
color: #f2f2f2;
<img src= “SIAMAINLOGO.png” alt= “inaugral.
text-align: center;
jpg” height= “50” width= “70” <h1><b> Institute of
padding: 14px 16px; Technology and Science</b></h1> </image>
text-decoration: none; </div>
} <div class= “topnav”>
.topnav a:hover { <a href= “#”>Administration</a>
background-color: #ddd; <a href= “#”>Courses</a>
color: black; <a href= “#”>Examinations</a>
} <a href= “#”>Affiliation</a>
.column { <a href= “#”>Accredation</a>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.17
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
<a href= “#”>About</a>
</div>
<div class= “row”>
<div class= “column side”>
<h2>Quick Links</h2>
<a href=“#”>Annual Reports</a><br><br>
<a href=“#”>Classwork Timetables</a><br><br>
<a href=“#”>Holiday Notification</a><br><br>
<a href=“#”>Student Activity center</a><br><br>
<a href=“#”>Training & Placement</a><br><br>
<a href=“#”>Research</a><br><br>
<a href=“#”>NBA Accredation</a><br><br>
<a href=“#”>Academics</a><br><br>
<a href=“#”>Almanac</a><br><br>
<a href=“#”>Departments</a><br><br>
<a href=“#”>Contact Us</a>
</div>
<div class=“column middle”>
<img src=“DSC00649.jpg” alt=“inaugral.jpg” height=“400” width=“530”>
<p>The institution was started in 2017 with two B.Tech programs (viz., Computer Science Engineering and Electronics
and Communication Engineering) in sprawling lush green campus of 65 acres, in the area well connected by rail and
road.</p>
</div>
<div class=“column side”>
<h2>Vision</h2>
<p>To make our students technologically superior and ethically strong by providing quality education with the help of
our dedicated faculty and staff and thus improve the quality of human life.</p>
<h3>Mission</h3>
<p>To provide latest technical knowledge, analytical and practical skills, managerial competence and interactive abilities
to students, so that their employability is enhanced.
To provide a strong human resource base for catering to the changing needs of the Industry and Commerce.
To inculcate a sense of brotherhood and national integrity.</p>
</div>
</div>
<div class=“footer”>
<p><b>Copy Right &#169; 2018. All Rights Reserved by M.Nikhil</b></p>
</div>
</body>
</html>
LP.18 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
Output

Q11. Write a HTML program to create your college web site using for mobile device.
Answer :
Program
<html>
<head>
<title>SIA Home</title>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<style>
@media screen and (max-width: 481px){
*{
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: AQUA;
padding: 9px;
font-size: 40px;
}
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.19
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
.topnav { </div>
overflow: hidden; <div class=“topnav”>
background-color: gray; <a href=“#”>Administration</a>
} <a href=“#”>Courses</a>
.topnav a { <a href=“#”>Examinations</a>
float: left; <a href=“#”>Affiliation</a>
display: block; <a href=“#”>Accredation</a>
color: #f2f2f2; <a href=“#”>About</a>
text-align: center; </div>
padding: 14px 16px; <div class=“row”>
text-decoration: none; <div class=“column side”>
} <h2>Quick Links</h2>
.topnav a:hover { <a href=“#”>Annual Reports</a><br><br>
background-color: #ddd; <a href=“#”>Classwork Timetables</a><br><br>
color: black; <a href=“#”>Holiday Notification</a><br><br>
} <a href=“#”>Student Activity center</a><br><br>
.column { <a href=“#”>Training & Placement</a><br><br>
float: left; <a href=“#”>Research</a><br><br>
padding: 8px; <a href=“#”>NBA Accredation</a><br><br>
} <a href=“#”>Academics</a><br><br>
.column.side { <a href=“#”>Almanac</a><br><br>
width: 25%; <a href=“#”>Departments</a><br><br>
background-color: silver; <a href=“#”>Contact Us</a>
} </div>
.column.middle { <div class=“column middle”>
width: 50%; <img src=“DSC00649.jpg” alt=“inaugral.jpg”
} height=“400” width=“530”>
.row:after { <p>The institution was started in 2017 with two
B.Tech programs (viz., Computer Science Engineering
content: “”;
and Electronics and Communication Engineering) in
display: table; sprawling lush green campus of 65 acres, in the area
clear: both; well connected by rail and road.</p>
} </div>
.column.side, .column.middle { <div class=“column side”>
width: 100%; <h2>Vision</h2>
} <p>To make our students technologically superior and
.footer { ethically strong by providing quality education with the
background-color: olive; help of our dedicated faculty and staff and thus improve
the quality of human life.</p>
padding: 7px;
<h3>Mission</h3>
text-align: center;
<p>To provide latest technical knowledge, analytical and
}
practical skills, managerial competence and interactive
} abilities to students, so that their employability is
</style> enhanced.
</head> To provide a strong human resource base for catering to
<body> the changing needs of the Industry and Commerce.
<div class=“header”> To inculcate a sense of brotherhood and national
<img src=“SIAMAINLOGO.png” alt=“inaugral. integrity.</p>
jpg” height=“50” width=“70” <h1><b> Institute of </div>
Technology and Science</b></h1> </image> </div>
LP.20 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
<div class=“footer”>
<p><b>Copy Right &#169; 2018. All Rights Reserved by M.Nikhil</b></p>
</div>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.21

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q12. Write a HTML program to create login form and verify username and password using DOM.
Answer :
Program
<!DOCTYPE HTML>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h1 style= text-align: center;
font-size:40pt;
color:#00FF00;”>Login Form
</h1>
<form name= “login”>
Username: <input type=“text” name=“username”/><br><br>
Password: <input type=“password” name=“pswrd”/><br><br>
<input type=“button” onclick=“validate(this.form)” value=“Login”/><br>
</form>
<script language=“javascript”>
function validate(form)
{
if(form.username.value == “siagroup” && form.pswrd.value == “siagrouppassword”)
{
window.open(‘http://www.siapublishers.com/’)
}
else
{
alert(“Please Enter the valid username and password”)
}
}
</script>
</body>
</html>
Output

LP.22 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
Q13. (a) Write a JavaScript program to calculate area of rectangle using function.
Answer :
Program
<html>
<head>
<script type=“text/JavaScript”>
function Area_Rectangle(length, width) {
area = length * width
return area
}
</script>
<title>Area of a Rectangle</title>
</head>
<body>
<form name=“frmArea”>
Enter the length and width of your rectangle to calculate the area:<br />
Length: <input type=“text” name=“txtLength” size=“4” /><br />
Width: <input type=“text” name=“txtWidth” size=“4” /><br />
<input type=“button” value= “Calculate Area” onclick= “alert(Area_Rectangle(document.frmArea.txtLength.value,
document.frmArea.txtWidth.value))” />
</form>
</body>
</html>
Output

(b) Write a JavaScript program to wish good morning, good afternoon, good evening depending on
the current time.
Answer :
Program
<html>
<head>
<title>Example of Conditional statements</title>
</head>
<body>
<script type= “text/JavaScript”>
var date = new Date( );
var time = date.getHours( );
if (time < 12) {
document.write(‘Good Morning’);
}
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.23
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
else if ( time >12 && time < 18) {
document.write(‘Good Afternoon’);
}
else {
document.write(‘Good Evening’);
}
</script>
</body>
</html>
Output

Q14. (a) Write a JavaScript program using switch case.

Answer :
Program
<html>
<head>
<title>Switch case</title>
<script type=“text/JavaScript”>
function checkAlphabet( ) {
switch (document.frmAlphabet.txtAlphabet.value){
case “a”:
alert(“Vowel”)
break;
case “e”:
alert(“Vowel”)
break;
case “i”:
alert(“Vowel”)
break;
case “o”:
alert(“Vowel”)
break;
case “u”:
alert(“Vowel”)
break;
default : alert(“Consonant”);
}
}
</script>
</head>
<body>
LP.24 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
<p>Enter an alphabet to check whether it is vowel or consonant:</p>
<form name= “frmAlphabet”>
<input type= “text” name= “txtAlphabet” /><br />
<input type= “button” value= “Check” onclick= “checkAlphabet()” />
</form>
</body>
</html>
Output

(b) Write a JavaScript program to print multiplication table of given number using loop.
Answer :
Program
<html>
<head>
<title>Multiplication Table</title>
</head>
<body>
<p>
<script type= “text/JavaScript”>
num = 5
i=1
while (i <= 10) {
document.write(num + “ x “ + i +” =” + (num * i) + “<br />” );
i ++
}
</script>
</p>
</body>
</html>
Output

SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.25

COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Q15. (a) Write a JavaScript programs using any 5 events.
Answer :
(i) onLoad Event
onLoad event gets invoked as soon as a web document is opened. It is handled by the onLoad event handler. It is mostly
used when a webpage loads its complete content.
Program
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript”>
function dis()
{
alert (“The current document cannot be loaded!”);
}
</script>
</head>
<body onUnload=“dis()”>
<img src=“Libraries\Pictures\logo.jpg” onLoad=“loadImage()” width=“100” height=“132”>
<b>Close this window or press F5 to reload the page.</b>
</body>
</html>
Output

(ii) onClick Event

When element or mouse is clicked, the onClick event handler calls the javaScript function. The specific javaScript code
or function is being executed on the occurrence of the click event. It returns a false value if used with check boxes, links, radio,
reset and submit buttons so that the normal action that is associated with it will be cancelled.
Program
<!DOCTYPE html>
<html>
<body>
<title> onClick Demo </title>
<li>Onclick Eventhandler:
<input type=button value= “click here” onClick= ‘alert(“Clicked”)’>
</body>
</html>
LP.26 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.
Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
Output

(iii) onDblClick Event

onDblClick event occurs when the user double clicks on an object. The events such as onMouseDown, onMouseUp,
onDblClick will lead to this event in the same order. When onDblClick event occurs all the actions that are associated with the
above events will be executed. onDblClick event is handled by the onDblClick event handler.
Program
<!DOCTYPE html>
<html>
<body>
<title> onDblClick Demo </title>
<li>onDblClick Eventhandler:
<input type=button value=“Double click here” onDblClick=‘alert(“Double clicked”)’>
</body>
</html>
Output

(iv) onKeyPress Event

The onKeyPress event occurs when the user presses the key or holds down the key on key board. This event is handled
by onKeyPress event handler.
onKeyPress event invokes when the key is pressed and released over the element.
A simple example to illustrate the concept of onKeyPress event handler is given below,
Program
<!DOCTYPE html>
<html>
<body>
<title> onKeyPress Demo </title>
<li>onKeyPress Eventhandler:
<input type=text value=“Press any key here” size=20 onKeyPress=‘alert (“key was pressed”)’>
</body>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.27
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
Output

(v) onFocus Event

When a window frame or form element is focused on, the onFocus event handler calls the java script function. The specific
java script code or function will be executed on the occurrence of a focus event. The element can be focused by clicking on it or
by tabbing it.
The onFocus event handler occurs when an element gains focus.
Program
<html>
<body>
Enter your name: <input type=“text” onfocus=“func(this)”>
<p>focus on input field, the background-color changes.</p>
<script language = “javascript”>
function func(x)
{
x.style.background = “blue”;
}
</script>
</body>
</html>
Output

LP.28 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
(b) Write a JavaScript program using JavaScript built-in objects.
Answer :
Program
<html>
<head>
<title>Built-in Objects</title>
</head>
<body>
<script type= “text/JavaScript”>
myString = new String(‘Example of built-in objects’)
Strng1 = myString.toUpperCase()
Strng2 = myString.bold()
document.write(Strng1 + “<br/>”)
document.write(Strng2)
</script>
</body>
</html>
Output

Q16. Write a JavaScript program to create registration form and validate all fields using form validation.
Answer :
Program
form-validation.html
<html>
<head>
<title>Form validation</title>
<style type=“text/css”>
.formTitle {vertical-align:top; text-align:right;}
</style>
<script type=“text/JavaScript”>
function validate(form) {
var returnValue = true
var name=form.txtName.value
if (name== “ ”)
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.29
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
{
returnValue = false;
alert(“You must enter a name”)
document.frmRegistration.txtName.focus();
}
var email=form.txtEmail.value
var rxEmail = /^\w(\.?[\w-])*@\w(\.?[\w-])*\.[a-z]{2,6}(\.[a-z]{2})?$/i;
if (!rxEmail.test(email))
{
returnValue = false;
alert(“You must enter a valid email address”)
document.frmRegistration.txtEmail.focus()
}
var phone=form.txtPhone.value
if (phone==“ ”)
{
returnValue = false;
alert(“You must enter your phone number”)
document.frmRegistration.txtPhone.focus();
}
var radioChosen = false;
var radioButtons = form.radGender;
for (var i=0; i<radioButtons.length; i++) {
if (radioButtons[i].checked)
{
radioChosen=true;
}
}
if (radioChosen == false) {
returnValue = false;
alert(“You must choose gender”);
}
var Address=form.txtAddress.value
var AddressWords = Address.split(“ ”);
if (Address==“ ”)
{
returnValue = false;
alert(“You must enter the address”)
document.frmRegistration.txtAddress.focus();
}

LP.30 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.

Lab Practical with Solutions COMPUTER SCIENCE PAPER-VIII (B)
return returnValue
}
</script>
</head>
<body>
<form name=“frmRegistration” action=“welcome.html” method=“post” onsubmit=“return validate(this);”>
<h2>Registration Form</h2>
<table>
<tr>
<td class=“formTitle”>Name: </td>
<td><input type=“text” name=“txtName” size=“18” /></td>
</tr>
<tr>
<td class=“formTitle”>Email: </td>
<td><input type=“text” name=“txtEmail” size=“18” /></td>
</tr>
<tr>
<td class=“formTitle”>Phone: </td>
<td><input type=“text” name=“txtPhone” size=“18” /></td>
</tr>
<tr>
<td class=“formTitle”>Gender: </td>
<td><input type=“radio” name=“radGender” value=“Male” /> Male<br />
<input type=“radio” name=“radGender” value=“Female” /> Female
</td>
</tr>
<tr>
<td class=“formTitle”>Address: </td>
<td><textarea name=“txtAddress” cols=“30” rows=“3” /></textarea></td>
</tr>
<tr>
<td class=“formTitle”></td>
<td><input type=“submit” value=“Register” /></td>
</tr>
</table>
</form>
</body>
</head>
</html>
SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD. LP.31
COMPUTER SCIENCE PAPER-VIII (B) WEB TECHNOLOGIES
welcome.html
<html>
<head>
</head>
<body>
<h1>Registration done successfully</h1>
</body>
</html>
Output
When the user enters some invalid details (i.e., incorrect Email id) then the output will be as shown in the below figure,

LP.32 SIA PUBLISHERS AND DISTRIBUTORS PVT. LTD.