Web Technologies Notes7

III BSC COMPUTERS – VI SEMESTER
WEB TECHNOLOGIES
Computer Science
ELECTIVE PAPER
BHASKAR
2018
Prepared by LAKSHMINARAYANA
Lecturer in Computers, SSKDC, Guntakal
WEB TECHNOLOGIES Computer Science
III YEAR BSC - VI SEMESTER

WEB TECHNOLOGIES
Course Objective
To provide knowledge on web architecture, web services, client side and server side scripting
technologies to focus on the development of web-based information systems and web services.
To provide skills to design interactive and dynamic web sites.
Course Outcome
1. To understand the web architecture and web services.
2. To practice latest web technologies and tools by conducting experiments.
3. To design interactive web pages using HTML and Style sheets.
4. To study the framework and building blocks of .NET Integrated Development Environment.
5. To provide solutions by identifying and formulating IT related problems.
UNIT – I
HTML: Basic HTML, Document body, Text, Hyper links, adding more formatting, Lists, Tables
using images. More HTML: Multimedia objects, Frames, Forms towards interactive, HTML
document heading detail
UNIT – II
Cascading Style Sheets: Introduction, using Styles, simple examples, your own styles,
properties and values in styles, style sheet, formatting blocks of information, layers.
UNIT – III
Introduction to JavaScript: What is DHTML, JavaScript, basics, variables, string
manipulations, mathematical functions, statements, operators, arrays, functions. Objects in
JavaScript: Data and objects in JavaScript, regular expressions, exception handling
UNIT – IV
DHTML with JavaScript: Data validation, opening a new window, messages and
confirmations, the status bar, different frames, rollover buttons, moving images,
UNIT – V
XML: defining data for web applications, basic XML, document type definition, presenting
XML, document object model. Web Services
References:
1. Harvey M. Deitel and Paul J. Deitel, “Internet & World Wide Web How to Program”,
4/e, Pearson Education.
2. Uttam Kumar Roy, Web Technologies from Oxford University Press
Student Activities:
1. Prepare a web site for your college

2. Prepare your personal website
2
Prepared by LakshmiNarayana, SSKDC
Lect. in Computers
UNIT – 1
BASIC HTML
INTRODUCTION:
Hyper Text: Hyper Text is a small piece of Text that works as a link. It is a method of
representing the text in Highlighted form. If we click on it, it gives much more information
where within the same page or new page.
Markup Language: Markup language is the way of writing the Layout information on how a
document should appear.
Hype Text Markup Language (HTML): HTML is a Standard language that allow to create a
web page presentations in the internet.
Introduction to HTML:
HTML is short for Hyper Text Markup Language. HTML was initially developed by Tim
Berners Lee in the year 1991.It was defined from SGML (Standard Generalized Markup
Language) but implemented by using XML (Extendible Markup Language). It is mainly useful
to create web pages. It is designed to display the data and to focus how the data looks.
Features of HTML:
1. HTML is Platform independent language.
2. It provides table representation of data in the webpage.
3. It provides Hyperlinks for navigation between different web pages.
4. It supports List type of data representation.
5. It supports the clickable regions with in the images.
6. It supports all type of multimedia formats such as audio, video, Graphical images, etc.,
HTML Tag Syntax: HTML is not a programming language, it is a markup language. A markup
language is a set of markup tags. It uses markup tags to describe web pages
Tag: A Tag is a Keyword surrounded by angle brackets like <and >. Or
Meaning word or character enclosed in between less than and greater than
symbols. Html support two types of tags, they are
1. ON tag: It is also called as Starting tag or Begin tag. It specifies the starting of the
format.
2. OFF tag: It is also called as Closing tag or End tag. It specifies the ending of the format.
The ending tag is same as the starting except the “/” character.
Eg: </html>, </head>, </title>
Content: Everything between the starting tag and closing tag is called content.
Element: Everything from Starting tag to the Closing tag including content is called Element.
Structure of HTML:
<html>
<head>
<title> ------------</title>
</head>
<body>
</body>
</html>
3
Lect. in Computers
From the above documentation structure, <html>----</html> is the root element. The main
block of entire html code should be enclosed with in html tags. Every html document contains
two sections
1. Head Section:
The Head Section is denoted by <head>-----</head> tags. The purpose head section is to
write the technical information of web page like title, author name and tools, etc., A title tag,
which contain within the head of the document provides title for the document. The title of
your document is what most web browsers display in the top left corner of your browser
window. Head section is not mandatory (Compulsory).
2. Body Section:
The Body Section is denoted by <body>------</body> tags. It writes all the stuff that’s what
displayed in the web browser window. All the content which is displayed in the document
area of web page is placed within the <body> tags. Body Section is mandatory
(Compulsory).
Execution of Html Program:
The Execution of Html Program mainly contains the following steps
1. To produce HTML document, Open any Text Editor such as Notepad, Word pad, Ms-
Word, etc.,
2. Write the html program code in the Text editor.
3. Save the Html program with “.html” or “.htm” extension.
4. Open any Browser such as Internet Explore, Mozilla Fire fox, Opera, etc.,
5. In the address bar of the Web browser, enter the address of saved html document then the
program will be executed.
Tag Attributes:
Many Tags in Html have attributes. Attributes provide more information about tags. Tags
attributes always come in pairs. The basic form of all Html tags is as follows.
<Tag Attr1=”Attrvalue1” Attr2=”Attrvalue2” …….>--------</Tag>
In this general form, we have listed two attributes called Attr1, Attr2. The no of attributes varies
from tag to tag. Attributes can contain several values. In the above expression, the values are
denoted by Attrvalue1and Attrvalue2. The = sign assigns the value to the attribute and it is safe
to quote their values. If the values are numbers, it is sometimes not necessary to quote it.
HTML Comments:
Html Comments can be inserted in the HTML code to make it more readable and understand.
Comments are ignored by Browser and are not displayed. Comments starts with  Each comment can contain as many lines of text. If a comment runs over a no of lines,
each must start and end with --- and must not contain --- within its body. For example 
Or

Body Tag:
The second and main section of html document is Body section. The Html code with in body
tags is rendered and displayed in the document area of Browsers window. Syn: <body> This
is Sample </body>
4
Lect. in Computers
The Body tag contains the list of attributes with different values as follows
1. Bgcolor: It is used to set the background of an Html document to a single color. For
example, the following code sets the document background area to blue.
They are two ways to represent the colors in html. The first way is simply mentioning the
color with the name like red, blue, yellow, etc. The send way is mentioning the color with
RGB code (#rrggbb). In this code, the six Hexadecimal number represents Red, Green
and Blue to form a particular color. For example, the following code sets the document
background area to red.
Color Hexadec Value

Black #000000
Red #ff0000
Green #00ff00
Blue #0000ff
White #ffffff
2. Text: It is used to change the default text color of an entire document.
Syn: <body text=”blue”>
The common mistake for beginners is the use of a text color that matches to the background
color. It makes the text hard to read. Hence select colors which are more readable.
3. Background: It is used to set the image as the background of the entire web page.
Syn: <body background=”address”>
Ex: <body background=”C:\My pictures\sunset.jpg”>
The Font tag allows to change the color, size and style of any portion of text i.e. Only the text
in between the starting and ending tags is changed. The remaining text is unaffected. Syn:
<font> --------- </font>
The following are the list of attributes that supports Font tag.
1. Color: It specifies the particular color to the text enclosed in between font element.
Syn: <font color=”colorname”> ----- </font>
Ex: <font Color=”Blue”>This is example</font>
2. Size: The size attribute of the font tag is used to change the font size of text in the document
from the range from 0 to 4. The default font size is 0.
Syn: <font Size=”+/-n”> ----- </font>
Ex: <font Size=”+2”> This is example</font>
3. Face: It allows to specify a particular font style.
Syn: <font Face=”Font type> ----- </font>
Ex: <font Face=”Verdana”>This is example</font>
HTML Formatting and Hyperlink Creation:
HTML language allows to represent the data in different styles and formats. It support mainly
four tags such as <p> for paragraphs, <hi> for headings, <img> for images and <a> for
Hyperlink creation. By using these tags, the web pages can be made readable, interesting and
polished.
5
Lect. in Computers
Paragraph Tag:
The Paragraph tag is used to break the text in the form of paragraphs. To designate a block of
text as a paragraph then enclose it within the paragraph tags such as <p> and </p>. The ending
paragraph tag is optional because the browser assumes that the current paragraph ends when the
browser encounters new <p> tag.
Syn: <p> ----- </p>
Ex: <p>This is the sample paragraph which illustrates the usage of the paragraph tags in
the Html programs.</p>
It supports one attribute called “align” with the values Left, Right, Center and Justify.
Syn: <p align=”Left/Center/Right/Justify”> ----- </p>
Heading Tags:
The first thing that the most readers notice while viewing any page of text is Headings and
Sub-headings. Hence, Html provides Six types of heading tags to display the text in
Various sizes such as H1, H2, H3, H4, H5 and H6. The largest heading is H1 and smallest
heading is H6. These HTML Headings are very useful for dividing the document in Sections and
Sub-sections.
Syn: <Hi> ----- </Hi> where i=1, 2, 3, 4, 5 and 6.
Ex: <H1> Headings </H1>
<H2> Headings </H2>
<H3> Headings </H3>
<H4> Headings </H4>
<H5> Headings </H5>
<H6> Headings </H6>
It supports one attribute called “align” with the values Left, Right, Center.
Syn: <Hi align=”Left/Center/Right”> ----- </Hi>
Image Tag:
The image tag <img> is used to include the images in Html documents.
Syn: <img>
The image tag don’t contain any end tag because it is empty content tag.
Img tag supports the following list of attributes as follows.
1. Src: It is used to specify the address or URL of the image which has to be displayed.
2. Height & Width: These two attributes specifies the both height and width of the image
in Pixels or Percentages.
Syn: <img src=”URL” Height=”n” Width=”n”>
Ex: <img src=”URL” Height=”50” Width=”90”>
<img src=”URL” Height=”50%” Width=”60%”>
3. Alt: Alt is short Alternative Text. It is used to describe the image in words as tool tip
text. But it is always shown when we move mouse pointer over the plane of the image.
Syn: <img src=”URL” alt=”Explanation about image”> Ex: <img src=”URL” alt=”This
is the image of god”>
4. Align:
It defines the alignment of image with the values Right and Left.
6
Lect. in Computers
Syn: <img src=”URL” align=”left/right/center”>

Ex: <img src=”URL” align=”right”>
Anchor Tags or Creation of Hypelinks:
In the word “Hyperlink”, Hyper means Jumping and Link means Connection. A hyperlink is a
word, phrase, or image that you can click on to jump to a new document or a new section within
the current document. Hyperlinks are found in nearly all Web pages, allowing users to click their
way from page to page. Text hyperlinks are often blue and underlined. When you move the
cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand
pointing symbol at the link. When you click it then the hyperlink will connect to the address as
referred by the user.
In Html, The Hyperlink creation can be done with the help of Anchor tag and It contains
following three basic parts.
1. The Beginning and Ending Anchor tag pair (<A>------</A>).
2. The href attribute that specifies the URL of the page to be loaded when the hyperlink is
selected.
3. The Text or Image that appears as the active Hperlink.
1. Href: It specifies the URL of the page to be loaded when the hyperlink is selected.
Syn: <a href=”URL”> ----- </a>
Ex: <a href=”D:\Samples\hyper.html”>Hyper </a>
2. Target: It allows to specify where the linked document should open with the values
_blank, _self and _parent.
3. Name: It allows to create an identification name for the Hyperlinks.

Syn: <a href=”URL” name=”name of the Hyperlink”> ----- </a>
Ex: <a href=”URL” target=”_blank” name=”sample”> Sample </a>
Following are the different ways of creating the Hyperlinks.
Clickable Text Hypelinks:
It contains the text as hyperlinks when the user clicks on the text then the document or image
will be loaded.
Ex: <a href=” Sample.html”>Hyper </a> for linking to a local file.
<a href=”URL”>Web site </a> for linking to another web site.
Clickable Image Hypelinks:
This type of hyperlinks contains the images. If the user clicks on the image then the document
or image will be loaded.
Ex: <a href=”URL”><img src=”address” height=”50” width=”50”> </a>
Mailto Hypelinks:
It provides a convenient way for sending the feedback to the web site administrator.
Ex: <a href=”mailto:kbv.bhaskar@gmail.com” >Contact Bhaskar </a>
When the user clicks on the hyperlink “Contact Bhaskar”, a mail dialog box will be
launched with To field filled and the user has to complete the remaining message and send it.
Intradocument Linking:
It enables readers to go to a particular section of the document easily, instead of having to scroll
up and down all the time.
7
Lect. in Computers
Syn: <a href=”#Section name”>Link </a>

It links to the targeted location from else where within the document.
Syn: <a name=”section name”>
It is the target location with in document.
Semantic versus Syntactic Based Style Types (or) Physical and Logical Tags:
Html contains predefined tags that allow to enhance the web pages. These tags are of two
types in HTML. They are
Semantic Based Style Tags or Logical Tags:
Semantic tags (logical tags) convey meaning. It is also called as Content based style types. It
describes how the text is being used, without regard to how it should be formatted. Semantic
tags include strong which indicates that the content should be strongly emphasised, address
which indicates all address.
1. Emphasis Tag:
The Emphasis Tag <em> with its corresponding </em> tag is used for Highlighting text
Syn: <em>---</em>
Ex: This question is <em>important</em> for Examination.
It displays the enclosed data in a Strong notation means higher level emphasis.
Syn: <strong>---</strong>
Ex: This matter is <strong>confidential</strong>
It is used for reducing the relative font size which is smaller than the surrounding text.
Syn: <small>---</small>
Ex: It displays the text in <small>small</small> size.
4. Big Tag: It is used for increasing the relative font size which is bigger than the
surrounding text.
Syn: <big>---</big>
Ex: It displays the text in <big>big</big> size.
5. Citation Tag: It is used to specify a reference. A collection of references creates a
bibliography.
Syn: <cite>---</cite>
Ex: <cite>A.Nagarjun<br>
Computers Science</cite>
6. Address Tag: It is used to indicate an address.
Syn: <address>---</address>
Ex: Please send Email to
<address>Kbv.Bhaskar<br>
18/007, Bhagya Nagar<br>
Guntakal</address>
7. Keyboard Tag: It displays the enclosed text in Keyboard notation. It is used for all typed
commands.
8. Variable Tag: It is used to display the enclosed data in the form expression.
Syn: <var>---</var>
8
Lect. in Computers
Ex: <var> program variables</var>

9. Code Tag: The <code> tag is used for specifying the program code.
Syn: <code>---</code>
Ex: <code> let I have the value 1<br> While
i is greater than 0</code>
Syntactic Based Style Tags or Physical Tags:
Syntactic tags (physical tags) suggest how content is to be displayed, not what it is. It controls
how to format the text. Syntactic tags include b and i tags which indicates that the content should
be displayed as bold and italic. Hence a semantic style would be used to convey some meaning
while a syntactic style would not.
1. Bold Tag: It is used to display the text in bold face.
Syn: <b>---</b>
Ex: This is <b>Bold </b>Text
2. Italic Tag: It is used to display the text in Italic format.
Syn: <i>---</i>
Ex: This is <i>Italic </i>Text
3. Underline Tag: It is used to display the text with underline.
Syn: <u>---</u
Ex: This is <u>Underlined </u>Text
4. Typewriter Text Tag: It displays the text in mono spaced type writer font.
Syn: <tt>---</tt>
Ex: This is <tt>Typewriter</tt>Text
5. Strike Tag: It displays the text in deleted format means the line drawn through it.
Syn: <strike>---</strike>
Ex: This is <strike>Deleted</strike>Text
6. Subscript Tag: It displays the text in Subscript format which is more useful while
designing the web pages related to chemical formulas.
Syn: <sub>---</sub>
Ex: H<sub>2</sub>O
NH<sub>3</sub>
7. Superscript Tag: It displays the text in Superscript format which is more useful while
designing the web pages related to Mathematics.
Syn: <sup>---</sup>
Ex: x<sup>2</sup>
07<sup>th</sup> September
8. Blink Tag: It displays the enclosed text in blinking format.
Syn: <blink>---</ blink >
Ex: Stars are <blink>Blinking</blink> in the sky.
Html Lists:
List represents a group of items of same type. HTML support three types of Lists, They are
1. Ordered Lists or Numbered Lists
2. Unordered Lists or Bulleted Lists
3. Definition Lists
9
Lect. in Computers
1. Ordered Lists or Numbered Lists:

Ordered List represents the group of items that are arranged in specific or particular order i.e.
all the elements are prefixed by a symbol that denotes their relative order.
Syn: <ol>
<li>-------</li>
</ol>
Ex: Fruits list
<ol>
<li> Apple</li>
<li> Pine Apple</li>
<li> Mango</li>
<li> Grapes</li>
<li> Banana</li>
</ol>
Here <Ol> means Ordered list, <li> means List item. </li> tag is optional because
the browser treats as the end of a list item when new list item begin. The following
are the list of attributes that support Ordered list.
I. Type:
It specifies the style of a list item in ordered list with the values 1, A, a, I, i.
By default the list items in ordered list are represented by Numbers.
Syn: <ol type=”1/A/a/I/i”>
<li>------</li>
</ol>
Ex: <ol type=”I”>
<li> Apple</i>
<li>Mango</li>
</ol>
II. Start:
It specifies the starting number of the list item in an ordered list other than
1. Syn: <ol start=”5”>
<li>------</li>
</ol>
Ex: <ol start=”5”>
<li> Apple</i>
<li>Mango</li>
</ol>
2. Unordered Lists or Bulleted Lists:
Unordered List also represents the group of items but they are not arranged in any specific or
particular order i.e. all the elements are marked with bullets.
Syn: <Ul>
<li>-------</li>
</Ul>
Ex: Vegetables list
<Ul>
10
Lect. in Computers
<li> Tomato</li>
<li> Carrot</li>
<li> Brinjal</li>
<li> Ladies finger</li>
<li> Chillies</li>
</Ul>
Here <Ul> means Unordered list, <li> means List item. </li> tag is optional because
the browser treats as the end of a list item when new tag begin.
The following are the list of attributes that support Unordered list.
I. Type:
It specifies the style of a list item in unordered list with the values circle, square and disc. By
default the list items in unordered list are represented by shaded disc.
Syn: <ul type=”circle/square/disc”>
<li>------</li>
</ul>
Ex: <ul type=”square”>
<li> Tomato</li>
<li> Carrot</li>
</ul>
3. Definition Lists:
Definition List is a set of Definitions in which each item has two parts, a Definition
term (dt) and its Description of Definition term(dd) in pairs.
Syn: <dl>
<dt>-------</dt>
<dd>-------</dd>
</dl
Ex: <dl>
<dt>HTML</dt>
<dd>Hyper Text Markup tage</dd>
<dt>SGML</dt>
<dd>Standarised Text Markup </dd>
<dt>XML</dt>
<dd>Extensible Markup tage</dd>
/dl>
Here <dl> means Definition list, <dt> means Definition term and <dd> means Description
of Definition term. </dt> and </dd> tags are optional because the browser treats as the end
of a list item when new tag begin.
4. Nested Lists:
The list within another list is called as Nested List. Html provides to nest the different types
of lists within another list or multiple lists of the same type.
Syn: <ol>
<ul>
<li>----</li>
</ul>
</ol>
11
Lect. in Computers
Ex: <ol>
<li>Fruits</li>
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
<li>Vegitables</li>
<ul>
<li>Carrot</li>
<li>Brinjal</li>
</ul>
</ol>
Headers and Footers:
Headers:
The Beginning part of the displayed web page is called the Header. It is used to convey the most
important information of the page, introduction and title of the web page. Most Headers contain
the following information.
1. Title of the Web page.
2. Last-updated information.
3. Signature of the page developer.
4. An icon or logo associated with the page.
5. A counter of the number of visitors.
6. An Advertisement.
Footers:
The Ending part of the displayed web page is called Footer. It is used to convey the navigational
ads, copy right information and web masters email address. Most Headers contain the following
information.
1. Navigational aids.
2. Last-update information.
3. A mail-to hyperlink to the web master.
4. A Hyperlinks leading to Frequently Asked Questions (FAQ).
5. A copy right notice
6. A Disclaimer.
7. A publication. Date.
8. An Advertisements.
12
Lect. in Computers
13
Lect. in Computers
14
Lect. in Computers
15
Lect. in Computers
16
Lect. in Computers
17
Lect. in Computers
18
Lect. in Computers
19
Lect. in Computers
20
Lect. in Computers
21
Lect. in Computers
22
Lect. in Computers
Multimedia
A Multimedia refers different formats of data that can be supported by a Web page. A
multimedia is nothing but multiple forms of Media such as Text, Pictures, Images,
Sounds, Videos, etc., A Multimedia presentation of data makes a Web page more
attractive.
Multimedia Components:
Following are the components of the multimedia, they are
1. Text: Text contains data in alphanumeric form. Each and every component of
multimedia contains text. The software required for text processing includes word
processors, word Art, Page Makers ,etc.,
2. Images: Image is a spatial representation of an object. Images are represented in
computer with pixels. Images used as background which can attract the visitors
easily. Images can be invoked by Scanning, Internet, Clip Arts, etc., Image formats
in multimedia are JPEG, Gif, Png,etc.,
3. Graphics: Computer Graphics deal with the generation and manipulation of
digital objects. The objects may be drawn with graphic software or scanned in
with digital scanners. These objects can be animated by controlling speed, portion
of the total scene in view.
4. Animations: Computer Animation is the use of graphic tools to create visual
effects. It gives movement to objects. They can be used in Cartoon Films,
Television, Movies, Electronic Advertisements, Video games and virtual reality
applications.
5. Audio: Audio is an important component of multimedia. Multimedia Components
are nothing without the audio and sounds. They make the presentations more
interesting and effective.
6. Music: Music is also an important component of multimedia. Music is also the
sound which is used in Movies, Advertisements, Songs, etc., Music formats in
multimedia are MIDI, Real Audio, Wave, Mp3, etc.,
7. Video: It is a sequence of moving images just like the real life situation. It is the
technology of capturing, recording, play backing and reconstructing a sequence of
images representing scenes in motion. Video formats in multimedia are AVI,
MPEG, Real Video, Quick time, 3gp, Shock wave, etc.,
Audio:
An Audio refers sound type of formats for representing the data. Audio is an important
component of multimedia. Multimedia Components are nothing without the audio and
sounds. They make the presentations more interesting and effective.
The audio format data can be played by using corresponding Audio player only.
In internet the following different format audio files can be used.
1. AIFF: It stands for Audio Interchange File Format. It was developed by Apple
Corporation. The extensions are .aif, .aiff.
23
Lect. in Computers
2. AU: It stands Audio format. It was developed by Sun Corporation. The extensions
are .au, .snd.
3. MIDI: It stands Musical Instrument Digital Interface. It was developed by MIDI
Corporation. The extensions are .midi, .mid.
4. WAV: It stands Wave format. It was developed by Microsoft Corporation. The
extensions are .wav.
5. Real Audio: It was developed by Progressive Network. The extensions are .ra,
.ram.
Audio Install:
When a Web page contains Audio files then the activation process is any one of the
following.
1. The audio file activated and plays the sound.
2. Prompts to download the audio file and play it.
3. Prompts whether install the plug-in or not
4. Displays a message that there is no supported media for playing the audio.
Audio and Web pages:
To include a Audio in a web page, you have to use Object tag. The process of loading a
web page containing audio is as follows.
<object data=”music.wav” type=”audio/wav”></object>
Movies and Video:
It refers the moving Graphical object which contains pictures, sounds in a motion format.
It is a sequence of moving images just like the real life situation. It is the technology of
capturing, recording, play backing and reconstructing a sequence of images representing
scenes in motion.
In internet, a web page can supports the following type of video formats.
1. MPEG: It stands Motion Picture Experts Group format. It was developed by
Motion Picture Experts Group. The extensions are .mpeg,.mpg.
2. AVI: It stands Audio Video Interleaved format. It was developed by Microsoft
Corporation. The extensions are .avi.
3. Quick Time: It was developed by Apple. The extensions are .qt, .mov.
4. SGI: It stands Silicon Graphics. It was developed by Silicon Graphics. The
extensions are .movie.
Video and Web pages:
To include a video in a web page, you have to use Object tag. The process of loading
a web page containing video is as follows.
<object data=”video.avi” type=”video/avi” height=”150” width=”150”>
<param name=”autostart” value=”true”>
</object>
24
Lect. in Computers
UNIT-2:
Introduction to the Style Sheets and Java Scripts
Cascading Style Sheets
Introduction:
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in a markup language such as HTML, XML, XHTML etc... CSS is used to
style the web pages.
A Style is a set of formatting instructions that can be applied to a piece of text. HTML language
allows to represent the styles in three ways. They are
1. The Style can be defined within the basic HTML tag.
2. The Style can be defined in the Head section and applied to the whole document.
3. The Style can be defined in External files called Stylesheets which can then be used in
any document by including the stylesheet via a URL.
Styles can be cascaded, means that formats override any content which were
defined included earlier in the document. Hence These Style sheets are called as Cascading
Style Sheets(CSS).
HTML language provides the CSS with the help of Style tag as follows
Syntax:
<style>
Selector{property1: value; property2:value;…..}
</style>
Rules:
A Style rule has two parts: a Selector and a set of Declarations.
The Selector is used to create a link between the rule and the HTML tag which are enclosed in
braces.
The Declaration has two parts: a property and a value.
A Property is the property of selected element and the Value is the specification of property.
Declarations must be separated using colons and terminated using semicolons.
Using Styles : Simple Examples:

1) CSS with in head section
The following example describes the simple use of style tag in head section and also changes
headings
<html><head><title>Simple Stylesheet</title>
<style>

</style>
</head><body>
<h1>Simple Stylesheet</h1>
</body></html>
Notice style definition inside an HTML comments so that it will be ignored by browsers which
don’t support styles.
2) CSS with in body section
The following example describes the use of styles in body section by using the style attribute in
its corresponding tag.
<html>
<head><title>Simple Stylesheet</title></head>
<body>
<h1 style=”color: red; border: thin groove; text-align:
center ;”> Simple Stylesheet</h1>
<h2 style=”color: blue; text-align: right;”>
</body></html>
3) CSS through External file
The following example describes the linking of External CSS file by using Link
tag. <html>
<head><title>Simple Stylesheet</title>
<link rel="stylesheet" type="text/css" href="sample.css"
/></head> <body>
<h1 style=”color: red; border: thin groove; text-align: center ;”>
Simple Stylesheet</h1>
</body></html>
Sample.css
h1{Color:red;text-align:center;border: thin groove;}
Defining your own Styles:
Classes:
HTML language allows to apply the CSS properties only for selected tags with the help of
classes. A Class is an identification which should be called inside a tag with the help of class
attribute. The class type of CSS can be defined as follows
Syntax: Selector.class=classname {property: value; property2: value ;……}
<selector class=classname>
Ex:
<html>
<head><title>Classes </title>
<style>
p.x
{
background-color:yellow;color:red;border:thick groove;
}
</style></head>
<body>
26
Lect. in Computers
<p class="x">This is the paragraph with Cascading Style

Sheets.</p> </body></html>
Anonymous Classes:
An Anonymous class is identification for CSS where the styles can be applied to any selector. It
provides a way of defining styles within reusable classes.
Syntax: .class=classname {property: value; property2: value ;……}
Ex:
<html>
<head><title>Anonymous Classes</title>
<style>
.x
{
background-color:yellow;color:red;border:thick groove;
}
</style></head>
<body>
<p class="x">This is the paragraph with Anonymous Classes.</p>
<h1 class=”x”>Anonymous Classes</h1>
</body></html>
Including Stylesheets:
The <link/> element can be used to include style sheets. It must be included in the head section
of your HTML page.
Syntax: <link rel=”Stylesheet” href=”url” type=”text/css” media=”screen”>
The rel attribute tells the browser what type of link you are using,
href attribute is a hyperlink to stylesheet, type attribute specifies the MIME type of the document
being linked and media attribute specifies the output device that is intended for use with the
document.
Syntax: @import url (url)
These lines are needed if you inted to use more than one stylesheet.
Ex: <link rel=”Stylesheet” href=”url” type=”text/css” media=”screen”>
<style type=”text/css”>
@import url(“style.css”)
</style>
Properties and Values in Styles:
A number of properties of the text can be altered. These can be grouped together. The following
are the groups of properties along with the values.
Fonts:
Font-family:
The font-family property allows to specify the typeface that should be used.
Syntax: font-family:<family name> [<generic family>]
Ex: p {font-family:arial;}
P {font-family:times, "times new roman", serif;} P
{font-family:courier, "courier new", serif;}
27
Lect. in Computers
If a font name contains spaces, such as times new roman or courier new, you should place the
name in double quotation marks.
Font-style:
The font-style property allows to specify that a font should be normal, italic, or oblique.
Syntax: font-style: normal | italic | oblique
Ex: p {font-style: italic ;}
p {font-style: oblique;}
Font-weight: The weight of any font can be altered as follows
Syntax: font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |
900
Ex: p {font-weight: normal ;}
p {font-weight: bold ;} p
{font-weight: bolder;} p
{font-weight: lighter;} p
{font-weight:200;}
Font-size: font-size property allows you to specify a size for the font
Syntax: font-size: small | medium | large | smaller | larger | length | percentage
Ex: p {font-size: xx-small;}
p {font-size:12px;}
p {font-size:3pc;} p
{font-size:10%;}
Backgrounds and Colors:
Color: The color property allows to specify the color of the text. The value of this property can
either be a hex code for a color or a color name. Syntax: color <value>
Ex: p {color: #ff0000;}

Background-color: It changes the background color.
Syntax: background-color:<value> | transparent
Ex: p {background-color: red;}
Background-image: It sets the background image
Syntax: background-image: url | none
Ex: body {background-image: flower.jpg;}
Text:
Text-decoration: Any piece of text can be decorated. If you want to remove the underlining on
links try this.
A:link,A;visited,A:active{text-decoration:none}
Syntax: text-decoration:underline | overline | line-through | blink | none|
Ex: p {text-decoration:underline;} p {text-decoration:blink;}
P {text-decoration:overline;} p {text-decoration:line-through;}
Text-transform: It allows to specify the case for the content of an element.
Syntax: text-transform: none | capitalize | uppercase | lowercase
Ex: p {text-transform:none;} p {text-transform:Capitalize;} p {text-

transform:UPPERCASE;} p {text-transform:lowercase;}
Text-align: It aligns the text within its containing element or the browser window.
Syntax: text-align: left | right | center | justify
28
Lect. in Computers
Ex: td {text-align: left;} td {text-align: right;}

td {text-align: center;} td {text-align: justify;}
Text-indent: It allows to specify how much the content of a block-level element should be
indented from the left side of the browser window or the left side of its containing element.
Syntax: text-indent: length | percentage
Ex: h1 {text-indent:3em;}
Boxes :
CSS uses the box formatting model for all elements. The box
formatting model places all elements within boxes, rectangles or
squares, that are layered with multiple, configurable attributes.
Margin: It is the gap between boxes, and its value is either a length, a percentage
Syntax: margin: length | percentage | auto {1, 4}
Ex: p {margin: 20px;}
margin-top, margin-right, margin-bottom, and margin-left properties adjust the margins on
individual sides of an element.
Ex: margin-top: 40px; margin-bottom: 30px;
Border-width: It allows to set the width of your borders.
Syntax: border-width: thin | thick | medium | length {1, 4}
Ex: border-width: 2px;
The border width properties are: border-top-width, border-right-width, border-bottom-width,
border-left-width, and border-width.
Ex: border-top-width : 2px; border-bottom-width: 4px;
Border-color: It allows to set the color of your borders.
Syntax: border-color: value {1,4}
Ex: border-color: red; border-color: #ff0000;
The border color properties are: border-top-color, border-right-color,
border-bottom-color, bottom-left-color, and border-top-color. Ex:
border-bottom-color: blue;
Border-style: It allows to set the color of your borders.
Syntax: border-style: none | dotted | dashed | solid | double | groove | ridge {1, 4}
Ex: border-style: dotted;
Padding: It allows to specify how much space should appear between the content of an
element and its border.
Syntax: padding: length | percentage {1,4}
Ex: td {padding: 5px;}
The padding properties are: padding-top, padding-right, padding-left, padding-bottom
Ex: padding-bottom: 4px;
Height and Width: It allows you to set the height and width for boxes.
Syntax: height: length | auto
width: length | percentage | auto
Ex: p {width: 200px; height: 100px ;}
Units and URLs:
29
Lect. in Computers
Lengths: These can be measured either Absolute or Relative.

Absolute units that can be used are
In: size in inches
cm: size in centimeters
mm: size in millimeters
pt: points where 1pt = 1/72 inches
pc: picas where 1pc=12 pt
Relative units that can be used are
em: the height of the font for this element
ex: the height of the letter “x” in the current font
px: pixels
Ex: body {border-width: 2px; padding: 2px;}
p { font-size: 10pt; } p { font-size: 1.1em; }
URLs: It can be used in stylesheets just as they can in HTML documents.
Syntax: url(location)
Ex: url(sunset. jpg)
url(“http://www.ssgs.com/sample.css”)
URLs can optionally be quoted and may be either absolute or relative.
Formatting Blocks of Information:
Classes:
A class is a definition of set of styles which can be applied as you choose. When they are not
necessary then don’t use them. Classes can be applied to a single type of element or may be
Anonymous and hence applicable to any element. The following code shows the difference
between the two types.
h1 { color: red; border: thin groove;}
h2.some { color:green; border: groove;}
.anyelement {text-align: right; color: purple; }
The style defined for h1 applies to all h1 elements in the document. The h2 style is only
applied when it is explicitly called.
<h2 class=”some”>……..</h2>
The .anyelement style can be applied wherever it is
needed <h2 class=anyelement>……..</h2>
<p class=anyelement>…….</p>
Ex:
<html>
<head><title>Classes </title>
<style>
body{ color: yellow ; background-color: red; }
h1.some {color: red; background-color: yellow ;}
.anyelement{color: blue; background-color: pink;}
</style></head>
<body>
<h1 class=some>Cascading Style Sheets</h1>
<p class=anyelement>
Styles are cascaded. This means one document is overridden by other.
30
Lect. in Computers
</p>
</body></html>
Divisions:
It allows to group together several elements to create sections or subsections of a page. Rather
than applying the formatting to the element itself, a <div>…</div>
Pair of tags are wrapped around the element. Any formatting that needs adding is placed inside
the div tag.
Syntax: <div class=”anyelement”>
<p>……..</p><h2>……</h2>
<p>……..</p><hr>
</div>
Ex:
<html> <head>
<title>Division Borders with Division Tags</title>
<style>
div{border:solid;border-color:red;background-color:yellow;color:blue;}
</style></head>
<body>
<div><h1>Hello friends</h1>
<p>This is the Testing paragraph in Cascading Style Sheets</p>
</div></body></html>
Spans:
It allows to apply CSS features only on specific data or characters instead of all the content in
the tag. The <span> element can be used to group inline elements only.
Syntax: <span class=”anyelement”>………</span>
Ex: <html><head><title>Spans</title>
<style>
span{border:solid;border-color:red;background-color:yellow;color:blue;}
</style></head>
<body>
<h1>C<span class=”span”>S</span>S</h1>
</body></html>
The <div> and <span> tags have identical parameters but the effects of those parameters
are altered by the context in which they are used.
Layers:
A layer is a transparent environment in the browser window that allows to organize different
presentations one upon another (as a stack representation). The default layer is treated as
one, html allows upto 20 bytes in a webpage.
The layer process can be done through CSS features. The CSS styles uses the following
attributes for representing layer presentation.
1. Z-index: It denotes the position of the layer, the value can be 1 to 20.
Syntax:z-index:n
2. Position: It allows to specify whether the layer is fixed or movable, the values can be
relative of absolute.
Syntax:position: absolute | relative
31
Lect. in Computers
3. Left: It allows to specify the left coordination value.
4. Top: It allows to specify the top coordination value.
5. Height & Width: It allows to specify the height and width of layer.
Syntax: height:n width:n
Ex: <html>
<head><title>Z-index Stacking</title></head>
<body style="background-color:blue;">
<h1>Layering Text</h1>
<div style="z-index:1;position:absolute;color:red;text:white; font-
size:50pt;border:thin groove;background-color:pink;margin-left:400;">
<p>This is First Layer</p></div>
<div style="z-index:2;position:absolute;color:magenta; font-size:50pt;background-
color:green;border:thin-groove;margin-left:300;margin-top:60;"> <p>This is Second
Layer</p></div>
<div style="z-index:3;position:absolute;color:black; font-size:50pt;
background-color:lime;margin-left:200;margin-top:120;"> <p>This is
Third Layer</p></div>
<div style="z-index:4;position:absolute;color:blue;
font-size:50pt;font-sytle:italic;background-color:yellow;margin-left:100;margin-top:180;">
<p>This is Fourth Layer</p></div>
</body></html>
32
Lect. in Computers
UNIT-3
An Introduction to Java Script
Web Browser: Web browser is client-side software which translates HTML documents into the
Web pages.
Ex: Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera, etc…,
Web Site: Collection of web pages is called Web site
Web Page: Web page is an individual HTML document which is translated by Web browser.
These Web pages are of two types, they are
1. Static Webpage: Static webpage is normal webpage which doesn’t contain any interaction
and effects
2. Dynamic Webpage: or Dynamic html (DHTML)?
Dynamic html or Dhtml is a combination of HTML, CSS, a Scripting language and the DOM
(Document Object Model) that allows documents to be animated. It refers to Web content that
changes each time it is viewed. For example, Live cricket scores, Stock exchange results, Time
of day, previous pages viewed by the reader, or profile of the reader.
JavaScript:
JavaScript developed by Netscape as LiveScript and has been changed to JavaScript when
endorsed by Sun Microsystems. Microsoft soon developed a version of JavaScript for their
Internet Explorer browser. It is called JScript. The two languages are almost identical, although
there are some minor differences. The other Scripting languages are VBScript, Perl, Python,
etc.,,
Benefits of JavaScript:
1. It is widely supported in Web browsers.
2. It gives easy access to the document objects and can manipulate most of them.
3. It can give interesting animations without the long download times associated with
many multimedia data types.
4. Web surfers do not need a special plug-in to use your scripts.
5. It is relatively secure.
1. Scripts can run slowly and complex scripts can take a long time to start up.
2. If script doesn’t work then page is useless.
3. Because of the problems of broken scripts many Web surfers disable JavaScript support
in their browsers.
4. Most scripts rely upon manipulating the elements of the DOM and access to
objects differs from Browser to browser.
Dialog Boxes or Pop up Boxes: JavaScript has three kinds of dialog boxes, They are
Alert( ) Box: An alert box shows a warning message in it. When it pops up the user has to click
“OK” to proceed.
Ex: alert(“Your message goes here”);
Confirm( ): The confirm box shows a message and an OK and Cancel button. If the user
presses the OK button the confirm method returns true. If the user presses Cancel the method
returns false.
Ex: confirm(“Are you sure?”);
33
Lect. in Computers
Prompt( ): The prompt box shows a message, a text entry field, an OK button, and a Cancel
button. If the user presses OK the text in the text entry field is returned as a string. If the user
presses Cancel the null value is returned by the prompt method. Prompt takes two
parameters. The first is a message (or instructions) and the second is default text that will
appear in the text entry field.
Ex: prompt(“Enter your name”,”Enter”);
JavaScript – The Basics:
JavaScript was designed to add interactivity to HTML pages. JavaScript is a Scripting language
and is usually embedded directly into the HTML pages. The <script> element can be used in
three ways as follows
1. Script within Head section:
JavaScript in the head section will be executed when called.

<html>
<head><title>A Sample JavaScript</title>
<script type=”text/javascript”>
function test(){
alert(“Welcome to the JavaScript”);
}
</script>
</head>
<body onload=”test()”>
</body>
</html>
2. Script within Body section:
JavaScript in the body section will be executed while the page loads.
<html>
</head>
<body>
<script type=”text/javascript”>
document.write(“Welcome to JavaScript”);
</script>
</body>
</html>
3. Script using External file:
When you want to run same script in several web pages with out writing in every page, then use
the external file with .js extension.
<html>
<script type=”text/javascript” src=”sample.js”></script>
34
Lect. in Computers
</head>
<body>
</body>
</html>
The key points that need to apply in all scripts are as follows.
1. JavaScript is case sensitive.
2. Each line of code is terminated by a semicolon.
3. Blocks of code must be surrounded by a pair of curly brackets.
4. Functions have parameters which are passed inside parentheses.
5. Variables are declared using the keyword var and should not be repeated.
6. Execution of a script starts with the first line of code and runs until there is no more code.
7. Comment line should be specified with the help of ‘//’ for Single line and ‘/*--------*/’
for Multiline comments
Variables:
Variables are containers for storing information (or) Variables are names that have values
assigned to them. JavaScript is an untyped language. This means that JavaScript variables can
hold data of any valid type. It takes its type from the data type of what it is holding. You cannot
declare a type for variables in JavaScript. There is no facility for saying this variable must be a
string, or this one must be a number.
For example, the following lines of JavaScript assign the value to a variable name.
i =2;
x=0;
And the following lines add the value to variable and assign the result to a new variable.
sum= i + 3;
x=y+4;
Variable Names:
In java script, the following are the rules for naming variables.
1. Names must begin with a letter, digit or the underscore.
2. Spaces are not allowed in names.
3. Names are case-sensitive i.e. bhaskar, BHASKAR and BHASkar all refer to different
variables.
4. Reserved words are not allowed as the variable names.
Date types:
Java Script has only four types of data as follows
Numeric: These are basic numbers. They can be integers such as 2,22,222 or floating
point values like 32.42, -77.01.
Example: i=22
i=42.42
Strings: A string is a collection of letters, digits, punctuation characters, and so on. It is the
JavaScript data type for representing text.
Example: name=”bhaskar”
User_name=’vijay bhaskar’
Visitor_name=”45.34”
35
Lect. in Computers
Boolean: Boolean variables hold the values true and false. It represents a "truth value", it says
whether something is true or not.
Example: a == 4
The above statement checks whether a equals to 4 or not.
Null: A null value means one that has not yet been decided.
Declaring the Variables:
JavaScript variables can be declared with the “var” keyword. It can declare multiple variables at
a time and also assigns the values at the same time. Variable is undefined until it assigns a value.
Var i;
Var i, sum;
Var i=3;
Var name=”bhaskar”;
Using variables in JavaScript:
<html>
<head><title>A Sample JavaScript</title></head>
<body>
<script language="javascript">
var visitor_name;
visitor_name=prompt("Enter ur name","");
document.write("<h1>Your name is "+visitor_name+"</h1>");
</script>
</body></html>
String Manipulation:
String Manipulation involves either joining strings, splitting them apart or searching through
them. JavaScript has functions which perform all those operations as follows
charAt():
This function returns the character which is at position index in the string. By repeatedly calling
the function, the whole string can be returned.
Syntax: charAt(index)
Example: Var welcome=”Hello World”; (or) var welcome=’Hello World’; The string
‘Hello World’ can be stored as follows
Result=welcome.charAt(0);
The result is H.
Concat( ):
JavaScript has two ways for joining the strings together. The simplest is to use the + operator as
follows
Example: Var a=”vijay”;
Var b=”bhaskar”;
Var result=a+b;
36
Lect. in Computers
The other is using concat() operator. This function is part of the string object and takes another
string, or comma separated list of strings as its arguments.
Syntax: Concat(“string”[,”string”[,…”string”]]):
Example: Var msg=”Thank you ”;
Var name=”Bhaskar”;
Var result=msg.concat(name);
Var result=msg.concat(name,”Good Bye”)
indexOf( ):
The string is searched for the string or quoted character in the first parameter. If the search is
successful, the index of the start of the target string is returned. The indices in the original string
number form 0 to string.length-1. If the search is unsuccessful, the operation returns -1. By
default the indexOf( ) function starts at index 0.
Syntax: indexOf( )
Example: var name=”nagarjuna”;
name.indexOf(‘g’) //Output is 2
lastIndexOf( ):
It works exactly the same as the indexOf( ) but in backwards direction.
Syn: string.lastIndexOf( );
Example: var name=”nagarjuna”;
name.lastIndexOf(‘g’)
length:
It holds the no of characters in the string. (Note that this is not a function and so you don’t have
to place parenthesis when using it.)
Syn: string.length;
Example: var name=”Bhaskar”;
Var i=name.length;
split( ):
Splits a String object into an array of strings by separating the string into
substrings. Syntax: split(separator,limit)
substr( ):
It returns the substring which starts at the character indicated by the start parameter. The
Substring continues either to the end of the string or for the number of characters indicated by
the length parameter.
Syntax: string.substr(start,length);
substring( ):
It returns the set of characters which starts at index1 and continues up to, but does not include the
character at index2. The following rules apply
1. If the index is less than 0 then it will be treated as 0.
2. If the index2 is greater than the length of the string, it is treated as the length of the string.
3. If the two index values are equal, an empty string is returned.
4. If index 2 is missing, all characters up to the end of the string are taken.
5. If index1 is greater than index2, a runtime error occurs.
Syntax: string.substring(index1,index2)
toLowerCase( ):
It converts all characters in the string to lower case.
37
Lect. in Computers
Syn: string.toLowerCase();
toUpperCase( ):
It converts all characters in the string to upper case.
Syn: string.toUpperCase();
Example:
<html>
<head>
<title>Perfect nos</title>
<body bgcolor="orange" text="blue">
<h1 align="center">String Manipulation</h1><hr>
<SCRIPT LANGUAGE="JavaScript"> var i="HI
HELLO FRIENDS";
var j="how are you";
document.write("<h3>");;
document.write("The string is "+i);
document.write("<br>The length of first string is "+i.length);
document.write("<br>The 4th Character in first string is "+i.charAt(4));
document.write("<br>The index of I is "+i.indexOf('I'));
document.write("<br>The lastindex of I is "+i.lastIndexOf('I'));
document.write("<br>The splitting of first string is "+i.split(" "));
document.write("<br>The substring is "+i.substr(3,6));
document.write("<br>The substring is "+i.substring(8,15));
document.write("<br>The concatenation of two strings is "+i.concat(j));
document.write("<br>The string string in lower case is "+i.toLowerCase());
document.write("<br>The string in upper case is "+i.toUpperCase());
</SCRIPT>
</body>
</html>
Mathematical functions:
These are the functions which performs the operation on numerical data. All the functions used
in complex mathematics must be accessed via the “math” object. This is usually done by
preceding the function name with the object name. var area=Math.PI*(r*r);
var num=Math.sqrt(25);
It is often convenient to use the “with” statement when a section of code uses several Math
constants and methods, so you don't have to type "Math" repeatedly. For example,
Ex: with(Math){
var area=PI*(r*r);
var num=sqrt(25);
}
38
Lect. in Computers
Method Description
abs(value) It returns the absolute value the number passed into it.
sqrt(value) It returns the square root of the value.
round(value) It returns the result of rounding its argument to the nearest integer.
pow(value,power) It returns the result of raising value to power
min(value1,value2) It returns the smaller of its arguments.
max(value1,value2) It returns the larger of its arguments.
log(value) It returns the natural logarithm of its argument.
ceil(value) It returns the smallest integer which is >= to the value.
cos(value),sin(value),tan(value) It returns the cosine, sine, tangent of the value passed.
floor(value) It returns the largest integer less than equal to a number.
random(value) It returns a pseudo-random number between 0 and 1.
exp(value) It returns the exponential value by raising the given value.
NaN This is a value which represents which is not a number.
isNan(value) It returns true if its argument is not a number and false if it is number.
parseInt(string,radix) It parses a string argument and returns an integer of the specified
radix or base.
parseFloat(string) It parses a string argument and returns a floating point number.
Statements:
Program instructions are grouped into units called statements.
Following are types of statements available in javascript, they are
1. Conditional Statements: Conditional statements are used to perform different actions based
on different conditions. JavaScript supports the following conditional statements
a) if statement: use this statement to execute some code only if
a specified condition is true.
Syn: if (condition)
{code to be executed if condition is true}
b) if...else statement: use this statement to execute some code if
the condition is true and another code if the condition is false.
Syn: if (condition)
{code to be executed if condition is true}
else
{code to be executed if condition is not true}
c) if...else if....else statement: use this statement to select one of many
blocks of code to be executed
Syn: if (condition1)
{code to be executed if condition1 is true}
else if (condition2)
{code to be executed if condition2 is true}
else
{code to be executed if condition1 and condition2 are not true}
39
Lect. in Computers
d) switch statement: use this statement to select one of many blocks of

code to be executed
Syn: switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
2. Loop Control Statements:
Loops execute a block of code in a specified no of times or specified condition is true. Following
are the control statements in JavaScript.:
a) for – For loop is executed till a specified condition returns false.
Syn: for(initialization; condition; increment)
{ code to be executed }
b)while – It loops through a block of code while a specified condition is true
Syn: while(condition)
{ code to be executed }
c)do…while: It executes the block of code at least once and then it will repeat the loop as
long as the specified condition is true.
Syn: do
{code to be executed }
while(condition);
3. Break statement: The break statement will break the loop and continue executing the code
that follows after the loop.
Syn: break;
4. Continue statement: The continue statement will break the current loop and continue
with the next value.
Syn: continue;
5. eval( ):It evaluates the expression.
Syn: eval( “32*756”);
Operators:
An operator is a symbol that performs specific mathematical or logical manipulations. An
operator
acts up on variable called operands. JavaScript has assignment, comparison, arithmetic,
bitwise, logical, string, and special operators.
40
Lect. in Computers
Operator Category Operator Description

Arithmetic Operators + If the arguments are numbers then they are added together. If
the arguments are strings then they are concatenated and the
result is returned.
- As a unary operator, negates the value of its argument. As a
binary operator, subtracts 2 numbers.
* Multiplies two numbers
/ Divides the first number by the second
% Modulus division returns the remainder from the division.
++ It increases the value of its argument by one
-- It decreases the value of its argument by one
Logical Operators && Logical AND returns true if both operands are true, otherwise it
returns false
|| Logical OR returns true if one or both operands are true,
otherwise it returns false.
! Logical NOT returns false if the operand evaluates to true,
otherwise it returns true.
Comparison operators == It returns true if the two operands are equal
!= It returns true if the two operands are not equal
< It returns true if the left operand is less than the right
> It returns true if the left operand is greater than the right
<= It returns true if the left operand is less than or equal to the
right
>= It returns true if the left operand is greater than or equal to the
right.
Assignment Operators = It assigns a value to a variable.
+= It adds two numbers then assigns the result to first.
-= It subtracts two numbers then assigns the result to first.
*= It multiplies two numbers then assigns the result to first.
/= It divides 2 numbers and assigns the result to the first.
%= It computes the modulus of 2 numbers and assigns the result
to the first.
&= Performs a bitwise AND and assigns the result to the first
operand.
^= Performs a bitwise XOR and assigns the result to the first
operand.
|= Performs a bitwise OR and assigns the result to the first
operand.
<<= Performs a left shift and assigns the result to the first operand.
>>= Performs a sign-propagating right shift and assigns the result to
the first operand.
41
Lect. in Computers
>>>= Performs a zero-fill right shift and assigns the result to the first
operand.
Conditional Operator (condition)?
true:false;
Arrays:
An array is a special variable which can hold more than one value at a time. It is made up of a set
of slots with each slot assigned to a single value. These values can be accessed either
sequentially from start of the array or by their index.
Item one Item two Item three ……………… Item N
Structure of Array
Creating Arrays: JavaScript arrays can be constructed in three different ways as follows
1. The easiest way is simply to declare a variable and pass it some elements in array format.
Syn: var fruits=[“Apple”,”Mango”,”Grapes”,”Bananna”] ;
It creates an array of four elements, each holding a text string. The array of elements are
surrounded by square brackets
2. Create an array object using the keyword new and a set of elements to store.
Syn: var fruits=new Array(“Apple”,”Mango”,”Grapes”,”Bananna”);
Using this construct, the contents of the array are surrounded by parentheses because they are
parameters to the constructor of the Array object.
2. An empty array object which has space for a number of elements can be created.
Syn: var fruits= new Array(3);
Adding Elements to an Array: Array elements can be accessed by index. The index denotes the
position of the element in the array.
Syn: fruits[0]=”Apple”;
fruits[1]=”Mango”;
fruits[2]=”Grapes”;
fruits[3]=”Bananna”;
When it need to add an item to an array which is already full then JavaScript
interpreter simply extends the array and inserts the new item.
Ex: fruits[4]=”Orange”;
Accessing Array Members:
The elements in the array are accessed through their index. The index no starts at 0. It is
also used to find elements and to change their value.
Ex: var colors=[“red”,”green”,”blue”];
document.write(colors[0]); //returns red
Searching an Array:
For searching the array, read each element and compare it with the value that you want.
Ex: var len=colors.length;
for(var count=0;count<len;count++){
if(colors[count]==”green”){
document.write(colors[count]+”,”);
break;
42
Lect. in Computers
}}
Here the color “green” is compared with each element in the colors array. If two elements are
equal a message is printed out. Break statement is used to stop the seach.
Removing Array Members:
JavaScript doesn’t provide a built-in function for removing the element in array. To remove an
element use the following process.
Ex:
<html>
<head><title>New Page 2</title></head>
<body>
<script type="text/javascript">
var student=["sno","sname","fee","course"];
document.write("Original Array is ");
for(x in student){
document.write("<br>"+student[x]);
}
var rem=prompt("which item u want to
remove",""); var tmp=new Array(student.length-1);
var j=0;
var len=student.length;
for(var i=0;i<len;i++){
if(student[i]==rem){}
else{
tmp[j]=student[i];
j++;
}}
student=tmp;
document.write("<br>Array after removing is ");
for(y in student){
document.write("<br>"+student[y]);}
</script></body>
</html>
Object-based Array Functions:
In JavaScript an array can act like an object. Specify the name of array followed by dot then
the name of the function with parameters in parentheses. Syn:
Arrayname.function(parameter1,parameter2);
Concat( ):The array.concat() method allows you to join two array objects into a new, third array
object.
Syn: array.concat(array2,array3,….);
Ex: var array1 = new Array(1,2,3)
var array2 = new Array(“a”,”b”,”c”)
var array3=new Array(“I”,”II”,”III”);
var array3 = array1.concat(array2,array3)
/ result: array with values 1,2,3,”a”,”b”,”c”, “I”,”II”,”III”
Join( ):It joins the elements of array with the given parameter.
43
Lect. in Computers
Syn: array.join(“,”);
Pop( ): This function removes the last element from the array and also reduces the number of
elements in the array by one.
Syn: array.pop( );
Push():It adds a list of items at the end of the array. The items are separated using comma in
parameter list.
Syn: array.push(element1,element2, …….,element n);
Reverse( ): It swaps all of the elements in the array in reverse order i.e. first is last and
vice verse.
Syn: array.reverse( );
Shift( ): It removes the first element of the array and also shortens it length by one.
Syn: array.shift( );
Unshift( ): It inserts a list of elements on to the front of the array.
Syn: array.unshift( );
Sort( ): It sorts the array in lexicographic, dictionary order. Elements in the array which are not
text are first converted to strings before the sort operation is performed. Syn: array.sort( );
Splice( ): It alters the array by removing some elements and at the same time adding new
elements.
Syn: array.splice(index,deletecount,element1, element2,….element n);
Here the first parameter index indicates the position in the array at which the new elements
should add and the second parameter deletecount indicates how many elements should delete
from the original array. If you don’t want to delete elements then set it to 0.Finally there is a list
of elements which are to be inserted into an array.
Slice( ): It extracts a range of elements from an array. It needs two parameters, the first is to
indicate the starting position and the second is to indicate the last position. Syn:
slice(start,finish);
When you specify single parameter, all elements from the specified one to the end of the array
are selected. Once the elements have been sliced they are returned as a new array. The original
array is unaltered by this fuction.
Example:
<html><head>
<title>Arrays</title></head>
<body bgcolor="orange" text="blue">
document.write("<h1><center> Object based Array Functions</h1></center><hr>");
var num=[1,2,3];
var roman=["I","II","III"];
var alpha=new Array("a","b","c");
document.write("<h3>The concatenated array is
</h3>"); var result1=num.concat(roman,alpha); var
len1=result1.length;
for(var i=0;i<len1;i++){
document.write(result1[i]+",");
44
Lect. in Computers
}
var day=["Monday","Tuesday","Wednesday","Thursday","Friday"];
document.write("<h3>The elements after joining with ',' seperator<br
/></h3>"); document.write(day.join(","))
document.write("<h3>The elements after pop() function<br /></h3>");
day.pop();
document.write("<br />"+day.join(","));
document.write("<h3>The elements after push() function<br /></h3>");
day.push("Friday","Saturday");
document.write("<h3>The elements after reverse() function<br
/></h3>"); day.reverse();
document.write("<h3>The elements after shift() function<br /></h3>");
day.shift();
document.write("<h3>The elements after unshift() function<br /></h3>");
day.unshift("Sunday","Saturday");
document.write("<h3>The elements after sort() function<br /></h3>");
var words=["dog","bat","gun","cat","apple"] words.sort();
document.write("<br />"+words.join(","));
document.write("<h3>The elements after splice() function<br /></h3>");
words.splice(4,0,"egg","fan");
document.write("<br />"+words.join(","));
document.write("<h3>The elements after slice() function<br /></h3>");
var web=words.slice(2,4);
document.write("<br />"+web.join(","));
</script>
</body></html>
Functions:
A Function is a piece of code which allows to perform a specific task when it is invoked. Every
function is made up of a number of statements and is identified by a unique identification name.
By creating a function the same piece of code can be used repeatedly throughout the program.
Defining Functions:
Functions can be defined using the function keyword. The function name can be any
combination of digits, letters and underscore but cannot contain a space. The block of code in the
function must be placed in the curly brackets.
Syn: function name( ){
//code goes here
}
Ex: function a_function_name( ) { }
They can be defined both in the <head> and <body> section of a document. It can be invoked
by event handlers or by statements elsewhere in the script.
45
Lect. in Computers
Parameter Passing:
The parameters are variables or values passed into the function.
Syn: function name(parameter_1,parameter_2){
Statements;
}
Examining the Function Call:
In JavaScript parameters can be passed as arrays. Every function has two properties that can
be used to find information about the parameters.
Function.arguments: It is the array of parameters that have been passed.
Function.arguments.length: It is the no of parameters that have been passed into the function.
Returning Values:
The return statement is used to specify the value that is returned from the function.
Syn: return;
return expression;
Example:
<html><head><title>New Page 1</title>
function product(a,b){
document.write("The first no is "+product.arguments[0]);
document.write("<br> The second no is "+product.arguments[1]);
return a*b;
}
</script></head>
<body>
document.write("<br>product is "+product(4,3));
</script></body></html>
JavaScript support two types of functions, They are
1. Pre-defined functions or Built-in functions: These are built-in functions which performs a
predefined operation when ever invoked. Some of the built-in functions in JavaScript are
a. Mathematical functions
b. String functions
c. Date functions
2. User-defined functions: JavaScript allows to create user defined functions for performing
user defined operations. They can also take arguments. The argument should be passed through
calling.
Scoping Rules:
Scoping rules determines how a variable can be accessed. In JavaScript, variables can be either
local or global.
Local: Local variables are declared inside a function and can be accessed in that function only.
When you exit the function, the variable is destroyed. If any function needs the value associated
with a local variable then it can be passed as a parameter.
Global: Global variable is available to all parts of the program such that variables declared
outside of any function and are used to hold static data that can’t be altered once it has been
46
Lect. in Computers
created. The lifetime of these variables starts when they are declared, and ends when the page
is closed.
The following example shows the difference between global and local variables
Objects in Java Script:

Data and objects in java script:
JavaScript is an excellent language to write object oriented web applications. It is not a true
Object Oriented language like Smalltalk or Eiffel but it tries the primitive objects that JavaScript
does provide are more useful because the Built-in functions use these ideas.
Object:
An object is a thing or It is an instance of class. It can be anything that you like from some data
through a set of methods to an entire system. Objects contain methods (Functions) and properties
in javascript. The reason behind the using the object orientation in their programming is it lets
software designers and programmers mimic the real world in their designs. Real objects are more
than just data or processing but data often describes something but the thing being described has
the ability to act. For example, a car is an object. The properties of the car include name, model,
weight, color, etc. The methods of the car could be start(), drive(), brake(), etc..
Class:
A class is a description of something or It defines the characteristics of the object. A class
usually contains some data items and some methods. Each class provides services to other
classes in the system.
Creating Objects in Java script:
JavaScript gives you the ability to make your own objects for your own applications. Almost
everything in JavaScript is an object such as Strings, Dates, Arrays, RegExp, etc., There are
several ways to create objects in JavaScript, The simplest way is to use the new operator,
specifically, new Object().
Example:
<script language="javascript" type="text/javascript">
person = new Object()
person.name = "Bhaskar"
person.height = "6ft"
person.run = function() {
this.state = "running"
this.speed = "4ms"
}
</script>
new(): The keyword new is used to create objects. It allocates memory and storage for
them. When ever you define an object, The strings should be in quotes (“ ”) and numbers
with out quotes like 0.
This: When ever you refer to a variable which is part of same object then It must be preceded
with this keyword. It differentiates the global and local variable with the same name. Separate
the variable name form this with a dot.
Dot(.): When referring to a property of an object, whether a method or variable, a dot is placed
between the object name and the property.
47
Lect. in Computers
Built-in Objects:
The Javascript built-in objects are the predefined objects that came with the browser. These
objects are accessible anywhere in your program and will work the same way in any
browser running in any operating system.
The following is the list of all important JavaScript Built-in Objects:
1. Document Object
2. Window Object
3. Form Object
4. Browser Object
5. Date Object
6. String Object
7. Array Object
8. Math Object
9. RegExp Object
JavaScript has the following Built-in objects that define it as a language.

1. Document Object:
A Document is a Webpage that is being either displayed or created. The Document object has a
no of properties and methods that can be accessed by JavaScript and used to manipulate the
content of the page. The following are some of the properties and methods of document object.
1. write( ): It writes to the document that the "string" entered.
2. writeln( ): It writes to the document that the "string" entered and inserts a new line
character at the end.
Syn: document.write(“Hello”);
document.writeln(“Hello”);
3. bgColor: It is used to change the background color of the document.
4. fgColor: It is used to change the foreground (text) color of the document.
5. link,alink,vlink: These three properties are used to change the colors of
hyperlink, activated link and the visited link.
6. anchors: An array containing all of the anchors in the document. Anchors can be
accessed as follows
Syn: document.anchors[0];
7. links: An array containing all of the links on the page.
Syn: document.links[0];
8. forms: An array containing all of the forms on the page.
Syn: document.forms[0];
9. layers: An array containing all of the layers on the
page. Syn: document.layers[0];
10. close( ): The document is not completely written until the close method has been called.
Ex:
<html>
<body>
document.bgColor=”yellow”;
document.fgColor=”blue”;
48
Lect. in Computers
document.write("Hello World!")
document.close( );
</script>
</body>
</html>
2. Window Object:
The window object represents an open window in a browser. By using these object, the new
window can be pop up with user specifications.Some of the properties and methods
available from Window objects
1. Open( ): This method is used to generate the new window. This method contains up to three
parameters that define window characteristics, such as the URL of the document to load, its
name and physical appearance options.
Syn: window.open(“URL”,”name”);
Ex: window.open(“sunset.jpg”,”Image”);
2. Close( ): This method is used to close the current window.
3. scroll( ): This method is used to scroll the content of the window automatically. The
coordinates are given in pixels.
Syn: scroll(coordinate, coordinate)
The following are the attributes of a pop up browser window. They can be displayed or hidden
based on the desire of the user.
toolbar=1|0
location=1|0
directories=1|0
status=1|0
menubar=1|0
scrollbars=1|0
resizable=1|0
The following two properties sets the size of the window.
height=pixel
width=pixel
Ex:
<script language="JavaScript">
open("java.html","test",
"toolbar=0,menubar=0,width=200,height=200,resizable=1") </script>
3. Form Object: Forms on the page are represented in JavaScript via the form object.
Two aspects of the form can be manipulated through javascript. First, the data that is
entered in the form can be checked. Second you can actually build forms through
javascript. The elements in the form are held in an array.
A form can be submitted by calling the JavaScript submit method or clicking the form submit
button.
The following events are used to trigger the data validation.
onClick=”method”
49
Lect. in Computers
This event is triggered when the user clicks on the element.

onSubmit=”method”: This event is triggered when the user submit the data.
onReset=”method”: This event is triggered when the user Resets the form.
Ex:
<html>
<head><title>Form Validation</title>
function validate(){
var name=document.forms[0].elements[0].value;
if(name==raju)
alert(“Hi raju”);
else
alert(“Not identified”);
}
</script>
</head>
<body>
<form>
Name:<input type=”text” name=”user”><br>
<input type=”submit” value=”submit” onclick=”validate()”>
</form>
</body>
</html>
4. Browser Object: The Browser is also called as Navigator. The navigator object
contains information about the browser. The following are the some of the properties of
a. navigator.appCodeName: It returns a string representing the code name of the browser.

b. navigator.appName: It returns a string representing the browser.
c. navigator.appVersion: It returns a string representing the browser version.
d. navigator.userAgent: It returns the appCodeName and appVersion concatenated together.
e. navigator.plugins: It is an array containing the details of all installed plugins.
f. navigator.mimeTypes: It is an array of all the supported MIME (Multipurpose Internet
Mail Extension) types. It is useful to make sure that the browser can handle your data.
5. Date Object:
The Date object is a data type built into the JavaScript language. Date objects are created
with the new Date( ) as shown below.
var d=new Date( );
Once a Date object is created, a number of methods allow you to operate on it. Here is a list
of each method and its description.
50
Lect. in Computers
Method Description
Date() Returns today's date and time
Returns the day of the month for the specified date according to local
getDate()
time.
Returns the day of the week for the specified date according to
getDay()
local time.
getFullYear() Returns the year of the specified date according to local time.
getHours() Returns the hour in the specified date according to local time.
Returns the milliseconds (0-999) in the specified date according to local
getMilliseconds()
time.
getMinutes() Returns the minutes in the specified date according to local time.
getMonth() Returns the month in the specified date according to local time.
getSeconds() Returns the seconds in the specified date according to local time.
Returns the numeric value of the specified date as the number of
getTime() milliseconds since January 1, 1970, 00:00:00 UTC.
Returns the year in the specified date according to local time. Use
getYear() getFullYear instead.
setDate() Sets the day of the month for a specified date according to local time.
setFullYear() Sets the full year for a specified date according to local time.
setHours() Sets the hours for a specified date according to local time.
setMilliseconds() Sets the milliseconds for a specified date according to local time.
setMinutes() Sets the minutes for a specified date according to local time.
setMonth() Sets the month for a specified date according to local time.
setSeconds() Sets the seconds for a specified date according to local time.
Sets the Date object to the time represented by a number of milliseconds
setTime() since January 1, 1970, 00:00:00 UTC.
toLocaleString() Converts a date to a string, using the current locale's conventions.

Returns the "time" portion of the Date as a string, using the current
toLocaleTimeString() locale's conventions.
toGMTString Returns the date formatted as a string in GMT format.
51
Lect. in Computers
Regular Expressions:
A regular expression is an object that describes a pattern of characters that present in a string.
One common task in software development is parsing of a string looking for a particular
pattern. For instance, a script might take name data from a user and have to search through it
checking that no digits have been entered. This type of problem can be solved by reading
through the string one character at a time looking for the target pattern. The useful approach in
scripting languages is to create a pattern called a Regular Expression.
The Regular Expressions can be defined in the following two ways. A static regular expression is
created as
Var regexp=/boss|bose/;
Dynamic patterns are created using the new keyword.
Var regexp= new RegExp(“boss|bose”);
JavaScript Regular Expression Grammar is as follows

Token Description
^ Match at the start of the input string
$ Match at the end of the input string
* Match 0 or more times
+Match 0 or more times
?Match 0 or 1 time.
a|b Match a or b
{n} Match the string n times
\d Match a digit.
\D Match anything except for digits.
\w Match any alphanumeric character or the underscore.
\W Match anything except alphanumeric characters or underscore.
\s Match a White space character.
\S Match anything except for White space characters.
[….] Creates a set of characters which has to match if the operation is to be successful.
[^….] Creates a set of characters which must not match. If any character in the set matches
then the operation has failed.
Functions:
Regular Expressions are manipulated using functions which belong to either the RegExp or
string classes.
Class String Functions:
1. match(pattern): It searches for a matching pattern and returns an array holding
result or null.
2. replace(pattern1,pattern2): It searches for pattern1 and replaces it with
pattern2 when it is successful.
3. search(pattern): It searches for the pattern in the string and returns index
if successful otherwise it returns -1.
4. split(pattern): It splits the string into parts based up on the given pattern.
52
Lect. in Computers
Class RegExp Functions:

1. exec(string): It executes a search for matching pattern and returns an array holding
result.
2. text(string): It searches for a match in its parameter string and returns true or false as
a result.
Example:
<html>
<head><title>Regular Expressions</title>
</head>
<body>
<script>
</script>
var re=new RegExp(“B|boss”);
Var msg=”Have you met Boss today?”
Var results=re.exec(msg);
If(results){
alert(“I found”+results[0]);
}
else{
Alert(“I didn’t found”);
}
</body></html>
Flags:
The default behavior of Regular Expressions is to work only on single lines of data, to stop as
soon as the match is successful and to use the pattern exactly as written. It can be modified by
using the following three flags.
Flag Meaning Description
Global The RegExp searches for a pattern throughout the string, replacing all
g
Search occurance or creating an array of all matches.
Ignore
i The regular expression becomes case insensitive.
Case
Multiline Allows an expression using ^ and/or $ to match text that is wrapped
m
Input to multiple lines in a textarea
The flags can be applied in two ways as follows
regex=/boss|bose/ig;
regex=new RegExp(“boss|bose”,”ig”)
Exception Handling:
An exception is a problem that arises during the execution of a program. An exception can occur
for many different reasons such as a user enters invalid data or does something unexpected.
Javascript allows a mechanism to deal with these errors. This mechanism is called as Exception
Handling.
53
Lect. in Computers
An exception in object based programming is an object, created dynamically at run-time, which

encapsulates an error and some information about it. Javascript allows to create our own
exception classes to include exactly what you need to handle the problem. The following
statements are used to handle the exception in Java script.
Throw:
When an error occurs or something goes wrong then the JavaScript engine will normally
stop, and generate an error message by throwing the exception. The syntax of throw is
Syn:
do something
if an error happens{
create a new exception object
throw an exception
}
Try…..catch:
The try statement allows you to define a block of code to be tested for errors while it is being
executed.
The catch statement allows you to define a block of code to be executed, if an error occurs in the
try block.
The JavaScript statements try and catch come in pairs.
Syn:
try {
Run some code here
}
catch(err) {
Handle errors here
}
Example:
<html>
<head><title>Exception Handling</title>
<script>
function myFunction( ){
try {
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "to high";
if(x<5) throw "too low";
}
catch(err) {
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
</head>
54
Lect. in Computers
<body>
<h1>Exception Handling</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
</body></html>
Events Or Event Handlers:
JavaScript is an Event-driven system. An Event is any change that the user makes to the state of
the browser.
JavaScript's interaction with HTML is handled through events that occur when the user or
browser manipulates a page. When the page loads, that is an event. When the user clicks a
button, that click, too, is an event. Another example of events are like pressing any key, closing
window, resizing window etc. Developers can use these events to execute JavaScript coded
responses. Event Handlers are javascript functions which you associate with an HTML element
as part of its definition in the HTML source code as follows.
Syn: <element attributes event=”Handler”>
Ex: <body bgcolor=”yellow” onLoad=”show()”>
The following are the lowest common set of event handlers
Event Description
onchange Script runs when the element changes
onsubmit Script runs when the form is submitted
Onreset Script runs when the form is reset
Onselect Script runs when the element is selected
Onblur Script runs when the element loses focus
Onfocus Script runs when the element gets focus
onkeydown Script runs when key is pressed
onkeypress Script runs when key is pressed and released
Onkeyup Script runs when key is released
Onclick Script runs when a mouse click
ondblclick Script runs when a mouse double-click
onmousedown Script runs when mouse button is pressed
onmousemove Script runs when mouse pointer moves
55
Lect. in Computers
onmouseout Script runs when mouse pointer moves out of an

element
onmouseover Script runs when mouse pointer moves over an
element
onmouseup Script runs when mouse button is released
onDragDrop Script runs when the file is dragged from the
mouse and dropped on to the browser.
Onresize Script runs when the window is resized
Onmove Script runs when the window is moved
onLoad Script runs when the page is loaded by the
browser
OnUnload Script runs when the user leaves the browser
Example:
<html>
<head>
function wel() {
alert(”Welcome to this page")
}
function sayHello() {
alert("Hello World")
}
function bye() {
alert(“Good bye”)
}
</script></head>
<body>
<input type="button" onLoad=”wel()” onClick="sayHello()" onUnload=”bye()”
value="Say Hello" />
</body></html>
56
Lect. in Computers
UNIT-4
DHTML
Dynamic HTML with Java Script:
Data validation:
Data Validation is the process of ensuring that the data which has entered by the user is correct
data for a particular application. It specifies the user to enter or submit only the set of characters
which the application requires. Form validation used to occur at the server, after the client had
entered all necessary data and then pressed the Submit button. If some of the data that had been
entered by the client had been in the wrong form or was simply missing, the server would have
to send all the data back to the client and request that the form be resubmitted with correct
information. This was really a lengthy process and over burdening the server.It would be nice to
validate data that is entered into your forms at the client.
RegExp class provides everything that you need to validate data. It checks any name entered by
the users only has allowable characters in it but it is not possible to check whether it is correct or
wrong. The string “abcd” has all characteristics of real name even it is not the real name.
JavaScript provides a way to validate form's data on the client's computer before sending it to the
web server.
Example:
<html>
<head>
<title>Form Validation</title>
Function validate(){
Var name=document.forms[0].elements[0].value;
Var rename=new RegExp(“[A-Za-z_]”);
If(name.match(rename)){
Document.write(“Valid Name”);
}
Else{
Document.write(“It is not Valid Name”);
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="validate()">
Name:<input type="text" name="Name" /><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
57
Lect. in Computers
Opening a new window:

The Built-in Window object is used to open a new window in JavaScript. In Window object, The
Open( ) function allows to open a new browser window for the viewer to use and the Close( )
function is used to close the current window. All the names and attributes are separated with a
comma rather than spaces. The following syntax can be used to display the new window. Syn:
window.open('url to open','window name','attribute1,attribute2')
Ex: window.open('sunset.jpg','mywindow','width=400, height=200,toolbar=yes,
location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')
1.url to open: This is the web address of the page you wish to appear in the new window.
2. window name: It specifies the name of the window.
3. attribute1,attribute2: It specifies the list of attributes that you can adjust.
Example:
<html>
<head>
</head>
<body>
<h1>Click on the following button to open new window</h1>
<FORM>
<INPUT type="button" value="New Window!"
onClick="window.open('sunset.jpg','mywindow','width=400,height=200,toolbar=yes,
status=yes,menubar=yes,scrollbars=yes,resizable=yes')">
</FORM>
</body></html>
Status bar: A status bar is an area at the bottom of a window that displays information about
the current window's state background tasks or other contextual information. It usually displays
helpful information about operation of the browser. It can not be used to display our own
messages. Few people ever look at the status bar so if it is showing your message they may not
notice it. The following code is used to display the message in status bar. <html>
<head>
function msg( ) {
self.status=”This is Boss message”;
}
</script></head>
<body onLoad=”msg()”>
<h1>The Status bar says….</h1>
</body></html>
58
Lect. in Computers
A text-only menu system:

Text Menu is the simple approach that uses the collection of lists in the body of your document
that have the appropriate links. The script either shows or hides elements depending on the
mouse over event and cursor position. By Combining the techniques from Rollover and Layer
swapping we get a simple, fast and effective menu system.
Example:
<html>
<head><title>Drop down text menu<title>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script></head>
<body>
<h3>Drop down menu</h3>
<table>
<tr>
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
<a href="">Tutorials</a><br />
<table id="tutorials" width="120">
<tr><td ><a href="html">HTML</a></td></tr>
<tr><td ><a href="xhtml">XHTML</a></td></tr>
<tr><td ><a href="css">CSS</a></td></tr>
<tr><td ><a href="xml">XML</a></td></tr>
<tr><td ><a href="dhtml">DHTML</a></td></tr>
</table>
</td> </tr></table>
<p>Mouse over these options to see the drop down menus</p>
</body></html>
Moving images:
In fact this is not a moving image at all, that is just the effect. What is actually moving is a layer
of content. The image flies from the left of the screen five times before positioning it in the
center of the screen.
This HTML code creates a division of the page named “logo” and positioned at pixel 5,1000.
The layer must be positioned absolutely so that the browser does not mess up the look of the
page and must be visible. The content of this division is image. When the page is loaded the
function move () is called. It checks the counter, If the counter is less than 5 then the layer
containing the image will be moved. If the left side of the layer is at 200 then the image has
finished the moving across the screen and again it is repositioned to pixel 1000 until the counter
less than 5. The move() function itself called by using setTimeOut(). It takes the delay in
59
Lect. in Computers
milliseconds. In this case, our image moves 10 pixesl left every 200 ms. If the counter equal to 5
then the image is placed at pixel 200 and no more processing is performed.
Example:
<html>
<head>
var count=0;
function move( ) {
if(count<5){
if(document.layers[“logo”].left==200){
count++;
document.layers[“logo”].left=1000;
}
document.layers[“logo”].left-=10;
setTimeout(‘move()’,200)
}
else
document.layers[“logo”].left=200;
}
</script></head>
<body onLoad=”move()”>
<div id=”logo” style=”top:5;z-index:4;left:1000;visibility:visible;position:absolute;”
<img src=”smiley.jpg”></div>
</body></html>
Writing to a different frame:
Once frameset and Javascript are combined on the same page then a site can begin to develop
some interesting interactive aspects. The WebPages with links in one frame and output in another
frame provides easy movement through complex data. Color Picket is one of the most popular
use of frames.
The simple color picker has two frames. The upper one contains the form which is used
for data gathering and the lower frame shows the result of the color selections. This application
totally runs on the client side.
Example:
Main.html
<html>
<head><title>Writing to diff frame</title></head>
<frameset rows=”40%,*”>
<frame name=”upper” src=”upper.html”>
<frame name=”lower” src=””>
</frameset>
</html>
Upper.html
<html>
<head><title>Writing to diff frame</title>
60
Lect. in Computers
<scrip type=”text/javascript”>
function show(){
Var bg=document.forms[0].elements[0].value;
Var fg= document.forms[0].elements[1].value;
Var bottombox =parent.frames[“lower”].document;
bottombox.open();
bottombox.write(“<body bgcolor=”+bg+” text=”+fg+”>This is Sample Text</body>”);
bottombox.close();
</script></head>
<body>
<h1 align=”center”>Color Picker</h1>
Enter Color Values in the boxes:<br>
<form>
Background Color: <input type=”text” name=”bgcol”><br>
Text Color: <input type=”text” name=”fgcol”><br>
<input type=”button” value=”Show” onClick=”show()”>
</form></body></html>
Rollover buttons:
Rollover effect is one of the most common usage of Dynamic HTML. JavaScript code does not
directly manipulate the image. Rollover Technique is used to give visual feedback about the
location of the mouse cursor by changing the images on the page as the mouse moves over them.
It uses two image files which it swaps between as the mouse is moved. One image is created for
the Active state when the mouse is placed over the image. A second image is created for the
Inactive state when the mouse cursor is not over the image. Usually the images are identical
apart from some highlighting for the active image.
Example:
The following code shows the Roll over effect. The event onmouseover calls a javascript
function when the cursor passes over the image and onMouseOut calls the function when the
cursor moves away from the image.
<html>
<head>
function bulbon(){
document.getElementById('myimage').src="bulbon.gif";
}
function bulboff(){
document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>
<body>
<img src="bulboff.gif" id="myimage" onMouseOver="bulbon( )" onMouseOut=”bulboff( )”
width="100"
height="180" />
<p>Move the pointer to turn on/off the light</p>
61
Lect. in Computers
</body>
</html>
Floating logos:
Floating is the process of moving an image or Logo from one side to another just like the moving
images. In fact this is not a moving image at all, that is just the effect. What is actually moving is
a layer of content. Floating Logos example is most complex and takes the most time and effort to
develop. Some websites like Geocities which display a floating logo in the bottom right hand
corner of the screen. As you resize the browser window or scroll then the logo remains fast in the
corner.
Example:
<html>
<head>
<title>Floating Logo</title>
<SCRIPT LANGUAGE="JavaScript">
var mover = null
var object = "logo"
if (navigator.appName.indexOf("Netscape") != -1) {
var mover = "document.logo.top = window.pageYOffset"
}
else {
var mover = "logo.style.pixelTop = document.body.scrollTop"
}
function floater() {
object = "logo"
eval(mover)
setTimeout("floater()", 10)
}
</SCRIPT>
</head>
<body onLoad="floater()">
<div id="logo" style="position:absolute; visibility:show; left:130px; top:0px; z-index:0">
<a href=""><img src="pbdBan2.jpg" border=0 width="510" height="70"></a> <br>
</div>
<br><br><br><br>
<h1> Floating Logo Image Script </h1>
<h3>Scroll the page and watch the logo.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</script>
</body>
</html>
Multiple pages in a single download:
DHTML opens up some interesting possibilities. One that is fairly obvious but rarely used is
having several pages in a single download. Instead of using a separate file for each page, It places
each page of content in a separate layer and switch between those layers. This technique
62
Lect. in Computers
will not work if the layers have too much content or too many images. It is also not possible if
the visitors to your site want to see all of the pages. However, where most of your data is text
based and users are going to see all that information, this is a good trick. It also works well as
a way of splitting a single large document into several screens of data so that users don’t have
to scroll up and down.
Example:
<html>
<head>
<title>Multiple Pages in a Single</title>
<script language="javascript">
var objPage = null;
function showPage(pageName) {
if (objPage) objPage.style.
display = 'none';
objPage=document.getElementById
(pageName);
objPage.style.display = 'block';
}
</script>
<style type="text/css">
.page { display:none;}
</style>
</head>
<body>
<h1>Multiple Pages in Single Download</h1>
<a href="javascript:showPage('page1')" target="_self">Image 1</a> |
<a href="javascript:showPage('page2')" target="_self">Image 2</a> |
<a href="javascript:showPage('page3')" target="_self">Image 3</a>
<br /><br />
<div id="page1" class="page">
<h2>IMAGE I</h2>
<img src="winter.jpg">
</div>
<h2>IMAGE II</h2>
<img src="sunset.jpg">
</div>
<h2>IMAGE III</h2>
<img src="water lilies.jpg">
</div>
</body>
</html>
63
Lect. in Computers
Unit – 5
XML : Defining Data for Web applications
Basic XML Structure:
Extensible Markup Language (XML) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable. It is defined
in the XML 1.0 Specification produced by the W3C, and several other related specifications.
XML is used to describe the structure of a document not the way that is presented. The following
is the Basic XML structure
Ex1: <? xml version=”1.0” ?>
<note>
<date>2008-01-10</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Ex2: <address>
<name>
<title>Mrs.</title>
<first-name>Mary</first-name>
<last-name> McGoon</last-name>
</name>
<street>1401 Main Street </street>
<city state="NC">Anytown</city>
<postal-code> 34829 </postal-code>
</address>
XML Elements:
XML documents are composed of just three things, they are Elements, Control Information and
Entities.
I. Elements:
An XML element is everything from (including) the element's start tag to (including) the
element's end tag. An element can contain other elements, simple text or a mixture of both.
Elements can also have attributes.
1. Nested Tags: The Tag with in another tag are called as Nested tags. In XML, all elements
must be properly nested within each other i.e they must be closed in reverse order in which
they were opened.
Ex: <b><i>This text is bold and italic</i></b>
2. Empty Tags: Elements usually have content. If the content of the element is missing then the
tag becomes as <name />
3. Case sensitive: XML tags are case sensitive. The tag <Letter> is different from the tag
<letter>.
Ex: <message>This is correct</message>
4. Attributes: XML elements can have attributes values in pairs just like in HTML. In
XML, the attribute values must always be quoted.
64
Lect. in Computers
Ex: <note date="12/11/2007">

<to>Tove</to>
<from>Jani</from>
</note>
II. Control information: The control information contains the following.
1. Comments: The syntax for writing comments in XML is similar to that of HTML.
Ex: 
2. Processing Instructions: Processing Instructions are used to control applications. It is
the first instruction in XML file.
Ex: <? xml version=”1.0” ?>
It tells the application that the data in the file follows the rules of XML version 1.0 to validate
or parse the data, it must obey these rules.
3. Document Type Declaration:
DTD file holds the rules of the grammar for a particular XML data structure for validating.
Each XML document has an associated DTD. It is usually held in a separate file so that it can be
used with many documents.
Ex: <! DOCTYPE Recipes SYSTEM “recipe.dtd”>
III. Entities:
An Entity is a thing which is to be used as part of the document but which is not a simple
element. If you place a character like "<" inside an XML element, it will generate an error
because the parser interprets it as the start of a new element. To avoid this error, replace the "<"
character with an entity reference.
Document type definition:
The XML has neither meaning nor context without a grammar against which it can be validated.
The grammar is called Document Type Definition (DTD). It describes the legal elements and
attributes that can be used to markup a document. This is essentially a contract between the
application and the user of the markup language. If the user marks up a document in a certain
way, then the application can be relied upon to respond accordingly. XML DTDs all have a
common underlying syntax which allows any XML parser to process any XML document. The
following is an example for defining the DTD.
<? xml version=”1.0” ?>
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ATTLIST note date CDATA #REQUIRED “12/11/2007” >
<!ELEMENT to (#PCDATA)> <!ELEMENT from
(#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
The DTD is all placed inside a single DOCTYPE tag and is surrounded by square brackets as
shown above.
65
Lect. in Computers
Elements: The first node of the XML document is called the root node. It contains all other
nodes of the document and each XML document must have exactly one root node. In the above
example, “note” is the root node.
Attributes: Once you have decided that some of your XML elements have attributes then
you need to include this information in the DTD. The ATTLIST may contain
 The name of the element.
 The name of each attribute
 The data type of the attribute
 Control information
Entities: An Entity is a thing which is to be used as part of the document but which is not
a simple element.
XML Namespace:
A Namespace is used to keep the names separate from each other which are used by applications.
No duplication of names exists within a particular application. They may use different
namespaces at the same time. The implementation of namespace is system dependent. The
following is the code of an xml document.
Ex: <staff>
<name>Bhaskar</name>
<dept>
<name>Computers</name>
</dept>
</staff>
Here it contains two elements name elements but they represent different things and have
different meanings. Applications may confuse because of these two items. Hence, XML
namespace is used to overcome these problem.
A namespace in XML can be included as DTD as follows.
Ex: <? xml version=”1.0” ?>
<! DOCTYPE Data SYSTEM “data.dtd”>
<! xml:namespace ns=”url” prefix=”ssgs”>
<! xml:namespace ns=”url” prefix=”comp”>
<staff>
<ssgs:name>Bhaskar</name>
<dept>
<comp:name>Computers</name>
</dept>
</staff>
Presenting XML:
XML documents are presented using Extensible Style sheet which expresses
stylesheets. XSL stylesheet are not the same as HTML cascading stylesheets. They
create a style for a specific XML element, with XSL a template is created. XSL
basically transforms one data structure to another i.e., XML to HTML.
66
Lect. in Computers
Example
Here is the XSL file for the XML document of Example
This line must be included in the XML document which reference stylesheet
<?xml:stylesheet type = “text/xsl” href = “student.xsl”?.
Here goes the XSL file
<xsl:stylesheet smlns:xsl =”uri:xsl”.

<xsl:template match=”/”>
<html>
<body>
<h1> Student Database </h1.
<xsl:for-each select = “college”>
<xsl:for-each select = “studetail”>
<xsl:value-of select = “regno”/>
<xsl:for-each select = “name”>
<xsl:value-of select = “firstname”/>
<xsl:value-of select = “lastname”/>
</xsl:for-each>
<xsl:value-of select=”country/@name” />
<xsl:value-of select = “branch”/>
</xsl:for-each>
</xsl:for-each>
</body>
</xsl:template>
</xsl:stylesheet>
XML schema:
A schema is a blueprint of an XML document that defines the elements, data types and nesting
structure of the page. XSD (XML Schema Definition), a Recommendation of the World Wide
Web Consortium (W3C), specifies how to formally describe the elements in an Extensible
Markup Language (XML) document. This description can be used to verify that each item of
content in a document hold on to the description of the element in which the content is to be
placed.
In general, a schema is an abstract representation of an object's characteristics and relationship to
other objects. An XML schema represents the interrelationship between the attributes and
elements of an XML object. To create a schema for a document, you analyze its structure,
defining each structural element as you encounter it. For example, within a schema for a
document describing a Web site, you would define a Web site element, a Web page element, and
other elements that describe possible content divisions within any page on that site. Just as in
XML and HTML, elements are defined within a set of tags.
67
Lect. in Computers
The following is an example for XML schema

<? xml version=”1.0” ?>
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
The Document Object Model:
An API is a set of hooks into a library of routines which developers can use from which their
own programs. There are APIs for all types of things. The computer system you use probably has
some sort of window-based interface. The functionality which required to draw and manipulate
those windows is encapsulated in a library which is made available to developers when they
write code. The developer simply uses the functions which the library provides so that each
programmer can draw buttons or menus in the same way. HTML and XML documents are made
of objects such as Headings of Paragraphs which we want to be able to manipulate in our
programs. This is where the Document Object Model need. The DOM is an API for HTML and
XML documents. It describes the logical structure of the documents formatted with HTML, how
those documents can be accessed and how they can be manipulated. By using Dom, developers
can create documents, manipulate their structure and modify delete or add elements with in them.
The DOM of an HTML document is a Hierarchical structure which might reasonably be
represented as a tree. The relationship between HTML code and the DOM is shown in figure.
<html>
<head>
<title>DOM</title>
</head>
<body>
<p>sample Text</p>
<ul>
<li>First</li>
<li>Second</li>
</ul>
</body>
</html>
68
Lect. in Computers
The following is the Document Object Model of above program.
Web Services:
Web services is a standardized way or medium to propagate communication between the client
and server applications on the World Wide Web. Web services provide a common platform that
allows multiple applications built on various programming languages to have the ability to
communicate with each other
Popular Web Services Protocols are:
SOAP: SOAP is known as the Simple Object Access Protocol. SOAP was developed as an
intermediate language so that applications built on various programming languages could
talk quickly to each other and avoid the extreme development effort.
WSDL: WSDL is known as the Web Services Description Language(WSDL). WSDL is an

XML-based file which tells the client application what the web service does and gives all
the information required to connect to the web service.
REST: REST stands for REpresentational State Transfer. REST is used to build Web services
that are lightweight, maintainable, and scalable
UDDI: UDDI is an acronym for Universal Description, Discovery and Integration. It is a XML
based framework for describing, discovering and integrating web services. It is a directory of
web service interfaces described by WSDL, containing information about web services.
69
Lect. in Computers
Services available on internet:

Internet is a global system of interconnected computer networks which provides the following
services.
1. Email: Email is an important communication service available on the internet. It allows
the user to send and receive electronic text messages to the other. These email service can
be available round the clock.
2. World Wide Web(www): World Wide Web is a huge set of interlinked documents,
images and other resources which are linked by hyperlinks and URLs. These allows the
web servers and other machines to deliver them as required using HTTP (Hypertext
Transfer Protocol). HTTP is only one of the communication protocols used on the
Internet.
3. File Transfer Protocol(FTP): It allows the computer to rapidly retrieve complex files
intact from a remote computer and view or save them on your computer. It is used for
transferring files from one computer to the other.
4. News Groups: It is the information sharing process on the internet. It allows the users all
over the world to participate in a discussion about a specific topic.
5. Chatting: It is the process of communicating with different persons at the same time
using internet. In this process, The Text messages can be interchanged by using IRC
(Internet Rely Chat) protocol.
6. Telnet or Remote login: It permits the computer to log onto another computer and use it
as if you were there.
70
Lect. in Computers
7. Ecommerce: E-Commerce means distributing, buying, selling and servicing of products

through the Internet. In this process consumers use the Internet to purchase goods and
services online.
8. Multimedia: Multimedia is simply multiple forms of media integrated together. Media
can be Text, Images, Graphics, Animations, Audio and Video. Using of two or more of
these media for presenting information is called Multimedia.
Web Technologies Viva Voice
Abbrevations:
W3C-World Wide Web consortium TIFF -Tagged Image File Format
HTML-Hyper Text Markup Language AVI -Audio/Video Interleaved
SGML - Standard Generalized Markup CGI -Common Gateway Interface
Language DOM – Document Object Model
CSS -Cascading Style Sheets DTD – Document Type Definition
DHTML -Dynamic HTML HTTP -Hyper Text Transfer Protocol
XML -Extensible Markup Language TCP/IP -Transmission Control
XHTML -Extensible Hypertext Markup Protocol/Internet Protocol
Language FTP -File Transfer Protocol
MIME – Multipurpose Internet Mail SMTP – Simple Mail Transfer Protocol
Extensions POP – Post Office Protocol
ECMA Script -European Computer URL -Uniform Resource Locator
Manufacturer’s Association Script. WWW -World Wide Web
ASP -Active Server Page ISP -Internet Service Provider
GUI -Graphical User Interface IIS – Internet Information Services
GIF -Graphics Interchange Format VRML -Virtual Reality Modeling
JPEG -Joint Photographic Experts Group Language
MPEG -Motion Picture Experts Group ATM – Asynchronous Transfer Mode
PNG -Portable Network Graphic
71
Lect. in Computers
Web Browser: Web browser is client-side software which translates HTML documents
into the Web pages.
Ex: Internet Explorer (Microsoft), Mozilla Firefox, Google Chrome, Apple Safari, Opera,
Netscape Navigator, etc…,
Web Site: Collection of web pages is called Web site
Web Page: Web page is an individual HTML document which is translated by Web
browser. These Web pages are of two types, they are
1. Static Webpage: Static webpage is normal webpage which doesn’t contain any
interaction and effects
2. Dynamic Webpage: or Dynamic html (DHTML)?
Dynamic HTML is a combination of HTML, style sheets and scripts that allows
documents to be animated. It refers to Web content that changes each time it is viewed.
For example, Live cricket scores, Stock exchange results, Time of day, previous pages
viewed by the reader, or profile of the reader.
Explain Web server?
A Web server is a server on the Internet that holds Web documents and makes them
available for viewing by remote browsers.
What is the difference between HTML and DHTML?
1. html is used to write only static content
Dhtml is used to write dynamic content like using javascript or vbscript in html to
make html page dynamic
2.html is a error free language where dhtml is not a error free language
Who developed the Html?

It was initially developed by Tim Berners Lee in 1990. It was defined from SGML but it
has been implemented by XML.
Tag: Meaning full word or character enclosed in between angle brackets is called a Tag.
These tags are of two types. They are
1. On tag or Starting tag or Begin tag
2. Off tag or Closing tag or End tag
Ex: Basic Structure of HTML

<html>
<head><title>…………</title></head>
<body>….</body></html>
Tag Attributes or properties: Tags can have one or more attributes or properties.
It provides more information about tags. Attributes always come in pairs.
Syn: attrname=”attrval” Ex: bgcolor=”red”
Element: Starting and closing tag with the content is called Element.
Comments in Html:
Single line comments 
Multi line comments 
Who is making the Web Standards?
World Wide Web Consortium (W3C) is a voluntary group which creates and approves
standards for Web applications.
Protocols: A protocol is a standard set of rules that determines how computers communicate
with each other across networks. Protocols are used for sending and receiving information to
each other. Some of the widely used protocols and their uses are
1. TCP/IP (Transmission Control Protocol/Internet Protocol): It is used for
Transferring data over the internet.
2. HTTP (Hyper Text Transfer Protocol): It is used for sending Information to the
browser form the server.
3. SMTP (Simple Mail Transfer Protocol): It is used for sending Email messages
over the Internet.
4. POP (Post Office Protocol): It is used for the receiving Email messages over the
Internet.
5. FTP (File Transfer Protocol): It is used to transfer files between computers
What is IRC (Internet Relay Chat)?
Internet Relay Chat, or IRC, allows users to chat on different channels over the Internet.
IRC channels are preceded by a # sign and are controlled by channel operators.
What is a Hypertext link or Hyperlink?
A hyperlink is a special tag (Anchor) that links one page to another page or resource. If
you click the link, the browser jumps to the link's destination.
How do I create a link that sends me email?
Use a mailto link, for example
Send me email at
<A HREF="mailto:support@globalguideline.com">support@globalguideline.com</A>.
Domain name: The domain name is the unique name that identifies an Internet site.
Domain names always have two or more parts separated by dots.
For example, the President's e-mail address is president@whitehouse.gov, the Vice-
President's is vice-president@whitehouse.gov, and so on.
URL: It is the unique address for a file that is accessible on the Internet. So that
the browser knows how to process the incoming data.
Computer network: A collection of computers and related devices, connected in a way
that allows them to share data, hardware, and software.
What are the Different types of Networks?
The networks can be classified into three types, They are
1. Local Area Network (LAN): A LAN connects network devices over a relatively
short distance. A networked office building, school, or home usually contains a
single LAN.
2. Metropolitan Area Network (MAN): A network spanning a physical area larger
than a LAN but smaller than a WAN, such as a city. A MAN is typically owned an
operated by a single entity such as a government body or large corporation.
3. Wide Area Network (WAN): A WAN spans a large physical distance. The
Internet is the largest WAN, spanning the Earth. A WAN is a geographically-
dispersed collection of LANs. A network device called a router connects LANs to
a WAN.
Internet: Network of Networks or The collection of servers around the world which
can share data.
73
Prepared by LakshmiNarayana SSKDC
Lecturer in Computers
What is Intranet?
An intranet is a local area network(LAN), which may not be connected to the Internet but
which has similar functions.
Explain a Router?
A device that forwards traffic between networks.
What is Email: E-mail stands for electronic mail. E-mail allows you to send text
to another person on another computer.
Explain Telnet?
This is the standard Internet protocol to connect to remote terminals.
What is a DOCTYPE?
According to HTML standards, each HTML document begins with a DOCTYPE
declaration that specifies which version of HTML the document uses.
Active Server Pages (ASP):
ASP is a Microsoft Web Server technology. It is a server-side scripting environment that
can be used to create dynamic Web pages or build Web applications. ASP pages are files
that contain HTML tags, text, and script commands.
What is Common Gateway Interface (CGI)?
The CGI is a communications protocol that Web servers use to communicate with other
applications. Common Gateway Interface scripts allow Web servers to access database
CGI applications, on the other hand, receive data from servers and return data through
the CGI.
Document Object Model (DOM): It is a set of elements which make up an HTML or
XML document.
Cookie: A message sent from a Web server to a browser and stored on a user's hard disk.
Home page The first page that comes up when a Web site is accessed. It identifies the
site and contains links to other pages at the site.
Internet service provider (ISP)
A company that provides Internet access to businesses, organizations, and individuals
Explain Firewall?
A firewall is a hardware and/or software boundary that prevents unauthorized users from
accessing restricted files on a network.
Multimedia: An integrated collection of computer-based media, including text, graphics,
sound, animation, photo images, and vide
What is IP Address (Internet Protocol Address)?
Each computer is assigned an IP address. These are similar to phone numbers. When you
attempt to connect to an IP address, you will connect to the computer with that IP
address.
Application programming interface (API): It is a set of calling conventions in
programming that define how a service is invoked through the application.
Methods GET and POST in HTML forms - what's the difference?
GET: Parameters are passed in the query string. Maximum amount of data that can be
sent via the GET method is limited to about 2kb.
POST: Parameters are passed in the request body. There is no limit to the amount of data
that can be transferred using POST. However, there are limits on the maximum amount
of data that can be transferred in one name/value pair.
74
Explain about the Network topologies?
Star Topology Tree topology Bus Topology
Mesh topology Ring Topology
HTML language allows to represent the styles in three ways. They are
1. Inline Style sheet: The Style can be defined within the basic HTML tag.
2. Embedded Style sheet: The Style can be defined in the Head or Body section and
applied to the whole document.
3. External Style sheet: The Style can be defined in External files called Stylesheets
which can then be used in any document by including the stylesheet via a URL. Selector
& Declaration: The Selector is used to create a link between the rule and the HTML tag
which are enclosed in braces. The Declaration has two parts: a property and a value. A
Property is the property of selected element and the Value is the specification of
property. Declarations must be separated using colons and terminated using semicolons.
Class: A class is a set of styles which can be called inside a tag with the help of class
attribute.
Syntax: Selector.class=classname {property: value; property2: value ;……}
Anonymous Classes: An Anonymous class is identification for CSS where the styles can
be applied to any selector. It provides a way of defining styles within reusable classes.
Syntax: .class=classname {property: value; property2: value ;……} <selector
class=classname>
Divisions: It allows to group together several elements to create sections or
subsections of a page.
Syntax: <div class=”anyelement”>
<p>……..</p><h2>……</h2><hr></div>
Spans: It allows to apply CSS features only on specific data or characters instead of all
the content in the tag. The <span> element can be used to group inline elements only.
Syntax: <span class=”anyelement”>………</span>
Layers:
A layer is a transparent environment in the browser window that allows to organize
different presentations one upon another (as a stack representation).
The CSS styles uses the following attributes for representing layer presentation.
1. Z-index 2. Position 3. Left 4. Top 5. Height & Width
How Many Ways to Select HTML Tag Instances?
Tag Selector - Selects all instances of a HTML tag.
Contextual Selector - Selects all instances of a HTML tag nested inside other specified
tags.
Class Selector - Selects all HTML tags that matches the class name defined in the tag
attribute of class="class_name".
ID Selector - Selects all HTML tags that matches the id name defined in the tag attribute
75
of id="id_name".
Group Selector - Selects multiple HTML tags.
Mixed Selector - Selects instances of HTML tags mixed with other selectors.
JavaScript:
JavaScript is a scripting language that enables web developers/designers to build more
functional and interactive websites.
Who developed JavaScript?
JavaScript developed by Netscape as Live Script and has been changed to
JavaScript when endorsed by Sun Microsystems. The other Scripting languages are
Jscript, VBScript, Perl, Python, CGI, etc.,,
Java vs JavaScript?
1. JavaScript was developed by Brendan Eich of Netscape Java was developed
at Sun Microsystems.
2. Java is object oriented where as JavaScript is object based.
3. Variable types must be declared in java where as Variable data types not declared
in java script.
4. Java programs are compiled on server before execution on client where as Java
Script programs interpreted by client.
5. Java posses static binding where as Java Script posses Dynamic binding.
How to embed JavaScript in a web page?
JavaScript code can be embedded in a web page
between <script langugage="javascript"> //Place Your
JavaScript here.
</script>
How to comment JavaScript code?
Use // for a single line comments in JavaScript
and /* start of Multiple lines comment in
JavaScript Multiple line comments in JavaScript*/
Dialog Boxes or Prompt Boxes or Message Boxes:
JavaScript has three kinds of dialog boxes, They are Alert(), Confirm() and Prompt().
What is variable? Why JavaScript is an untyped language?
Variables are containers for storing information (or) Variables are names that have values
assigned to them. JavaScript is an untyped language because JavaScript variables can
hold data of any valid type. It takes its type from the data type of what it is holding.
What are the data types used in JavaScript?
Java Script has only four types of data as follows
1. Numeric 2. String 3. Boolean 4. Null
What does JavaScript null mean?
The null value is a unique value representing no value or no object.
It implies no object, or null string, no valid Boolean value, no number and no array
object.
What does undefined value mean in JavaScript?
Undefined value means the variable used in the code doesn't exist or is not assigned
any value or the property doesn't exist
76
What is this keyword?
In JavaScript this keyword refers to the current object.
How do you convert numbers between different bases in JavaScript?
Use the parseInt() function, that takes a string as the first parameter, and the base as a
second parameter. So to convert hexadecimal 3F to decimal, use parseInt (" 3F" , 16)
What is === operator?
In JavaScript === is strict equality operator ,it returns true only when the two operands
are having the same value without any type conversion.
Function: A function is a subprogram which allows to perform a specific task when it is
invoked.
Java applets: Small programs that add processing and interactive capabilities to Web
page
Events: Events are the User actions. If the user clicks on a button a Click-event occurs.
If the mouse pointer moves across a link a Mouse Over-event occurs. There are several
different events. This can be done with the help of event-handlers
XML
XML stands for Extensible Markup Language. XML was designed to transport and store
data. XML tags are not predefined. You must define your own tags. XML is designed to
be self-descriptive
Difference Between XML and HTML:
XML is not a replacement for HTML.
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is.
HTML was designed to display data, with focus on how data looks.
HTML is about displaying information, while XML is about carrying information
What Is XHTML?
XHTML stands for Extensible Hypertext Markup Language
XHTML is almost identical to HTML 4.
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as an XML application
Differences Between XHTML And HTML:
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
The id attribute replaces the name attribute
The XHTML DTD defines mandatory elements
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
77
IMPORTANT QUESTIONS
This is the List of Important Questions among this Bold Questions are most important.
UNIT-I
Chapter-I (Hypertext Markup Language (HTML))
1. Explain the features of a HTML page. Also explain the structure of HTML
Document.
2. Explain the tags used with <body> tag.
3. Explain How to format the text with example in HTML.
4. What are Hyperlinks? Explain different ways of specifying hyperlinks.
5. What are lists? Explain different types of lists in HTML with example program.
6. What is table? Explain how to create them and their attributes in HTML
7. How to use Images in your HTML Pages. Explain
Chapter-II
More HTML
1. Explain How to include multimedia objects in HTML with example.

2. What are frames? Explain <frameset > with an example.
3. Why forms are useful in HTML? How to create them in HTML? Explain
4. Explain the document header in detail.
UNIT-II ( Cascading Style Sheets)
1. What are Cascading style sheets? How to define your own styles?
2. Explain properties and values in Cascading style sheets
3. Explain how to format blocks of information.
4. What is Class and Anonymous class
5. What are Cascading style sheets? Explain different types of CSS.
6. What are layers? How to create layers using CSS.
UNIT-III
Chapter-I ( Introduction To JavaScript)
1. What is JavaScript? Are Java and JavaScript are same? Write benefits and
problems of JavaScript.
2. What is DHTML? Write differences between HTML and DHTML.
3. What are the alternatives to JavaScript?
4. What are variables? Explain how to create them?
78
5. Explain different types of data types available in JavaScript.
6. Explain different string manipulation functions in JavaScript.
7. Explain different mathematical functions in JavaScript.
8. Explain different control statements used with JavaScript.
9. With an example explain different types of operators supported by JavaScript.
10. What is an array? Discuss the structure of an array with example. Also
discuss how to remove an element from an array.
11. Explain object based array functions in JavaScript.
12. What is function? How define a function in JavaScript? Write scope rules.
Chapter-II ( Objects in JavaScript)
1. How JavaScript supports object orientation? Explain with an example.

2. What are regular expressions? Explain
3. What are exceptions? Explain exception handling in JavaScript.
4. Explain different Builtin Objects in JavaScript.
5. “JavaScript is an Event-driven system”. Justify or Events
UNIT-IV ( DHTML with JavaScript)
1. How JavaScript is useful to validate your data in a web page? Explain

2. Write about opening a new window
3. Write about messages and conformations in JavaScript.
4. How to write a data to a different frame? Explain
5. Explain Rollover Buttons in JavaScript
6. Explain Moving images in JavaScript
7. Write about status bar.
UNIT-V ( Defining Data for web applications)
1. Why XML? Explain XML elements.

2. Explain DTD and their elements.
3. Explain Document Object Model (DOM)
4. Write about presenting XML.
5. Explain various web services.
79

Web Technologies Notes7

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Web Technologies Notes7

Încărcat de

Drepturi de autor:

Formate disponibile

III BSC COMPUTERS – VI SEMESTER

III YEAR BSC - VI SEMESTER

1. Prepare a web site for your college

Color Hexadec Value

Syn: <img src=”URL” align=”left/right/center”>

3. Name: It allows to create an identification name for the Hyperlinks.

Syn: <a href=”#Section name”>Link </a>

Ex: <var> program variables</var>

1. Ordered Lists or Numbered Lists:

Using Styles : Simple Examples:

<p class="x">This is the paragraph with Cascading Style

Ex: p {color: #ff0000;}

Ex: p {text-transform:none;} p {text-transform:Capitalize;} p {text-

Ex: td {text-align: left;} td {text-align: right;}

Units and URLs:

Lengths: These can be measured either Absolute or Relative.

3. Left: It allows to specify the left coordination value.

4. Top: It allows to specify the top coordination value.

Ex: prompt(“Enter your name”,”Enter”);

JavaScript – The Basics:

1. Script within Head section:

JavaScript in the head section will be executed when called.

d) switch statement: use this statement to select one of many blocks of

Operator Category Operator Description

Objects in Java Script:

JavaScript has the following Built-in objects that define it as a language.

This event is triggered when the user clicks on the element.

a. navigator.appCodeName: It returns a string representing the code name of the browser.

toLocaleString() Converts a date to a string, using the current locale's conventions.

toGMTString Returns the date formatted as a string in GMT format.

JavaScript Regular Expression Grammar is as follows

Class RegExp Functions:

An exception in object based programming is an object, created dynamically at run-time, which

onmouseout Script runs when mouse pointer moves out of an

Opening a new window:

A text-only menu system:

Ex: <note date="12/11/2007">

<?xml:stylesheet type = “text/xsl” href = “student.xsl”?.

Here goes the XSL file

<xsl:stylesheet smlns:xsl =”uri:xsl”.

The following is an example for XML schema

The following is the Document Object Model of above program.

Popular Web Services Protocols are:

WSDL: WSDL is known as the Web Services Description Language(WSDL). WSDL is an

Services available on internet:

7. Ecommerce: E-Commerce means distributing, buying, selling and servicing of products

Web Technologies Viva Voice

Who developed the Html?

Ex: Basic Structure of HTML

Chapter-I (Hypertext Markup Language (HTML))

1. Explain How to include multimedia objects in HTML with example.

UNIT-II ( Cascading Style Sheets)

Chapter-I ( Introduction To JavaScript)

Chapter-II ( Objects in JavaScript)

1. How JavaScript supports object orientation? Explain with an example.

UNIT-IV ( DHTML with JavaScript)

1. How JavaScript is useful to validate your data in a web page? Explain

UNIT-V ( Defining Data for web applications)

1. Why XML? Explain XML elements.

S-ar putea să vă placă și