Professional Documents
Culture Documents
Unit-I:
Introduction: HTML, XML, and WWW, Topologies, Bus, Star, Ring, Hybrid, Tree, LAN, WAN, MAN.
HTML: Basic HTML, Document body, Text, Hyper links, Adding more formatting, Lists, Tables using colors and
images.
More HTML: Multimedia objects, Frames, Forms towards interactive, HTML document heading.
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.
Unit-IV:
Objects in JavaScript: Data and objects in JavaScript, regular expressions, exception handling, built-in
objects, events.
Unit-V:
DHTML with JavaScript: Data validation, opening a new window, messages and confirmations, the status
bar, different frames, rollover buttons, moving images, multiple pages in single download, text only menu
system.
Reference Books
1. Uttam Kumar Roy, Web Technologies, Oxford University Press.
2. Black Book HTML 5.0
3. Complete reference HTML 5.0
4. Web Technology, PHI Publications.
UNIT-1
1. What is HTML? Explain the History of HTML?
HTML
HTML means HyperText Markup Languate. HTML is a method of describing the format of documents
which allows them to be viewed on computer screens. HTML documents are displayed by web
browsers.
HTML pages can be developed to be simple text or to be complex multimedia containing, sound,
moving images, and virtual reality and java applets.
The Internet is a global phenomenon which can provide documents from servers across the world to
browser clients which can be in any location. If documents are to be readily exchanged across such a
vast and complex network, some sort of global protocol is required.
The global publishing format of the Internet is HTML. It allows authors to use not only text but also to
format that text with headings, lists, tables, and to include still images, video and sound within the
text.
Using HTML information can be downloaded, printed out or e-mailed to others; HTML pages can also
be used for entering data and as the front-end for commercial transactions.
HTML HISTORY
HTML was developed by Tim Berners – Lee when he works at CERN, the European centre for practical
physics. HTML is an application of something called SGML, the Standardized General Markup
Lnaguage.
SGML grew from a number of pieces of work, notably Charles Goldfrab, Edward Mosher and
Raymond Lorie at IBM who created a general markup language in 1960.
In 1978 the American National Standards Institute (ANSI) setup a committee to investigate text
processing languages. Charles Goldfrab joined that committee and lead a project to extend GML. In
1980 the first draft of SGML was released and after a series of reviews and revisions because a
standard in 1985. The 1990 has seen explosive growth in the use of networked computing and
Internet, based in large part upon the growth of homepages on the web. These home pages are
attractive to authors and readers, because they are written in HTML and can be formatted in a wide
variety of appealing ways.
To be successful the web depends on web page authors and browser vendors sharing same
conventions for HTML. Commercial vendors such as Netscape (e.g. frames) and Microsoft (e.g.
banners) have attempted to develop proprietary tags so that certain text formatting can only be seen
on their browsers. Where a development is seen to be both popular and widely useful, it will be
accepted into a version of the HTML standard.
HTML standards are created by a group of interested organizations and individuals called W3C
(World Wide Web Consortium). There have now been three official HTML standards: version 2.0 was
released in 1994, version 3.2 was released in 1996 with many useful additions and version 4.0 in
1997
2.What is Hypertext?Explain?
Hypertext
As the name suggests hypertext is more than simply text. Text is two dimensional and linear; it flows from
one place to another place. Factual material is non-linear and seeks to break out of its two constraining
dimensions. Factual material can break boundaries and make a new connection for readers. Hypertext lets
the author add diversions and dead-ends into a piece of work. Conventional academic or technical writing
includes a bibliography so that keener readers know where to look for more information. A hypertext
document can include a link directly to those sources. In effect such links can be used to include many
documents with in one framework. The benefit of hypertext is that it lets the author create links with in a
document. Hypertext is a powerful aid to presenting finding and using information
3.Explain about XML in detail?
XML
XML stands for eXtensible Markup Language. It is a markup language is used to provide information about a
document. XML is a meta markup language for text documents / textual data. Tags are added to the
document to provide the extra information.
The basic difference between HTML and XML is, HTML tags tell a browser how to display the document
whereas XML tags give a reader some idea what some of the data means.
What is XML Used For?
XML documents are used to transfer data from one place to another often over the Internet.
XML is text (Unicode) based. It takes up less space and can be transmitted efficiently.
One XML document can be displayed differently in different media such as HTML, video, CD or DVD. We only
have to change the XML document in order to change all the rest. Moreover, XML documents can be
modularized so that the parts can be reused.
An example of an XML Document is given here,
<?xml version=“1.0”/>
<address>
<name>ABCD</name>
<email>abcd@annauniv.edu</email>
<phone>044-2235-1234</phone>
<birthday>1985-03-22</birthday>
</address>
All information in an XML file has markup for the data which aids in understanding its purpose. The XML
language is very expressive that means semantics comes along with the data. It is well structured, easy to
read and write from programs.
Explain about WWW?
WWW stands for World Wide Web. A technical definition of the World Wide Web is : all the
resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).
A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found,
the World Wide Web Consortium (W3C).
The World Wide Web is the universe of network-accessible information, an embodiment of human
knowledge.
In simple terms, The World Wide Web is a way of exchanging information between computers on
the Internet, tying them together into a vast collection of interactive multimedia resources.
Internet and Web is not the same thing: Web uses internet to pass over the information.
Evolution
World Wide Web was created by Timothy Berners Lee in 1989 at CERN in Geneva. World Wide Web came
into existence as a proposal by him, to allow researchers to work together effectively and efficiently
at CERN. Eventually it became World Wide Web.
Advantages of WWW:
Availability of mainly free information
Low cost of initial connection?
The same protocol of communication can be used for all the services
Facilitates rapid interactive communication
Facilitates the exchange of huge volumes of data
Facilitates the establishment of Professional contact
Ring Topology
• This tree has individual peripheral nodes which are required to transmit to and receive from one other
only and are not required to act as repeaters or regenerators.
• The tree topology arranges links and nodes into distinct hierarchies in order to allow greater control and
easier troubleshooting.
• This is particularly helpful for colleges, universities and schools so that each of the connect to the big
network in some way.
Tree Topology
Advantages of a Tree Topology
• Point-to-point wiring for individual segments.
• Supported by several hardware and software vendors.
• All the computers have access to the larger and their immediate networks.
Disadvantages of a Tree Topology
• Overall length of each segment is limited by the type of cabling used.
• If the backbone line breaks, the entire segment goes down.
• More difficult to configure and wire than other topologies
Mesh Topology
• In this topology, each node is connected to every other node in the network.
• Implementing the mesh topology is expensive and difficult.
• In this type of network, each node may send message to destination through multiple paths.
• While the data is travelling on the Mesh Network it is automatically configured to reach the destination by
taking the shortest route which means the least number of hops.
Mesh Topology
• LANs are capable of very high transmission rates (100s Mb/s to G b/s).
Metropolitan Area Network (MAN)
• A metropolitan area network (MAN) is a large computer network that usually spans a city or a
large campus.
• A MAN is optimized for a larger geographical area than a LAN, ranging from several blocks of
buildings to entire cities.
• A MAN might be owned and operated by a single organization, but it usually will be used by many
individuals and organizations.
• A MAN often acts as a high speed network to allow sharing of regional resources.
• A MAN typically covers an area of between 5 and 50 km diameter.
• Examples of MAN: Telephone company network that provides a high speed DSL to customers and
cable TV network.
Network (WAN) Wide Area
• WAN covers a large geographic area such as country, continent or even whole of the world.
• A WAN is two or more LANs connected together. The LANs can be many miles apart.
• To cover great distances, WANs may transmit data over leased high-speed phone lines or wireless
links such as satellites.
• Multiple LANs can be connected together using devices such as bridges, routers, or gateways, which
enable them to share data.
• The world's most popular WAN is the Internet.
Personal Area Network (PAN)
• A PAN is a network that is used for communicating among computers and computer devices
(including telephones) in close proximity of around a few meters within a room
• It can be used for communicating between the devices themselves, or for connecting to a larger
network such as the internet.
• PAN’s can be wired or wireless
• A personal area network (PAN) is a computer network used for communication among computer
devices, including telephones and personal digital assistants, in proximity to an individual's body.
• The devices may or may not belong to the person in question. The reach of a PAN is typically a few
meters.
6.Explain about the structure of HTML and what are the basic tags ?
Basics of HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the
link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a
text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML
language.
HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags
are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding
closing tags. For example, <html> has its closing tag</html> and <body> tag has its closing tag </body> tag
etc.
Above example of HTML document uses
the following tags:
Tag Description
</html>
Step1: Processor to write executes the html document. Open an editor and type html document.
<html>
<head>
<title>First html</title>
</head>
<body>
Welcome to my web page
</body>
</html>
Step2: Save the html document any name having “. Html” as the extension.
Step3: To execute the html document to open it in any Browser. To html language is an error free language.
That is it will not display any error massage on the Browser. Even it the html document contain any error.
Example:
In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
Html comments:
Comments are used to make the code name readable or they are used to explain the code.
HTML comments begins with <!--line one comment-->
EX :<!--line one comment -- >
<!--line one comment
line two comment
.
.
.
N no. of line comments -- >
7.What is attribute ? what are the different attributes of Body tag?
Attributes:
1. Attributes are used to provide additional information about the html elements tags.
2. The attributes must be specified in starting tags.
3. The attributes always come in pears.
attribute name = attribute value
4. The attribute value can be enclosed with in single codes OR double codes.
5. Every html tag can contain attribute.
Note: Specifying the attributes for a tag is optional.
Body tag attributes:
Study material by D.Swetha 10 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
1. Bgcolor: This attributes specified the background color to displayed for a html document.
2. Text : This attributes specified the color of the text to be displayed on the html document. Color can
be specified (on the html document) for two formats.
a. Specified the color have directly.
b. We can specify the color by combining Red, Green and Blue. The format should be #rrggbb.
The color combination is 6 digit Hexadecimal numbers.
3. Background: This attribute specify an image as the background to the html document.
<body bgcolor = “#fffoo” text = “#ffoooo”>
Good Afternoon
</body>
Note: Specifying the attributes is optional, we can specify any number of attributes and they can specified in
any order.
8.Explain about Formatting tags?
Formatting tags:
<b>: This tag is use to display a text in Bold face.
<b>Bold</b>
<strong>: This tag is similar to <b> used to display the text in Bold face.
<strong>Bold</strong>
<i>: This tag is use to emphasize a text by display in Italics format.
<i>Italics</i>
<em>: This tag is use to emphasize a text by display in Italics format.
<em>Italics</em>
<tt>: This tag is use to display a text in Teletype font. That is typewriter font.
<tt>Teletype</tt>
<s>: This tag is used to display a Strike the text.
<s>Strike</s>
<strike>: This tag is similar to <s> use to display a Strike out text.
<strike>Strike</strike>
<del>: This tag is use to Delete a text by Striking it out.
<del>Strike</del>
<ins>: This tag is use to Insert a line below the text.
<ins>underline</ins>
<u>: This tag is use to underline a text.
<u>underline</u>
<sup>: This tag is use to display a text as a Superscripted. That the text will be displayed above the normal
text.
a<sup>2</sup>+b<sup>2</sup>
<sub>: This tag is use to display a text as a Subscripted. That is the text will be displayed below the normal
text.
H<sub>2</sub>SO<sub>4</sub>
<big>: This tag is use display a text solidly Bigger then the normal text.
<big>text</big>
<small>: This tag is to display a text solidly Smaller then the normal text.
<small>text</small>
<center>: This tag is to display a text in the Center of the webpage(html document).
<center>Welcome</center>
9.Explain about Heading Tags?
Heading tags: These tags are used to perform font changes display the text in boldface and the heading tags
by default align the text tag left side. These are six levels of heading tags. H1, H2, H3, H4, H5 and H6. H1 is
the biggest in heading and H6 is the biggest in heading and H6 is the smallest heading.
We can change the alignment of the headings by using align attributes. Ex: align = “left
|center |right”
<H1 align = “left”>Heading1</H1>
<H2 align = “left”>Heading2</H2>
<H3 align = “center”>Heading3</H3>
<H4 align = “center”>Heading4</H4>
<H5 align = “right”>Heading5</H5>
<H6 align = “right”>Heading6</H6>
<pre>:(preformatted text)
This tag is used to display a text in preformatted manner. The browser preserve all the white spaces
as it is.
Ex:<pre>
To,
The manager,
HDFC bank,
Nellore,
Sub: Regarding loan to buy a house.
Respected sir/madam,
I………………………
…………………………
……………………….
Thanking you.
</pre>
<br>: This tag is used to stop displayed in the content at that point and displayed content in a new line. The
<br> will started new line where ever it is specified.
Note:<Br> is an empty tag that is <BR> tag doesn’t content any element content.
Ex:
<body>
line one</br>
line two</br>
line three
</body>
<p>: This tag is used to display a paragraph. The <p> will add paragraph break (inserts an empty line before
and after the paragraph). The paragraphs are is by default to left side. We can change the alignment by using
the alignment attribute.
*Attributes of <hr>:
1. Width: This attribute specifies the length of the Horizontal rule to be displayed in a web page. The
width can be specified either in pixels or percentage.
2. Color: This attribute specifies the color of the horizontal rule to be displayed in a web page.
Ex:<hr color = “red”/>
3. Size: This attribute specifies the thickness of the horizontal rule to be displayed.
4. align: We can change the alignment of the horizontal rule by using this align attribute. By default
the horizontal rules are aligned to center.
height & width -- Specifies the height and width of the image, in pixels, tell the
browser how much space to allocate to an image
Study material by D.Swetha 16 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
align - Tables can be aligned on the screen like most other items, i.e.,
center, left or right but usually they are centered for impact and clarity
Study material by D.Swetha 17 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
border - A table can have border, which includes a border between the
cell. If the border is not set, the table has no border. When the
border attribute is set but value is not given, a single pixel wide
default border is drawn
cellpadding - Sets the spacing between cell walls and cell contents. Set to a
pixel size
cellspacing - Gives the distance between cells. Set to pixel values.
width - the width attribute sets the amount of screen that the table will
use. This is best given as percentage so that if the browser is
resized the table will continue to make sense.
<tr *align=“left”|“center”|“right”+ *valign=“top”|“center”|“bottom”+ *bgcolor=“#rrggbb”+
*bordercolor=“#rrggbb”+> ...................... </tr>
Each row of the table has to be delimited by these tags. Although </tr> tag is optional you should always use
it. If you are creating nested tables, these may be rendered incorrectly if all rows are not explicitly closed.
align - Sets the horizontal alignment of cntent in the table cell
valign - Sets the vertical alignment of the data in this row
bgcolor - Sets the background colour of the table cells. You can override
this attribute at the cell level.
bordercolor - Sets the external border colour for the row. Set to an RGB
triplet colour value or a predefined colour name
Text Heading Tag(<th>):
<th *align=“left”|“center”|“right”+ *valign=“top”|“center”|“bottom”+ *nowrap+ *colspan=“n”+
*rowspan=“n”+ *bgcolor=“#rrggbb”+ *bordercolor=“#rrggbb”+ *height=“n”+ *width=“n”+> ................... </th>
These are table cells which are table used for headings. Typically a table header will be rendered in
emphasized text such as <strong>
Text Data Tag(<td>):
<td *align=“left”|“center”|“right”+ *valign= “top”| “center” | “bottom”+ *nowrap+ *colsapn = “n”+
*rowspan= “n”+ *bgcolor = “#rrggbb”+ *bordercolor = “#rrggbb”+ *heigh = “n”+ *width= “n”+> ..................
</td>
The items in a row are specified using the table data tag <td>
The following are the Different attributes that are used for <th> and<td>:
align - Sets the horizontal alignment of content in the table cell
valign - Sets the vertical alignment of the data in the cell. These
attributes override any that were set of the row.
nowrap - If nowrap is set, the contents of the cell will not be
automatically wrapped as the table is formatted for the screen.
To prevent long lines running, use <br> to force text wrapping
colspan - Indicates how many cell columns of the table this cell should
everything from a java-script rollover button to a fully populated three-dimensional world. Typically web site
developers have included complex data items as hyperlinks and left the browser to spawn an external
application to handle the data. Other applications may be opened embedded inside the browser.
Including Objects
HTML has an object element which is used to embed multimedia objects directly into the page. It is possible
in future version of HTML the img tag will be fully replaced by object tag
<object classid = “url” data = “url” *codebase= “url”+ type = “string” *standby = “string”+ height = “n” width
= “n” *hspace = “n”+ *vspace= “n”+ * align = “left” | “”right” | “top” | “bottom”+> ...................... </object>
classid - Each object requires a classid which identifies the url of the
object. Set to classid value as ser in the windows registry or a url
codebase - It is optional. It identifies the directory which contains
the object but if it is not supplied, the full url can be placed in
the classid parameter. If classid has only a file name. The
object is assumed to be in the same directory.
type - The type parameter is used to specify the MIME type of the
object. This information can then be used by the browser to
launch pre-set helper applications.
standby - The standby parameter is used to display alternative text while
the object itself is being downloaded from the server.
height - Specifies the height of the object in pixels.
width - Specifies the width of the object in pixels.
hspace - Sets the horizontal spacing around objects in pixels.
vspace - Sets the vertical spacing around objects in pixels.
align - Sets the text alignment around the embedded component.
When an object needs command-line parameters these can be passed in through the param tag, which is
defined below
<param name = “string” value = “string” *type = “string”+ *valuetype= “ref” | “object” | “data”+></param>
name - Each parameter needs a name which corresponds to the name
that the object expects to receive.
value - The value parameter specifies the value that will be passed into
the object. The value passé does not have to be numerical or textual.
valuetype - valuetype is used to tell the browser the format of each
parameter, which can be an actual piece of data(data), the url of
a piece of data(ref) or another object(object).
type - If the valuetype is ref then the browser needs the MIME type of
the data.
e.g.--<object data = “chaplin.avi” type= ”video/msvideo” width=120 height=160>
Study material by D.Swetha 20 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
noresize - Stand alone attribute indicating that the frame may not
be resized.
scrolling - Determines the scroll bar action. Possible values are
auto(the default), yes(always show a scroll bar),
no(never show a scroll bar)
frameborder - Sets whether or not borders surround the frame set 1 for
border and 0 for no border
bordercolor - Sets colour used for frame border.
marginheight - Sets the size of the top and bottom margins used in the
frame. Set to a pixel width.
marginwidth - Sts the size of the right and left margins used in the
frame. set to a pixel width.
Example :
<html>
<head>
<title> Bill Smiggins ltd </title>
</head>
<frameset rows = “25%, *”>
<frame name=”A” src=”company.html”>
<frame name =”B’ src=”orders.html” scrolling = “no”>
</frameset>
</html>
16.Explain about Forms in Detail?
FORMS
Forms are used to add an element of interactivity to a website. They are usually used to let the reader send
information back to the server but can also be used to simplify navigation on complex websites. If you use
fill-out forms then you will need to have programs running on the server which can process the information
that you are sent. Using forms we will be able to handle HTML controls like buttons, checkboxes, radio
buttons, select controls, text areas and more. Form is not a visible object on the screen, it is purely logical
invention that you create with the <form> element to group controls together.
<form action = “url” method = “post”|“get” * name = “string” + * target = “string” + > ..................................
</form>
A form can contain virtually all other markup tags but cannot be nested within another form.
action - The action attribute specifies the name and location of a CGI script
that will be used to process the data
method - Indicates a method of protocol for sending data to the target action
URL. When get is used, the data is included as part of the URL.
The post method encodes the data within the body of the message.
Post can be used to send far large amounts of data, and is far more
secure than get.
name - Gives a name to the form so you can reference it in code
target - Indicates a named frame for the browser to display the form results in.
Study material by D.Swetha 22 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
If you want to get data from visitors, then you are going to use some variant of an input widgets. Several
types of input widgets such as text fields, radio buttons and check boxes exist. Some of them are
text - allow the user to enter and edit a line of text.
passwords - Exactly like a text field, but the input is not displayed to the
screen instead each character is replaced by an *.
radio - Displayed usually as a circle, which when selected displays a
dot in the middle. These are always grouped : buttons within a
group should have the same name but different values.
checkbox - Displayed usually as a small box with a checkmark in it. User
can toggle the checkmark on or off by clicking the checkbox
submit - Creates button which displays the value attribute as its text. It is
used to send the data to the server
reset - reset also creates a button but this one is used to clear the form
image - image can be used to place a picture on the page instead of a
button.
All these controls can be place in a form using <input> tag
<input type = “text” | “password” | “checkbox” | “radio” | “submit” | “reset” | “button” | “image” name
= “string” *value = “string”+ *checked+ *size = “n”+ * maxlength = “n”+ *src = “url’+ * align =”top” | “bottom”
| “middle” | “left” | “right”+ *disabled+>
type - Specifies the type of the element
name - gives the element a name. (all)
value - sets the caption of the element. (all)
checked - Indicates if the checkbox should appear checked initially or
not. (checkbox, radio)
size - Sets the size. (all)
maxlength - Sets the maximum length of the data in the control in
characters. ( password, text )
src - Specifies the URL of the image. (image)
align - Sets the alignment of the text following the image. (image)
disabled - Specifies that the element is disabled when first displayed. (all)
example :
<html>
<head>
<title> Bill Smiggins INC </title>
</head>
<body>
<h2 align = “center”> Visitors feedback </h2>
<hr width = “65%”>
Important Questions:
UNIT-II
1.What CSS? What are the different Style in HTML?
Cascading Style sheets (CSS)
CSS stands for “Cascading Style Sheets” which is a technology to control how elements are presented in the
Web page.
The term Cascading refers to the procedure that determines which style will apply to a certain section, if we
have more than one style rule.
The term Style refers to how you want a certain part of our page to look. We can set colors, fonts,
alignment, borders, backgrounds, spacing, margins, and much more.
The term Sheets represents that the “sheets” are like templates, or a set of rules, for determining how the
webpage will look.
So, CSS (all together) is a styling language that defines a set of rules to tell browsers how the webpage
should look.
One of the most important aspects of HTML is the capability of separating presentation and content. A style
is simply a set of formatting instructions that can be applied to piece of text. There are 3 mechanisms by
which we can apply styles to our HTML documents.
The style can be defined within the basic HTML tag (Inline styles)
Styles can be defined in the <head> section and applied to the whole document ( Embedded or
Internal Styles)
Styles can be defined in external files called Stylesheets which can then be used in any document
by including the style sheet via a URI (External Style Sheets )
Not all browsers support Style sheets and many which do cannot yet process them fully. Styles can be
cascaded. This means that formats override any which were defined or included earlier in the document.
There are four three types of styles are there:
1. Inline Style Sheet - CSS is not attached in the <header> but is used directly within HTML tags.
2. Internal Style Sheet - Best used to control styling on one page.
3. External Style Sheet - Best used to control styling on multiple pages.
4. Imported Style Sheet - To import CSS from other style sheets.
1.Inline Styles sheets
An inline style allows you to change the behavior of an HTML tag to achieve a desired appearance to achieve
this HTML tags include a “style” attribute. The description of the style is passed as the value of the attribute
and so must follow an equal’s sign.
Example :
< p style= “margin-left:10%;border:ridge;backgrounbd:#ffffca”>
This paragraph goes some fairly radical alterations
</p>
<p>And we finish with an unaltered paragraph</p>
In the above example the first paragraph is moved slightly to the right by giving left margin, has a coloured
background and a ridge border.
2.Internal Styles sheets:
Internal styles can be used to define a tag’s properties that are applied globally throughout a document.
Internal styles collect the styles applied throughout the page and put them in the <style> element in the
head.
Example :
<html>
<head>
Study material by D.Swetha 25 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
<title> simple Stylesheet</title>
<style>
h1{ Color : red;
Border : thin groove;
Text-align : center; }
</style>
</head>
<body>
<h1> Simple Stylesheet</h1>
</body>
</html>
The declaration has the name of the element which is being changed and then a definition which is placed
inside braces. The attributes which are being changed are placed in a list with each term separated by a
semicolon.
3.External Stylesheets / Including Stylesheets:
External Stylesheets are stored separately from the web page. These are useful to set the styles for an entire
web site, meaning all the pages in the site. When we change the styles in an external stylesheet, will change
the styles of all the pages that use it. <link> element is used to include an external stylesheet in a web page,
and it must be included in the <head> of the HTML page.
<link rel=”stylesheet” href=”mystyle.css” type=”text/css” media=”screen”>
*<style type=”text/css”>@import url(url);</style>+
These lines are both needed if you intend to use more than one stylesheet.
The stylesheet itself simply contains css rules, one per line.
e.g.,
body{background-color:#ffffcc;font-family:araial}
p{font-style:italic}
A:link{color:#0000ff}
A:visited{color:#ff0000}
A:active{color:#00ff00}
A selector and a set of declarations. The selector is used to create a link between the rule and
the HTML tag
The declaration has two parts:
A property and a value. Selectors can be placed into classes, so that a tag can be formatted in
a variety of ways. Declaration must be separated using colons and terminated usein semicolons.
Syntax:
Selector{property:value;property:value;.............}
The declaration has three items. The property, a colon and a value. If you miss the colon or semicolon, the
styles cannot be processed.
e.g.,
body{
background-color:#eebd20;}
The declaration has three items: The property, a colon and a value. If you miss the colon or semicolon the
style cannot be processed.
Ex:-
body
{
background-color:#eebdzo;
}
3.Explain about Style Classes?
classes
A Style class is a new Style we can apply various elements throughout our page or if you only want to apply a
style to some paragraphs, you have to use classes
selector.class name, property : value; property : value;……….....-
In the stylesheet the rule is slightly modified by giving the style a unique name which is appended to the
selector using a dot. In the HTML document when you want to use a named style the tag is extended by
including class attribute.
<selector class = class name>
Ex:-
h1.href { color : #eeebd2; background-color : #d8929b;
font-family : "BookAntiqua",Times,seril;
border: thin groove;
}
<h1 class="fred">A simple heading</h1>
Anonymous classes
Sometimes we want to apply a piece of formatting to many different elements within a page but not
necessarily to the entire page. For that cascading stylesheets provides a way of defining styles within
reusable classes.
Ex:-
<html>
<head>
<title>Anonymous classes</title>
<style>
fred { color : #eeebd2;
background-color : #d8929b;
}
</style>
</head>
<body>
<h1 class="fred"> A sample heading</h1>
<p class="fred">Applying the style fred to a paragraph of text</p>
</body>
</html>
4.What are the Properties and values in Styles?
Study material by D.Swetha 27 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
second to left and right margins. As with margins you can specify the amount of white space with in an
element. padding and border width are applied in the same way as margins
border-color : <value> {1,4}
border-style : none| dotted | dashed | solid | double | groove | ridge {1,4}
This sets the colour of the border around the element. Up to four different colours can be specified. They
are applied to the borders in the same order as margins. Each edge of the border can have a different style
width : <length> | percentage | auto
height : <length> | auto
Any block-level element can be given a specific width or height.
5.Explain about divisions in HTML in detail?
Divisions
An element document is either a block element or an inline element. A block would be something like a
paragraph, while an inline might be something like text, a figure or an individual character that is part of a
block. Each of these can be manipulated separately. Changing the appearance of block elements is very
simple. 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 division tag
<div class="any element">
<p>........</p>
<h2>.......</h2>
<p>........</p>
<hr>
</div>
Division is a logical part of the document and we can start to treat divisions as individual items.
Spans
The HTML standards no longer support the idea of modifying individual items in place. It is no longer
regarded as acceptable to modify inline text from within the body of the document. That does not mean that
they cannot be altered. A simple and efficient model has been devised based around the span tag. Spans are
used as follows
<p> <span class="any element"> The </span> span tag </p>
It will make sense when the page is accessed through any type of medium whether viewed on IE or lynx the
span tag can be rendered in some meaningful way
<div [id="....."] [class="...."|style="......"] >....................</div>
<span *id="......."+ *class="......"|style="...."+ >…………….....</span>
The div and span tags have identical parameters. Styles are applied to span and div through either the class
or style parameters. A set of styles can be defined with in the tag and applied through style while a
predefined class is applied through class.
6.What are the formatting blocks of information in CSS?
Block formatting context:
A block formatting context a part of visual CSS rendering of a webpage. It is the reason in which the layout of
block boxes occurs and in which floats interact with each other.
A block formatting context is created by one of the following:
The root element or something that contains it.
float(elements where float is not none)
absolutely positioned elements(elements where position is absolute or fixed
inline_blocks(elements with display:inline-block
table cells(elements with display:table-cell,which is default for HTML table cells
table captions(elements with display :table-caption which is the default for HTML table captions
Important Questions:
UNIT-III
JAVA SCRIPT
1.Explain about DHTML and JAVASCRIPT?
Dynamic HTML
Dynamic HTML is a combination of content formatted using HTML, cascading Style Sheets, a scripting
language and the DOM (document object Model). Usually the scripting language is ECMA (European
computer manufacturers Association) Script complaint.
ECMA is the standard for language, which manipulate the document object model and is actually bases upon
Netscape’s JavaScript version 1.1. Given that JScript from Microsoft is equivalent to java script and either can
be used to develop standard Dynamic HTML pages.
By combining all of the technologies from w3c, developers can create interesting and interactive web sites
which continue to download quickly and which have relatively low hardware requirements.
JavaScript
JavaScript originates from a language called LiveScript. JavaScript is fairly simple language which is only
suitable for fairly simple tasks.
The language is best suited to tasks which run for a short time and is most commonly used to manipulate
the pieces of the document object model. Writing script is not really like programming.
Programs tend to be large pieces of code. Whereas scripts are small pieces of code, which accomplish a
single, relatively simple task. Program tend to be compiled while script are interpreted.
Compiled programs are hardware and operating system specific and have to be compiled separately for
every platform on which they will execute.
Whereas script is the text which will be run by the interpreter, any script can be run on any system that
contains a suitable interpreter. So JavaScript is nicely platform independent and can be run everywhere. In
fact JavaScript has been designed to run through browsers and can actually do very little.
benefits of JavaScript
It is widely supported in web browsers.
It givens easy access to the document objects and can manipulate most of them.
It can give interesting animations without long download time.
It is relatively secure
Web surfers do not need a special plug in to use your Scripts
problems with JavaScript
Most scripts rely upon manipulating the elements of the DOM. Supports for a standard set of objects
currently does not exits and access to objects differs from browser to browser.
If Script does not work then the page is useless
Because of the problems of broken Scripts, many web surfers disable JavaScript support in their browser.
Scripts can run slowly and complex Scripts can take a long time to start up.
2.What are the basic concepts of JavaScript?
JAVASCRIPT-THE BASICS
In many respects JavaScript code resembles C. The semantics of the two languages are very different but the
syntax of a JavaScript program and of a simple c program are quite close. JavaScript programs contain
variables, objects and functions. The key points about JavaScript are:
Each line of code is terminated by semicolon.
Blocks of code must be surrounded by a pair of curly brackets.
Functions have parameters which are passed inside parentheses.
Variables are declared using the keyword var.
Boolean
Boolean variable bold the values true and false
null
A null value is one that has not yet been given a value. It does not mean zero and should not be used
in that way.
Example Program::
<html>
<head>
<title> A sample</title>
<script language="javascript">
function test()
{
var visitor_name;
visitor_name=prompt("Enter your name","");
alert("your name is"+visitor_name);
document.writeln("<html><head>");
document.writeln("<title>sample</title>");
document.writeln("</head><body>");
document.writeln("<h1>"your name is </h1>");
document.writeln("<h2>"+visitor_name+"</h2>");
document.writeln("</body><html>");
document.close();
}
</script>
<body onload="test()"> </body>
</html>
Converting data types
Always assume that a value in a JavaScript is string unless you explicitly converted it to a number. The
interpreter will try to best guess your intentions if they are not clear. Here is an example of confusion which
can arise.
<html>
<head> <title>The math object</title> </head>
<body>
<script language="javascript">
<!----
document.writeln("<h1>confusion</h1>");
var one="12", two="34";
var vo=vt=o;
vo=parseInt(one);
vt=paraseInt(two);
document.writeln("<p>the first number is"+vo+", the second is"+vt+"</p>");
var result=one+two;
document.writeln("<p>adding two inputs gives"+result+"</p>");
result= vo+vt;
document.writeln("<p>adding the converted values gives"+result+"</p>");
document.writeln("<p>adding converted values inside a
writeln"+vo+vt+"</p>);
document. close();
-->
</script>
</body></html>
5.Explain about String manipulation?
String manipulation
Most of the data in the JavaScript are text strings. String manipulation involves either joining strings
together, splitting them a part or searching through them. JavaScript has functions which perform all of
those operations and much more
1.length
It is a value which holds the number of characters in the string. It is not a function and do not have to place
parentheses when using it.
var name = prompt("enter name"," ");
var u=name.length;
charAt(index)
The function returns which is at position index in the string.
var name = prompt("enter name:" ");
var x = name.charAt(3);
2.concat( )
concat("string" *,"string" *,........"string” + + )
JavaScript has two ways that you can join string together the simplest is to use + operator and the second is
concat method
Ex:-
var you=prompt("Enter your name:");
var yourage=prompt("Enter your age:");
vas msg="Thank you";
document.writeln(msg.concat(you));
you=you+" ";
var result=you.concat(yourage,"Thanks");
document.writeln(result);
3.indexOf( )
indexOf( "search" [ ,Offset ] )
The string is searched for the string in the first parameter. If the search is successful, the index of the target
string is returned. If the search is unsuccessful the operation returns -1. By default the indexOf() function
starts at index 0, however, an optional offset may be specified so that the search starts part way along the
string
<html>
<head> <title>Browser Agent</title> </head>
<body>
<script language="javascript">
var agent=navigator.appname.toLowerCase( );
var result=agent.indexOf("Microsoft");
document.writeln("<h1>your Browser is</h1><p>"+agent+"</p>”);
if(result==-1) document.writeln("<p>it was not made by Microsoft</p>");
else document.writeln("<p>It was made by Microsoft</P>");
document. close( );
</script> </body> </html>
4.lastIndexOf( "search" [, offset] )
This function does exactly the same thing as indexOf( ) but works its way backwards along the string. the
offset works in the same way as for indexOf(), but the default value is string.length -1
5.split(separator [, limit ] )
The split() function breaks the string apart whenever it encounters the character passed in as the first
parameter. The pieces of the string are stored in an array. split() has an optional second parameter which is
an integer value indicating how many of the pieces are to the stored in the array
var words = agent.split(" ");
for(var i = 0; i < words.length; i++ )
{
document.writeln("<p>"+words[i]+"</p>");
}
6.substr( index [, length ] )
The function returns a substring which starts at the character indicated by the index parameter. The
substring continues either to the end of the string or for the number of characters indicated by the length
parameter. If the index is greater than the length of the string then nothing is returned. If it is negative then
it is taken as the offset from the end. If a length of 0 or a negative number is provided then no characters are
returned
Ex:-
piece = agent.substring(3,17);
document.writeln( "<p>" + piece + "</p>" );
substring( index1 [, index2 ] )
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.
If index is less than zero, it will be treated as zero
If index2 is greater than the length of the string, it is treated as length of the string.
If two indexes are equal, an empty string is returned.
If index2 is missing all characters up to the end of the string are taken.
If index1 is greater than index2, a runtime error occurs.
7.toLowerCase()
It converts all characters in the string to lower case.
8.toUppercase()
It converts all characters in the string to upper case.
6.Explain about Mathematical function in javaScript?
MATHEMATICAL FUNCTIONS:-
Mathematical functions and values are part of a built-in JavaScript object called Math. All functions and
attributes used in complex mathematics must be accessed via this object. This is usually done by preceding
the function name with object name
ex:-
var area = Math.PI * ( r * r );
var next = Math.ceil( area );
If a section of your code includes a lot of math operations the repetition of math can become tedious. It can
be replaced using the keyword "with" like this
with(Math)
{
var area=PI*(r*r);
var next=ceil(area);
}
NAN
This is value which represents something which is not number. Variable can hold different types of data, you
need a way of knowing if a value is currently numeric so that script can decide how to process it. Many
functions return numbers if they have completed successfully. Checking the return value against NAN gives a
way of deciding if the function operated properly.
Global methods
These are some methods which are always available to your scripts
isNAN( value )
This functions returns true if argument is not a number and false if it is numeric
parseFloat( string )
The function parses string, passed in as argument. The string is parsed from the start with the parser looking
for the numbers 0 through 9, the + and -, decimal point and exponents only. When any other character
encountered the parser stops and return what it has already found, if the first character does not belong to
the valid set returns NAN.
parseInt( string [, radix ] )
The string is parsed and its value as an integer returned. Once an invalid character is encountered the
parsing stops and the function returns what it has already found. If the first character of the string is invalid
it returns NAN. The function optionally takes radix as the second argument which decides the type of the
number.
The Math library
To use this simply put the name of the operation after Math and include any parameters inside the
parenthesis.
abs(value) Returns the absolute value passed into it.
acos(value)
These functions returns arcsine, arccosine, arctangent of the values
asin(value)
passed into radians.
atan(value)
Returns the smallest integer which is greater than are equal to the
ceil(value)
value passed in.
cos(value)
sin(value) Returns cosine, sine, and tangent of the values passed in.
tan(value)
Returns the largest integer which is smaller than are equal to the
floor(value)
number passed in.
log(value) Returns natural logarithm of its argument.
max(value1,value2) Returns the larger of its argument.
pow(value, power) Returns the result of rising value to power.
random() Returns the pseudo random number between zero and one.
round(value) Returns the result of rounding its argument to the nearest integer.
sqrt(value) Returns the square root of the value.
7.What are the different control statements in Java?
Control Statements
There are different control statements are there in Java
1. Decision making statements -------------If Statements
2. Looping Statements -------------while,do_while, for
3. branching statements -------------Switch
if-else
if statement is used in JavaScript to construct a test before executing the code. The code is executed only if
the test turns out to be true. if statement can also be elaborated by including an 'else' clause and the code in
the else statement will be executed if the condition in the 'if' statement is false. The general form is:
if(condition)
{
code executed if condition is true
}
else
{
Study material by D.Swetha 37 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
Example 1:
<html>
<head>
<title> Browser sniffing </title>
</head>
<body>
<script language="javascript">
if(navigator.appName=="microsoft internet explorer")
{
document.write("<b><center>you have I.E" + navigator.appVersion +
"</center>" </b>");
}
if(navigator.appName=="Netscape")
{
document.write("<b><center>you have Netscape Navigator" +
navigater.appVersion + "</center>"</b>");
}
</script>
</body>
</html>
</html>
For Loop
Many Operations need to be repeated a number of times. These go inside a for loop. It has the following
general form
for( intialisztion; test; increament)
{
Code
}
The initialisation part is done first (which initialises a variable called loop index variable), the test condition is
executed for each time the code in the loop has been executed. If the test is false, the loop ends otherwise
the body of the loop is executed. When the body of the loop is executed the control is transferred back. Now
the loop index variable incremented or decremented and again test condition is executed and this process
continuous till the test condition becomes false.
Example
<html>
<head>
<title> Using the for statement </title>
</head>
<body>
<script language="javascript">
var fact = 1;
for(var I =1; I <= 0; i++)
{
fact = fact * i;
document.writeln( i + "!=" + fact + "<br>" );
}
</script>
</body>
</html>
while Loop
The while loop is an entry controlled loop and it has this form
while( test )
{
Body
}
The test condition is evaluated first, if it is true then the body of the while executed. After completing the
body again the test condition is evaluated and it is true, the body is executed again. This process continuous
till the condition becomes false.
example:
<html>
<head>
<title> While loop </title>
</head>
<body>
<script language="javascript">
document.writeln("<h1> while loop <h1>");
var done=false;
var msg;
while(done==false)
{
msg=prompt("Enter a string "," ");
document.writeln("<p>"+msg+"</p>");
if(msg.to lowerCase()=="quit")
{ document.writeln("<p> Thanks,Good bye </p>");}
document.close();
}
</script>
</body>
</html>
Switch Statement
Choosing between a number of alternatives can lead to awkward code if you only use if-else statements.
Where you need to make a choice between more than two items the switch statement much easier to write
and maintain. The complete switch looks like this.
switch(expression)
{
case label: statements;
break;
case label: statements;
break;
default: statements;
}
A switch selects between a number of choices depending upon the value of the expression. The choices are
identify by case statements, each has a label which equals one of the potential values of the expression. If
none of the cases matches the expression, the optional default may be used instead. Each case includes one
or more statements and is terminated by break.
example:
<html>
<head>
<title> Switch Statement </title>
</head>
<body>
<script language="javascript">
var msg=prompt("Enter Heading tag"," ");
switch(msg)
{
</b>");
}
</script>
</body>
</html>
8.Explain about operators in Java?
Operators
Java script has two types of operators. Those are used in tests of logic and those used to affect variables.
Operators Meaning
+ If the arguments are numeric they are added, if they are strings they are
concatenation.
- If the supply two operands subtracts one from other, if supplied one
operand reverses its sign.
* Multiples two numbers together.
/ Divides first number by the second.
% Modulus division returns an integer remainder from division.
! Logical not returns true if the operand is evaluates false otherwise
false.
> Returns true if first operand is greater than second.
>= Returns true if first operand is greater than or equal to second.
< Returns true if first operand is less than second.
<= Returns true if first operand is less than or equal to second.
== Returns true if both operands are equals otherwise false..
!= Returns true if both operands are not equal..
&& Returns true if both operands are equals evaluated to true otherwise
false..
|| Returns false if both operands evaluated to false otherwise true.
= Assigns value to a variable.
+= Adds both operands and result is stored in left side operand
-= Subtracts right side operand from left side operand and stores result in
Left side operand.
Study material by D.Swetha 40 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
*= Multiplies the both operands, result will be stored in left side operand.
/= Left side operand divided with right side operand and result is stored in
left side operand.
%= Performs modulus division and result stored in left side operand.
++ (Auto Increment) Increases the value of its integer argument by '1'
-- Decreases the value of its integer argument by one.
9.Explain about Arrays in java?
Arrays
An array is an ordered set of data elements which can access through a single name. We can access the
elements by their index .The index is the position of the element in the array with the first element being at
position zero and the last at (array.length-1).
- ------
ITEM1 ITEM2 ITEM3 ITEM-N
-
Creating Arrays
Arrays can be constructed in 3 different ways. The easiest way is simply to declare variable and pass it some
elements.
Ex: var days = [ "monday", "tuesday", "wednesday", "thrusday" ];
That creates an array of 4 elements each holding a text string, The second approach is to create an array
object using the keyword 'new' and a set of elements to store.
var days = new Array("Monday", "Tuesday", "Wednesday ", “Thursday" );
Finally an empty array object which has space for a number of elements can be created.
var days=new arrays(4);
Java script arrays can hold mixed data types as following example shows.
var x = ["monday", "tuesday", "wednesday", 34,76.34];
var data=new Array("Monday", "Tuesday", "Wednesday", 34.3,76);
Accessing and Adding elements to Array
Array elements are accessed by their index. The index denotes the position of the element and these starts
from zero. Adding an element uses the square bracket syntax.
Example
var x =["Monday", "Tuesday", "Wednesday", 34.3, 76];
x[5] = "Thursday";
x[23] = 48;
The code creates an array of 4 elements in line one. A new element is added at position 5 in line 2. At line 3
an element is added at position 23. To do this the array is first expanded and then new element is added.
Length
When accessing array elements it is need to know how many elements have been stored. This is done
through the length attribute.
Example
<html>
<head>
<title> Looping through an array </title>
</head>
<body>
<script language="javascript">
document.writeln("<h1> looping through an array <h1>");
document.writeln("<p>");
var data=new Array("monday","tuesday","wednesday",34.3,76);
var len=data.length;
for(var counter = 0; counter < len; count++)
{
document.writeln(data[count]+",");
Study material by D.Swetha 41 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
}
document.writeln("</p>");
</script>
</body>
</html>
10.Explain about functions in java?
FUNCTIONS
A function is a piece of code that performs a specific task. Every function is made up of a number of
statements. By creating a function the same piece of code can be used repeatedly. JavaScript has a lot of
functions built into the language. After creating a function we can use it by calling the function. Until the
program calls a function, that code will not do anything.
Defining function:
function name( parameter list )
{
body
}
Functions are defined using the keyword function. The function name can be any combination of letters,
digits and underscore but can’t contain a space. The name of the function has to be followed by parenthesis
which will contain any values that you want to pass into the function code. A function has a block of code
which is surrounded by curly brackets.
Ex:-
function example()
{ // the code
}
Parameter Passing:
We can also supply values to a function while calling it. When a function receives a value as a parameter that
value is given a name and can be accessed, using that name, by the function .The names of parameters are
taken from the function definition and or applied in the order in which parameters are passed in.
Example
function about_you(name, age)
{
document.writeln("<h1> All about you </h1>");
document.writeln("<p> <strong> your name is : </strong>"+name+ <p>");
document.writeln("<p> <strong> your age is : </strong>"+age+ <p>");
document.close();
}
While calling a function it is also possible not pass any parameters in. We can also miss out a parameter all
together but only the last one. In JavaScript parameters are passed as arrays. Every function has two
properties that can be used to find information about the parameters.
function.arguments
This is the array of parameters that have been passed.
function.arguments.length
This is the number of parameters that have been passed into the function.
Example
<html>
<head>
<title> Examining the function call </title>
</head>
<body>
<script language="javascript">
function concatenator()
{
var args=concatenater.arguments;
Study material by D.Swetha 42 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
var res=" ";
for(var i=0; I < args.length; i++) res=res.concat(args[i], " ");
return res;
}
var result=concatenator("Oh", "blah", "di");
document.writeln("<p> the result is"+result+" "+result.length+"</p>");
document.close();
</script>
</body>
</html>
Returning values
Any variable that are declared in a function are local to that function. We cannot get their values outside the
function unless we return a value from a function. That mechanism is provided by return statement. The
return statement can only pass a single value. With return the values can be a JavaScript object.
Example
var reset = getSin(32);
function getSin(number)
{
var answer=Math.sin(number);
return answer;
}
Important Questions:
1.Explain about DHTML and JAVASCRIPT?(**)
2.What are the basic concepts of JavaScript?(***)
3.Explain about variables in Javascript?(*)
4.What are the Data types in JavaScript?(***)
5.Explain about String manipulation?(****)
6.Explain about Mathematical function in javaScript?(****)
7.What are the different control statements in Java?(***)
8.Explain about operators in Java?(***)
9.Explain about Arrays in java?(***)
10.Explain about functions in java?(*****)
UNIT-IV
OBJECTS In java script
1.Explain about objects in javascript?
Objects
Objects are described in software and design constructs called classes. A class usually contains some data
items and methods. Each class provides services to other classes in the system. Often programs are
composed of a set of class hierarchies in which generic classes are declared, which then have their
functionality refined and specialized into usable form.
A single generic class can be specialized in many ways and each of this specialized and versions inherit some
of the properties and behavior of the generic class. When a program runs, objects are created.
An object is a runtime instance of a class. When an object is needs to do something, the appropriate
method is executed.
Generally objects do not act independently; instead their actions are triggered by events throughout the
system. Very often an object is formed by aggregating together lots of simpler objects. The built in java script
objects such as document and window act and are used, like standard OO object(object-oriented and
object). Where JavaScript diverges from traditional OO is in treatment of user defined object. An object is
really a data structure that has been associated with some functions. It does not have inheritance.
example:-
<html>
<head>
<script Language="Java Script">
function.objDemo()
{
popup("Hello");
myhouse=new house(" White house",2,4);
alert(myhouse.name + "Has" + myhouse.floors + "floors and “ +
myhouse.rooms()+" Rooms" );
}
function.house(name,floors,beds)
{
this.name=name;
this.floors=floors;
this.bedrooms=beds;
this.rooms=frooms;
this.leave=popup;
}
function frooms()
{
var.ground floor=3;
var.utilities=2;
var.total=0;
if(this.floors<=0) total=0;
else
{
if(this.floors==1) total=this.bedrooms+utilities;
else
{
total=(this.floors*utilities);
total +=groundfloors;
total +=this.bedrooms;
}
}
return total;
}
function popup(msg)
</h1>");
var x="bitty bought bitter butter and bought better butter to make bitter
butter
better butter";
var p= new RegExp("b\\w*r","ig");
if(a)
for(var i=0;i<a.length;i++)document.writeln("<p>"+a[i]+"</p>");
else document.writeln("<p>" Not found</p>");
</script>
</body>
</html>
4.Explain about Exception handling in javascript?
Exception Handling
Java script provides a mechanism for dealing with general classes of error. This mechanism is called
exception handling. An exception in object-based programming is an object, created dynamically at runtime,
which encapsulates an error and some information about it. We can define our own exception classes to
include exactly what we need in order to handle the problem successfully. Using exception needs two new
pieces of the JavaScript language.
Study material by D.Swetha 47 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
throw
An exception is an object. It is created using the standard new method. Once the exception object exists, we
have to throw the exception, that is we pass it to a piece of code which can handle it. The syntax of the
throw is
do something
if an error happens
{
Create a new exception object;
throw the exception
}
try ….. catch
The try ….. catch mechanism is found in many programming languages not just in JavaScript. The idea here is
that the programme is going to try to execute a block of statements, if an exception is thrown by any of
these statements, execution of the whole block ceases and the program looks for a catch statement to
handle the exception. try…..catch blocks take this form
try
{
statement one
statement two
statement three
}
catch(exception){ handle the exception}
Example:-
<html>
<head>
<title> using exception </title>
</head>
<body onload="runTest()">
<script Language="Java Script">
function inputException(msg)
{
this.val=msg;
this.toString() = function(){return ("Input Exception in "+ this.val)};
}
function areLetters(msg)
{
var input=msg; var re=new Regexp("[a-Z]","ig");
if(input.match(re))
{
oops=new input Exception(input);
throw oops;
}
}
function runtest()
{
document.writeln("<h1> using exceptions </h1>");
var input = prompt("type something","");
try
{
areLetter(input);
Study material by D.Swetha 48 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
}
catch(e)
{
document.writeln("<p>"+e.toString()+"</p>");
document.close();
}
document.writeln("<p> You only see this if an exception is not thrown
</p>");
document.close();
}
</script>
</body>
</html>
5.Explain about built in obects?
Built-in Objects
Most of the objects we use in scripting will be pre-built ones that came with the browser. These
objects mirror aspects of the document object model DOM.
Document Object
A document is a web page that is being either displayed or created. The document has a number of
properties that can be accessed by JavaScript and used to manipulate the content of the page. Some of the
properties can be used to create HTML pages from within java script while others may be used to change the
operation of current page.
write() & writeln() methods
HTML pages can be created on the fly using JavaScript. This is done by using the write() or writeln() methods
of the document object.
Ex
document.write("<body>");
document.writeln("<h1> A test </h1>");
bgcolor and fgcolor properties
These are the same properties that can be sent in the <body> tag. The difference here is that the values can
be set from within a JavaScript. The bgcolor and fgcolor properties specify or retrieve the background colour
and foreground colour for the document. These accept either hexadecimal values or common names for
colours
Ex
<html>
<head>
<title> docdemo </title>
<script language="java script">
function change()
{
document.bgcolor=rgb(198,198,198);
document.fgcolor="blue";
}
</script>
</head>
<body>
<h1> It is test </h1><hr>
<input type="button" value="click me" onclick="change()">
</body>
</html>
Anchors
Any named point inside an HTML document is an anchor. Anchors are created using
<a name = ………>
The anchors property is an array of these names in the ordered in which they appear in the HTML document.
Anchors can be accessed like this
document.anchors[0];
ex
<html>
<head>
<title>Anchors demo </title>
<script language="java script">
function count()
{
var x=document.anchors;
document.writeln("<p> Anchors = " + x.length + "Text=" + x[0].innerText
+ "</p>");
}
</script>
</head>
<body onload="count()">
<a href="test.html"> Test </a> <hr>
<a name="xyz"> section</a>
</body> </html>
Links
An array holding all <a> objects with a href property, as well as all area objects. All links are stored in an
array in the same order as they appear on the webpage.
ex:-
<html>
<head>
<title>Anchors demo </title>
<script language="java script">
function count()
{
var x=document.links;
document.writeln("<p>
links="+x.length+"Text="+x[0].innerText+"</p>");
}
</script>
</head>
<body onload="count()">
<a href="test.html"> Test </a><hr>
<a name="xyz"> section</a>
</body>
</html>
Forms
An array contains all of the html forms. By combining this array with the individual form objects each form
item can be accessed.
Layers
A document can be made from a number of layers of content. This array contains the layer object. Layers
have many methods and properties of their own.
close()
The document is not completely written until the close() method has been called.
Ex
<html>
<head>
<title> Setting Background color with java script </title>
</head>
<body onMouseDown="document.bgcolor=red">
<center>
<h1> Click this page to turn it red </h1>
Study material by D.Swetha 50 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
</center>
</body>
</html>
getElementById(ID)
It uses the HTML ID attribute to locate a specific DOM load. If getElementById can't find an element with the
specified Id returns null. If it finds multiple elements with that Id it returns first one. Remember the Id's are
case sensitive.
getElementsByName(name)
This function returns an array of elements that have name attribute that matches the argument. This is
useful in particular for form radio buttons, because multiple elements grouped together can have the same
name attribute. If no elements are found array of zero length is return.
getElementsByTagName(tagname)
This method is inherited by every HTML element node and can be used to query just portions of the DOM. It
accepts a single argument, a case sensitive string of the HTML tag, we want to find and returns an array of
given tags collection.
6.Explain about window object?
Window Object
The browser window is a mutable object that can be addressed by JavaScript code. This object corresponds
to the current browser window which may contain a page or a number of pages in frames. The document
object is a part of the window object. In fact window object is the top object in hierarchy. Some of the
methods that are available from window object is
open()
This opens in new window the general syntax for this is
open("URL","name" [, "window features"])
This will return a new window object which contains the document specified by the 'URL'. The window is
given an identifying name so that it can be manipulated individually. The optional window features attribute
is a string of comma separated assignment expressions.
Ex:
var x=window.open("","","height=350,resizable=true")
close()
It closes the browser window.
scroll()
The contents of window can be automatically scrolled using this command. The general syntax for this is
scroll(coordinate, coordinate)
As with HTML layers the screen coordinates starts from (0,0) which is at top left corner and increment as
move across and down. The coordinates are given in pixels. Some of the properties are available from
window object is
toolbar = [1|0] - should a new window have a navigational toolbar(back,
forward,
reload, stop
buttons) ?
location = [1|0] - should a new window renders a address bar. ?
directions = [1|0] - if YES it renders the link bar.
status = [1|0] - should the new window have a status bar.
menubar = [1|0] - should the new window have a menu bar.
scrollbars = [1|0] - should the scrollbars be visible.
Study material by D.Swetha 51 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
opened";
else if(mywindow.closed)
document.getElementById("msg").innerText="my window has been
closed";
else
document.getElementById("msg").innerText="my window has not
been
opened";
}
</script>
</head>
<body>
<input type="button" value="open my window" onclick="openWindow()">
<input type="button" value="close my window" onclick="closeWindow()">
<br> <br>
<input type="button" value="Has my window been closed" onclick="checkWindow()">
<br> <br> <div id="msg"> </div>
</body>
</html>
Study material by D.Swetha 52 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
The browser is a Java script object and can be queried form with in the code. The browser object is actually
called the navigator object. some of the properties of navigator object are
navigator.appCodeName
This is the internal name for the browser for both major products this is Mozilla.
navigator.appName
this is public name of the browser - navigator or Internet explorer.
navigator.appVersion
The version number, platform on which the browser is running and the version of the navigator with which it
is compatible.
navigator.userAgent
The strings appCodeName & appVersion concatenated together
navigator.plugins[]
An array containing details of all installed plugins
navigator.mimeTypes[]
An array of all supported mime type
Ex:-
<html>
<head>
<script language ="javascript">
function Sniff()
{
browser=new Is();
browser.display();
}
function Is()
{
this.app=navigator.appName.toLowerCase();
this.version=navigator.appVersion;
this.code=navigator.appCodeName.toLowerCase();
this.agent=navigator.userAgent.toLowerCase();
this.display=showData;
}
function showData()
{
win=open("","newwin");
win.document.write("<body> <h1> About your browser </h1> </body>");
win.document.write("<p> Application:"+ this.app + "</p>"+"<p>Agent: "+
this.agent + "</p>" );
win.document.write("<p> codeName:"+this.code+"</p>");
win.document.write("<p> version:"+this.version+"</p>");
win.document.write("</body>");
win.document.close();
}
</script></head>
<body onload="Sniff()">
</body>
</html>
9.Explain about date object?
The Date object
Java script includes a well-developed Date class which provides functions to perform many different data
manipulations. In Java script dates and times represent the number of milliseconds since 1st January 1970.
The constructors of date object are;
Date() Constructs an empty date object.
Date(milliseconds) Constructs a date object based upon the
Study material by D.Swetha 54 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
EVENTS:-
JavaScript is an event driven system nothing happens unless it is initialised by event outside the script. An
event is any change that the user makes to the state of the browser. JavaScript event handling can be quick
a complex issue. Different manufactures have implemented their own ways of capturing & handling events.
Internet explorer has a large set of complicated but useful routines, but these lacks platform independent.
The original set of event handlers appeared in Netscape to and was broadly replicated in IE-3 and is available
in all browsers which support JavaScript.
Not all objects can create all events, some HTML objects such has paragraphs & headings can't create any
events. Not all events need handling; some can be ignored if they are not relevant. Where an event from a
user lead to some action from a script, you will need to implement an event handler. Event handlers are
JavaScript functions which you associate with an HTML element as part of its definition in HTML source
code. The names of event handlers are not case sensitive, onload, onLoad, ONLOAD represents exactly the
same thing. The following are the more common JavaScript events.
The list of the object & event handlers which are supported by JavaScript are
Object Event handlers
Window onload, onunload, onblur, onfocus
Link onclick, onmouseout, onmouseover
Area onmouseout, onmouseover
Image onabort, onerror, onload
Form onreset, onsubmit
Important Questions?
1.Explain about objects in javascript?
2.Explain about regular Expressions?
3.Explain Regular Expressions using Functions
4.Explain about Exception handling in javascript?
5.Explain about built in obects?
6.Explain about window object?
7.Explain about form object?
8.Explain about Browser object?
9.Explain about date object?
10.Explain about events in Javascript?
UNIT-V
Dynamic HTML with JavaScript
1.Explain about Data validation?
Data validation:
Validation is simply the process of ensuring that some data might be correct data for a particular application
that is data validation is processes of ensuring a user submit only the set of character which you required. It
is not the process of ensuring that that is in any way accurate. It would be nice to validate data that is
entered into the form at the client. Existing techniques rely upon the use of server scripting and very robust.
There is a delay between the user and entering data, the script performing validation, and an error
conformation being returned to the user. Many potential errors such as entering a space or character other
than a digit or a letter into a username should be spotted at the client and dealt with. Generally the RegExp
class provides everything that we need to start validating data.
<html>
<head><title>Data validation</title></head>
<body>
<form method=”post” action=”adduser.php” onSubmit=”return Validate()”>
<tble border=0>
<tr>
<th>Enter your name</th>
<td><input type=”text” maxlength=24 id=”name”></td>
</tr>
<tr>
<th>Your age</th>
<td><input type=”text” mxlength=3 size=3 id=”age”></td>
</tr>
</table>
<input type=”submit” value=”submit”>
</form>
<script language=”javacript”>
function validate()
{
Var valid=false;
Var name=document.getElemenById(“name”).value;
Var age=document.getElementById(“age”).value;
Var name_re=new RegExp(“*A-Z][a-z A-Z ‘-.++$”,”g”);
Var age_re=new RegExp(“^*\\d++$”,”g”);
If(name.match(name_re))
{
If(age.match(age_re)) valid=true;
else alert(“age do not match”);
}
else alert(“name does not match”);
return valid;
}
</script>
</body></html>
2. Write about “opening a new window” using javascript?
Opening a new window:
The majority of the JavaScript coding will be based around the use of windows. The typical piece of
Microsoft windows software uses the multiple document interface (MDI) structure. The application
has a single global frame and new windows are opened they appear inside that frame.
The application frame is said to be parent of all of the internal frames. Web browsers are based
around a different model in which each new window is independent of the application from which it
was lunched.
The main benefit is that because windows are independent of each other, any windows spawned
from our code can be made to look and act totally different from the rest of the application.
some of the main properties and methods from the window object are
open(“URL”, “name”) close()
toolbar = [ 1 | 0 ] location = [ 1 | 0 ]
directories = [ 1 | 0 ] status = [ 1 | 0 ]
menubar = [ 1 | 0 ] scrollbars = [ 1 | 0 ]
resizable = [ 1 | 0 ] width = pixels
height = pixels
A new window can be opened which contains a URL defined and attribute of that windows can be tailored to
suit the application. The URL and window name are not optional, although the URL can be replaced with
empty quotes if you need to open a blank window. The following rules are better to follow when opening a
new window to reduce the chances of seeing random behaviour.
1. The parameter list must be inside a single set of single quotes.
2. There cannot be line brakes or spaces in the parameter string.
3. Do not have any space between the parameters.
4. Do not forget the commas between parameters
Example
<html>
<head>
<script language=”java script”>
function load(url)
{
var next=url;
newwin=open(“url”,”newwin”,”status=0,toolbar=0,resize=0,width=28,
heigt=137”);
}
</script>
</head>
<body>
<p>
<a href=”” onclick=”load(‘/pic.gif’)”>Show to next page</a>
</p>
</body>
</html.
3.Explain about message and confirmations?
Messages and confirmations
Java script provides three built-in window types. They can be used from application code. They are useful
when we need information from visitors to your site.
prompt(“string”, “string”)
This command displays simple window that contains a prompt and a text field in which the user can enter
data. The method has two parameters: A text string to be used as the prompt and a string to use as a default
value.
confirm(“string”)
This shows a window containing a message and two buttons: ok and cancel. Selecting cancel will abort any
pending action, while ok will let the action proceed.
alert(“string”)
This displays the text string and ok button. This may be used as a warning or to provide a farewell message
as visitors leave your site.
Example
Study material by D.Swetha 59 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
prompt(“Enter our name”,””);
confirm(“Are you sure”);
alert(“A warning”);
Rollover.js
function myMouseOff(n)
{
document.images*n+.src = “top_off.gif”;
}
function myMouseOn(n)
{
document.images*n+.src = “top_on.gif”;
}
Whenever the curser passes over the image onmouseOver calls a JavaScript function myMouseOn which
changes the file associated with the src value of the document image object named top to top_on.gif.
Whenever the curser moves away from the image onMouseOut calls a JavaScript function myMouseOff
which change the file associated with the src value of the document image object named top to top_off.gif
7.How can you create moving images in javascript?
Moving images
It is also possible to move the images from one location to the other with the help of the JavaScript. Unlike
rollover buttons moving images around the screen is pretty simple. The following example accomplishes the
task. In fact this is not an image moving at all, that is the just the effect. What is actually moving is a layer of
content. The example flies a logo into the left of the screen five times before positioning it in the centre of
the screen. Images (layers) can move around repeatedly but doing so takes up processor cycles. It is more
user-friendly if your images only move for a restricted amount of time, such as when the webpage is first
loaded or when the user specifically triggers an event
<html>
<head>
<title>moving on image </title>
<script language=”javascript”>
var count; var pos; var obj;
function init()
{
count=0;
obj=document.getElementById(“logo”).style;
pos=parseInt(obj.left);
flyLogo();
}
function flyLogo()
{
obj=document.getElementById(“debug”).innerHTML=
Important Questions:
1.Explain about objects in javascript?
2.Explain about regular Expressions?
3.Explain Regular Expressions using Functions
4.Explain about Exception handling in javascript?
5.Explain about built in obects?
6.Explain about window object?
7.Explain about form object?
8.Explain about Browser object?
9.Explain about date object?
10.Explain about events in Javascript?
46. What tags can be includes in between the starting and ending tags of <map> tag ?
<area> tag
47. What are the required attributes of <area> tag ?
Shape – takes value as either circle or rect or polu or default
Href – it is the destination of the link
Cords- each shape is defined by coordinates
48. What is a table in web page ?
Tables in HTML allow to organize information in a row and colums format
49. How can you create tables ?
By using <table>,<tr>,<td>,<th> tags
50. What is cellpadding ?
Sets the spacing between cell walls and cell contents. Takes value as pixel value
51. What is cellspacing ?
Gives the distance between cells
52. What is colspan ?
Indicates how many cell columns of the table this cell should span
53. What is rowspan ?
Indicates how many rows of the table this cell should span
54. In which tag we use colspan and rowspan attributes
<td> tag
55. How can you include multimedia objects in a web page ?
By using <object> tag
56. What are the attributes of <object> tag ?
Classid, height, width
57. How can you send command line arguments to an object ?
Bu using <parm> (parameter) tag
58. What are the required attributes of <param> tag ?
Name and value
59. What are applets ?
Applets are small java applications
60. How can you include applets in HTML document?
By using <applet> tag
61. What are the required attributes of <applet> tag ?
Code, width and height
62. What are frames ?
Frames give us the ability to split browser window into vertical or horizontal or both sections so that we load
different pages in different sections
63. How can you create frames ?
By using <frameset> and <frame> tags
64. What are the attributes of <frameset> tag ?
LAB Programs
PROGRAM 1
<!-- A Program to illustrate body and pre tags -->
<html>
<head>
<title> body and pre tag </title>
</head>
<body text="red" bgcolor="yellow" background="Desert.jpg">
This is an Illustration of body tag with its properties
<pre>
This text uses
pre tag and preserves
nextline and spaces </pre>
This text doesnt uses
pre tag so doesnt preserves
nextline and spaces.. everything
will be printed in the same line
</body>
</html>
PROGRAM 2
<!-- A Program to illustrate text Font tag -->
<html>
<title> Font tag Example </title>
<body>
<font face="arial" size="1" color="blue"> WELCOME </font> <br>
<font size="2" color="cyan"> WELCOME </font> <br>
<font size="3" color="red"> WELCOME </font> <br>
<font size="4" color="yellow"> WELCOME </font> <br>
<font size="5" color="green"> WELCOME </font> <br>
<font size="6" color="brown"> WELCOME </font> <br>
<font size="7" color="pink"> WELCOME </font> <br>
<font size="20" color="gray"> WELCOME </font> <br>
</body>
</html>
PROGRAM 3
<!-- A Program to illustrate comment,h1….h6, and div tag -->
<html>
<head>
<title> Illustrating comment, h1...h6 and div tags </title>
</head>
<body>
<!-- THIS IS A COMMENT LINE -->
Study material by D.Swetha 71 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
<div style="color:#00ff00">
<h1 align="center"> This is h1 tag text with center aligned </h1>
<h2 align="left"> This is h2 tag text with left aligned </h2>
<h3 align="right">This is h3 tag text with right aligned </h3>
</div>
<h4> This is h4 tag text without alignment</h4>
<h5> This is h5 tag Text without alignment </h5>
<h6> This is h6 tag text without alignment </h6>
</body>
</html>
PROGRAM 4
<!-- A Program to illustrate text formatting tags -->
<html>
<head>
<title> Text Tags </title>
</head>
<body>
<center>
<h1 align="center">To illustrate text formatting tags </h1>
<hr color="red">
<P> <marquee behavior="alternate"> This is an alternate Marquee text
</marquee>
<p> This is <i> italized </i> </p>
<p> This is <u> underlined </u> </p>
<p> This is <b> bold </b> </p>
<p> This is <em> emphasized </em> </p>
<p>This is <Strong> Strong Text </strong> </p>
<p> This is <s> striked text </s> </p>
<p> This is <code> computer code </code> </p>
<p> This is <sup> superscript </sup> code </p>
<p> This is <sub> subscript </sub> code </p>
<p> This is <big> big text </big> </p>
<p> This is <small> small text </small> </p>
</center>
</body>
</html>
PROGRAM 5
<!-- A Program to illustrate Order List tag -->
<html>
<head>
<title> Order List tag </title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate ORDER list tags</h3>
<hr COLOR="RED">
Study material by D.Swetha 72 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Uppercase Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
/ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
PROGRAM 6
<!-- A Program to illustrate Unorder List tag -->
<html>
<title> Unorder List </title>
</head>
<body>
<h3 align="center"> To illustrate unorder list tags </h3>
<hr color="red">
Study material by D.Swetha 73 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
</head>
<body>
<h1> Click on any state to get a welcome message </h2>
</body>
</html>
gulbarga.html
<html>
<head>
<title> Gulbarga.html </title>
</head>
<body bgcolor="green">
<h1> Welcome to gulbarga </h1>
</body>
</html>
bidar.html
<html>
<head>
<title> bidar.html </title>
</head>
<body bgcolor="red">
<h1> Welcome to bidar </h1>
</body>
</html>
PROGRAM 10
<!-- A Program to illustrate Form tag -->
<html>
<head>
<title> form tag </title>
</head>
<body>
<center>
<h3 align="center">To illustrate form based tags</h3> <hr color="red">
<form action="">
<p>This is a text box to enter any text.<input type="text" >
<p>This is a text box to enter password.<input type="password" >
<p>This is a text area to enter large text<textarea> </textarea>
<p>This is a button.<input type="button" Value="Click" >
<p><b><u>Radio Options</u></b><br>
<input type="radio" name="y" checked> yes
<input type="radio" name="n" checked> no </p>
<p><b><u>Checkbox Options</u></b><br>
Sunday<input type="checkbox" checked >
Monday<input type="checkbox" >
Tuesday<input type="checkbox" >
</p>
<p><b><u>Menu driven options </u></b>
<select name="cars">
Study material by D.Swetha 77 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select></p>
</form>
</center>
</body>
</html>
PROGRAM 11
<!-- A Program to illustrate span tag -->
<html>
<head>
<title> span tag </title>
<style type="text/css">
span.blue{ color:lightskyblue; font-weight:bold;}
span.green{ color:darkolivegreen; font-weight:bold;}
</style>
</head>
<body>
<p align="center">
<font size=10>
my mother has <span class="blue"> light blue </span> eyes and
my father has <span class="green"> dark green </span> eyes.
</font>
</p>
</body>
</html>
PROGRAM 12
<!-- A Program to illustrate CSS (cascading style sheet) -->
<html>
<head>
<title> css demo </title>
<style type="text/css">
body { background-color:red;}
h1 { color:orange; text-align:center;}
p { font-family: "Times new roman "; font-size: 20px;}
</style>
</head>
<body>
<h1> CSS EXAMPLE </h1>
<p> This is a paragraph </p>
</body>
</html>
PROGRAM 15
<!-- A Program to illustrate Embedded Multimedia -->
<html>
Study material by D.Swetha 78 Rao's Degree college, Yemmignoor
III Bcom WEBTECHNOLOGY SEMESTER-VI
<head>
<title> embedding multimedia </title>
</head>
<body>
<center>
<h1> Here is a video embedded on this webpage </h1>
<br>
<object data="Wildlife.wmv" type="video/msvideo" height=200 width=200
hspace=200 vspace=200>
</object>
</center>
</body>
</html>