SlideShare a Scribd company logo
1 | P a g e
INDIRA GANDHI NATIONAL OPEN
UNIVERSITY
NAME: DIVYA SINGH
ENROLLMENTNUMBER:
COURSE: MCA(MASTER OF COMPUTER
APPLICATION)
LAB MANUAL OF MCSL-016 INTERNET
CONCEPTSAND WEB DESIGN
2 | P a g e
SESSION 1
--------------------------------------------------------------------------------
EXERCISE 1.
Write HTML code to develop a Web page having the background in red
and title "My First Page" in any other colour.
Ans:
<html>
<head>
<title>My First Page</title></head><body bgcolor="#FF0000">
<font color="#99FF66"><strong>My First Page </strong>
</font></body>
</html>
EXERCISE 2.
NAME ---------- : YOUR NAME
AGE ---------- : AGE
TELEPHONE NUMBER : YOUR AGE
ADDRESS ---------: YOUR ADDRESS
TLC CODE --------: _________________
ENROLMENT NUMBER : YOUR ENROLMENT NO
</pre></h3>
</BODY>
</HTML>
EXERCISE 3.
Q.3. Write an HTML code to design a page containing text, in form of paragraphs
giving suitable heading style.
Ans. <html><head><title>My First Page</title></head>
<body><h1 align="center"><strong>What's new in
Windows XPProfessional</strong>
</h1><h2 align="justify">Welcome to Windows XP
Professional. Among the new features available in Windows XP, there are new
security tools that you can use to helpkeep your computer more secure, and new
technologies that run in the background,making your computer run more efficiently
and reliably.</h2><h3 align="justify">Windows XP has improved upon security,
including the newSecurityCenter, which allows you to check the status of the
important security elementson your computer&#8212;Windows Firewall, Automatic
Updates, and virus protectionsoftware&#8212;making it easier for you to understand
how to keep your computer better protected against viruses and other security
threats. Performance isat an all-time high.</h3><h4 align="justify"> You can now
use more programs at the same time and theywillrun faster than ever. Windows XP is
dependable and stable, so you can alwaysrely on the performance and effectiveness
of your computer.
<br>
</h4>
</body></html>
SESSION 2
EXERCISE 1.
3 | P a g e
Q.1 Create a page to show different attributes of Font Tag.
Ans. <html>
<head>
<title>THE HTML FILE TO SHOW DIFFERENT ATTRIBUTES OF FONT
TAG &mdash; BY CANDIDATE</title>
</head>
<body>
<p align="left"><strong><font color="#0000FF" face="Arial">Left Aligned,
font color #0000FF, font face is ARIAL</font></strong></p>
<font color="#FF0000" face="Courier New">This is Font Color #FF0000,
here font face is Courier New</font><p>
<font face="Geneva"><strong><em>Here Font Face = Geneva, and here
&ndash; < EM > TAG is inside the < STRONG > TAG
</em></strong></font><br><p>
<font color="#FFFFFF" face="Verdana">Here Font Face is Verdana, and
Color #FFFFFF</font><p>
<font face="impact" size=+1>Here Font Face &eqou; IMPACT, and here SIZE
of Font is +1.</font><p>
<font face="arial black" size=4>This is ARIAL BLACK and the SIZE is
4</font><p>
<font face="comic sans MS" size=+1>This is Comic Sans MS, and SIZE is
+1.</font><p>
<font face="geneva" size=-2>This is GENEVA SIZE is -2</font><p>
</body>
</html>
EXERCISE 2
Q. Create a page to show different attributes : Italics, Bold, Underline.
Ans. <html> <head> <title>HTML Pagr to show BOLD, UNDERLINE &amp;
ITALICS effect</title>
</head> <body bgcolor="#FFFFFF">
<p align="left"><strong>Bold</strong></p>
<p align="left"><em>Italics</em></p>
<p align="left"><u>Underline</u></p>
<p align="left"><strong><em>Bold and Italics</em></strong></p>
<p align="left"><u><em>Italics and Underline</em></u></p>
<p align="left"><strong><em><u>Bold Italic and
Underline</u></em></strong></p>
<style type="text/css">
.double_underline {border-bottom: 3px double;}
</style></head><body><span class="double_underline">This is The Sample of
Double Underlined Text &mdash; with the use of css text.</span></body>
</p></body>
</html>
Exercise 3.
Q.3. Design a page having background colour yellow, giving text colour Red and
using all the attributes of font TAB.
Ans. <html><head><title>HTML FILE to SHOW BACKGROUND AS YELLOW with
FONT COLOR RED AND ALL ATTRIBUTE OF FONT TAB</title>
4 | P a g e
</head>
<body bgcolor="#FFFF99"><p align="left"><strong><font color="#FF0000"
face="Arial">Here I am using &lt;STRONG&gt; TAG &amp; FONT COLOR &ndash;
FF0000 Font Face is Arial</font></strong></p><p aligh="justify"><font
color="#FF0000" face="Courier New">Hello Friends This is the sample JUSTIFIED
text with the use of align &amp; justify TAG and &ndash; this text is inside the
&lt;P&gt; Tag and here i am using font color as FF0000, where Font Face is Courier
New, Now with the use of &lt;B&gt; <b>BOLD</b> tag <b>THIS IS BOLD</b>,
with the use of <U>UNDERLINE</U> tag which is U &ndash; <u>THIS IS
UNDERLINE TEXT</u>,</font></p>
<p><font color="#FF0000" face="Geneva"><strong>Here Font Color is
#FF0000, inside &lt;P&gt; TAGFont Face is Geneva, which is inside the
&lt;STRONG&gt; TAG, after that I am using &lt;EM&gt; TAG &mdash; actually
&lt;EM&gt; TAG is used in leu of &lt;I&gt; TAG &ndash; which is generally used for
&lt;I&gt; <i>ITALICS TAG</i> now THIS IS THE &lt;I&gt; TAG, and <em>THIS IS
THE &lt;EM&gt; TAG</em>, you can see easily that they both are similar. Now this
is the example of STRIKETHROUGH
OR <del>DELETED TEXT</del> effect with the use of &lt;DEL&gt;
TAG</strong></font></p>
<p><font color="#FF0000" face="Verdana" size=-1>Here Font Color is
#FF0000, This is the Font Size Experiment THE FONT SIZE
IS MINUS &mdash;1, <font size=+1>THIS IS FONT SIZE +1</font>, <font
size=+3>THIS IS FONT SIZE +3</font><br></p>
</body>
</html>
SESSION 3
Exercise 1. Write an HTML Code to create a web page of Blue color and
display links in red colour.
Ans. <html>
<head>
<title>Showing a Webpage where Background is BLUE &amp; Links in
RED</title>
</head>
<body bgcolor="#0000FF" link="#FF0000" vlink="#FF0000"
alink="#FF0000">
<p align="left"><a href="1.htm"><strong>This is The Link To Page
1</strong></a></p>
<p align="left"><strong><a href="2.htm">This is The Link To Page
2</a></strong></p>
<p align="left"><strong><a href="3.htm" target="_blank">This is The Link To
page 3</a></strong></p>
</body>
</html>
Exercise 2 : Write an HTML code to create a Web page that contains an
Image at its center.
5 | P a g e
Ans. <html>
<head>THIS IS HEADING </head>
<body>
<div align="center"><img src="C:Windowswallpaper.jpg" width="241"
height="133"> </div>
</body>
</html>
EXERCISE 3 : Create a Web page with appropriate content and insert an
image towards the left hand slide of the page. When user clicks on the
image, it should open anotehr Web Page.
Ans. <html>
<head>SESSION 3 EXERCISE 3 &mdash; Inert an Image towards the left hand
side of the page
&ndash; when user clicks on the image, it should open another web page
</head>
<body><br>Click the Image Below it will open another Web Page <p><a
href="ANOTHER.html"><img src="C:photosimg2.jpg" width="272" height="151"
border="2"></a></p>
</body>
</html>
SESSION4
EXERCISE 1 : Create a Web Page using href attribute of anchor tag & the
attribute: alink, vlink etc.
Ans. <html>
<head>SESSION 4 EXERCISE 1 &ndash; Using href attribute of
anchor TAG & the attrib &ndash; alink vlink etc.</head>
<body link="#0000FF" vlink="#009900" alink="#0000FF">
<p><a href="MAIN.htm" target="_blank">THIS IS LINK TO MAIN
PAGE</a></p>
<p><a href="HOME.htm" target="_parent">THIS IS LINK TO
HOME PAGE</a></p>
<p><a href="CONTACT_US.htm" target="_self">THIS IS LINK TO
CONTACT US PAGE</a></p>
</body>
</html>
EXERCISE 2 : Create a Web page, wherein when the user clicks on the
link it should go to the bottom of the page.Ans. : <html>
<head>HERE I AM USING anchor &ndash; anch TAG, CLICK BELOW
LINK TO
GO TO BOTTOM OF THE PAGE</head>
<body link="#0000FF" vlink="#009900" alink="#0000FF">
<p><a href="#Anch1">CLICK HERE TO GO TO BOTTOM</a></p>
<p>First Demo Paragraph</p>
<p>Second Demo Paragraph</p>
<p>Third Demo Paragraph</p>
6 | P a g e
<p>Fourth Demo Paragraph</p>
<p>Fifth Demo Paragraph</p>
<p>Sixth Demo Paragraph</p>
<p>Seventh Demo Paragraph</p>
<p>8 Demo Paragraph</p>
<p>9 Demo Paragraph</p>
<p>10 Demo Paragraph</p>
<p>11 Demo Paragraph</p>
<p>12 Demo Paragraph</p>
<p>13 Demo Paragraph</p>
<p>14 Demo Paragraph</p>
<p>15 Demo Paragraph</p>
<p>16 Demo Paragraph</p>
<p>17 Demo Paragraph</p>
<p>18Demo Paragraph</p>
<p>19 Demo Paragraph</p>
<p>20 Demo Paragraph</p>
<p>21 Demo Paragraph</p>
<p>22 Demo Paragraph</p>
<p>23 Demo Paragraph</p>
<p>24 Demo Paragraph</p>
<p>25 Demo Paragraph</p>
<p><a name="Anch1">THIS IS THE BOTTOM LINK FOR THE ABOVE
ANCHOR</a><BR>
<marquee><font size=+9>THANKS FOR VISITING MY
PAGE</marquee></font></p>
</body>
</html>
EXERCISE 3 : Write HTML Code to create a Web Page of pink colour and
display a moving message in red colour.Ans: <html>
<head>THIS IS HEADING SESSION 4 EX&ndash;3</head>
<body bgcolor="#FF99FF">
<marquee>
<font color="#FF0000"><strong>HI FRIENDS THIS IS MOVING TEXT
WITH THE USE OF MARQUEE TAG, THANKS
</strong></font>
</marquee>
</body>
</html>
SESSION - 5
EXERCISE 1 : Create a Web Page, showing an ordered list of the names
of five of your friends. Ans. : <html>
<head>THIS IS HEADING</head>
<body ><H4>HERE &lt;OL&gt; TAG is for ORDERED (i.e. Auto Numbering with
LI TAG)
LIST &amp &lt;li&gt; TAG is for List</H4>
7 | P a g e
<ol>
<li>Friend 1</li>
<li>Friend 2</li>
<li>Ashish</li>
<li>Mrs. Sharma</li>
<li>Mr. Singh</li>
</ol><p></p>
<H5>Below is the Example of Roman Auto Number List with use of 'ol'
(order list) type i (if we use capital I in place of small I then the roman letters will
look as I, II, III, soon</h5>
<ol type="i">
<li>Harish</li>
<li>Satish</li>
<li>Gautam</li>
<li>Pinki</li>
<li>Anil</li>
</ol>
</body>
</html>
EXERCISE 2 : Create an HTML document containing a nested list
showing the content page of any book.
Ans.: <html>
<head><H2>TITLE OF THE BOOKS &ndash; LET US HTML</H2>
</head>
<body><strong>Contents </strong>
<ol><li>Introduction</li>
<li>Getting Started</li>
<ul><li>What is HTML</li><li>Saliant features of HTML</li></ul>
<li>History of HTML</li>
<ul><li>Difference Between HTML & DHTML</li><ul>
<li>HTML VS XML &am; SGML</li></ul>
<li>INTRODUCTION TO TAGS</li><li>BASIC TAGA IN HTML</li>
<li>LIST OF SOME BASIC TAGS</li></ul>
<li>HEADING TAGS IN HTML</li>
<li>BODY TAG IN HTML</li>
<li>DIFFERENCE BETWEEN HEADING AND BODY TAG</li>
<li>TITLE TAG IN HTML</li>
<li>COLOUR TAGS IN HTML</li>
</ol>
</body></html>
SESSION - 5
EXERCISE 3 : Create a web page, showing an unordered list of names of
five of your friends.Ans.: <html>
<head>THIS IS HEADING</head>
<body >
<ul><li>Friend 1</li>
<li>Friend 2</li>
<li>Sharma</li>
<li>Anil </li>
<li>Friend </li>
8 | P a g e
</ul></body>
</html>
SESSION - 6
EXERCISE 1 : Create a Web page, which should contain a table having
two rows and two columns.
Ans.:<html>
<head>HEADING</head>
<body>
<table width="100%" border="2">
<tr>
<td>&nbsp;one</td>
<td>&nbsp;two</td>
</tr>
<tr>
<td>&nbsp;three</td>
<td>&nbsp;four</td>
</tr>
</table>
</body></html>
EXERCISE 2 : Fill in some dummy data in the table created by you in
question 1 of this session.
Ans.: <html><head>HEADING</head>
<body>
<table width="55%" border="3">
<tr>
<td><strong>LIST OF ITEMS</strong></td>
<td><strong>BRAND NAME</strong></td>
</tr>
<tr>
<td>MONITOR</td>
<td>SAMSUNG 14&rdquo;</td>
</tr>
</table>
</body>
</html>
SESSION - 6
EXERCISE 3 : Create the following table in HTML with Dummy Data.
Ans.: <html><head>TRAIN SCHEDULE &ndash; TABLE</head>
<body><table width="95%" border="4">
<tr><td width="28%" rowspan="2" ><strong>Name Of Train</strong></td>
<td width="11%" rowspan="2" ><strong>Place</strong></td>
<td width="16%" rowspan="2" ><strong>Destination</strong></td>
<td width="17%" rowspan="2" ><strong>Train No</strong></td>
<td colspan="2" ><div align="center"><strong>Time</strong></div></td>
<td width="13%" rowspan="2" ><strong>Fair</strong></td>
</tr>
9 | P a g e
<tr>
<td width="8%" ><strong>Arrival</strong></td>
<td width="7%" ><strong>Departure</strong></td>
</tr>
<tr>
<td >Lokamanya Thilak</td><td>Tvm</td> <td>Loka Manya Thilak</td>
<td>CH8906</td> <td>03:40</td> <td>03:55</td> <td>650</td>
</tr>
<tr> <td>Nizamudhenn Express</td>
<td >Kannur</td>
<td>Koyambathoor</td>
<td>NEH08634</td>
<td>20:25</td> <td>16:45</td> <td>320</td>
</tr>
</table>
</body></html>
SESSION - 7
EXERCISE 1 : Create to following table
Ans. : <html><head>SESSION 7 EXERCISE 1</head><body bgcolor="#AAAAAA">
<table width="60%%" border="1">
<tr bgcolor="#FFFFFF"><td colspan="3">&nbsp;White</td>
</tr>
<tr><td bgcolor="#FF0000">&nbsp;RED</td>
<td bgcolor="#009933">&nbsp;GREEN</td>
<td bgcolor="#000000">&nbsp;<font
color="white"><b>BLACK</b></font></td>
</tr>
</table>
</body>
</html>
SESSION - 7
EXERCISE 2 : Design an HTML Page having 3 images placed in the
following format.Ans: <html> <head><b><u>SESSION 7 EXERCISE
2</u></b></head><p></p>
<body><table width="36%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="26%" align="left" valign="top">
<img src="C:wallpapershello.jpg" width="159" height="129"></td>
<td width="24%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
<td align="left" valign="top"><img src="c:imagesphoto2.jpg" width="159"
height="129"></td> <td>&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
<td>&nbsp;</td>
<td align="left" valign="top">
<img src="c:imagesimage3.jpg" width="159" height="129"></td>
10 | P a g e
</tr>
</table>
</body></html>
SESSION - 7
EXERCISE 3 : Write HTML code to generate the following output :
Ans.: <html><head>SECCION 7 EX 3 IGNOU</head>
<body>
<table width="100%" border="1">
<tr><td rowspan="2">Weather</td>
<td><strong>Delhi</strong></td>
<td><strong>Mumbai</strong></td>
</tr> <tr>
<td>40</td>
<td>35</td>
</tr>
</table>
</body></html>
SESSION -8
EXERCISE 1 : What are HTML Physical style tags and Logical style Tags ?
Ans :
Logical Styles
<DFN> for a word being defined.Typically displayed in
italics. (Internet Explorer is a World Wide Web
browser.)
<EM> for emphasis.Typically displayed in italics. (Watch
out for pickpockets.)
<CITE> for titles of books, films,etc. Typically displayed in
italics. (A Beginner's Guide to HTML)
<CODE> for snippets of computer code.Displayed in a
fixed-width font. (This is a sample of code.)
<KBD> for user keyboard entry. Should be displayed in a
bold fixed-width font, but many browsers render it
in the plain fixed-width font. (Enter password for
Windows networking.)
<SAM
EXERCISE 2 : Which HTML tag allows you to scroll text on the Web Page
? Ans : Scrolling Tag allows us to scroll text on the Web Page<iframe align="left"
scrolling="yes" width="100%" height="100%"src="cont.htm">
11 | P a g e
EXERCISE 3 :What is the comment tag in HTML ?
Ans: Comment tags are used to provide comments to the webpage. The contents
insidethe tag will not displayed by the web browser when it displays the page.Eg.
<!This is comments used to help web designers >
EXERCISE 4 - Design an HTML Page for the "Block Introduction" of
thisBook: The page should allow scrolling and the code should contain a
comment header with your name and enrolment number ?
Ans: <!Name :CANDIDATE NAME><!Enrolment No : XXXXXXXXXXXX>
<html> <head>SESSION 8 EX. 4</head>
<body><table width="80%" border="2">
<tr><td><strong>Block Introduction</strong></td>
</tr> <tr><td height="118" align="left" valign="top">
<iframe align="left" scrolling="yes" width="100%"
height="100%"src="c:pagessecond.html"><p><br></p></iframe></td></tr>
</table></body>
</html>
SESSION - 9
EXERCISE 1 - What difference does it make if we express th width of a
table in percentage or in pixcel value ? And how do we set the width of a
particular column or cell in a table.
Ans: ---- If the width of the table is expressed in percentage the width of the table
variesaccording to the width of the page displayed by the browser. It the width is
100%then width of the table will be the width of the page.The width of the particular
column and cell is set by
<table border=1 width=100%>
<tr><td width=60%></td>
<td width=40%></td>
</tr>
</table>
SESSION - 9
EXERCISE 2 - Write HTML code to generate the following output
:Ans:<html><head>SESSION 9 EXERCISE 2</head>
<body> <table width="80%" border="1" cellpadding="0">
<tr> <td width="33%">1</td><td width="14%">2</td>
<td width="21%">3</td><td width="32%">4</td>
</tr> <tr> <td>5</td><td colspan="2" rowspan="2" align="left"
valign="top">
<img src="C:IMAGESimage1.jpg" width="274"
height="138"></td><td>6</td></tr><tr><td>7</td><td>8</td></tr><tr><td>9
</td><td>10</td><td>11</td><td>12</td></tr>
</table>
</body>
</html>
SESSION - 9
12 | P a g e
EXERCISE 3 -Create a Web page that should contain a table having seven
rows and four columns, along with the attributes - colspan & rowspan.
Ans: <html><head>HEADING</head>
<body><table width="100%" border="1" cellpadding="0">
<tr>
<td width="33%">1</td><td width="14%">2</td><td width="21%">3
</td></tr><tr><td height="21">5</td>
<td colspan="2" rowspan="2" align="left" valign="top">
Example for Colspanand Row Spans</td></tr><tr><td height="21">7
</td></tr><tr><td rowspan="3">Example for Colspan and Row Spans</td>
<td>9</td><td>10</td></tr><tr><td>11</td>
<td>12</td></tr><tr><td>13</td><td>14</td>
</tr><tr><td>15</td><td>16</td><td>17</td></tr>
</table>
</body>
</html>
SESSION -10
EXERCISE 1 - What are the different versions of HTML ?
Ans: HTML 4.2, HTML 4.0, HTML 3.2, HTML 3.0, HTML 2
SESSION -10
EXERCISE 2 -List 5 different HTML Editors ? Ans: a) Macromedia
Dreamweaver b) Microsoft Front page15
c) Web page Maker d) Microsoft Asp.Net Editor
SESSION -10
EXERCISE 3 - What is the different image formats ?
Ans: JPG - Joint Photographic Expert Group, TIFF - Tagged Image File Format,
GIF- Graphical Image File, WMF - Windows Meta File, BMP - Bitmap, PNG -
Portable Network Graphics & many more.
------------------------------------------------------------
SECTION 2 - ADVANCED HTML
------------------------------------------------------------
SESSION - 1
EXERCISE 1 -How do you handle the situation when the browser doesn't
support frames ? Ans: The <NOFRAMES> tag is used for those browsers that are
not able
tointerpret <FRAME> tags. If the browser doesn’t support FRAME
the text between <NOFRAME> and </NOFRAME> will displayed on the
browser’s window
<html><head></head><frameset rows="*,*"" frameborder="NO" border="0"
framespacing="0"><frame src="frn2.htm" name="topFrame">
<frame src="frn1.htm" name="16ainframe"></frameset><body><noframes>
your browser does not handle frames</noframes></body></html>
SESSION - 1
13 | P a g e
EXERCISE 2 - What are inline frames ?Ans : An inline frame ("floating
frame") is a construct which embeds a document into an HTML document so
that embedded data is displayed inside a subwindowof the browser's window.
This does not mean full inclusion; the two documents are independent, and both
them are treated as complete documents, instead of treating one as part of the other.
Support to inline frames is not universal, but with a properly designed "graceful
degradation", they can be used in authoring for the World Wide Web. However,
there are serious problems with printing documents containing them. This document
also discusses the legal side of the matter as well as the details of
the iframe element as defined in the HTML specifications, on one hand, and as
implemented on IE, on the other.
SESSION - 1
EXERCISE - 3 : Which tag is used to define frames in HTML ?
Ans: --- Frameset TAG is used - to define frames in HTML :
<frameset rows=”*,*”” frameborder=”NO” border=”0”framespacing=”0”>
<frame src=”frn2.htm” name=”topFrame” >
<frame src=”frn1.htm” name=”16ainframe”></frameset>
SESSION -2
EXERCISE - 1 : Write an HTML code to develop a Web Page having two
frames that divide the web page into two equal rows ?
Ans : <html><head></head><frameset rows=”*,*”” frameborder=”NO” border=”0”
framespacing=”0”><frame src=”frm1.html” name=”topFrame” ><frame
src=”frm2.html” name=”16ainframe”>
</frameset><body></body></html>
SESSION -2
EXERCISE - 2 :Write an HTML code to develop a Web page having two
frames that divided the web page into two equal rows and then divide the
second row into two equal columns ? Ans: <html><head></head><frameset
rows=”*,*” cols=”*” frameborder=”yes” border=”1” framespacing=”0”><frame
src=”frm1.html” name=”topFrame” scrolling=”NO” noresize ><frameset rows=”*”
cols=”*,*” framespacing=”0” frameborder=”yes” border=”1”><frame
src=”frm2.html” name=”leftFrame” scrolling=”NO” noresize><frame
src=”frm3.html”
name=”17ainframe”></frameset></frameset><body></body</html>
SESSION -2
EXERCISE - 3 : Write an HTML code to develoo a Web page having
frames as described in the above question and then fill each frame with a
different background colour ? Ans.
<html><head></head>
<frameset rows=”*,*” cols=”*” frameborder=”yes” border=”1” framespacing=”0”>
<frame src=”frm1.html” name=”topFrame” scrolling=”NO” noresize >
<frameset rows=”*” cols=”*,*” framespacing=”0” frameborder=”yes” border=”1”>
<frame src=”frm2.html” name=”leftFrame” scrolling=”NO” noresize>
<frame src=”frm3.html” name=”17ainframe”>
</frameset></frameset>
<body></body
</html>
SESSION -3
14 | P a g e
EXERCISE - 1 :What are the tags used to display information for
browsers that do not support frames ?Ans: <NOFRAMES></NOFRAMES>
tag is used to display information for browsersthat does not support frames.
SESSION -3
EXERCISE - 2 : Write the various attributes of frameset tag and frame
tag ? Ans : <!--<FRAMESET ROWS=50%,50%> used to set frame’s row’s size
<FRAMESET COLS=50%,50%>used to set frame’s column’s size
<FRAMESET ROWS><FRAME SRC="FRM2.HTM">used to insert frame
<FRAMESET> opening tag (all frame tag must be between <head> and</head> tag)
</FRAMESET> closing tag SCROLLING attribute is used to set scrolling of a frame
(whether scrolling or not(SCROLLING="NO"))FRAMEBORDER attribute is used to
set border of a frameFRAMESPACING attribute is used to set space between
FRAMES NAME attribute is used to specify the name of a frame (it is an optional
attribute)
SESSION -3
EXERCISE - 3 : Write a code in HTML to design a page with two frames.
The frame should remain proportionate even when page is re-sized
? Ans:
<html><head></head><frameset rows=”*,*” frameborder=”NO” border=”0”
framespacing=”0”><frame src=”frm2.html” name=”topFrame” >
<frame src=”frm1.html” name=”mainframe”>
</frameset><body></body></html>
SESSION -4
EXERCISE - 1 :Write the code to develop the Web page as shown below,
using frames : Ans:
<html><head></head>
<frameset rows=”*” cols=”27%,73%”><frame src=”frm1.html”>
<frameset rows=”50%,50%”><frame src=”frm2.html”>
<frameset cols=”50%,50%”><frame src=”frm3.html”>
<frame src=”frm4.html”></frameset></frameset></frameset>
<body></body>
</html>
SESSION -4
EXERCISE - 2 : Write the code to make the background colour of each
frame in the above question different .Ans:
<html><head>HEADING</head>
<frameset rows=”*” cols=”27%,73%”>
<frame src=”frm1.html”>
<frameset rows=”50%,50%”>
<frame src=”frm2.html”><frameset cols=”50%,50%”>
<frame src=”frm3.html”><frame
src=”frm4.html”></frameset></frameset></frameset>
<body></body>
</html>
SESSION -4
EXERCISE - 3 : Create a Web Page divided into two equal frames ?Ans:
<html><head>HEADING</head>
<frameset rows=”*” cols=”50%,50%”>
<frame src=”frm1.html”><frame src=”frm2.html”>
15 | P a g e
</frameset><noframes></noframes><body></body>
</html>
SESSION -5
EXERCISE - 1 :Crate a Web page having two frames, one containing links
and the containing content of the links. When link is clicked, appropriate
contents should be displayed in Frame 2. Ans:
<html><head>HEADING</head><body>
<table width=”100%” height=”437” border=”1” cellpadding=”0”>
<tr><td width=”22%” align=”left” valign=”top”><a href=”content.html”
target=”frn1”>Show Content
</a></td><td width=”78%” align=”left” valign=”top”>
<iframe name=”frn1” frameborder=”1” width=”100%”height=”100%”></iframe>
</td></tr></table>
</body>
</html>
SESSION - 5
EXERCISE - 2 : Create a Home Page for a TLC in following format : Ans:
<html><head>HEADING</head>
<frameset rows=”*,*” cols=”*” frameborder=”yes” border=”1” framespacing=”0”>
<frame src=”frm1.html” name=”topFrame” scrolling=”NO” noresize >
<frameset rows=”*” cols=”*,*” framespacing=”0” frameborder=”yes”
border=”1”>
<frame src=”frm2.html” name=”leftFrame” scrolling=”NO” noresize>
<frame src=”frm3.html” name=”19ainframe”></frameset></frameset>
<body></body>
</html>
SESSION - 5
EXERCISE - 3 : Creat a Web page using all the attributes of the frame
and other tags ?
Ans:
<html><head>HEAD</head><frameset rows=”*” cols=”27%,73%”>
<frame src=”frm1.html”><frameset rows=”50%,50%” border=”5”
bordercolor=”#3300FF”>
<frame src=”animals7.jpg” width=146 height=162 scrolling=”yes”
marginheight=”1”marginwidth=”1”>
<frameset cols=”40%,*”><frame src=”frm2.html”><frame src=”frm3.html”>
</frameset></frameset></frameset><noframes></noframes>
<body></body>
</html>
SESSION - 6
EXERCISE - 1 : Design a page with a text box called 'name' and a button
with label 'Enter. When you click on the button another page should
open, with the message "Welcome <name>", where name should be
equal to the name entered in the first page.
Ans:
<html><head>HEAD</head>
<script language="JavaScript">function newpages(cont){var msg="Welcome " +
cont;window.navigate("newpage.html");window.document.write(msg);}</script><b
ody>
<form name="form1" method="post" action=""><p>
<input name="name" type="text" id="name" value="aa"> </p><p>
16 | P a g e
<input type="submit" name="Submit"
value="Enter"onClick="newpages(form1.name.value)">
</p></form>
</body></html>
SESSION - 6
EXERCISE - 2 : What are the values of method attribute of the form TAG
?
Ans. : Get, Post are two values of method attributes of form tag
SESSION - 6
EXERCISE - 3 : Set default value of 'name' text box of question 1 of this
session to Victoria. Add another button called Reset on click of this
button name 'text box' should be set to 100 default value.
Ans:
<html><head>HEAD</head><script language=”JavaScript”>function
newpages(cont){var msg=”Welcome “ +
cont;window.navigate(“newpage.html”);window.document.write(msg);}</script><b
ody>
<form name=”form1” method=”post” action=”mailto:mail@abc.com”><p>
<input name=”name” type=”text” id=”name” value=”100”> </p><p>
<input type=”submit” name=”Submit” value=”Enter”onClick=”newpages(form1.nam
e.value)”><input type=”reset”
name=”Submit2” value=”Reset”> </p></form></body></html>
SESSION - 7
EXERCISE - 1 : Design a form using all input types. Ans:
<HTML><HEAD>HEADING</HEAD>
<BODY><FORM name=”frm1” method=”post” action=””><label>NAME</label>
<INPUT TYPE=”TEXT” NAME=”name”><BR><label>PASSWORD</label>
<INPUT TYPE=”PASSWORD” NAME=”PSWRD1”MAXLENGTH=16><BR>
<textarea name=”txtarea”></textarea><INPUT TYPE=”BUTTON”
NAME=”BUTTON1” VALUE=”CLICK”><BR><INPUT TYPE=”SUBMIT”
NAME=”SUBMIT1” VALUE=”SUBMIT”><BR><INPUT TYPE=”HIDDEN”
NAME=”HIDDEN1” VALUE=”HDVALUE”><BR><label>ACCEPT</label><INPUT
TYPE=”radio”
NAME=”radio1”VALUE=”accept”><BR><label>REJECT</label><INPUT
TYPE=”radio” NAME=”radio2”VALUE=”reject”><BR><label>JAN</label><INPUT
TYPE=”CHECKBOX”
NAME=”CKECKBOX1”><BR><label>FEB</label><INPUT TYPE=”CHECKBOX” N
AME=”CKECKBOX2”CHECKED><BR><INPUT TYPE=”RESET” NAME=”RESET1”
VALUE=”RESET YOUR PAGE”><BR><br><select name=”select”>
<option>VB</option><option>VFP</option>
<option>C++</option><option>SIMULA</option>
<option>JAVA</option><option>C</option>
<option>LISP</option></select><br><br><br><select name=”select”>
<option>HTML</option><option>XML</option>
<option>ASP.NET</option><option selected>C#.NET</option>
<option>JSP.NET</option><option>J2SE</option>
<option>ADO.NET</option></select>
17 | P a g e
</FORM></BODY></HTML>
SESSION - 7
EXERCISE - 2 : Create a simple form accepting : Name, Enrolment
Number, and Submit Button. Ans:
<html><head>SIMPLE FORM IGNOU</head><body>
<form name
“frm1”><label>Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type “text”size=20></input><br>
<label>Enrolment Number</label>
<input type “text” size=20></input><br>
<input type=”submit” value=”submit”></input></form>
</body></html>
SESSION - 8
EXERCISE - 1 : Design a Web Page, which is like 'compose' page of e-
mail ?
Ans:
<html><head>COMPOSE PAGE</head><body><form name=”form1”
method=”post” action=””>
<p>To &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=”text”name=”
textfield”> </p><p>Subect <input name=”textfield2” type=”text” size=”50”>
</p><p>Message</p><p>
<textarea name=”textarea” cols=”50”></textarea></p><p>
<input type=”submit” name=”Submit” value=”Send”></p>
</form>
</body>
</html>
SESSION - 8
EXERCISE - 2 : Which element is used to accept large text inputs from
user ? Ans: TEXTAREA(<TEXTAREA></TEXTAREA>) accepts large text
inputsfrom user.
SESSION - 8
EXERCISE - 3 : Write a code to create a Web page having radio buttons
labeled as name of colours. clicking on each radio button should change
the colour of the Web Page.Ans:
<html><head>HEADING</head><body>
<script language=”JavaScript”>function colors(col){switch(col){case
‘red’:document.bgColor=”#FF0000”;break;case
‘blue’:document.bgColor=”#0000FF”; break;case
‘green’:document.bgColor=”#00FF00”; break;}}</script><form name=”form1”
method=”post” action=””>
<p>
<label><input type=”radio” name=”Colors” value=”radio”
onClick=”colors(‘red’)”>Red</label><br>
<label><input type=”radio” name=”Colors” value=”radio”
onClick=”colors(‘green’)”>Green</label><br>
<label><input type=”radio” name=”Colors” value=”radio”
18 | P a g e
onClick=”colors(‘blue’)”>Blue</label><br>
</p></form>
</body></html>
SESSION - 9
EXERCISE - 1 :What is the purpose of hidden field ?
Ans: Hidden field are place to store values which should not be displayed in the page.
The hidden values will be used in some operation such as search.
SESSION - 9
EXERCISE - 2 : Create a form accepting the values : Name, Address,
Marks in 10+2, Graduation & Post Graduation.
Ans:
<html><head></head><body>
<form name
“frm1”><label>Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;</label>
<input type “text”
size=20></input><br><label>Address</label><br><textarea name=”txtarea”
rows=5 cols=25></textarea><br><label>Marks in 10+2</label>
<input type “text” size=10 maxlength=5></input><br><br><label>Marks in
Graduation</label>
<input type=”text” size=10maxlength=5></input><br><label>Marks in Post
Graduation</label>
<input type=”text” size=10maxlength=5></input><br><input type=”submit”
value=”submit”>
</input></form>
</body></html>
SESSION - 9
EXERCISE - 3 : Which element is used to display a drop down list box ?
Ans. : SELECT is used to display the drop down list box
<SELECT name=”select” size=”1”><option>Edit plus</option><option>Word
pad</option><option>Note pad</option></SELECT>
SESSION - 10
EXERCISE - 1 :Design Series of ........................ Page 3 (Hint you may use
hiden fields)
Ans:
SESSION -10
EXERCISE - 2 : Create a Web page; divide that page into two frames. In
one frame create two links that will display different HTML forms in the
other frame.Ans:
<html><head>HEAD</head>
<frameset rows="*" cols="25%,75%" framespacing="0""
frameborder="yes" border="6">
19 | P a g e
<frame src="frm5.html" name="topFrame" >
<frame src="frm6.html" name="mainFrame">
</frameset><noframes><body></body></noframes>
</html>
Page That -- containing link
<html><head></head><body bgcolor="#CCCCCC"><p><a href="frm7.html"
target="mainFrame">Page1</a> </p><p><a href="Img1.jpg"
target="mainFrame">Page2</a> </p></body></html>
-----
Java ScriptSession
14.How would you write any statement using only one write or writeln()
command?
<html><head></head><script language="JavaScript">function
newpages(){document.writeln("Hi ");document.write("Welcome To My
Website");}</script><body><form name="form1" method="post" action="">
<p><input type="submit" name="Submit" value="Enter" onClick="newpages
()"></p></form></body></html>
15.Embed java script in html document asking user name and then
printing Hello<user Name>
<html><head></head><script language="JavaScript">function newpages
(txt){document.writeln("Hello " + txt);}</script><body><form
name="form1" method="post" action=""><p>Enter User Name<input
name="t1" type="text" id="t1"></p><p><input type="submit"
name="Submit" value="Enter"onClick="newpages
(form1.t1.value)"></p></form></body></html>
6.Create a dialogue box with “Welcome to my website” message.
20 | P a g e
<html><head></head><script language="JavaScript">alert("Welcome to my
website");</script><body></body></html>
=================================
Session 2
1.Evaluate the expressiona.
Ans. 7+5b. “7”+”5”c. 7*5d. 7/5e.7%5<html><head></head><script
language="JavaScript">function Calculate(choice){var result;switch
(choice)
{case 1:result=7+5; break;case 2:result="7" + "5"; break;case
3:result=7*5; break;case 4:result=7/5; break;case 5:result=7%5;
break;}document.writeln(result);}</script><body><form name="form1"
method="post" action=""> <p>Evaluate The
Expression</p><p><label><input type="radio" name="RadioGroup1"
value="radio"onClick="Calculate(1)">7+5</label><br><label><input
type="radio" name="RadioGroup1" value="radio"onClick="Calculate
(2)">"7" + "5"</label>
<br><label><input type="radio" name="RadioGroup1"
value="radio"onClick="Calculate(3)">7*5</label><br><label><input
type="radio" name="RadioGroup1" value="radio"onClick="Calculate
(4)">7/5</label><br><label><input type="radio" name="RadioGroup1"
value="radio"onClick="Calculate
(5)">7%5</label><br></p></form></body></html>
2. Write the segment of script that would ask the user if he wants a
greetingmessage and if he does, display a gif file called Welcome. gif
and display“Welcome to Netscape navigator!” in the document window
following the gif.<html><head></head><script
language="JavaScript">function messages(){input_box=confirm("Do You
21 | P a g e
Want a Greeting");if(input_box==true){window.open
("welcome.jpg");window.document.write("Welcome to Netscape navigator!"
);}else{alert("You Have Selected No");}}</script><body><form
name="form1" method="post" action=""><input type="submit"
name="Submit" value="Submit" onClick="messages
()"></form></body></html>
3.Write the object definition for an object called car with four
properties model,make, year and price.
<html><head><script language="JavaScript">var car=new
Object;car.model="Marcides
Benz";car.year=2008;car.make="DX";car.price=4500000;</script></head><s
cript language="JavaScript">function printdet(){document.write(" Model
: " + car.model);document.write(", Make : " +
car.make);document.write(", Year : " + car.year);document.write(",
Price : " +car.price);}</script><body><form name="form1" method="post"
action=""><input type="submit" name="Submit" value="Print Details"
onClick="printdet()"></form></body></html>
4.Write a program to display a multiplication
table.<html><head></head><script language="JavaScript">function
multable(){var num=prompt("Enter The No");var i;for(i=0;i<=10;i++)
{document.write(num + " * " + i + " = " + num*i +"<br>");}}
</script><body><form name="form1" method="post" action=""><input
type="submit" name="Submit" value="Print Details"onClick="multable
()"></form></body></html>
22 | P a g e
2.Write code to create a scrolling text.
<html><head></head><script
language="JavaScript">function movetext(){if(txt.style.posLeft<720)
{txt.style.posLeft=txt.style.posLeft+2;window.setTimeout("movetext
()",5);}else{txt.style.posLeft=0;window.setTimeout("movetext()",5);}}
</script><body onLoad="movetext()"><form name="form1" method="post"
action=""><div id="txt"
style="position:relative;top:3;left0"><h2>Scrolling
Text</h2></div></form></body></html>
Session 4
2. Write a program to change color of text
randomly<html><head><script language="JavaScript">var colors=new
Array(6);colors[0]="#0000FF"; colors[1]="#FF0000"; colors[2]
="#006600";colors[3]="#FFCC00";colors[4]="#00FFFF"; colors[5]
="#000000";var i=1;</script></head><script
language="JavaScript">function changecolor(){ document.fgColor=colors
[i];i++;if(i>5)i=0;setTimeout("changecolor()",100);}</script><body
onLoad="changecolor()"><div align="center"><strong><font
size="7">Hello </font></strong> </div></body></html>
3.Create a web page using two image files, which switch b/w on another
as themouse pointer moves over the image. Use on mouse over and on
mouse out eventhandler.
<html><head><script
23 | P a g e
language="JavaScript">function MM_swapImgRestore() {var
i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;}function MM_preloadImages() {var d=document; if
(d.images){ if(!d.MM_p) d.MM_p=new Array();var
i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;i
++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a
[i];}}}function MM_findObj(n, d) {var p,i,x; if(!d) d=document; if
((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames
[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all)
x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)x=d.forms[i][n];for
(i=0;!x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers
[i].document);if(!x && d.getElementById) x=d.getElementById(n); return
x;}function MM_swapImage() {var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;for(i=0;i<(a.length-2);i+=3)if
((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}}</script></head><body
onLoad="MM_preloadImages('welcome.JPG')"><a href="#"
onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage
('Image1','','welcome.JPG',1)"><imgsrc="Img1.jpg" name="Image1"
width="261" height="195" border="0"></a></body></html>
Session 52 . Use the date function get & set date to prompt the user
for an integer b/w 1-31 &return day of the week it
represents.<html><head></head><script language="JavaScript">function
setdate(){var dt=new Date();dt=new Date
(form1.y.value,form1.m.value,form1.d.value);form1.gt.value=dt.getDate
24 | P a g e
() + "/" + dt.getMonth() + "/" +dt.getFullYear();}</script><body><form
name="form1" method="post" action=""><p>Day <input name="d"
type="text" id="d" size="3">Month <input name="m" type="text" id="m"
size="3">Year <input name="y" type="text" id="y" size="4"><input
type="button" name="Button" value="SetDate" onClick="setdate
()"></p><p> Date <input name="gt" type="text" id="gt">
</p></form></body></html>
2.Display time and print the message accordingly e.g Good morning in
morning etc.
<html><head><script language="JavaScript">var dt=new Date
();document.write("Good Morning The Time Is : " + dt.getHours() +":" +
dt.getMinutes() + ":" + dt.getSeconds
());</script></head><body></body></html>
Session 6
1.Using java script create a digital
clock.<html><head></head><script language="JavaScript">function
getTimes(){var dt=new Date();form1.t.value= dt.getHours() + ":" +
dt.getMinutes() + ":" + dt.getSeconds();window.setTimeout("getTimes
()",1000);}</script><body onLoad="getTimes()"><form name="form1"
method="post" action=""><input name="t" type="text"
id="t"></form></body></html>
Session 71.Using java script create a
calculator.<html><head></head><script language="JavaScript">function
calc(ch){if(ch=="=")form1.t.value= eval(form1.t.value);elseif
25 | P a g e
(ch=="C")form1.t.value= "";elseform1.t.value+=ch;}</script><body
onLoad="getTimes()"><form name="form1" method="post" action=""><input
name="t" type="text" id="t"><br><input type="button" name="Button"
value="7" onClick="calc('7')"><input type="button" name="Submit2"
value="8" onClick="calc('8')"><input type="button" name="Submit3"
value="9" onClick="calc('9')"> <input type="button" name="Submit4"
value="+" onClick="calc('+')"><br><input type="button" name="Submit5"
value="4" onClick="calc('4')"><input type="button" name="Submit6"
value="5" onClick="calc('5')"><input type="button" name="Submit7"
value="6" onClick="calc('6')"><input type="button" name="Submit8"
value="-" onClick="calc('-')"><br><input type="button" name="Submit9"
value="1" onClick="calc('1')"><input type="button" name="Submit10"
value="2" onClick="calc('2')"><input type="button" name="Submit11"
value="3" onClick="calc('3')"><input type="button" name="Submit12"
value="*" onClick="calc('*')"><br><input type="button" name="Submit13"
value="0" onClick="calc('0')"><input type="button" name="Submit14"
value="C" onClick="calc('C')"><input type="button" name="Submit15"
value="=" onClick="calc('=')"><br></form></body></html>
Session 8
1.Create a web page with a textbox and check for validation.
If empty displaymessage and set focus to it, if filled display thank
you.<html><head></head><script language="JavaScript">function check()
{if(form1.t.value==""){alert("Enter The Text");form1.t.focus();}else
{alert("Thank You");}}</script><body><form name="form1" method="post"
action="">Enter a Text<input name="t" type="text" id="t"><input
26 | P a g e
type="submit" name="Submit" value="Submit" onClick="check
()"></form></body></html>
Session 111. Create a program to generate a hit counter
<html><head></head><script language="JavaScript">var
counter;counter=0;function count(){counter++;alert("Counter : " +
counter);}</script><body><form name="form1" method="post"
action=""><div align="center"><input type="button" name="Button"
value="Hit Me" onClick="count()"></div></form></body></html>
2.Create a program to check email address provided by the user is
valid or invalid.
<html><head></head><script
language="JavaScript">function check(){if(form1.t.value==""){alert
("Enter The Text");form1.t.focus();}else{var
email,a,d,diff,k,c;email=form1.t.value;a=email.indexOf
('@');d=email.indexOf('.');diff=parseInt(d)-parseInt(a);k=parseInt
(d)+1;c=email.charAt(k);if(a<1||diff<=1||c==""){alert("Invalid Email
ID");form1.t.focus();}}}</script><body><form name="form1"
method="post" action="">Enter Email ID <input name="t" type="text"
id="t"><input type="submit" name="Submit" value="Submit"
onClick="check()"></form></body></html>
Session 12
1.Write a program to scroll the text on status
bar.<html><head></head><html><head></head><script
27 | P a g e
language="JavaScript">var ar="Scrolling Text";var space="";var
i;i=1;function count(){var cont,k=0;cont="";while(k<=i){cont=cont + "
";k++;}status=cont +ar;i++;if(i>100)i=0;window.setTimeout("count
()",5);}</script><body onLoad="count
()"></body></html><body></body></html>
2. Write a program to create a small window in a main
window.<html><head><script language="JavaScript">window.open
("newwindow.html");</script></head><body></body></html>
Session 151.Use java script for authentication and verification of the
text boxes in the staticsite developed by the student in the html
exercise.<html><head></head><script language="JavaScript">function
check(){if(form1.t.value==""){alert("Enter The
Username");form1.t.focus();}else if(form1.t2.value==""){alert("Enter
The Password");form1.t2.focus();}else{if((form1.t.value!="")||
(form1.t2.value!=”")){alert("Invalid Username or Password");}}}
</script><body><form name="form1" method="post" action=""><p>User Name
<input name="t" type="text" id="t"> </p><p>Password <input name="t2"
type="password" id="t2"> </p><p> <input type="button" name="Button"
value="Button" onClick="check()"></p></form></body></html>
VB ScriptSession
11.Write a program to display the following on a
web pageHello <User Name>
<html><head></head><script
language="VBScript">sub newpages(txt)document.writeln("Hello " + txt)
28 | P a g e
end sub</script><body><form name="form1" method="post"
action=""><p>Enter User Name<input name="t1" type="text"
id="t1"></p><p><input type="submit" name="Submit"
value="Enter"onClick="newpages
(form1.t1.value)"></p></form></body></html>
2.Create a web page that display a message box with the
message“welcome to my web site”
<html><head></head><script
language="VBScript">sub msgs()msgbox("Welcome ToMy Web Site")end
sub</script><body><form name="form1" method="post" action=""><p>
<input type="submit" name="Submit" value="Message"onClick="msgs()">
</p></form></body></html>
3.Write code to change color of text
randomly.
<html><head></head><script language="VBScript">dim colors(5)
colors(0)="#0000FF"colors(1)="#FF0000"colors(2)="#006600"colors(3)
="#FFCC00"colors(4)="#00FFFF"colors(5)="#000000"dim ii=0sub
changecolor()msgbox("Welcome ToMy Web Site")document.fgColor=colors
(i)i=i+1if(i>5) theni=0end if window.setTimeout("changecolor()",100)
end sub</script><body onLoad="changecolor()"><div
align="center"><strong><font size="7">Hello </font></strong>
</div></body></html>
Session 2
29 | P a g e
1.Write a VB Script code that accepts the length, breadth and
height and display thearea of a rectangle.
<html><head></head><script
language="VBScript">sub area()dim l,b,h,ar 40
l=form1.l.value b=form1.b.valueh=form1.h.valuear=l*b*hmsgbox("Area " &
ar)end sub</script><body onLoad="changecolor()"><form name="form1"
method="post" action="">Length <input name="l" type="text"
id="l">Breadth <input name="b" type="text" id="b">Height <input
name="h" type="text" id="h"><br><input type="button" name="Button"
value="Area" onClick="area()"></form></body></html>
2.Create a programme to generate a hit counter
<html><head></head><script language="VBScript">dim counter
counter=0sub count()counter=counter+1msgbox("Counter : " & counter)end
sub</script><body><form name="form1" method="post" action=""><div
align="center"><input type="button" name="Button" value="Hit Me"
onClick="count()"></div></form></body></html>
Session 3
1.Using vbscript create a calculator
<html><head></head><script language="VBScript">sub calc(ch)if(ch="=")
then form1.t.value= eval(form1.t.value)elseif(ch="C")
thenform1.t.value= ""elseform1.t.value=form1.t.value & chend if end if
end sub</script><body onLoad="getTimes()"><form name="form1"
method="post" action=""><input name="t" type="text" id="t"><br><input
type="button" name="Button" value="7" onClick="calc('7')"><input
30 | P a g e
type="button" name="Submit2" value="8" onClick="calc('8')"><input
type="button" name="Submit3" value="9" onClick="calc('9')"><input
type="button" name="Submit4" value="+" onClick="calc('+')"><br><input
type="button" name="Submit5" value="4" onClick="calc('4')"><input
type="button" name="Submit6" value="5" onClick="calc('5')"><input
type="button" name="Submit7" value="6" onClick="calc('6')"><input
type="button" name="Submit8" value="-" onClick="calc('-')"><br><input
type="button" name="Submit9" value="1" onClick="calc('1')"><input
type="button" name="Submit10" value="2" onClick="calc('2')"><input
type="button" name="Submit11" value="3" onClick="calc('3')"><input
type="button" name="Submit12" value="*" onClick="calc('*')"><br><input
type="button" name="Submit13" value="0" onClick="calc('0')"><input
type="button" name="Submit14" value="C" onClick="calc('C')"><input
type="button" name="Submit15" value="=" onClick="calc
('=')"><br></form></body></html>
Session 4
1.Create a programme to check for null or empty
string<html><head></head><script language="VBScript">sub check()if
(form1.t.value="")thenmsgbox("Enter The Text")form1.t.focus()
elsealert("Thank You")end if end sub</script><body><form name="form1"
method="post" action="">Enter a Text<input name="t" type="text"
id="t"><input type="submit" name="Submit" value="Submit"
onClick="check()"></form></body></html>
2.Create a form that has e-mail field. Now Write VB Script code for
31 | P a g e
Validation.<html><head></head><script language="VBScript">sub check()
if(form1.t.value="")thenalert("Enter The Text")form1.t.focus()elsedim
email,a,d,diff,k,cemail=form1.t.valuea=InStr(1,email,"@")d=InStr
(1,email,".")diff=d-ak=d+1c=Mid(email, k, 1)if(a<1 or diff<=1 or
c="")thenalert("Invalid Email ID")form1.t.focus()end if end if end
sub</script><body><form name="form1" method="post" action="">Enter
Email ID <input name="t" type="text" id="t"><input type="submit"
name="Submit" value="Submit" onClick="check()"></form></body></html>
Session 51.List Mouse and Key events in vbscriptMouse Events :
MouseOver, MouseOutKey Events : KeyUp,KeyDown,KeyRelease,
KeyPress2.How do you create random numbers in vbscript?Random No is
Generated byRndFunction
Session 61.Create a form in HTML containing the following files and
then perform thevalidation of each field using VBScript. Name-
textboxAddress-textboxDate Of Birth-Combo boxEmail-
textbox<html><head></head><script language="VBScript">sub check()if
(form1.n.value="")thenalert("Enter The Name")form1.n.focus()elseif
(form1.a.value="")thenalert("Enter The Address")form1.a.focus()elseif
(form1.y.value="")thenalert("Enter The Year")form1.y.focus()elseif
(form1.d.value="")thenalert("Select The Day")form1.d.focus()elseif
(form1.m.value="")thenalert("Select The Month")form1.m.focus()elseif
(form1.mail.value="")thendim
email,a,d,diff,k,cemail=form1.t.valuea=InStr(1,email,"@")d=InStr
(1,email,".")diff=d-ak=d+1c=Mid(email, k, 1)if(a<1 or diff<=1 or
32 | P a g e
c="")thenalert("Invalid Email ID")form1.t.focus()end if end if end
sub</script><body><form name="form1" method="post"
action=""><p>Name<input name="n" type="text" id="n"><br>Address<input
name="a" type="text" id="a"><br>Date Of Birth : Day<select name="d"
id="d"
><option>1</option><option>2</option><option>3</option><option>4</opti
on><option>5</option><option>6</option><option>7</option><option>8</op
tion><option>9</option><option>10</option>
<option>11</option><option>12</option><option>13</option><option>14</o
ption><option>15</option><option>16</option><option>17</option><option
>18</option><option>19</option><option>20</option>
<option>21</option><option>22</option><option>23</option><option>24</o
ption><option>25</option><option>26</option><option>27</option><option
>28</option><option>29</option><option>30</option><option>31</option><
/select>Month<select name="m"
id="m"><option>Jan</option><option>Feb</option><option>Mar</option><op
tion>Aprl</option><option>May</option><option>Jun</option><option>July
</option><option>Aug</option><option>Sep</option><option>Oct</option><
option>Nov</option><option>Dec</option></select>Year <input name="y"
type="text" id="y" size="6"><br>Email Id <input name="mail"
type="text" id="mail"><br> <input type="button" name="Button"
value="Button"onClick="check()"></form></body></html>
Session 8
1.Create a program the accepts the time from the system clock and
accordinglydisplays a Good morning, Good Afternoon and Good Evening
33 | P a g e
message to the user <html><head></head><script language="VBScript">sub
wish()dim hh=Datepart("h",Now)if h>=1 and h<=12 thenmsgbox("Good
Morning")elseif h>=13 and h<=18 thenmsgbox("Good Afternoon")
elsemsgbox("Good Evening")end if end sub</script><body onLoad="wish
()"></body></html>
Session 91.Write a programme that uses For next Looping Statements to
create a FibonacciSeries.<html><head></head><script
language="VBScript">sub fib()dim a,b,ca=1 b=1document.write("First 10
Fibonacci Series<br>")document.write(a & "&nbsp;&nbsp;" & b &
"&nbsp;&nbsp;")for i=3 to 10c=cint(a)+cint(b)document.write(c &
"&nbsp;&nbsp;")a=b b=cnextend sub</script><body onLoad="fib
()"></body></html>
2.Using Do While display the factorial of a
number.<html><head></head><script language="VBScript">sub fact(n)dim
f,if=1i=1do while(i<=cint(n))f=cint(f)*cint(i)i=i+1loopdocument.write
("<br>Factorial Of " & n & " is " & f)end sub</script><body><form
name="form1" method="post" action=""><input name="n" type="text"
id="n"><input name="Button" type="button" onClick="fact
(form1.n.value)"value="Factorial"></form></body></html>
Session 101.Write a Program that displays the multiplication of two
matrices.<html><head></head><script language="VBScript">sub matmul()
dim m1(3,3),m2(3,3),m3(3,3),count,i,jcount=0msgbox("Enter First
matrix")for i=0 to 2for j=0 to 2m1(i,j)=inputbox("")nextnextmsgbox
("Enter Seconf matrix")for i=0 to 2for j=0 to 2m2(i,j)=inputbox("")
next nextdocument.write("<br>Product of twoMatrix<br>")for i=0 to
34 | P a g e
2for j=0 to 2for k=0 to 2m3(i,j)=cint(m3(i,j))+cint(m1(i,k))* cint(m2
(k,j))nextnextnextfor i=0 to 2for j=0 to 2document.write(" " & m1
(i,j))nextdocument.write("<br>")nextdocument.write("<br>+<br>")for i=0
to 2for j=0 to 2document.write(" " & m2(i,j))nextdocument.write
("<br>")nextdocument.write("<br>=<br>")for i=0 to 2for j=0 to
2document.write(" " & m3(i,j))nextdocument.write("<br>")nextend
sub</script><body onLoad="matmul()"></body>
3 . Write a program that accepts a number from the user and displays
its factorialonly if it is a prime number.<html><head></head><script
language="VBScript">sub ChkPrime(n)dim i,prime,k prime=truefor i=2 to
cint(n)/2if (n Mod i)=0 thenprime=falseend if nextif prime=true
thenfact(n)elsedocument.write("<br>The Number is Not Prime")end if end
subsub fact(n)dim f,if=1i=1do while(i<=cint(n))f=cint(f)*cint(i)i=i
+1loopdocument.write("<br>Factorial Of " & n & " is " & f)end
sub</script><body><form name="form1" method="post" action=""><input
name="n" type="text" id="n"><input name="Button" type="button"
onClick="ChkPrime
(form1.n.value)"value="factorial"></form></body></html>
DreamweaverSESSION 1
1.Design a home page of your TLC.
<!DOCTYPE HTML
PUBLIC "-//W3C//DTDHTML 4.01
Transitional//EN"><html><head><title>Untitled Document</title><meta
35 | P a g e
http-equiv="Content-Type" content="text/html; charset=iso-8859-
1"></head><body><table width="100%" border="1" cellpadding="0"><tr><td
bgcolor="#ccc123"><div align="center"><strong><font
size="6">IGNOUPROGRAM STUDY
CENTER</font></strong></div></td></tr><tr><td bgcolor="#cccc12"><div
align="center"><strong><font size="6">WELCOMETO
</font></strong></div></td></tr><tr><td bgcolor="pink"><div
align="center"><strong><br><font size="4"><a
href="faculty_coord.html">FACULTIES ANDCOORDINATORS</a><br><a
href="theory_b_schedule.html">THEORY BATCH SCHEDULES</a> <br><a
href="prac_b_schedule.html">PRACTICAL BATCH SCHEDULES</a><br><a
href="sem_detail.html">SEMESTER WISE LIST OF STUDENTS</a> <br><a
href="assignment.html">ASSIGNMENT AND VIVA-VOCE</a> <br><a
href="ask_y_question.htm">ASK YOUR QUESTION</a> <br><a
href="mail.htm">MAIL US</a>
</font></strong><fontsize="4"></font></div></td></tr></table><p
align="center"><br></p></body></html>
2.Design a Home Page for a toy Company. The page has an image as th
background. Do some text attracting format.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01
Transitional//EN"><html><head><title>Toy Page</title><meta http-
equiv="Content-Type" content="text/html; charset=iso-8859-
1"></head><body background="646.jpg"><table width="100%" border="0"
cellpadding="0"><tr><td><div align="center"><strong><font
color="#33FF00" size="7">Tom
36 | P a g e
ToysCenter</font></strong></div></td></tr><tr><td>&nbsp;</td></tr><tr>
<td align="left" valign="top"><table width="100%"
border="1"cellpadding="0"><tr><td width="27%"><table width="100%"
border="1" cellpadding="0"><tr><td><div align="center"><font
size="5"><strong><ahref="prof.htm">Profiles</a></strong></font></div><
/td></tr><tr><td><div align="center"><font
size="5"><strong><ahref="Toys.htm">Toys</a></strong></font></div></td>
</tr><tr><td><div align="center"><font
size="5"><strong><ahref="cont.htm">ContactUs</a></strong></font></div>
</td></tr></table></td><td width="73%" align="left" valign="top"><div
align="justify"><fontcolor="#FFFFFF" size="4">We are one of the
leading toy comapny in the city and have branchesin all major
districts thoughout kerala. Our toy Shope containsa vide variety of
collection of toys which taste the choice of your kids. toys posses a
high quality . the toys are normally importedfrom European and
American
Countries.</font></div></td></tr></table></td></tr><tr><td>&nbsp;</td>
</tr></table></body></html>
3.Insert a image in your page and give a zig zag motion to the image
in you page(using timeline).<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML
4.01 Transitional//EN"><html><head><title>Untitled
Document</title><meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"><script language="JavaScript"
type="text/JavaScript"><!--function MM_timelinePlay(tmLnName, myID) {
//v1.2//Copyright 1997, 2000 Macromedia, Inc. All rights reserved.var
37 | P a g e
i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstT
ime=false;if (document.MM_Time == null) MM_initTimelines(); //if
*very* 1st timetmLn = document.MM_Time[tmLnName];if (myID== null) {
myID= ++tmLn.ID; firstTime=true;}//if new call, incr IDif (myID==
tmLn.ID) { //if Im newestsetTimeout('MM_timelinePlay("'+tmLnName
+'",'+myID+')',tmLn.delay);fNew = ++tmLn.curFrame;for (i=0;
i<tmLn.length; i++) {sprite = tmLn[i];if (sprite.charAt(0) == 's') {if
(sprite.obj) {numKeyFr = sprite.keyFrames.length; firstKeyFr =
sprite.keyFrames[0];if (fNew >= firstKeyFr && fNew <=
sprite.keyFrames[numKeyFr-1]) {//inrangekeyFrm=1;for (j=0;
j<sprite.values.length; j++) {props = sprite.values[j];if (numKeyFr !=
props.length) {if (props.prop2 == null) sprite.obj[props.prop] =
props[fNew-firstKeyFr];else sprite.obj[props.prop2][props.prop] =
props[fNew-firstKeyFr];} else {while (keyFrm<numKeyFr &&
fNew>=sprite.keyFrames[keyFrm])keyFrm++;if (firstTime ||
fNew==sprite.keyFrames[keyFrm-1]) {if (props.prop2 == null)
sprite.obj[props.prop] = props[keyFrm-1];else sprite.obj[props.prop2]
[props.prop] = props[keyFrm-1];} } } } }} else if (sprite.charAt(0)
=='b' && fNew == sprite.frame) eval(sprite.value);if (fNew >
tmLn.lastFrame) tmLn.ID = 0;} }}function MM_initTimelines() {
//v4.0//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights
reserved.var ns = navigator.appName == "Netscape";var ns4 = (ns &&
parseInt(navigator.appVersion) == 4);var ns5 = (ns && parseInt
(navigator.appVersion) > 4);document.MM_Time = new Array
(1);document.MM_Time[0] = new Array(3);document.MM_Time["Timeline1"] =
38 | P a g e
document.MM_Time[0];document.MM_Time[0].MM_Name =
"Timeline1";document.MM_Time[0].fps = 15;document.MM_Time[0][0] = new
String("sprite");document.MM_Time[0][0].slot = 1;if (ns4)
document.MM_Time[0][0].obj = document["Layer1"];else if (ns5)
document.MM_Time[0][0].obj = document.getElementById
("Layer1");elsedocument.MM_Time[0][0].obj= document.all ?
document.all["Layer1"] :null;document.MM_Time[0][0].keyFrames = new
Array(1, 15);document.MM_Time[0][0].values = new Array(2);if (ns5)
document.MM_Time[0][0].values[0] = new Array("21px", "24px",
"28px","31px", "35px", "38px", "42px", "45px", "48px", "52px", "55px",
"59px", "62px","66px", "69px");elsedocument.MM_Time[0][0].values[0] =
newArray
(21,24,28,31,35,38,42,45,48,52,55,59,62,66,69);document.MM_Time[0]
[0].values[0].prop = "left";if (ns5)document.MM_Time[0][0].values[1] =
new Array("16px", "21px", "25px","30px", "35px", "39px", "44px",
"48px", "53px", "58px", "62px", "67px", "72px","76px", "81px");else
document.MM_Time[0][0].values[1] = newArray
(16,21,25,30,35,39,44,48,53,58,62,67,72,76,81);document.MM_Time[0]
[0].values[1].prop = "top";if (!ns4) {document.MM_Time[0][0].values
[0].prop2 = "style";document.MM_Time[0][0].values[1].prop2 =
"style";}document.MM_Time[0][1] = new String
("sprite");document.MM_Time[0][1].slot = 1;if (ns4)document.MM_Time
[0][1].obj = document["Layer1"];else if (ns5)document.MM_Time[0]
[1].obj = document.getElementById("Layer1");elsedocument.MM_Time[0]
[1].obj = document.all ? document.all["Layer1"]
:null;document.MM_Time[0][1].keyFrames = new Array(16,
39 | P a g e
30);document.MM_Time[0][1].values = new Array(2);if (ns5)
document.MM_Time[0][1].values[0] = new Array("69px", "77px",
"85px","93px", "102px", "110px", "118px", "126px", "134px", "142px",
"150px","159px", "167px", "175px", "183px"); elsedocument.MM_Time[0]
[1].values[0] = newArray
(69,77,85,93,102,110,118,126,134,142,150,159,167,175,183);document.MM_
Time[0][1].values[0].prop = "left"; if (ns5)document.MM_Time[0]
[1].values[1] = new Array("81px", "77px", "72px","68px", "63px",
"59px", "54px", "50px", "45px", "41px", "36px", "32px", "27px","22px",
"18px");elsedocument.MM_Time[0][1].values[1] = newArray
(81,77,72,68,63,59,54,50,45,41,36,32,27,22,18);document.MM_Time[0]
[1].values[1].prop = "top";if (!ns4) {document.MM_Time[0][1].values
[0].prop2 = "style";document.MM_Time[0][1].values[1].prop2 =
"style";}document.MM_Time[0][2] = new String
("sprite");document.MM_Time[0][2].slot = 1;if (ns4)document.MM_Time
[0][2].obj = document["Layer1"];else if (ns5)document.MM_Time[0]
[2].obj = document.getElementById("Layer1");elsedocument.MM_Time[0]
[2].obj = document.all ? document.all["Layer1"]
:null;document.MM_Time[0][2].keyFrames = new Array(31,
45);document.MM_Time[0][2].values = new Array(2);if (ns5)
document.MM_Time[0][2].values[0] = new Array("183px", "191px","198px",
"206px", "213px", "221px", "228px", "236px", "243px", "251px","258px",
"266px", "273px", "281px", "288px"); elsedocument.MM_Time[0]
[2].values[0] = newArray
(183,191,198,206,213,221,228,236,243,251,258,266,273,281,288);document
40 | P a g e
.MM_Time[0][2].values[0].prop = "left";if (ns5)document.MM_Time[0]
[2].values[1] = new Array("18px", "23px", "28px","32px", "37px",
"42px", "47px", "51px", "56px", "61px", "66px", "71px", "75px","80px",
"85px");elsedocument.MM_Time[0][2].values[1] = newArray
(18,23,28,32,37,42,47,51,56,61,66,71,75,80,85);document.MM_Time[0]
[2].values[1].prop = "top";if (!ns4) {document.MM_Time[0][2].values
[0].prop2 = "style";document.MM_Time[0][2].values[1].prop2 =
"style";}document.MM_Time[0].lastFrame = 45;for (i=0;
i<document.MM_Time.length; i++) {document.MM_Time[i].ID =
null;document.MM_Time[i].curFrame = 0;document.MM_Time[i].delay =
1000/document.MM_Time[i].fps;}}//--></script></head><body
onLoad="MM_timelinePlay('Timeline1')"><div id="Layer1"
style="position:absolute; left:21px; top:16px;
width:192px;height:147px; z-index:1"><img src="1Tourism1.jpg"
name="Image1"width="196" height="141"></div></body></html>
SESSION 4
1 . Design a form as follows.<!DOCTYPE HTML PUBLIC
"-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled
Document</title><meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"></head><body><form name="form1"><table
width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td
width="23%">Your name</td><td width="77%"><input type="text"
name="textfield"></td></tr><tr><td>Yiour Address</td><td><input
type="text" name="textfield2"></td></tr><tr><td>&nbsp;</td><td><input
41 | P a g e
type="text" name="textfield3"></td></tr><tr><td>Your
Gender</td><td><input type="radio" name="radiobutton"
value="radiobutton">Male<input type="radio" name="radiobutton"
value="radiobutton">Female </td></tr><tr><td>Your
Country</td><td><select name="select"
size="1"><option>India</option><option>America</option><option>Canada<
/option><option>Denmark</option><option>Egypt</option><option>France</
option><option>Germany</option><option>Hungry</option></select></td></
tr><tr><td>Your
Opinion</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><textarea
name="textarea"
cols="50"></textarea></td></tr><tr><td>&nbsp;</td><td><input
type="reset" name="Reset" value="Reset"><input type="submit"
name="Submit2" value="Submit"></td></tr></table></form></body></html>
SESSION 2
1 . Insert an image in a page. In the browser, when you take
cursor over it, another image emerges under it and when you click on
the second image, it takes you toexercise 2 of session 1.<!DOCTYPE
HTML PUBLIC "-//W3C//DTDHTML 4.01
Transitional//EN"><html><head><title>Untitled Document</title><meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-
1"><script language="JavaScript" type="text/JavaScript"><!--function
MM_swapImgRestore() { //v3.0var i,x,a=document.MM_sr; for
(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)x.src=x.oSrc;} function
42 | P a g e
MM_preloadImages() { //v3.0var d=document; if(d.images){ if(!d.MM_p)
d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new
Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01var
p,i,x; if(!d) d=document; if((p=n.indexOf("?"))
>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!
x&&i<d.forms.length;i++) x=d.forms[i][n];for(i=0;!
x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers
[i].document);if(!x && d.getElementById) x=d.getElementById(n); return
x;}function MM_swapImage() { //v3.0var
i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;for(i=0;i<
(a.length-2);i+=3)if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]
=x; if(!x.oSrc)x.oSrc=x.src; x.src=a[i+2];}}//--></script></head><body
onLoad="MM_preloadImages('animals7.JPG')"><a href="ex1session2.htm"
onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage
('Image1','','animals7.JPG',1)"><img src="12.jpg"name="Image1"
width="218" height="140" border="0"></a></body></html>
43 | P a g e
6.Create a dialogue box with “Welcome to my website” message.
<html><head></head><script language="JavaScript">alert("Welcome to my
website");</script><body></body></html>
=================================
Session 2
1.Evaluate the expressiona.
Ans. 7+5b. “7”+”5”c. 7*5d. 7/5e.7%5<html><head></head><script
language="JavaScript">function Calculate(choice){var result;switch
(choice)
{case 1:result=7+5; break;case 2:result="7" + "5"; break;case
3:result=7*5; break;case 4:result=7/5; break;case 5:result=7%5;
break;}document.writeln(result);}</script><body><form name="form1"
method="post" action=""> <p>Evaluate The
Expression</p><p><label><input type="radio" name="RadioGroup1"
value="radio"onClick="Calculate(1)">7+5</label><br><label><input
type="radio" name="RadioGroup1" value="radio"onClick="Calculate
(2)">"7" + "5"</label>
<br><label><input type="radio" name="RadioGroup1"
value="radio"onClick="Calculate(3)">7*5</label><br><label><input
type="radio" name="RadioGroup1" value="radio"onClick="Calculate
(4)">7/5</label><br><label><input type="radio" name="RadioGroup1"
value="radio"onClick="Calculate
(5)">7%5</label><br></p></form></body></html>
2. Write the segment of script that would ask the user if he wants a
greetingmessage and if he does, display a gif file called Welcome. gif
and display“Welcome to Netscape navigator!” in the document window
44 | P a g e
following the gif.<html><head></head><script
language="JavaScript">function messages(){input_box=confirm("Do You
Want a Greeting");if(input_box==true){window.open
("welcome.jpg");window.document.write("Welcome to Netscape navigator!"
);}else{alert("You Have Selected No");}}</script><body><form
name="form1" method="post" action=""><input type="submit"
name="Submit" value="Submit" onClick="messages
()"></form></body></html>
3.Write the object definition for an object called car with four
properties model,make, year and price.
<html><head><script language="JavaScript">var car=new
Object;car.model="Marcides
Benz";car.year=2008;car.make="DX";car.price=4500000;</script></head><s
cript language="JavaScript">function printdet(){document.write(" Model
: " + car.model);document.write(", Make : " +
car.make);document.write(", Year : " + car.year);document.write(",
Price : " +car.price);}</script><body><form name="form1" method="post"
action=""><input type="submit" name="Submit" value="Print Details"
onClick="printdet()"></form></body></html>
1.Write a program to display a multiplication
table.<html><head></head><script language="JavaScript">function
multable(){var num=prompt("Enter The No");var i;for(i=0;i<=10;i++)
{document.write(num + " * " + i + " = " + num*i +"<br>");}}
</script><body><form name="form1" method="post" action=""><input
45 | P a g e
type="submit" name="Submit" value="Print Details"onClick="multable
()"></form></body></html>
2.Write code to create a scrolling text.<html><head></head><script
language="JavaScript">function movetext(){if(txt.style.posLeft<720)
{txt.style.posLeft=txt.style.posLeft+2;window.setTimeout("movetext
()",5);}else{txt.style.posLeft=0;window.setTimeout("movetext()",5);}}
</script><body onLoad="movetext()"><form name="form1" method="post"
action=""><div id="txt"
style="position:relative;top:3;left0"><h2>Scrolling
Text</h2></div></form></body></html>
Session 42. Write a program to change color of text
randomly<html><head><script language="JavaScript">var colors=new
Array(6);colors[0]="#0000FF"; colors[1]="#FF0000"; colors[2]
="#006600";colors[3]="#FFCC00";colors[4]="#00FFFF"; colors[5]
="#000000";var i=1;</script></head><script
language="JavaScript">function changecolor(){ document.fgColor=colors
[i];i++;if(i>5)i=0;setTimeout("changecolor()",100);}</script><body
onLoad="changecolor()"><div align="center"><strong><font
size="7">Hello </font></strong> </div></body></html>
3.Create a web page using two image files, which switch b/w on another
as themouse pointer moves over the image. Use on mouse over and on
mouse out eventhandler.<html><head><script
language="JavaScript">function MM_swapImgRestore() {var
i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
46 | P a g e
x.src=x.oSrc;}function MM_preloadImages() {var d=document; if
(d.images){ if(!d.MM_p) d.MM_p=new Array();var
i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;i
++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a
[i];}}}function MM_findObj(n, d) {var p,i,x; if(!d) d=document; if
((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames
[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all)
x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)x=d.forms[i][n];for
(i=0;!x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers
[i].document);if(!x && d.getElementById) x=d.getElementById(n); return
x;}function MM_swapImage() {var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;for(i=0;i<(a.length-2);i+=3)if
((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}}</script></head><body
onLoad="MM_preloadImages('welcome.JPG')"><a href="#"
onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage
('Image1','','welcome.JPG',1)"><imgsrc="Img1.jpg" name="Image1"
width="261" height="195" border="0"></a></body></html>
Session 52 . Use the date function get & set date to prompt the user
for an integer b/w 1-31 &return day of the week it
represents.<html><head></head><script language="JavaScript">function
setdate(){var dt=new Date();dt=new Date
(form1.y.value,form1.m.value,form1.d.value);form1.gt.value=dt.getDate
() + "/" + dt.getMonth() + "/" +dt.getFullYear();}</script><body><form
name="form1" method="post" action=""><p>Day <input name="d"
47 | P a g e
type="text" id="d" size="3">Month <input name="m" type="text" id="m"
size="3">Year <input name="y" type="text" id="y" size="4"><input
type="button" name="Button" value="SetDate" onClick="setdate
()"></p><p> Date <input name="gt" type="text" id="gt">
</p></form></body></html>
2.Display time and print the message accordingly e.g Good morning in
morning etc.<html><head><script language="JavaScript">var dt=new Date
();document.write("Good Morning The Time Is : " + dt.getHours() +":" +
dt.getMinutes() + ":" + dt.getSeconds
());</script></head><body></body></html>
Session 61.Using java script create a digital
clock.<html><head></head><script language="JavaScript">function
getTimes(){var dt=new Date();form1.t.value= dt.getHours() + ":" +
dt.getMinutes() + ":" + dt.getSeconds();window.setTimeout("getTimes
()",1000);}</script><body onLoad="getTimes()"><form name="form1"
method="post" action=""><input name="t" type="text"
id="t"></form></body></html>
Session 71.Using java script create a
calculator.<html><head></head><script language="JavaScript">function
calc(ch){if(ch=="=")form1.t.value= eval(form1.t.value);elseif
(ch=="C")form1.t.value= "";elseform1.t.value+=ch;}</script><body
onLoad="getTimes()"><form name="form1" method="post" action=""><input
name="t" type="text" id="t"><br><input type="button" name="Button"
value="7" onClick="calc('7')"><input type="button" name="Submit2"
48 | P a g e
value="8" onClick="calc('8')"><input type="button" name="Submit3"
value="9" onClick="calc('9')"> <input type="button" name="Submit4"
value="+" onClick="calc('+')"><br><input type="button" name="Submit5"
value="4" onClick="calc('4')"><input type="button" name="Submit6"
value="5" onClick="calc('5')"><input type="button" name="Submit7"
value="6" onClick="calc('6')"><input type="button" name="Submit8"
value="-" onClick="calc('-')"><br><input type="button" name="Submit9"
value="1" onClick="calc('1')"><input type="button" name="Submit10"
value="2" onClick="calc('2')"><input type="button" name="Submit11"
value="3" onClick="calc('3')"><input type="button" name="Submit12"
value="*" onClick="calc('*')"><br><input type="button" name="Submit13"
value="0" onClick="calc('0')"><input type="button" name="Submit14"
value="C" onClick="calc('C')"><input type="button" name="Submit15"
value="=" onClick="calc('=')"><br></form></body></html>
Session 81.Create a web page with a textbox and check for validation.
If empty displaymessage and set focus to it, if filled display thank
you.<html><head></head><script language="JavaScript">function check()
{if(form1.t.value==""){alert("Enter The Text");form1.t.focus();}else
{alert("Thank You");}}</script><body><form name="form1" method="post"
action="">Enter a Text<input name="t" type="text" id="t"><input
type="submit" name="Submit" value="Submit" onClick="check
()"></form></body></html>
Session 111. Create a program to generate a hit counter
<html><head></head><script language="JavaScript">var
49 | P a g e
counter;counter=0;function count(){counter++;alert("Counter : " +
counter);}</script><body><form name="form1" method="post"
action=""><div align="center"><input type="button" name="Button"
value="Hit Me" onClick="count()"></div></form></body></html>
2.Create a program to check email address provided by the user is
valid or invalid.<html><head></head><script
language="JavaScript">function check(){if(form1.t.value==""){alert
("Enter The Text");form1.t.focus();}else{var
email,a,d,diff,k,c;email=form1.t.value;a=email.indexOf
('@');d=email.indexOf('.');diff=parseInt(d)-parseInt(a);k=parseInt
(d)+1;c=email.charAt(k);if(a<1||diff<=1||c==""){alert("Invalid Email
ID");form1.t.focus();}}}</script><body><form name="form1"
method="post" action="">Enter Email ID <input name="t" type="text"
id="t"><input type="submit" name="Submit" value="Submit"
onClick="check()"></form></body></html>
Session 121.Write a program to scroll the text on status
bar.<html><head></head><html><head></head><script
language="JavaScript">var ar="Scrolling Text";var space="";var
i;i=1;function count(){var cont,k=0;cont="";while(k<=i){cont=cont + "
";k++;}status=cont +ar;i++;if(i>100)i=0;window.setTimeout("count
()",5);}</script><body onLoad="count
()"></body></html><body></body></html>
2. Write a program to create a small window in a main
window.<html><head><script language="JavaScript">window.open
50 | P a g e
("newwindow.html");</script></head><body></body></html>
Session 151.Use java script for authentication and verification of the
text boxes in the staticsite developed by the student in the html
exercise.<html><head></head><script language="JavaScript">function
check(){if(form1.t.value==""){alert("Enter The
Username");form1.t.focus();}else if(form1.t2.value==""){alert("Enter
The Password");form1.t2.focus();}else{if((form1.t.value!="")||
(form1.t2.value!=”")){alert("Invalid Username or Password");}}}
</script><body><form name="form1" method="post" action=""><p>User Name
<input name="t" type="text" id="t"> </p><p>Password <input name="t2"
type="password" id="t2"> </p><p> <input type="button" name="Button"
value="Button" onClick="check()"></p></form></body></html>
a.VB ScriptSession 11.Write a program to display the following on a
web pageHello <User Name><html><head></head><script
language="VBScript">sub newpages(txt)document.writeln("Hello " + txt)
end sub</script><body><form name="form1" method="post"
action=""><p>Enter User Name<input name="t1" type="text"
id="t1"></p><p><input type="submit" name="Submit"
value="Enter"onClick="newpages
(form1.t1.value)"></p></form></body></html>
2.Create a web page that display a message box with the
message“welcome to my web site”<html><head></head><script
language="VBScript">sub msgs()msgbox("Welcome ToMy Web Site")end
sub</script><body><form name="form1" method="post" action=""><p>
51 | P a g e
<input type="submit" name="Submit" value="Message"onClick="msgs()">
</p></form></body></html>
3.Write code to change color of text
randomly.<html><head></head><script language="VBScript">dim colors(5)
colors(0)="#0000FF"colors(1)="#FF0000"colors(2)="#006600"colors(3)
="#FFCC00"colors(4)="#00FFFF"colors(5)="#000000"dim ii=0sub
changecolor()msgbox("Welcome ToMy Web Site")document.fgColor=colors
(i)i=i+1if(i>5) theni=0end if window.setTimeout("changecolor()",100)
end sub</script><body onLoad="changecolor()"><div
align="center"><strong><font size="7">Hello </font></strong>
</div></body></html>
Session 21.Write a VB Script code that accepts the length, breadth and
height and display thearea of a rectangle.<html><head></head><script
language="VBScript">sub area()dim l,b,h,ar 40
l=form1.l.value b=form1.b.valueh=form1.h.valuear=l*b*hmsgbox("Area " &
ar)end sub</script><body onLoad="changecolor()"><form name="form1"
method="post" action="">Length <input name="l" type="text"
id="l">Breadth <input name="b" type="text" id="b">Height <input
name="h" type="text" id="h"><br><input type="button" name="Button"
value="Area" onClick="area()"></form></body></html>
2.Create a programme to generate a hit counter
<html><head></head><script language="VBScript">dim counter
counter=0sub count()counter=counter+1msgbox("Counter : " & counter)end
sub</script><body><form name="form1" method="post" action=""><div
52 | P a g e
align="center"><input type="button" name="Button" value="Hit Me"
onClick="count()"></div></form></body></html>
Session 31.Using vbscript create a calculator
<html><head></head><script language="VBScript">sub calc(ch)if(ch="=")
then form1.t.value= eval(form1.t.value)elseif(ch="C")
thenform1.t.value= ""elseform1.t.value=form1.t.value & chend if end if
end sub</script><body onLoad="getTimes()"><form name="form1"
method="post" action=""><input name="t" type="text" id="t"><br><input
type="button" name="Button" value="7" onClick="calc('7')"><input
type="button" name="Submit2" value="8" onClick="calc('8')"><input
type="button" name="Submit3" value="9" onClick="calc('9')"><input
type="button" name="Submit4" value="+" onClick="calc('+')"><br><input
type="button" name="Submit5" value="4" onClick="calc('4')"><input
type="button" name="Submit6" value="5" onClick="calc('5')"><input
type="button" name="Submit7" value="6" onClick="calc('6')"><input
type="button" name="Submit8" value="-" onClick="calc('-')"><br><input
type="button" name="Submit9" value="1" onClick="calc('1')"><input
type="button" name="Submit10" value="2" onClick="calc('2')"><input
type="button" name="Submit11" value="3" onClick="calc('3')"><input
type="button" name="Submit12" value="*" onClick="calc('*')"><br><input
type="button" name="Submit13" value="0" onClick="calc('0')"><input
type="button" name="Submit14" value="C" onClick="calc('C')"><input
type="button" name="Submit15" value="=" onClick="calc
('=')"><br></form></body></html>
Session 41.Create a programme to check for null or empty
53 | P a g e
string<html><head></head><script language="VBScript">sub check()if
(form1.t.value="")thenmsgbox("Enter The Text")form1.t.focus()
elsealert("Thank You")end if end sub</script><body><form name="form1"
method="post" action="">Enter a Text<input name="t" type="text"
id="t"><input type="submit" name="Submit" value="Submit"
onClick="check()"></form></body></html>
2.Create a form that has e-mail field. Now Write VB Script code for
Validation.<html><head></head><script language="VBScript">sub check()
if(form1.t.value="")thenalert("Enter The Text")form1.t.focus()elsedim
email,a,d,diff,k,cemail=form1.t.valuea=InStr(1,email,"@")d=InStr
(1,email,".")diff=d-ak=d+1c=Mid(email, k, 1)if(a<1 or diff<=1 or
c="")thenalert("Invalid Email ID")form1.t.focus()end if end if end
sub</script><body><form name="form1" method="post" action="">Enter
Email ID <input name="t" type="text" id="t"><input type="submit"
name="Submit" value="Submit" onClick="check()"></form></body></html>
Session 51.List Mouse and Key events in vbscriptMouse Events :
MouseOver, MouseOutKey Events : KeyUp,KeyDown,KeyRelease,
KeyPress2.How do you create random numbers in vbscript?Random No is
Generated byRndFunction
Session 61.Create a form in HTML containing the following files and
then perform thevalidation of each field using VBScript. Name-
textboxAddress-textboxDate Of Birth-Combo boxEmail-
textbox<html><head></head><script language="VBScript">sub check()if
54 | P a g e
(form1.n.value="")thenalert("Enter The Name")form1.n.focus()elseif
(form1.a.value="")thenalert("Enter The Address")form1.a.focus()elseif
(form1.y.value="")thenalert("Enter The Year")form1.y.focus()elseif
(form1.d.value="")thenalert("Select The Day")form1.d.focus()elseif
(form1.m.value="")thenalert("Select The Month")form1.m.focus()elseif
(form1.mail.value="")thendim
email,a,d,diff,k,cemail=form1.t.valuea=InStr(1,email,"@")d=InStr
(1,email,".")diff=d-ak=d+1c=Mid(email, k, 1)if(a<1 or diff<=1 or
c="")thenalert("Invalid Email ID")form1.t.focus()end if end if end
sub</script><body><form name="form1" method="post"
action=""><p>Name<input name="n" type="text" id="n"><br>Address<input
name="a" type="text" id="a"><br>Date Of Birth : Day<select name="d"
id="d"
><option>1</option><option>2</option><option>3</option><option>4</opti
on><option>5</option><option>6</option><option>7</option><option>8</op
tion><option>9</option><option>10</option>
<option>11</option><option>12</option><option>13</option><option>14</o
ption><option>15</option><option>16</option><option>17</option><option
>18</option><option>19</option><option>20</option>
<option>21</option><option>22</option><option>23</option><option>24</o
ption><option>25</option><option>26</option><option>27</option><option
>28</option><option>29</option><option>30</option><option>31</option><
/select>Month<select name="m"
id="m"><option>Jan</option><option>Feb</option><option>Mar</option><op
tion>Aprl</option><option>May</option><option>Jun</option><option>July
55 | P a g e
</option><option>Aug</option><option>Sep</option><option>Oct</option><
option>Nov</option><option>Dec</option></select>Year <input name="y"
type="text" id="y" size="6"><br>Email Id <input name="mail"
type="text" id="mail"><br> <input type="button" name="Button"
value="Button"onClick="check()"></form></body></html>
Session 8
1.Create a program the accepts the time from the system clock and
accordinglydisplays a Good morning, Good Afternoon and Good Evening
message to the user <html><head></head><script language="VBScript">sub
wish()dim hh=Datepart("h",Now)if h>=1 and h<=12 thenmsgbox("Good
Morning")elseif h>=13 and h<=18 thenmsgbox("Good Afternoon")
elsemsgbox("Good Evening")end if end sub</script><body onLoad="wish
()"></body></html>
Session 91.Write a programme that uses For next Looping Statements to
create a FibonacciSeries.<html><head></head><script
language="VBScript">sub fib()dim a,b,ca=1 b=1document.write("First 10
Fibonacci Series<br>")document.write(a & "&nbsp;&nbsp;" & b &
"&nbsp;&nbsp;")for i=3 to 10c=cint(a)+cint(b)document.write(c &
"&nbsp;&nbsp;")a=b b=cnextend sub</script><body onLoad="fib
()"></body></html>
2.Using Do While display the factorial of a
number.<html><head></head><script language="VBScript">sub fact(n)dim
f,if=1i=1do while(i<=cint(n))f=cint(f)*cint(i)i=i+1loopdocument.write
("<br>Factorial Of " & n & " is " & f)end sub</script><body><form
name="form1" method="post" action=""><input name="n" type="text"
56 | P a g e
id="n"><input name="Button" type="button" onClick="fact
(form1.n.value)"value="Factorial"></form></body></html>
Session 101.Write a Program that displays the multiplication of two
matrices.<html><head></head><script language="VBScript">sub matmul()
dim m1(3,3),m2(3,3),m3(3,3),count,i,jcount=0msgbox("Enter First
matrix")for i=0 to 2for j=0 to 2m1(i,j)=inputbox("")nextnextmsgbox
("Enter Seconf matrix")for i=0 to 2for j=0 to 2m2(i,j)=inputbox("")
next nextdocument.write("<br>Product of twoMatrix<br>")for i=0 to
2for j=0 to 2for k=0 to 2m3(i,j)=cint(m3(i,j))+cint(m1(i,k))* cint(m2
(k,j))nextnextnextfor i=0 to 2for j=0 to 2document.write(" " & m1
(i,j))nextdocument.write("<br>")nextdocument.write("<br>+<br>")for i=0
to 2for j=0 to 2document.write(" " & m2(i,j))nextdocument.write
("<br>")nextdocument.write("<br>=<br>")for i=0 to 2for j=0 to
2document.write(" " & m3(i,j))nextdocument.write("<br>")nextend
sub</script><body onLoad="matmul()"></body>
3 . Write a program that accepts a number from the user and displays
its factorialonly if it is a prime number.<html><head></head><script
language="VBScript">sub ChkPrime(n)dim i,prime,k prime=truefor i=2 to
cint(n)/2if (n Mod i)=0 thenprime=falseend if nextif prime=true
thenfact(n)elsedocument.write("<br>The Number is Not Prime")end if end
subsub fact(n)dim f,if=1i=1do while(i<=cint(n))f=cint(f)*cint(i)i=i
+1loopdocument.write("<br>Factorial Of " & n & " is " & f)end
sub</script><body><form name="form1" method="post" action=""><input
name="n" type="text" id="n"><input name="Button" type="button"
57 | P a g e
onClick="ChkPrime
(form1.n.value)"value="factorial"></form></body></html>
DreamweaverSESSION 11.Design a home page of your TLC.<!DOCTYPE HTML
PUBLIC "-//W3C//DTDHTML 4.01
Transitional//EN"><html><head><title>Untitled Document</title><meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-
1"></head><body><table width="100%" border="1" cellpadding="0"><tr><td
bgcolor="#ccc123"><div align="center"><strong><font
size="6">IGNOUPROGRAM STUDY
CENTER</font></strong></div></td></tr><tr><td bgcolor="#cccc12"><div
align="center"><strong><font size="6">WELCOMETO
</font></strong></div></td></tr><tr><td bgcolor="pink"><div
align="center"><strong><br><font size="4"><a
href="faculty_coord.html">FACULTIES ANDCOORDINATORS</a><br><a
href="theory_b_schedule.html">THEORY BATCH SCHEDULES</a> <br><a
href="prac_b_schedule.html">PRACTICAL BATCH SCHEDULES</a><br><a
href="sem_detail.html">SEMESTER WISE LIST OF STUDENTS</a> <br><a
href="assignment.html">ASSIGNMENT AND VIVA-VOCE</a> <br><a
href="ask_y_question.htm">ASK YOUR QUESTION</a> <br><a
href="mail.htm">MAIL US</a>
</font></strong><fontsize="4"></font></div></td></tr></table><p
align="center"><br></p></body></html>
2.Design a Home Page for a toy Company. The page has an image as th
background. Do some text attracting format.
58 | P a g e
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01
Transitional//EN"><html><head><title>Toy Page</title><meta http-
equiv="Content-Type" content="text/html; charset=iso-8859-
1"></head><body background="646.jpg"><table width="100%" border="0"
cellpadding="0"><tr><td><div align="center"><strong><font
color="#33FF00" size="7">Tom
ToysCenter</font></strong></div></td></tr><tr><td>&nbsp;</td></tr><tr>
<td align="left" valign="top"><table width="100%"
border="1"cellpadding="0"><tr><td width="27%"><table width="100%"
border="1" cellpadding="0"><tr><td><div align="center"><font
size="5"><strong><ahref="prof.htm">Profiles</a></strong></font></div><
/td></tr><tr><td><div align="center"><font
size="5"><strong><ahref="Toys.htm">Toys</a></strong></font></div></td>
</tr><tr><td><div align="center"><font
size="5"><strong><ahref="cont.htm">ContactUs</a></strong></font></div>
</td></tr></table></td><td width="73%" align="left" valign="top"><div
align="justify"><fontcolor="#FFFFFF" size="4">We are one of the
leading toy comapny in the city and have branchesin all major
districts thoughout kerala. Our toy Shope containsa vide variety of
collection of toys which taste the choice of your kids. toys posses a
high quality . the toys are normally importedfrom European and
American
Countries.</font></div></td></tr></table></td></tr><tr><td>&nbsp;</td>
</tr></table></body></html>
3.Insert a image in your page and give a zig zag motion to the image
59 | P a g e
in you page(using timeline).<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML
4.01 Transitional//EN"><html><head><title>Untitled
Document</title><meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"><script language="JavaScript"
type="text/JavaScript"><!--function MM_timelinePlay(tmLnName, myID) {
//v1.2//Copyright 1997, 2000 Macromedia, Inc. All rights reserved.var
i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstT
ime=false;if (document.MM_Time == null) MM_initTimelines(); //if
*very* 1st timetmLn = document.MM_Time[tmLnName];if (myID== null) {
myID= ++tmLn.ID; firstTime=true;}//if new call, incr IDif (myID==
tmLn.ID) { //if Im newestsetTimeout('MM_timelinePlay("'+tmLnName
+'",'+myID+')',tmLn.delay);fNew = ++tmLn.curFrame;for (i=0;
i<tmLn.length; i++) {sprite = tmLn[i];if (sprite.charAt(0) == 's') {if
(sprite.obj) {numKeyFr = sprite.keyFrames.length; firstKeyFr =
sprite.keyFrames[0];if (fNew >= firstKeyFr && fNew <=
sprite.keyFrames[numKeyFr-1]) {//inrangekeyFrm=1;for (j=0;
j<sprite.values.length; j++) {props = sprite.values[j];if (numKeyFr !=
props.length) {if (props.prop2 == null) sprite.obj[props.prop] =
props[fNew-firstKeyFr];else sprite.obj[props.prop2][props.prop] =
props[fNew-firstKeyFr];} else {while (keyFrm<numKeyFr &&
fNew>=sprite.keyFrames[keyFrm])keyFrm++;if (firstTime ||
fNew==sprite.keyFrames[keyFrm-1]) {if (props.prop2 == null)
sprite.obj[props.prop] = props[keyFrm-1];else sprite.obj[props.prop2]
[props.prop] = props[keyFrm-1];} } } } }} else if (sprite.charAt(0)
=='b' && fNew == sprite.frame) eval(sprite.value);if (fNew >
60 | P a g e
tmLn.lastFrame) tmLn.ID = 0;} }}function MM_initTimelines() {
//v4.0//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights
reserved.var ns = navigator.appName == "Netscape";var ns4 = (ns &&
parseInt(navigator.appVersion) == 4);var ns5 = (ns && parseInt
(navigator.appVersion) > 4);document.MM_Time = new Array
(1);document.MM_Time[0] = new Array(3);document.MM_Time["Timeline1"] =
document.MM_Time[0];document.MM_Time[0].MM_Name =
"Timeline1";document.MM_Time[0].fps = 15;document.MM_Time[0][0] = new
String("sprite");document.MM_Time[0][0].slot = 1;if (ns4)
document.MM_Time[0][0].obj = document["Layer1"];else if (ns5)
document.MM_Time[0][0].obj = document.getElementById
("Layer1");elsedocument.MM_Time[0][0].obj= document.all ?
document.all["Layer1"] :null;document.MM_Time[0][0].keyFrames = new
Array(1, 15);document.MM_Time[0][0].values = new Array(2);if (ns5)
document.MM_Time[0][0].values[0] = new Array("21px", "24px",
"28px","31px", "35px", "38px", "42px", "45px", "48px", "52px", "55px",
"59px", "62px","66px", "69px");elsedocument.MM_Time[0][0].values[0] =
newArray
(21,24,28,31,35,38,42,45,48,52,55,59,62,66,69);document.MM_Time[0]
[0].values[0].prop = "left";if (ns5)document.MM_Time[0][0].values[1] =
new Array("16px", "21px", "25px","30px", "35px", "39px", "44px",
"48px", "53px", "58px", "62px", "67px", "72px","76px", "81px");else
document.MM_Time[0][0].values[1] = newArray
(16,21,25,30,35,39,44,48,53,58,62,67,72,76,81);document.MM_Time[0]
[0].values[1].prop = "top";if (!ns4) {document.MM_Time[0][0].values
[0].prop2 = "style";document.MM_Time[0][0].values[1].prop2 =
61 | P a g e
"style";}document.MM_Time[0][1] = new String
("sprite");document.MM_Time[0][1].slot = 1;if (ns4)document.MM_Time
[0][1].obj = document["Layer1"];else if (ns5)document.MM_Time[0]
[1].obj = document.getElementById("Layer1");elsedocument.MM_Time[0]
[1].obj = document.all ? document.all["Layer1"]
:null;document.MM_Time[0][1].keyFrames = new Array(16,
30);document.MM_Time[0][1].values = new Array(2);if (ns5)
document.MM_Time[0][1].values[0] = new Array("69px", "77px",
"85px","93px", "102px", "110px", "118px", "126px", "134px", "142px",
"150px","159px", "167px", "175px", "183px"); elsedocument.MM_Time[0]
[1].values[0] = newArray
(69,77,85,93,102,110,118,126,134,142,150,159,167,175,183);document.MM_
Time[0][1].values[0].prop = "left"; if (ns5)document.MM_Time[0]
[1].values[1] = new Array("81px", "77px", "72px","68px", "63px",
"59px", "54px", "50px", "45px", "41px", "36px", "32px", "27px","22px",
"18px");elsedocument.MM_Time[0][1].values[1] = newArray
(81,77,72,68,63,59,54,50,45,41,36,32,27,22,18);document.MM_Time[0]
[1].values[1].prop = "top";if (!ns4) {document.MM_Time[0][1].values
[0].prop2 = "style";document.MM_Time[0][1].values[1].prop2 =
"style";}document.MM_Time[0][2] = new String
("sprite");document.MM_Time[0][2].slot = 1;if (ns4)document.MM_Time
[0][2].obj = document["Layer1"];else if (ns5)document.MM_Time[0]
[2].obj = document.getElementById("Layer1");elsedocument.MM_Time[0]
[2].obj = document.all ? document.all["Layer1"]
:null;document.MM_Time[0][2].keyFrames = new Array(31,
62 | P a g e
45);document.MM_Time[0][2].values = new Array(2);if (ns5)
document.MM_Time[0][2].values[0] = new Array("183px", "191px","198px",
"206px", "213px", "221px", "228px", "236px", "243px", "251px","258px",
"266px", "273px", "281px", "288px"); elsedocument.MM_Time[0]
[2].values[0] = newArray
(183,191,198,206,213,221,228,236,243,251,258,266,273,281,288);document
.MM_Time[0][2].values[0].prop = "left";if (ns5)document.MM_Time[0]
[2].values[1] = new Array("18px", "23px", "28px","32px", "37px",
"42px", "47px", "51px", "56px", "61px", "66px", "71px", "75px","80px",
"85px");elsedocument.MM_Time[0][2].values[1] = newArray
(18,23,28,32,37,42,47,51,56,61,66,71,75,80,85);document.MM_Time[0]
[2].values[1].prop = "top";if (!ns4) {document.MM_Time[0][2].values
[0].prop2 = "style";document.MM_Time[0][2].values[1].prop2 =
"style";}document.MM_Time[0].lastFrame = 45;for (i=0;
i<document.MM_Time.length; i++) {document.MM_Time[i].ID =
null;document.MM_Time[i].curFrame = 0;document.MM_Time[i].delay =
1000/document.MM_Time[i].fps;}}//--></script></head><body
onLoad="MM_timelinePlay('Timeline1')"><div id="Layer1"
style="position:absolute; left:21px; top:16px;
width:192px;height:147px; z-index:1"><img src="1Tourism1.jpg"
name="Image1"width="196" height="141"></div></body></html>
SESSION 41 . Design a form as follows.<!DOCTYPE HTML PUBLIC
"-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled
Document</title><meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"></head><body><form name="form1"><table
63 | P a g e
width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td
width="23%">Your name</td><td width="77%"><input type="text"
name="textfield"></td></tr><tr><td>Yiour Address</td><td><input
type="text" name="textfield2"></td></tr><tr><td>&nbsp;</td><td><input
type="text" name="textfield3"></td></tr><tr><td>Your
Gender</td><td><input type="radio" name="radiobutton"
value="radiobutton">Male<input type="radio" name="radiobutton"
value="radiobutton">Female </td></tr><tr><td>Your
Country</td><td><select name="select"
size="1"><option>India</option><option>America</option><option>Canada<
/option><option>Denmark</option><option>Egypt</option><option>France</
option><option>Germany</option><option>Hungry</option></select></td></
tr><tr><td>Your
Opinion</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><textarea
name="textarea"
cols="50"></textarea></td></tr><tr><td>&nbsp;</td><td><input
type="reset" name="Reset" value="Reset"><input type="submit"
name="Submit2" value="Submit"></td></tr></table></form></body></html>
SESSION 21 . Insert an image in a page. In the browser, when you take
cursor over it, another image emerges under it and when you click on
the second image, it takes you toexercise 2 of session 1.<!DOCTYPE
HTML PUBLIC "-//W3C//DTDHTML 4.01
Transitional//EN"><html><head><title>Untitled Document</title><meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-
64 | P a g e
1"><script language="JavaScript" type="text/JavaScript"><!--function
MM_swapImgRestore() { //v3.0var i,x,a=document.MM_sr; for
(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)x.src=x.oSrc;} function
MM_preloadImages() { //v3.0var d=document; if(d.images){ if(!d.MM_p)
d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new
Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01var
p,i,x; if(!d) d=document; if((p=n.indexOf("?"))
>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!
x&&i<d.forms.length;i++) x=d.forms[i][n];for(i=0;!
x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers
[i].document);if(!x && d.getElementById) x=d.getElementById(n); return
x;}function MM_swapImage() { //v3.0var
i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;for(i=0;i<
(a.length-2);i+=3)if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]
=x; if(!x.oSrc)x.oSrc=x.src; x.src=a[i+2];}}//--></script></head><body
onLoad="MM_preloadImages('animals7.JPG')"><a href="ex1session2.htm"
onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage
('Image1','','animals7.JPG',1)"><img src="12.jpg"name="Image1"
width="218" height="140" border="0"></a></body></html>

More Related Content

PPTX
Cascading style sheets (CSS-Web Technology)
PPSX
Introduction to Html5
PDF
Intro to HTML, CSS & JS - Internship Presentation Week-3
PPTX
HTML Text formatting tags
PDF
HTML practical file
PPTX
Web engineering lecture 1
DOCX
Practical file on web technology(html)
Cascading style sheets (CSS-Web Technology)
Introduction to Html5
Intro to HTML, CSS & JS - Internship Presentation Week-3
HTML Text formatting tags
HTML practical file
Web engineering lecture 1
Practical file on web technology(html)

What's hot (20)

ODP
PPTX
PPT
PPSX
Html introduction
PPTX
Bootstrap
PPT
Web design basics
PPTX
Blazor - An Introduction
PDF
JavaScript - Chapter 11 - Events
PDF
Web technology lab manual
PPTX
HTML/CSS/java Script/Jquery
PPTX
HTML Lesson 1
PPTX
Complete Lecture on Css presentation
PDF
Introduction to Bootstrap
PDF
Bootstrap
PDF
Html forms
PPT
Web Development
PPTX
Laravel Tutorial PPT
Html introduction
Bootstrap
Web design basics
Blazor - An Introduction
JavaScript - Chapter 11 - Events
Web technology lab manual
HTML/CSS/java Script/Jquery
HTML Lesson 1
Complete Lecture on Css presentation
Introduction to Bootstrap
Bootstrap
Html forms
Web Development
Laravel Tutorial PPT
Ad

Similar to MCSL016 IGNOU SOLVED LAB MANUAL (20)

PPT
introduction to html and cssIntroHTML.ppt
PPT
introduction to html and cssIntroHTML.ppt
PPT
Beginning html
PPT
Intro html
PPT
IntroHTML.ppt
PPT
IntroHTML.ppt
PPT
PPTX
Presentation_ON _HTML Irfan Rashid .pptx
PPTX
week 3 slides.pptx
PPT
Lecture-02 Introduction to HTML .pptx.ppt
PDF
Unit 2 (it workshop)
PDF
Introduction to HTML programming for webpages.pdf
PDF
Chapter_One-Internet Programming (1).pdf
PDF
Chapter_One-Internet Programming.Prepare a ppt of video compression technique...
PDF
Introhtml 2
PDF
Web I - 02 - XHTML Introduction
PDF
Web page design in 7 days
PPTX
Web Designing
PPT
Web designing using html
PPTX
Html basics
introduction to html and cssIntroHTML.ppt
introduction to html and cssIntroHTML.ppt
Beginning html
Intro html
IntroHTML.ppt
IntroHTML.ppt
Presentation_ON _HTML Irfan Rashid .pptx
week 3 slides.pptx
Lecture-02 Introduction to HTML .pptx.ppt
Unit 2 (it workshop)
Introduction to HTML programming for webpages.pdf
Chapter_One-Internet Programming (1).pdf
Chapter_One-Internet Programming.Prepare a ppt of video compression technique...
Introhtml 2
Web I - 02 - XHTML Introduction
Web page design in 7 days
Web Designing
Web designing using html
Html basics
Ad

Recently uploaded (20)

PPTX
Cell Structure & Organelles in detailed.
PPTX
Lesson notes of climatology university.
PDF
01-Introduction-to-Information-Management.pdf
PDF
TR - Agricultural Crops Production NC III.pdf
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PDF
Computing-Curriculum for Schools in Ghana
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PPTX
GDM (1) (1).pptx small presentation for students
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
Insiders guide to clinical Medicine.pdf
PPTX
Institutional Correction lecture only . . .
PPTX
master seminar digital applications in india
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
VCE English Exam - Section C Student Revision Booklet
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
Cell Structure & Organelles in detailed.
Lesson notes of climatology university.
01-Introduction-to-Information-Management.pdf
TR - Agricultural Crops Production NC III.pdf
Final Presentation General Medicine 03-08-2024.pptx
Microbial diseases, their pathogenesis and prophylaxis
Computing-Curriculum for Schools in Ghana
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
Module 4: Burden of Disease Tutorial Slides S2 2025
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
STATICS OF THE RIGID BODIES Hibbelers.pdf
GDM (1) (1).pptx small presentation for students
human mycosis Human fungal infections are called human mycosis..pptx
Insiders guide to clinical Medicine.pdf
Institutional Correction lecture only . . .
master seminar digital applications in india
Supply Chain Operations Speaking Notes -ICLT Program
VCE English Exam - Section C Student Revision Booklet
FourierSeries-QuestionsWithAnswers(Part-A).pdf
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx

MCSL016 IGNOU SOLVED LAB MANUAL

  • 1. 1 | P a g e INDIRA GANDHI NATIONAL OPEN UNIVERSITY NAME: DIVYA SINGH ENROLLMENTNUMBER: COURSE: MCA(MASTER OF COMPUTER APPLICATION) LAB MANUAL OF MCSL-016 INTERNET CONCEPTSAND WEB DESIGN
  • 2. 2 | P a g e SESSION 1 -------------------------------------------------------------------------------- EXERCISE 1. Write HTML code to develop a Web page having the background in red and title "My First Page" in any other colour. Ans: <html> <head> <title>My First Page</title></head><body bgcolor="#FF0000"> <font color="#99FF66"><strong>My First Page </strong> </font></body> </html> EXERCISE 2. NAME ---------- : YOUR NAME AGE ---------- : AGE TELEPHONE NUMBER : YOUR AGE ADDRESS ---------: YOUR ADDRESS TLC CODE --------: _________________ ENROLMENT NUMBER : YOUR ENROLMENT NO </pre></h3> </BODY> </HTML> EXERCISE 3. Q.3. Write an HTML code to design a page containing text, in form of paragraphs giving suitable heading style. Ans. <html><head><title>My First Page</title></head> <body><h1 align="center"><strong>What's new in Windows XPProfessional</strong> </h1><h2 align="justify">Welcome to Windows XP Professional. Among the new features available in Windows XP, there are new security tools that you can use to helpkeep your computer more secure, and new technologies that run in the background,making your computer run more efficiently and reliably.</h2><h3 align="justify">Windows XP has improved upon security, including the newSecurityCenter, which allows you to check the status of the important security elementson your computer&#8212;Windows Firewall, Automatic Updates, and virus protectionsoftware&#8212;making it easier for you to understand how to keep your computer better protected against viruses and other security threats. Performance isat an all-time high.</h3><h4 align="justify"> You can now use more programs at the same time and theywillrun faster than ever. Windows XP is dependable and stable, so you can alwaysrely on the performance and effectiveness of your computer. <br> </h4> </body></html> SESSION 2 EXERCISE 1.
  • 3. 3 | P a g e Q.1 Create a page to show different attributes of Font Tag. Ans. <html> <head> <title>THE HTML FILE TO SHOW DIFFERENT ATTRIBUTES OF FONT TAG &mdash; BY CANDIDATE</title> </head> <body> <p align="left"><strong><font color="#0000FF" face="Arial">Left Aligned, font color #0000FF, font face is ARIAL</font></strong></p> <font color="#FF0000" face="Courier New">This is Font Color #FF0000, here font face is Courier New</font><p> <font face="Geneva"><strong><em>Here Font Face = Geneva, and here &ndash; < EM > TAG is inside the < STRONG > TAG </em></strong></font><br><p> <font color="#FFFFFF" face="Verdana">Here Font Face is Verdana, and Color #FFFFFF</font><p> <font face="impact" size=+1>Here Font Face &eqou; IMPACT, and here SIZE of Font is +1.</font><p> <font face="arial black" size=4>This is ARIAL BLACK and the SIZE is 4</font><p> <font face="comic sans MS" size=+1>This is Comic Sans MS, and SIZE is +1.</font><p> <font face="geneva" size=-2>This is GENEVA SIZE is -2</font><p> </body> </html> EXERCISE 2 Q. Create a page to show different attributes : Italics, Bold, Underline. Ans. <html> <head> <title>HTML Pagr to show BOLD, UNDERLINE &amp; ITALICS effect</title> </head> <body bgcolor="#FFFFFF"> <p align="left"><strong>Bold</strong></p> <p align="left"><em>Italics</em></p> <p align="left"><u>Underline</u></p> <p align="left"><strong><em>Bold and Italics</em></strong></p> <p align="left"><u><em>Italics and Underline</em></u></p> <p align="left"><strong><em><u>Bold Italic and Underline</u></em></strong></p> <style type="text/css"> .double_underline {border-bottom: 3px double;} </style></head><body><span class="double_underline">This is The Sample of Double Underlined Text &mdash; with the use of css text.</span></body> </p></body> </html> Exercise 3. Q.3. Design a page having background colour yellow, giving text colour Red and using all the attributes of font TAB. Ans. <html><head><title>HTML FILE to SHOW BACKGROUND AS YELLOW with FONT COLOR RED AND ALL ATTRIBUTE OF FONT TAB</title>
  • 4. 4 | P a g e </head> <body bgcolor="#FFFF99"><p align="left"><strong><font color="#FF0000" face="Arial">Here I am using &lt;STRONG&gt; TAG &amp; FONT COLOR &ndash; FF0000 Font Face is Arial</font></strong></p><p aligh="justify"><font color="#FF0000" face="Courier New">Hello Friends This is the sample JUSTIFIED text with the use of align &amp; justify TAG and &ndash; this text is inside the &lt;P&gt; Tag and here i am using font color as FF0000, where Font Face is Courier New, Now with the use of &lt;B&gt; <b>BOLD</b> tag <b>THIS IS BOLD</b>, with the use of <U>UNDERLINE</U> tag which is U &ndash; <u>THIS IS UNDERLINE TEXT</u>,</font></p> <p><font color="#FF0000" face="Geneva"><strong>Here Font Color is #FF0000, inside &lt;P&gt; TAGFont Face is Geneva, which is inside the &lt;STRONG&gt; TAG, after that I am using &lt;EM&gt; TAG &mdash; actually &lt;EM&gt; TAG is used in leu of &lt;I&gt; TAG &ndash; which is generally used for &lt;I&gt; <i>ITALICS TAG</i> now THIS IS THE &lt;I&gt; TAG, and <em>THIS IS THE &lt;EM&gt; TAG</em>, you can see easily that they both are similar. Now this is the example of STRIKETHROUGH OR <del>DELETED TEXT</del> effect with the use of &lt;DEL&gt; TAG</strong></font></p> <p><font color="#FF0000" face="Verdana" size=-1>Here Font Color is #FF0000, This is the Font Size Experiment THE FONT SIZE IS MINUS &mdash;1, <font size=+1>THIS IS FONT SIZE +1</font>, <font size=+3>THIS IS FONT SIZE +3</font><br></p> </body> </html> SESSION 3 Exercise 1. Write an HTML Code to create a web page of Blue color and display links in red colour. Ans. <html> <head> <title>Showing a Webpage where Background is BLUE &amp; Links in RED</title> </head> <body bgcolor="#0000FF" link="#FF0000" vlink="#FF0000" alink="#FF0000"> <p align="left"><a href="1.htm"><strong>This is The Link To Page 1</strong></a></p> <p align="left"><strong><a href="2.htm">This is The Link To Page 2</a></strong></p> <p align="left"><strong><a href="3.htm" target="_blank">This is The Link To page 3</a></strong></p> </body> </html> Exercise 2 : Write an HTML code to create a Web page that contains an Image at its center.
  • 5. 5 | P a g e Ans. <html> <head>THIS IS HEADING </head> <body> <div align="center"><img src="C:Windowswallpaper.jpg" width="241" height="133"> </div> </body> </html> EXERCISE 3 : Create a Web page with appropriate content and insert an image towards the left hand slide of the page. When user clicks on the image, it should open anotehr Web Page. Ans. <html> <head>SESSION 3 EXERCISE 3 &mdash; Inert an Image towards the left hand side of the page &ndash; when user clicks on the image, it should open another web page </head> <body><br>Click the Image Below it will open another Web Page <p><a href="ANOTHER.html"><img src="C:photosimg2.jpg" width="272" height="151" border="2"></a></p> </body> </html> SESSION4 EXERCISE 1 : Create a Web Page using href attribute of anchor tag & the attribute: alink, vlink etc. Ans. <html> <head>SESSION 4 EXERCISE 1 &ndash; Using href attribute of anchor TAG & the attrib &ndash; alink vlink etc.</head> <body link="#0000FF" vlink="#009900" alink="#0000FF"> <p><a href="MAIN.htm" target="_blank">THIS IS LINK TO MAIN PAGE</a></p> <p><a href="HOME.htm" target="_parent">THIS IS LINK TO HOME PAGE</a></p> <p><a href="CONTACT_US.htm" target="_self">THIS IS LINK TO CONTACT US PAGE</a></p> </body> </html> EXERCISE 2 : Create a Web page, wherein when the user clicks on the link it should go to the bottom of the page.Ans. : <html> <head>HERE I AM USING anchor &ndash; anch TAG, CLICK BELOW LINK TO GO TO BOTTOM OF THE PAGE</head> <body link="#0000FF" vlink="#009900" alink="#0000FF"> <p><a href="#Anch1">CLICK HERE TO GO TO BOTTOM</a></p> <p>First Demo Paragraph</p> <p>Second Demo Paragraph</p> <p>Third Demo Paragraph</p>
  • 6. 6 | P a g e <p>Fourth Demo Paragraph</p> <p>Fifth Demo Paragraph</p> <p>Sixth Demo Paragraph</p> <p>Seventh Demo Paragraph</p> <p>8 Demo Paragraph</p> <p>9 Demo Paragraph</p> <p>10 Demo Paragraph</p> <p>11 Demo Paragraph</p> <p>12 Demo Paragraph</p> <p>13 Demo Paragraph</p> <p>14 Demo Paragraph</p> <p>15 Demo Paragraph</p> <p>16 Demo Paragraph</p> <p>17 Demo Paragraph</p> <p>18Demo Paragraph</p> <p>19 Demo Paragraph</p> <p>20 Demo Paragraph</p> <p>21 Demo Paragraph</p> <p>22 Demo Paragraph</p> <p>23 Demo Paragraph</p> <p>24 Demo Paragraph</p> <p>25 Demo Paragraph</p> <p><a name="Anch1">THIS IS THE BOTTOM LINK FOR THE ABOVE ANCHOR</a><BR> <marquee><font size=+9>THANKS FOR VISITING MY PAGE</marquee></font></p> </body> </html> EXERCISE 3 : Write HTML Code to create a Web Page of pink colour and display a moving message in red colour.Ans: <html> <head>THIS IS HEADING SESSION 4 EX&ndash;3</head> <body bgcolor="#FF99FF"> <marquee> <font color="#FF0000"><strong>HI FRIENDS THIS IS MOVING TEXT WITH THE USE OF MARQUEE TAG, THANKS </strong></font> </marquee> </body> </html> SESSION - 5 EXERCISE 1 : Create a Web Page, showing an ordered list of the names of five of your friends. Ans. : <html> <head>THIS IS HEADING</head> <body ><H4>HERE &lt;OL&gt; TAG is for ORDERED (i.e. Auto Numbering with LI TAG) LIST &amp &lt;li&gt; TAG is for List</H4>
  • 7. 7 | P a g e <ol> <li>Friend 1</li> <li>Friend 2</li> <li>Ashish</li> <li>Mrs. Sharma</li> <li>Mr. Singh</li> </ol><p></p> <H5>Below is the Example of Roman Auto Number List with use of 'ol' (order list) type i (if we use capital I in place of small I then the roman letters will look as I, II, III, soon</h5> <ol type="i"> <li>Harish</li> <li>Satish</li> <li>Gautam</li> <li>Pinki</li> <li>Anil</li> </ol> </body> </html> EXERCISE 2 : Create an HTML document containing a nested list showing the content page of any book. Ans.: <html> <head><H2>TITLE OF THE BOOKS &ndash; LET US HTML</H2> </head> <body><strong>Contents </strong> <ol><li>Introduction</li> <li>Getting Started</li> <ul><li>What is HTML</li><li>Saliant features of HTML</li></ul> <li>History of HTML</li> <ul><li>Difference Between HTML & DHTML</li><ul> <li>HTML VS XML &am; SGML</li></ul> <li>INTRODUCTION TO TAGS</li><li>BASIC TAGA IN HTML</li> <li>LIST OF SOME BASIC TAGS</li></ul> <li>HEADING TAGS IN HTML</li> <li>BODY TAG IN HTML</li> <li>DIFFERENCE BETWEEN HEADING AND BODY TAG</li> <li>TITLE TAG IN HTML</li> <li>COLOUR TAGS IN HTML</li> </ol> </body></html> SESSION - 5 EXERCISE 3 : Create a web page, showing an unordered list of names of five of your friends.Ans.: <html> <head>THIS IS HEADING</head> <body > <ul><li>Friend 1</li> <li>Friend 2</li> <li>Sharma</li> <li>Anil </li> <li>Friend </li>
  • 8. 8 | P a g e </ul></body> </html> SESSION - 6 EXERCISE 1 : Create a Web page, which should contain a table having two rows and two columns. Ans.:<html> <head>HEADING</head> <body> <table width="100%" border="2"> <tr> <td>&nbsp;one</td> <td>&nbsp;two</td> </tr> <tr> <td>&nbsp;three</td> <td>&nbsp;four</td> </tr> </table> </body></html> EXERCISE 2 : Fill in some dummy data in the table created by you in question 1 of this session. Ans.: <html><head>HEADING</head> <body> <table width="55%" border="3"> <tr> <td><strong>LIST OF ITEMS</strong></td> <td><strong>BRAND NAME</strong></td> </tr> <tr> <td>MONITOR</td> <td>SAMSUNG 14&rdquo;</td> </tr> </table> </body> </html> SESSION - 6 EXERCISE 3 : Create the following table in HTML with Dummy Data. Ans.: <html><head>TRAIN SCHEDULE &ndash; TABLE</head> <body><table width="95%" border="4"> <tr><td width="28%" rowspan="2" ><strong>Name Of Train</strong></td> <td width="11%" rowspan="2" ><strong>Place</strong></td> <td width="16%" rowspan="2" ><strong>Destination</strong></td> <td width="17%" rowspan="2" ><strong>Train No</strong></td> <td colspan="2" ><div align="center"><strong>Time</strong></div></td> <td width="13%" rowspan="2" ><strong>Fair</strong></td> </tr>
  • 9. 9 | P a g e <tr> <td width="8%" ><strong>Arrival</strong></td> <td width="7%" ><strong>Departure</strong></td> </tr> <tr> <td >Lokamanya Thilak</td><td>Tvm</td> <td>Loka Manya Thilak</td> <td>CH8906</td> <td>03:40</td> <td>03:55</td> <td>650</td> </tr> <tr> <td>Nizamudhenn Express</td> <td >Kannur</td> <td>Koyambathoor</td> <td>NEH08634</td> <td>20:25</td> <td>16:45</td> <td>320</td> </tr> </table> </body></html> SESSION - 7 EXERCISE 1 : Create to following table Ans. : <html><head>SESSION 7 EXERCISE 1</head><body bgcolor="#AAAAAA"> <table width="60%%" border="1"> <tr bgcolor="#FFFFFF"><td colspan="3">&nbsp;White</td> </tr> <tr><td bgcolor="#FF0000">&nbsp;RED</td> <td bgcolor="#009933">&nbsp;GREEN</td> <td bgcolor="#000000">&nbsp;<font color="white"><b>BLACK</b></font></td> </tr> </table> </body> </html> SESSION - 7 EXERCISE 2 : Design an HTML Page having 3 images placed in the following format.Ans: <html> <head><b><u>SESSION 7 EXERCISE 2</u></b></head><p></p> <body><table width="36%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="26%" align="left" valign="top"> <img src="C:wallpapershello.jpg" width="159" height="129"></td> <td width="24%">&nbsp;</td> <td width="50%">&nbsp;</td> </tr> <tr><td>&nbsp;</td> <td align="left" valign="top"><img src="c:imagesphoto2.jpg" width="159" height="129"></td> <td>&nbsp;</td> </tr> <tr><td>&nbsp;</td> <td>&nbsp;</td> <td align="left" valign="top"> <img src="c:imagesimage3.jpg" width="159" height="129"></td>
  • 10. 10 | P a g e </tr> </table> </body></html> SESSION - 7 EXERCISE 3 : Write HTML code to generate the following output : Ans.: <html><head>SECCION 7 EX 3 IGNOU</head> <body> <table width="100%" border="1"> <tr><td rowspan="2">Weather</td> <td><strong>Delhi</strong></td> <td><strong>Mumbai</strong></td> </tr> <tr> <td>40</td> <td>35</td> </tr> </table> </body></html> SESSION -8 EXERCISE 1 : What are HTML Physical style tags and Logical style Tags ? Ans : Logical Styles <DFN> for a word being defined.Typically displayed in italics. (Internet Explorer is a World Wide Web browser.) <EM> for emphasis.Typically displayed in italics. (Watch out for pickpockets.) <CITE> for titles of books, films,etc. Typically displayed in italics. (A Beginner's Guide to HTML) <CODE> for snippets of computer code.Displayed in a fixed-width font. (This is a sample of code.) <KBD> for user keyboard entry. Should be displayed in a bold fixed-width font, but many browsers render it in the plain fixed-width font. (Enter password for Windows networking.) <SAM EXERCISE 2 : Which HTML tag allows you to scroll text on the Web Page ? Ans : Scrolling Tag allows us to scroll text on the Web Page<iframe align="left" scrolling="yes" width="100%" height="100%"src="cont.htm">
  • 11. 11 | P a g e EXERCISE 3 :What is the comment tag in HTML ? Ans: Comment tags are used to provide comments to the webpage. The contents insidethe tag will not displayed by the web browser when it displays the page.Eg. <!This is comments used to help web designers > EXERCISE 4 - Design an HTML Page for the "Block Introduction" of thisBook: The page should allow scrolling and the code should contain a comment header with your name and enrolment number ? Ans: <!Name :CANDIDATE NAME><!Enrolment No : XXXXXXXXXXXX> <html> <head>SESSION 8 EX. 4</head> <body><table width="80%" border="2"> <tr><td><strong>Block Introduction</strong></td> </tr> <tr><td height="118" align="left" valign="top"> <iframe align="left" scrolling="yes" width="100%" height="100%"src="c:pagessecond.html"><p><br></p></iframe></td></tr> </table></body> </html> SESSION - 9 EXERCISE 1 - What difference does it make if we express th width of a table in percentage or in pixcel value ? And how do we set the width of a particular column or cell in a table. Ans: ---- If the width of the table is expressed in percentage the width of the table variesaccording to the width of the page displayed by the browser. It the width is 100%then width of the table will be the width of the page.The width of the particular column and cell is set by <table border=1 width=100%> <tr><td width=60%></td> <td width=40%></td> </tr> </table> SESSION - 9 EXERCISE 2 - Write HTML code to generate the following output :Ans:<html><head>SESSION 9 EXERCISE 2</head> <body> <table width="80%" border="1" cellpadding="0"> <tr> <td width="33%">1</td><td width="14%">2</td> <td width="21%">3</td><td width="32%">4</td> </tr> <tr> <td>5</td><td colspan="2" rowspan="2" align="left" valign="top"> <img src="C:IMAGESimage1.jpg" width="274" height="138"></td><td>6</td></tr><tr><td>7</td><td>8</td></tr><tr><td>9 </td><td>10</td><td>11</td><td>12</td></tr> </table> </body> </html> SESSION - 9
  • 12. 12 | P a g e EXERCISE 3 -Create a Web page that should contain a table having seven rows and four columns, along with the attributes - colspan & rowspan. Ans: <html><head>HEADING</head> <body><table width="100%" border="1" cellpadding="0"> <tr> <td width="33%">1</td><td width="14%">2</td><td width="21%">3 </td></tr><tr><td height="21">5</td> <td colspan="2" rowspan="2" align="left" valign="top"> Example for Colspanand Row Spans</td></tr><tr><td height="21">7 </td></tr><tr><td rowspan="3">Example for Colspan and Row Spans</td> <td>9</td><td>10</td></tr><tr><td>11</td> <td>12</td></tr><tr><td>13</td><td>14</td> </tr><tr><td>15</td><td>16</td><td>17</td></tr> </table> </body> </html> SESSION -10 EXERCISE 1 - What are the different versions of HTML ? Ans: HTML 4.2, HTML 4.0, HTML 3.2, HTML 3.0, HTML 2 SESSION -10 EXERCISE 2 -List 5 different HTML Editors ? Ans: a) Macromedia Dreamweaver b) Microsoft Front page15 c) Web page Maker d) Microsoft Asp.Net Editor SESSION -10 EXERCISE 3 - What is the different image formats ? Ans: JPG - Joint Photographic Expert Group, TIFF - Tagged Image File Format, GIF- Graphical Image File, WMF - Windows Meta File, BMP - Bitmap, PNG - Portable Network Graphics & many more. ------------------------------------------------------------ SECTION 2 - ADVANCED HTML ------------------------------------------------------------ SESSION - 1 EXERCISE 1 -How do you handle the situation when the browser doesn't support frames ? Ans: The <NOFRAMES> tag is used for those browsers that are not able tointerpret <FRAME> tags. If the browser doesn’t support FRAME the text between <NOFRAME> and </NOFRAME> will displayed on the browser’s window <html><head></head><frameset rows="*,*"" frameborder="NO" border="0" framespacing="0"><frame src="frn2.htm" name="topFrame"> <frame src="frn1.htm" name="16ainframe"></frameset><body><noframes> your browser does not handle frames</noframes></body></html> SESSION - 1
  • 13. 13 | P a g e EXERCISE 2 - What are inline frames ?Ans : An inline frame ("floating frame") is a construct which embeds a document into an HTML document so that embedded data is displayed inside a subwindowof the browser's window. This does not mean full inclusion; the two documents are independent, and both them are treated as complete documents, instead of treating one as part of the other. Support to inline frames is not universal, but with a properly designed "graceful degradation", they can be used in authoring for the World Wide Web. However, there are serious problems with printing documents containing them. This document also discusses the legal side of the matter as well as the details of the iframe element as defined in the HTML specifications, on one hand, and as implemented on IE, on the other. SESSION - 1 EXERCISE - 3 : Which tag is used to define frames in HTML ? Ans: --- Frameset TAG is used - to define frames in HTML : <frameset rows=”*,*”” frameborder=”NO” border=”0”framespacing=”0”> <frame src=”frn2.htm” name=”topFrame” > <frame src=”frn1.htm” name=”16ainframe”></frameset> SESSION -2 EXERCISE - 1 : Write an HTML code to develop a Web Page having two frames that divide the web page into two equal rows ? Ans : <html><head></head><frameset rows=”*,*”” frameborder=”NO” border=”0” framespacing=”0”><frame src=”frm1.html” name=”topFrame” ><frame src=”frm2.html” name=”16ainframe”> </frameset><body></body></html> SESSION -2 EXERCISE - 2 :Write an HTML code to develop a Web page having two frames that divided the web page into two equal rows and then divide the second row into two equal columns ? Ans: <html><head></head><frameset rows=”*,*” cols=”*” frameborder=”yes” border=”1” framespacing=”0”><frame src=”frm1.html” name=”topFrame” scrolling=”NO” noresize ><frameset rows=”*” cols=”*,*” framespacing=”0” frameborder=”yes” border=”1”><frame src=”frm2.html” name=”leftFrame” scrolling=”NO” noresize><frame src=”frm3.html” name=”17ainframe”></frameset></frameset><body></body</html> SESSION -2 EXERCISE - 3 : Write an HTML code to develoo a Web page having frames as described in the above question and then fill each frame with a different background colour ? Ans. <html><head></head> <frameset rows=”*,*” cols=”*” frameborder=”yes” border=”1” framespacing=”0”> <frame src=”frm1.html” name=”topFrame” scrolling=”NO” noresize > <frameset rows=”*” cols=”*,*” framespacing=”0” frameborder=”yes” border=”1”> <frame src=”frm2.html” name=”leftFrame” scrolling=”NO” noresize> <frame src=”frm3.html” name=”17ainframe”> </frameset></frameset> <body></body </html> SESSION -3
  • 14. 14 | P a g e EXERCISE - 1 :What are the tags used to display information for browsers that do not support frames ?Ans: <NOFRAMES></NOFRAMES> tag is used to display information for browsersthat does not support frames. SESSION -3 EXERCISE - 2 : Write the various attributes of frameset tag and frame tag ? Ans : <!--<FRAMESET ROWS=50%,50%> used to set frame’s row’s size <FRAMESET COLS=50%,50%>used to set frame’s column’s size <FRAMESET ROWS><FRAME SRC="FRM2.HTM">used to insert frame <FRAMESET> opening tag (all frame tag must be between <head> and</head> tag) </FRAMESET> closing tag SCROLLING attribute is used to set scrolling of a frame (whether scrolling or not(SCROLLING="NO"))FRAMEBORDER attribute is used to set border of a frameFRAMESPACING attribute is used to set space between FRAMES NAME attribute is used to specify the name of a frame (it is an optional attribute) SESSION -3 EXERCISE - 3 : Write a code in HTML to design a page with two frames. The frame should remain proportionate even when page is re-sized ? Ans: <html><head></head><frameset rows=”*,*” frameborder=”NO” border=”0” framespacing=”0”><frame src=”frm2.html” name=”topFrame” > <frame src=”frm1.html” name=”mainframe”> </frameset><body></body></html> SESSION -4 EXERCISE - 1 :Write the code to develop the Web page as shown below, using frames : Ans: <html><head></head> <frameset rows=”*” cols=”27%,73%”><frame src=”frm1.html”> <frameset rows=”50%,50%”><frame src=”frm2.html”> <frameset cols=”50%,50%”><frame src=”frm3.html”> <frame src=”frm4.html”></frameset></frameset></frameset> <body></body> </html> SESSION -4 EXERCISE - 2 : Write the code to make the background colour of each frame in the above question different .Ans: <html><head>HEADING</head> <frameset rows=”*” cols=”27%,73%”> <frame src=”frm1.html”> <frameset rows=”50%,50%”> <frame src=”frm2.html”><frameset cols=”50%,50%”> <frame src=”frm3.html”><frame src=”frm4.html”></frameset></frameset></frameset> <body></body> </html> SESSION -4 EXERCISE - 3 : Create a Web Page divided into two equal frames ?Ans: <html><head>HEADING</head> <frameset rows=”*” cols=”50%,50%”> <frame src=”frm1.html”><frame src=”frm2.html”>
  • 15. 15 | P a g e </frameset><noframes></noframes><body></body> </html> SESSION -5 EXERCISE - 1 :Crate a Web page having two frames, one containing links and the containing content of the links. When link is clicked, appropriate contents should be displayed in Frame 2. Ans: <html><head>HEADING</head><body> <table width=”100%” height=”437” border=”1” cellpadding=”0”> <tr><td width=”22%” align=”left” valign=”top”><a href=”content.html” target=”frn1”>Show Content </a></td><td width=”78%” align=”left” valign=”top”> <iframe name=”frn1” frameborder=”1” width=”100%”height=”100%”></iframe> </td></tr></table> </body> </html> SESSION - 5 EXERCISE - 2 : Create a Home Page for a TLC in following format : Ans: <html><head>HEADING</head> <frameset rows=”*,*” cols=”*” frameborder=”yes” border=”1” framespacing=”0”> <frame src=”frm1.html” name=”topFrame” scrolling=”NO” noresize > <frameset rows=”*” cols=”*,*” framespacing=”0” frameborder=”yes” border=”1”> <frame src=”frm2.html” name=”leftFrame” scrolling=”NO” noresize> <frame src=”frm3.html” name=”19ainframe”></frameset></frameset> <body></body> </html> SESSION - 5 EXERCISE - 3 : Creat a Web page using all the attributes of the frame and other tags ? Ans: <html><head>HEAD</head><frameset rows=”*” cols=”27%,73%”> <frame src=”frm1.html”><frameset rows=”50%,50%” border=”5” bordercolor=”#3300FF”> <frame src=”animals7.jpg” width=146 height=162 scrolling=”yes” marginheight=”1”marginwidth=”1”> <frameset cols=”40%,*”><frame src=”frm2.html”><frame src=”frm3.html”> </frameset></frameset></frameset><noframes></noframes> <body></body> </html> SESSION - 6 EXERCISE - 1 : Design a page with a text box called 'name' and a button with label 'Enter. When you click on the button another page should open, with the message "Welcome <name>", where name should be equal to the name entered in the first page. Ans: <html><head>HEAD</head> <script language="JavaScript">function newpages(cont){var msg="Welcome " + cont;window.navigate("newpage.html");window.document.write(msg);}</script><b ody> <form name="form1" method="post" action=""><p> <input name="name" type="text" id="name" value="aa"> </p><p>
  • 16. 16 | P a g e <input type="submit" name="Submit" value="Enter"onClick="newpages(form1.name.value)"> </p></form> </body></html> SESSION - 6 EXERCISE - 2 : What are the values of method attribute of the form TAG ? Ans. : Get, Post are two values of method attributes of form tag SESSION - 6 EXERCISE - 3 : Set default value of 'name' text box of question 1 of this session to Victoria. Add another button called Reset on click of this button name 'text box' should be set to 100 default value. Ans: <html><head>HEAD</head><script language=”JavaScript”>function newpages(cont){var msg=”Welcome “ + cont;window.navigate(“newpage.html”);window.document.write(msg);}</script><b ody> <form name=”form1” method=”post” action=”mailto:mail@abc.com”><p> <input name=”name” type=”text” id=”name” value=”100”> </p><p> <input type=”submit” name=”Submit” value=”Enter”onClick=”newpages(form1.nam e.value)”><input type=”reset” name=”Submit2” value=”Reset”> </p></form></body></html> SESSION - 7 EXERCISE - 1 : Design a form using all input types. Ans: <HTML><HEAD>HEADING</HEAD> <BODY><FORM name=”frm1” method=”post” action=””><label>NAME</label> <INPUT TYPE=”TEXT” NAME=”name”><BR><label>PASSWORD</label> <INPUT TYPE=”PASSWORD” NAME=”PSWRD1”MAXLENGTH=16><BR> <textarea name=”txtarea”></textarea><INPUT TYPE=”BUTTON” NAME=”BUTTON1” VALUE=”CLICK”><BR><INPUT TYPE=”SUBMIT” NAME=”SUBMIT1” VALUE=”SUBMIT”><BR><INPUT TYPE=”HIDDEN” NAME=”HIDDEN1” VALUE=”HDVALUE”><BR><label>ACCEPT</label><INPUT TYPE=”radio” NAME=”radio1”VALUE=”accept”><BR><label>REJECT</label><INPUT TYPE=”radio” NAME=”radio2”VALUE=”reject”><BR><label>JAN</label><INPUT TYPE=”CHECKBOX” NAME=”CKECKBOX1”><BR><label>FEB</label><INPUT TYPE=”CHECKBOX” N AME=”CKECKBOX2”CHECKED><BR><INPUT TYPE=”RESET” NAME=”RESET1” VALUE=”RESET YOUR PAGE”><BR><br><select name=”select”> <option>VB</option><option>VFP</option> <option>C++</option><option>SIMULA</option> <option>JAVA</option><option>C</option> <option>LISP</option></select><br><br><br><select name=”select”> <option>HTML</option><option>XML</option> <option>ASP.NET</option><option selected>C#.NET</option> <option>JSP.NET</option><option>J2SE</option> <option>ADO.NET</option></select>
  • 17. 17 | P a g e </FORM></BODY></HTML> SESSION - 7 EXERCISE - 2 : Create a simple form accepting : Name, Enrolment Number, and Submit Button. Ans: <html><head>SIMPLE FORM IGNOU</head><body> <form name “frm1”><label>Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> <input type “text”size=20></input><br> <label>Enrolment Number</label> <input type “text” size=20></input><br> <input type=”submit” value=”submit”></input></form> </body></html> SESSION - 8 EXERCISE - 1 : Design a Web Page, which is like 'compose' page of e- mail ? Ans: <html><head>COMPOSE PAGE</head><body><form name=”form1” method=”post” action=””> <p>To &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=”text”name=” textfield”> </p><p>Subect <input name=”textfield2” type=”text” size=”50”> </p><p>Message</p><p> <textarea name=”textarea” cols=”50”></textarea></p><p> <input type=”submit” name=”Submit” value=”Send”></p> </form> </body> </html> SESSION - 8 EXERCISE - 2 : Which element is used to accept large text inputs from user ? Ans: TEXTAREA(<TEXTAREA></TEXTAREA>) accepts large text inputsfrom user. SESSION - 8 EXERCISE - 3 : Write a code to create a Web page having radio buttons labeled as name of colours. clicking on each radio button should change the colour of the Web Page.Ans: <html><head>HEADING</head><body> <script language=”JavaScript”>function colors(col){switch(col){case ‘red’:document.bgColor=”#FF0000”;break;case ‘blue’:document.bgColor=”#0000FF”; break;case ‘green’:document.bgColor=”#00FF00”; break;}}</script><form name=”form1” method=”post” action=””> <p> <label><input type=”radio” name=”Colors” value=”radio” onClick=”colors(‘red’)”>Red</label><br> <label><input type=”radio” name=”Colors” value=”radio” onClick=”colors(‘green’)”>Green</label><br> <label><input type=”radio” name=”Colors” value=”radio”
  • 18. 18 | P a g e onClick=”colors(‘blue’)”>Blue</label><br> </p></form> </body></html> SESSION - 9 EXERCISE - 1 :What is the purpose of hidden field ? Ans: Hidden field are place to store values which should not be displayed in the page. The hidden values will be used in some operation such as search. SESSION - 9 EXERCISE - 2 : Create a form accepting the values : Name, Address, Marks in 10+2, Graduation & Post Graduation. Ans: <html><head></head><body> <form name “frm1”><label>Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;</label> <input type “text” size=20></input><br><label>Address</label><br><textarea name=”txtarea” rows=5 cols=25></textarea><br><label>Marks in 10+2</label> <input type “text” size=10 maxlength=5></input><br><br><label>Marks in Graduation</label> <input type=”text” size=10maxlength=5></input><br><label>Marks in Post Graduation</label> <input type=”text” size=10maxlength=5></input><br><input type=”submit” value=”submit”> </input></form> </body></html> SESSION - 9 EXERCISE - 3 : Which element is used to display a drop down list box ? Ans. : SELECT is used to display the drop down list box <SELECT name=”select” size=”1”><option>Edit plus</option><option>Word pad</option><option>Note pad</option></SELECT> SESSION - 10 EXERCISE - 1 :Design Series of ........................ Page 3 (Hint you may use hiden fields) Ans: SESSION -10 EXERCISE - 2 : Create a Web page; divide that page into two frames. In one frame create two links that will display different HTML forms in the other frame.Ans: <html><head>HEAD</head> <frameset rows="*" cols="25%,75%" framespacing="0"" frameborder="yes" border="6">
  • 19. 19 | P a g e <frame src="frm5.html" name="topFrame" > <frame src="frm6.html" name="mainFrame"> </frameset><noframes><body></body></noframes> </html> Page That -- containing link <html><head></head><body bgcolor="#CCCCCC"><p><a href="frm7.html" target="mainFrame">Page1</a> </p><p><a href="Img1.jpg" target="mainFrame">Page2</a> </p></body></html> ----- Java ScriptSession 14.How would you write any statement using only one write or writeln() command? <html><head></head><script language="JavaScript">function newpages(){document.writeln("Hi ");document.write("Welcome To My Website");}</script><body><form name="form1" method="post" action=""> <p><input type="submit" name="Submit" value="Enter" onClick="newpages ()"></p></form></body></html> 15.Embed java script in html document asking user name and then printing Hello<user Name> <html><head></head><script language="JavaScript">function newpages (txt){document.writeln("Hello " + txt);}</script><body><form name="form1" method="post" action=""><p>Enter User Name<input name="t1" type="text" id="t1"></p><p><input type="submit" name="Submit" value="Enter"onClick="newpages (form1.t1.value)"></p></form></body></html> 6.Create a dialogue box with “Welcome to my website” message.
  • 20. 20 | P a g e <html><head></head><script language="JavaScript">alert("Welcome to my website");</script><body></body></html> ================================= Session 2 1.Evaluate the expressiona. Ans. 7+5b. “7”+”5”c. 7*5d. 7/5e.7%5<html><head></head><script language="JavaScript">function Calculate(choice){var result;switch (choice) {case 1:result=7+5; break;case 2:result="7" + "5"; break;case 3:result=7*5; break;case 4:result=7/5; break;case 5:result=7%5; break;}document.writeln(result);}</script><body><form name="form1" method="post" action=""> <p>Evaluate The Expression</p><p><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate(1)">7+5</label><br><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate (2)">"7" + "5"</label> <br><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate(3)">7*5</label><br><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate (4)">7/5</label><br><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate (5)">7%5</label><br></p></form></body></html> 2. Write the segment of script that would ask the user if he wants a greetingmessage and if he does, display a gif file called Welcome. gif and display“Welcome to Netscape navigator!” in the document window following the gif.<html><head></head><script language="JavaScript">function messages(){input_box=confirm("Do You
  • 21. 21 | P a g e Want a Greeting");if(input_box==true){window.open ("welcome.jpg");window.document.write("Welcome to Netscape navigator!" );}else{alert("You Have Selected No");}}</script><body><form name="form1" method="post" action=""><input type="submit" name="Submit" value="Submit" onClick="messages ()"></form></body></html> 3.Write the object definition for an object called car with four properties model,make, year and price. <html><head><script language="JavaScript">var car=new Object;car.model="Marcides Benz";car.year=2008;car.make="DX";car.price=4500000;</script></head><s cript language="JavaScript">function printdet(){document.write(" Model : " + car.model);document.write(", Make : " + car.make);document.write(", Year : " + car.year);document.write(", Price : " +car.price);}</script><body><form name="form1" method="post" action=""><input type="submit" name="Submit" value="Print Details" onClick="printdet()"></form></body></html> 4.Write a program to display a multiplication table.<html><head></head><script language="JavaScript">function multable(){var num=prompt("Enter The No");var i;for(i=0;i<=10;i++) {document.write(num + " * " + i + " = " + num*i +"<br>");}} </script><body><form name="form1" method="post" action=""><input type="submit" name="Submit" value="Print Details"onClick="multable ()"></form></body></html>
  • 22. 22 | P a g e 2.Write code to create a scrolling text. <html><head></head><script language="JavaScript">function movetext(){if(txt.style.posLeft<720) {txt.style.posLeft=txt.style.posLeft+2;window.setTimeout("movetext ()",5);}else{txt.style.posLeft=0;window.setTimeout("movetext()",5);}} </script><body onLoad="movetext()"><form name="form1" method="post" action=""><div id="txt" style="position:relative;top:3;left0"><h2>Scrolling Text</h2></div></form></body></html> Session 4 2. Write a program to change color of text randomly<html><head><script language="JavaScript">var colors=new Array(6);colors[0]="#0000FF"; colors[1]="#FF0000"; colors[2] ="#006600";colors[3]="#FFCC00";colors[4]="#00FFFF"; colors[5] ="#000000";var i=1;</script></head><script language="JavaScript">function changecolor(){ document.fgColor=colors [i];i++;if(i>5)i=0;setTimeout("changecolor()",100);}</script><body onLoad="changecolor()"><div align="center"><strong><font size="7">Hello </font></strong> </div></body></html> 3.Create a web page using two image files, which switch b/w on another as themouse pointer moves over the image. Use on mouse over and on mouse out eventhandler. <html><head><script
  • 23. 23 | P a g e language="JavaScript">function MM_swapImgRestore() {var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() {var d=document; if (d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;i ++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a [i];}}}function MM_findObj(n, d) {var p,i,x; if(!d) d=document; if ((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames [n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)x=d.forms[i][n];for (i=0;!x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers [i].document);if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() {var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;for(i=0;i<(a.length-2);i+=3)if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script></head><body onLoad="MM_preloadImages('welcome.JPG')"><a href="#" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage ('Image1','','welcome.JPG',1)"><imgsrc="Img1.jpg" name="Image1" width="261" height="195" border="0"></a></body></html> Session 52 . Use the date function get & set date to prompt the user for an integer b/w 1-31 &return day of the week it represents.<html><head></head><script language="JavaScript">function setdate(){var dt=new Date();dt=new Date (form1.y.value,form1.m.value,form1.d.value);form1.gt.value=dt.getDate
  • 24. 24 | P a g e () + "/" + dt.getMonth() + "/" +dt.getFullYear();}</script><body><form name="form1" method="post" action=""><p>Day <input name="d" type="text" id="d" size="3">Month <input name="m" type="text" id="m" size="3">Year <input name="y" type="text" id="y" size="4"><input type="button" name="Button" value="SetDate" onClick="setdate ()"></p><p> Date <input name="gt" type="text" id="gt"> </p></form></body></html> 2.Display time and print the message accordingly e.g Good morning in morning etc. <html><head><script language="JavaScript">var dt=new Date ();document.write("Good Morning The Time Is : " + dt.getHours() +":" + dt.getMinutes() + ":" + dt.getSeconds ());</script></head><body></body></html> Session 6 1.Using java script create a digital clock.<html><head></head><script language="JavaScript">function getTimes(){var dt=new Date();form1.t.value= dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();window.setTimeout("getTimes ()",1000);}</script><body onLoad="getTimes()"><form name="form1" method="post" action=""><input name="t" type="text" id="t"></form></body></html> Session 71.Using java script create a calculator.<html><head></head><script language="JavaScript">function calc(ch){if(ch=="=")form1.t.value= eval(form1.t.value);elseif
  • 25. 25 | P a g e (ch=="C")form1.t.value= "";elseform1.t.value+=ch;}</script><body onLoad="getTimes()"><form name="form1" method="post" action=""><input name="t" type="text" id="t"><br><input type="button" name="Button" value="7" onClick="calc('7')"><input type="button" name="Submit2" value="8" onClick="calc('8')"><input type="button" name="Submit3" value="9" onClick="calc('9')"> <input type="button" name="Submit4" value="+" onClick="calc('+')"><br><input type="button" name="Submit5" value="4" onClick="calc('4')"><input type="button" name="Submit6" value="5" onClick="calc('5')"><input type="button" name="Submit7" value="6" onClick="calc('6')"><input type="button" name="Submit8" value="-" onClick="calc('-')"><br><input type="button" name="Submit9" value="1" onClick="calc('1')"><input type="button" name="Submit10" value="2" onClick="calc('2')"><input type="button" name="Submit11" value="3" onClick="calc('3')"><input type="button" name="Submit12" value="*" onClick="calc('*')"><br><input type="button" name="Submit13" value="0" onClick="calc('0')"><input type="button" name="Submit14" value="C" onClick="calc('C')"><input type="button" name="Submit15" value="=" onClick="calc('=')"><br></form></body></html> Session 8 1.Create a web page with a textbox and check for validation. If empty displaymessage and set focus to it, if filled display thank you.<html><head></head><script language="JavaScript">function check() {if(form1.t.value==""){alert("Enter The Text");form1.t.focus();}else {alert("Thank You");}}</script><body><form name="form1" method="post" action="">Enter a Text<input name="t" type="text" id="t"><input
  • 26. 26 | P a g e type="submit" name="Submit" value="Submit" onClick="check ()"></form></body></html> Session 111. Create a program to generate a hit counter <html><head></head><script language="JavaScript">var counter;counter=0;function count(){counter++;alert("Counter : " + counter);}</script><body><form name="form1" method="post" action=""><div align="center"><input type="button" name="Button" value="Hit Me" onClick="count()"></div></form></body></html> 2.Create a program to check email address provided by the user is valid or invalid. <html><head></head><script language="JavaScript">function check(){if(form1.t.value==""){alert ("Enter The Text");form1.t.focus();}else{var email,a,d,diff,k,c;email=form1.t.value;a=email.indexOf ('@');d=email.indexOf('.');diff=parseInt(d)-parseInt(a);k=parseInt (d)+1;c=email.charAt(k);if(a<1||diff<=1||c==""){alert("Invalid Email ID");form1.t.focus();}}}</script><body><form name="form1" method="post" action="">Enter Email ID <input name="t" type="text" id="t"><input type="submit" name="Submit" value="Submit" onClick="check()"></form></body></html> Session 12 1.Write a program to scroll the text on status bar.<html><head></head><html><head></head><script
  • 27. 27 | P a g e language="JavaScript">var ar="Scrolling Text";var space="";var i;i=1;function count(){var cont,k=0;cont="";while(k<=i){cont=cont + " ";k++;}status=cont +ar;i++;if(i>100)i=0;window.setTimeout("count ()",5);}</script><body onLoad="count ()"></body></html><body></body></html> 2. Write a program to create a small window in a main window.<html><head><script language="JavaScript">window.open ("newwindow.html");</script></head><body></body></html> Session 151.Use java script for authentication and verification of the text boxes in the staticsite developed by the student in the html exercise.<html><head></head><script language="JavaScript">function check(){if(form1.t.value==""){alert("Enter The Username");form1.t.focus();}else if(form1.t2.value==""){alert("Enter The Password");form1.t2.focus();}else{if((form1.t.value!="")|| (form1.t2.value!=”")){alert("Invalid Username or Password");}}} </script><body><form name="form1" method="post" action=""><p>User Name <input name="t" type="text" id="t"> </p><p>Password <input name="t2" type="password" id="t2"> </p><p> <input type="button" name="Button" value="Button" onClick="check()"></p></form></body></html> VB ScriptSession 11.Write a program to display the following on a web pageHello <User Name> <html><head></head><script language="VBScript">sub newpages(txt)document.writeln("Hello " + txt)
  • 28. 28 | P a g e end sub</script><body><form name="form1" method="post" action=""><p>Enter User Name<input name="t1" type="text" id="t1"></p><p><input type="submit" name="Submit" value="Enter"onClick="newpages (form1.t1.value)"></p></form></body></html> 2.Create a web page that display a message box with the message“welcome to my web site” <html><head></head><script language="VBScript">sub msgs()msgbox("Welcome ToMy Web Site")end sub</script><body><form name="form1" method="post" action=""><p> <input type="submit" name="Submit" value="Message"onClick="msgs()"> </p></form></body></html> 3.Write code to change color of text randomly. <html><head></head><script language="VBScript">dim colors(5) colors(0)="#0000FF"colors(1)="#FF0000"colors(2)="#006600"colors(3) ="#FFCC00"colors(4)="#00FFFF"colors(5)="#000000"dim ii=0sub changecolor()msgbox("Welcome ToMy Web Site")document.fgColor=colors (i)i=i+1if(i>5) theni=0end if window.setTimeout("changecolor()",100) end sub</script><body onLoad="changecolor()"><div align="center"><strong><font size="7">Hello </font></strong> </div></body></html> Session 2
  • 29. 29 | P a g e 1.Write a VB Script code that accepts the length, breadth and height and display thearea of a rectangle. <html><head></head><script language="VBScript">sub area()dim l,b,h,ar 40 l=form1.l.value b=form1.b.valueh=form1.h.valuear=l*b*hmsgbox("Area " & ar)end sub</script><body onLoad="changecolor()"><form name="form1" method="post" action="">Length <input name="l" type="text" id="l">Breadth <input name="b" type="text" id="b">Height <input name="h" type="text" id="h"><br><input type="button" name="Button" value="Area" onClick="area()"></form></body></html> 2.Create a programme to generate a hit counter <html><head></head><script language="VBScript">dim counter counter=0sub count()counter=counter+1msgbox("Counter : " & counter)end sub</script><body><form name="form1" method="post" action=""><div align="center"><input type="button" name="Button" value="Hit Me" onClick="count()"></div></form></body></html> Session 3 1.Using vbscript create a calculator <html><head></head><script language="VBScript">sub calc(ch)if(ch="=") then form1.t.value= eval(form1.t.value)elseif(ch="C") thenform1.t.value= ""elseform1.t.value=form1.t.value & chend if end if end sub</script><body onLoad="getTimes()"><form name="form1" method="post" action=""><input name="t" type="text" id="t"><br><input type="button" name="Button" value="7" onClick="calc('7')"><input
  • 30. 30 | P a g e type="button" name="Submit2" value="8" onClick="calc('8')"><input type="button" name="Submit3" value="9" onClick="calc('9')"><input type="button" name="Submit4" value="+" onClick="calc('+')"><br><input type="button" name="Submit5" value="4" onClick="calc('4')"><input type="button" name="Submit6" value="5" onClick="calc('5')"><input type="button" name="Submit7" value="6" onClick="calc('6')"><input type="button" name="Submit8" value="-" onClick="calc('-')"><br><input type="button" name="Submit9" value="1" onClick="calc('1')"><input type="button" name="Submit10" value="2" onClick="calc('2')"><input type="button" name="Submit11" value="3" onClick="calc('3')"><input type="button" name="Submit12" value="*" onClick="calc('*')"><br><input type="button" name="Submit13" value="0" onClick="calc('0')"><input type="button" name="Submit14" value="C" onClick="calc('C')"><input type="button" name="Submit15" value="=" onClick="calc ('=')"><br></form></body></html> Session 4 1.Create a programme to check for null or empty string<html><head></head><script language="VBScript">sub check()if (form1.t.value="")thenmsgbox("Enter The Text")form1.t.focus() elsealert("Thank You")end if end sub</script><body><form name="form1" method="post" action="">Enter a Text<input name="t" type="text" id="t"><input type="submit" name="Submit" value="Submit" onClick="check()"></form></body></html> 2.Create a form that has e-mail field. Now Write VB Script code for
  • 31. 31 | P a g e Validation.<html><head></head><script language="VBScript">sub check() if(form1.t.value="")thenalert("Enter The Text")form1.t.focus()elsedim email,a,d,diff,k,cemail=form1.t.valuea=InStr(1,email,"@")d=InStr (1,email,".")diff=d-ak=d+1c=Mid(email, k, 1)if(a<1 or diff<=1 or c="")thenalert("Invalid Email ID")form1.t.focus()end if end if end sub</script><body><form name="form1" method="post" action="">Enter Email ID <input name="t" type="text" id="t"><input type="submit" name="Submit" value="Submit" onClick="check()"></form></body></html> Session 51.List Mouse and Key events in vbscriptMouse Events : MouseOver, MouseOutKey Events : KeyUp,KeyDown,KeyRelease, KeyPress2.How do you create random numbers in vbscript?Random No is Generated byRndFunction Session 61.Create a form in HTML containing the following files and then perform thevalidation of each field using VBScript. Name- textboxAddress-textboxDate Of Birth-Combo boxEmail- textbox<html><head></head><script language="VBScript">sub check()if (form1.n.value="")thenalert("Enter The Name")form1.n.focus()elseif (form1.a.value="")thenalert("Enter The Address")form1.a.focus()elseif (form1.y.value="")thenalert("Enter The Year")form1.y.focus()elseif (form1.d.value="")thenalert("Select The Day")form1.d.focus()elseif (form1.m.value="")thenalert("Select The Month")form1.m.focus()elseif (form1.mail.value="")thendim email,a,d,diff,k,cemail=form1.t.valuea=InStr(1,email,"@")d=InStr (1,email,".")diff=d-ak=d+1c=Mid(email, k, 1)if(a<1 or diff<=1 or
  • 32. 32 | P a g e c="")thenalert("Invalid Email ID")form1.t.focus()end if end if end sub</script><body><form name="form1" method="post" action=""><p>Name<input name="n" type="text" id="n"><br>Address<input name="a" type="text" id="a"><br>Date Of Birth : Day<select name="d" id="d" ><option>1</option><option>2</option><option>3</option><option>4</opti on><option>5</option><option>6</option><option>7</option><option>8</op tion><option>9</option><option>10</option> <option>11</option><option>12</option><option>13</option><option>14</o ption><option>15</option><option>16</option><option>17</option><option >18</option><option>19</option><option>20</option> <option>21</option><option>22</option><option>23</option><option>24</o ption><option>25</option><option>26</option><option>27</option><option >28</option><option>29</option><option>30</option><option>31</option>< /select>Month<select name="m" id="m"><option>Jan</option><option>Feb</option><option>Mar</option><op tion>Aprl</option><option>May</option><option>Jun</option><option>July </option><option>Aug</option><option>Sep</option><option>Oct</option>< option>Nov</option><option>Dec</option></select>Year <input name="y" type="text" id="y" size="6"><br>Email Id <input name="mail" type="text" id="mail"><br> <input type="button" name="Button" value="Button"onClick="check()"></form></body></html> Session 8 1.Create a program the accepts the time from the system clock and accordinglydisplays a Good morning, Good Afternoon and Good Evening
  • 33. 33 | P a g e message to the user <html><head></head><script language="VBScript">sub wish()dim hh=Datepart("h",Now)if h>=1 and h<=12 thenmsgbox("Good Morning")elseif h>=13 and h<=18 thenmsgbox("Good Afternoon") elsemsgbox("Good Evening")end if end sub</script><body onLoad="wish ()"></body></html> Session 91.Write a programme that uses For next Looping Statements to create a FibonacciSeries.<html><head></head><script language="VBScript">sub fib()dim a,b,ca=1 b=1document.write("First 10 Fibonacci Series<br>")document.write(a & "&nbsp;&nbsp;" & b & "&nbsp;&nbsp;")for i=3 to 10c=cint(a)+cint(b)document.write(c & "&nbsp;&nbsp;")a=b b=cnextend sub</script><body onLoad="fib ()"></body></html> 2.Using Do While display the factorial of a number.<html><head></head><script language="VBScript">sub fact(n)dim f,if=1i=1do while(i<=cint(n))f=cint(f)*cint(i)i=i+1loopdocument.write ("<br>Factorial Of " & n & " is " & f)end sub</script><body><form name="form1" method="post" action=""><input name="n" type="text" id="n"><input name="Button" type="button" onClick="fact (form1.n.value)"value="Factorial"></form></body></html> Session 101.Write a Program that displays the multiplication of two matrices.<html><head></head><script language="VBScript">sub matmul() dim m1(3,3),m2(3,3),m3(3,3),count,i,jcount=0msgbox("Enter First matrix")for i=0 to 2for j=0 to 2m1(i,j)=inputbox("")nextnextmsgbox ("Enter Seconf matrix")for i=0 to 2for j=0 to 2m2(i,j)=inputbox("") next nextdocument.write("<br>Product of twoMatrix<br>")for i=0 to
  • 34. 34 | P a g e 2for j=0 to 2for k=0 to 2m3(i,j)=cint(m3(i,j))+cint(m1(i,k))* cint(m2 (k,j))nextnextnextfor i=0 to 2for j=0 to 2document.write(" " & m1 (i,j))nextdocument.write("<br>")nextdocument.write("<br>+<br>")for i=0 to 2for j=0 to 2document.write(" " & m2(i,j))nextdocument.write ("<br>")nextdocument.write("<br>=<br>")for i=0 to 2for j=0 to 2document.write(" " & m3(i,j))nextdocument.write("<br>")nextend sub</script><body onLoad="matmul()"></body> 3 . Write a program that accepts a number from the user and displays its factorialonly if it is a prime number.<html><head></head><script language="VBScript">sub ChkPrime(n)dim i,prime,k prime=truefor i=2 to cint(n)/2if (n Mod i)=0 thenprime=falseend if nextif prime=true thenfact(n)elsedocument.write("<br>The Number is Not Prime")end if end subsub fact(n)dim f,if=1i=1do while(i<=cint(n))f=cint(f)*cint(i)i=i +1loopdocument.write("<br>Factorial Of " & n & " is " & f)end sub</script><body><form name="form1" method="post" action=""><input name="n" type="text" id="n"><input name="Button" type="button" onClick="ChkPrime (form1.n.value)"value="factorial"></form></body></html> DreamweaverSESSION 1 1.Design a home page of your TLC. <!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta
  • 35. 35 | P a g e http-equiv="Content-Type" content="text/html; charset=iso-8859- 1"></head><body><table width="100%" border="1" cellpadding="0"><tr><td bgcolor="#ccc123"><div align="center"><strong><font size="6">IGNOUPROGRAM STUDY CENTER</font></strong></div></td></tr><tr><td bgcolor="#cccc12"><div align="center"><strong><font size="6">WELCOMETO </font></strong></div></td></tr><tr><td bgcolor="pink"><div align="center"><strong><br><font size="4"><a href="faculty_coord.html">FACULTIES ANDCOORDINATORS</a><br><a href="theory_b_schedule.html">THEORY BATCH SCHEDULES</a> <br><a href="prac_b_schedule.html">PRACTICAL BATCH SCHEDULES</a><br><a href="sem_detail.html">SEMESTER WISE LIST OF STUDENTS</a> <br><a href="assignment.html">ASSIGNMENT AND VIVA-VOCE</a> <br><a href="ask_y_question.htm">ASK YOUR QUESTION</a> <br><a href="mail.htm">MAIL US</a> </font></strong><fontsize="4"></font></div></td></tr></table><p align="center"><br></p></body></html> 2.Design a Home Page for a toy Company. The page has an image as th background. Do some text attracting format. <!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Toy Page</title><meta http- equiv="Content-Type" content="text/html; charset=iso-8859- 1"></head><body background="646.jpg"><table width="100%" border="0" cellpadding="0"><tr><td><div align="center"><strong><font color="#33FF00" size="7">Tom
  • 36. 36 | P a g e ToysCenter</font></strong></div></td></tr><tr><td>&nbsp;</td></tr><tr> <td align="left" valign="top"><table width="100%" border="1"cellpadding="0"><tr><td width="27%"><table width="100%" border="1" cellpadding="0"><tr><td><div align="center"><font size="5"><strong><ahref="prof.htm">Profiles</a></strong></font></div>< /td></tr><tr><td><div align="center"><font size="5"><strong><ahref="Toys.htm">Toys</a></strong></font></div></td> </tr><tr><td><div align="center"><font size="5"><strong><ahref="cont.htm">ContactUs</a></strong></font></div> </td></tr></table></td><td width="73%" align="left" valign="top"><div align="justify"><fontcolor="#FFFFFF" size="4">We are one of the leading toy comapny in the city and have branchesin all major districts thoughout kerala. Our toy Shope containsa vide variety of collection of toys which taste the choice of your kids. toys posses a high quality . the toys are normally importedfrom European and American Countries.</font></div></td></tr></table></td></tr><tr><td>&nbsp;</td> </tr></table></body></html> 3.Insert a image in your page and give a zig zag motion to the image in you page(using timeline).<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript" type="text/JavaScript"><!--function MM_timelinePlay(tmLnName, myID) { //v1.2//Copyright 1997, 2000 Macromedia, Inc. All rights reserved.var
  • 37. 37 | P a g e i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstT ime=false;if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st timetmLn = document.MM_Time[tmLnName];if (myID== null) { myID= ++tmLn.ID; firstTime=true;}//if new call, incr IDif (myID== tmLn.ID) { //if Im newestsetTimeout('MM_timelinePlay("'+tmLnName +'",'+myID+')',tmLn.delay);fNew = ++tmLn.curFrame;for (i=0; i<tmLn.length; i++) {sprite = tmLn[i];if (sprite.charAt(0) == 's') {if (sprite.obj) {numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//inrangekeyFrm=1;for (j=0; j<sprite.values.length; j++) {props = sprite.values[j];if (numKeyFr != props.length) {if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];else sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];} else {while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm])keyFrm++;if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];else sprite.obj[props.prop2] [props.prop] = props[keyFrm-1];} } } } }} else if (sprite.charAt(0) =='b' && fNew == sprite.frame) eval(sprite.value);if (fNew > tmLn.lastFrame) tmLn.ID = 0;} }}function MM_initTimelines() { //v4.0//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.var ns = navigator.appName == "Netscape";var ns4 = (ns && parseInt(navigator.appVersion) == 4);var ns5 = (ns && parseInt (navigator.appVersion) > 4);document.MM_Time = new Array (1);document.MM_Time[0] = new Array(3);document.MM_Time["Timeline1"] =
  • 38. 38 | P a g e document.MM_Time[0];document.MM_Time[0].MM_Name = "Timeline1";document.MM_Time[0].fps = 15;document.MM_Time[0][0] = new String("sprite");document.MM_Time[0][0].slot = 1;if (ns4) document.MM_Time[0][0].obj = document["Layer1"];else if (ns5) document.MM_Time[0][0].obj = document.getElementById ("Layer1");elsedocument.MM_Time[0][0].obj= document.all ? document.all["Layer1"] :null;document.MM_Time[0][0].keyFrames = new Array(1, 15);document.MM_Time[0][0].values = new Array(2);if (ns5) document.MM_Time[0][0].values[0] = new Array("21px", "24px", "28px","31px", "35px", "38px", "42px", "45px", "48px", "52px", "55px", "59px", "62px","66px", "69px");elsedocument.MM_Time[0][0].values[0] = newArray (21,24,28,31,35,38,42,45,48,52,55,59,62,66,69);document.MM_Time[0] [0].values[0].prop = "left";if (ns5)document.MM_Time[0][0].values[1] = new Array("16px", "21px", "25px","30px", "35px", "39px", "44px", "48px", "53px", "58px", "62px", "67px", "72px","76px", "81px");else document.MM_Time[0][0].values[1] = newArray (16,21,25,30,35,39,44,48,53,58,62,67,72,76,81);document.MM_Time[0] [0].values[1].prop = "top";if (!ns4) {document.MM_Time[0][0].values [0].prop2 = "style";document.MM_Time[0][0].values[1].prop2 = "style";}document.MM_Time[0][1] = new String ("sprite");document.MM_Time[0][1].slot = 1;if (ns4)document.MM_Time [0][1].obj = document["Layer1"];else if (ns5)document.MM_Time[0] [1].obj = document.getElementById("Layer1");elsedocument.MM_Time[0] [1].obj = document.all ? document.all["Layer1"] :null;document.MM_Time[0][1].keyFrames = new Array(16,
  • 39. 39 | P a g e 30);document.MM_Time[0][1].values = new Array(2);if (ns5) document.MM_Time[0][1].values[0] = new Array("69px", "77px", "85px","93px", "102px", "110px", "118px", "126px", "134px", "142px", "150px","159px", "167px", "175px", "183px"); elsedocument.MM_Time[0] [1].values[0] = newArray (69,77,85,93,102,110,118,126,134,142,150,159,167,175,183);document.MM_ Time[0][1].values[0].prop = "left"; if (ns5)document.MM_Time[0] [1].values[1] = new Array("81px", "77px", "72px","68px", "63px", "59px", "54px", "50px", "45px", "41px", "36px", "32px", "27px","22px", "18px");elsedocument.MM_Time[0][1].values[1] = newArray (81,77,72,68,63,59,54,50,45,41,36,32,27,22,18);document.MM_Time[0] [1].values[1].prop = "top";if (!ns4) {document.MM_Time[0][1].values [0].prop2 = "style";document.MM_Time[0][1].values[1].prop2 = "style";}document.MM_Time[0][2] = new String ("sprite");document.MM_Time[0][2].slot = 1;if (ns4)document.MM_Time [0][2].obj = document["Layer1"];else if (ns5)document.MM_Time[0] [2].obj = document.getElementById("Layer1");elsedocument.MM_Time[0] [2].obj = document.all ? document.all["Layer1"] :null;document.MM_Time[0][2].keyFrames = new Array(31, 45);document.MM_Time[0][2].values = new Array(2);if (ns5) document.MM_Time[0][2].values[0] = new Array("183px", "191px","198px", "206px", "213px", "221px", "228px", "236px", "243px", "251px","258px", "266px", "273px", "281px", "288px"); elsedocument.MM_Time[0] [2].values[0] = newArray (183,191,198,206,213,221,228,236,243,251,258,266,273,281,288);document
  • 40. 40 | P a g e .MM_Time[0][2].values[0].prop = "left";if (ns5)document.MM_Time[0] [2].values[1] = new Array("18px", "23px", "28px","32px", "37px", "42px", "47px", "51px", "56px", "61px", "66px", "71px", "75px","80px", "85px");elsedocument.MM_Time[0][2].values[1] = newArray (18,23,28,32,37,42,47,51,56,61,66,71,75,80,85);document.MM_Time[0] [2].values[1].prop = "top";if (!ns4) {document.MM_Time[0][2].values [0].prop2 = "style";document.MM_Time[0][2].values[1].prop2 = "style";}document.MM_Time[0].lastFrame = 45;for (i=0; i<document.MM_Time.length; i++) {document.MM_Time[i].ID = null;document.MM_Time[i].curFrame = 0;document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;}}//--></script></head><body onLoad="MM_timelinePlay('Timeline1')"><div id="Layer1" style="position:absolute; left:21px; top:16px; width:192px;height:147px; z-index:1"><img src="1Tourism1.jpg" name="Image1"width="196" height="141"></div></body></html> SESSION 4 1 . Design a form as follows.<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><form name="form1"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="23%">Your name</td><td width="77%"><input type="text" name="textfield"></td></tr><tr><td>Yiour Address</td><td><input type="text" name="textfield2"></td></tr><tr><td>&nbsp;</td><td><input
  • 41. 41 | P a g e type="text" name="textfield3"></td></tr><tr><td>Your Gender</td><td><input type="radio" name="radiobutton" value="radiobutton">Male<input type="radio" name="radiobutton" value="radiobutton">Female </td></tr><tr><td>Your Country</td><td><select name="select" size="1"><option>India</option><option>America</option><option>Canada< /option><option>Denmark</option><option>Egypt</option><option>France</ option><option>Germany</option><option>Hungry</option></select></td></ tr><tr><td>Your Opinion</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><textarea name="textarea" cols="50"></textarea></td></tr><tr><td>&nbsp;</td><td><input type="reset" name="Reset" value="Reset"><input type="submit" name="Submit2" value="Submit"></td></tr></table></form></body></html> SESSION 2 1 . Insert an image in a page. In the browser, when you take cursor over it, another image emerges under it and when you click on the second image, it takes you toexercise 2 of session 1.<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859- 1"><script language="JavaScript" type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0var i,x,a=document.MM_sr; for (i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)x.src=x.oSrc;} function
  • 42. 42 | P a g e MM_preloadImages() { //v3.0var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01var p,i,x; if(!d) d=document; if((p=n.indexOf("?")) >0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;! x&&i<d.forms.length;i++) x=d.forms[i][n];for(i=0;! x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers [i].document);if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;for(i=0;i< (a.length-2);i+=3)if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++] =x; if(!x.oSrc)x.oSrc=x.src; x.src=a[i+2];}}//--></script></head><body onLoad="MM_preloadImages('animals7.JPG')"><a href="ex1session2.htm" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage ('Image1','','animals7.JPG',1)"><img src="12.jpg"name="Image1" width="218" height="140" border="0"></a></body></html>
  • 43. 43 | P a g e 6.Create a dialogue box with “Welcome to my website” message. <html><head></head><script language="JavaScript">alert("Welcome to my website");</script><body></body></html> ================================= Session 2 1.Evaluate the expressiona. Ans. 7+5b. “7”+”5”c. 7*5d. 7/5e.7%5<html><head></head><script language="JavaScript">function Calculate(choice){var result;switch (choice) {case 1:result=7+5; break;case 2:result="7" + "5"; break;case 3:result=7*5; break;case 4:result=7/5; break;case 5:result=7%5; break;}document.writeln(result);}</script><body><form name="form1" method="post" action=""> <p>Evaluate The Expression</p><p><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate(1)">7+5</label><br><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate (2)">"7" + "5"</label> <br><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate(3)">7*5</label><br><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate (4)">7/5</label><br><label><input type="radio" name="RadioGroup1" value="radio"onClick="Calculate (5)">7%5</label><br></p></form></body></html> 2. Write the segment of script that would ask the user if he wants a greetingmessage and if he does, display a gif file called Welcome. gif and display“Welcome to Netscape navigator!” in the document window
  • 44. 44 | P a g e following the gif.<html><head></head><script language="JavaScript">function messages(){input_box=confirm("Do You Want a Greeting");if(input_box==true){window.open ("welcome.jpg");window.document.write("Welcome to Netscape navigator!" );}else{alert("You Have Selected No");}}</script><body><form name="form1" method="post" action=""><input type="submit" name="Submit" value="Submit" onClick="messages ()"></form></body></html> 3.Write the object definition for an object called car with four properties model,make, year and price. <html><head><script language="JavaScript">var car=new Object;car.model="Marcides Benz";car.year=2008;car.make="DX";car.price=4500000;</script></head><s cript language="JavaScript">function printdet(){document.write(" Model : " + car.model);document.write(", Make : " + car.make);document.write(", Year : " + car.year);document.write(", Price : " +car.price);}</script><body><form name="form1" method="post" action=""><input type="submit" name="Submit" value="Print Details" onClick="printdet()"></form></body></html> 1.Write a program to display a multiplication table.<html><head></head><script language="JavaScript">function multable(){var num=prompt("Enter The No");var i;for(i=0;i<=10;i++) {document.write(num + " * " + i + " = " + num*i +"<br>");}} </script><body><form name="form1" method="post" action=""><input
  • 45. 45 | P a g e type="submit" name="Submit" value="Print Details"onClick="multable ()"></form></body></html> 2.Write code to create a scrolling text.<html><head></head><script language="JavaScript">function movetext(){if(txt.style.posLeft<720) {txt.style.posLeft=txt.style.posLeft+2;window.setTimeout("movetext ()",5);}else{txt.style.posLeft=0;window.setTimeout("movetext()",5);}} </script><body onLoad="movetext()"><form name="form1" method="post" action=""><div id="txt" style="position:relative;top:3;left0"><h2>Scrolling Text</h2></div></form></body></html> Session 42. Write a program to change color of text randomly<html><head><script language="JavaScript">var colors=new Array(6);colors[0]="#0000FF"; colors[1]="#FF0000"; colors[2] ="#006600";colors[3]="#FFCC00";colors[4]="#00FFFF"; colors[5] ="#000000";var i=1;</script></head><script language="JavaScript">function changecolor(){ document.fgColor=colors [i];i++;if(i>5)i=0;setTimeout("changecolor()",100);}</script><body onLoad="changecolor()"><div align="center"><strong><font size="7">Hello </font></strong> </div></body></html> 3.Create a web page using two image files, which switch b/w on another as themouse pointer moves over the image. Use on mouse over and on mouse out eventhandler.<html><head><script language="JavaScript">function MM_swapImgRestore() {var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
  • 46. 46 | P a g e x.src=x.oSrc;}function MM_preloadImages() {var d=document; if (d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;i ++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a [i];}}}function MM_findObj(n, d) {var p,i,x; if(!d) d=document; if ((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames [n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)x=d.forms[i][n];for (i=0;!x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers [i].document);if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() {var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;for(i=0;i<(a.length-2);i+=3)if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script></head><body onLoad="MM_preloadImages('welcome.JPG')"><a href="#" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage ('Image1','','welcome.JPG',1)"><imgsrc="Img1.jpg" name="Image1" width="261" height="195" border="0"></a></body></html> Session 52 . Use the date function get & set date to prompt the user for an integer b/w 1-31 &return day of the week it represents.<html><head></head><script language="JavaScript">function setdate(){var dt=new Date();dt=new Date (form1.y.value,form1.m.value,form1.d.value);form1.gt.value=dt.getDate () + "/" + dt.getMonth() + "/" +dt.getFullYear();}</script><body><form name="form1" method="post" action=""><p>Day <input name="d"
  • 47. 47 | P a g e type="text" id="d" size="3">Month <input name="m" type="text" id="m" size="3">Year <input name="y" type="text" id="y" size="4"><input type="button" name="Button" value="SetDate" onClick="setdate ()"></p><p> Date <input name="gt" type="text" id="gt"> </p></form></body></html> 2.Display time and print the message accordingly e.g Good morning in morning etc.<html><head><script language="JavaScript">var dt=new Date ();document.write("Good Morning The Time Is : " + dt.getHours() +":" + dt.getMinutes() + ":" + dt.getSeconds ());</script></head><body></body></html> Session 61.Using java script create a digital clock.<html><head></head><script language="JavaScript">function getTimes(){var dt=new Date();form1.t.value= dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();window.setTimeout("getTimes ()",1000);}</script><body onLoad="getTimes()"><form name="form1" method="post" action=""><input name="t" type="text" id="t"></form></body></html> Session 71.Using java script create a calculator.<html><head></head><script language="JavaScript">function calc(ch){if(ch=="=")form1.t.value= eval(form1.t.value);elseif (ch=="C")form1.t.value= "";elseform1.t.value+=ch;}</script><body onLoad="getTimes()"><form name="form1" method="post" action=""><input name="t" type="text" id="t"><br><input type="button" name="Button" value="7" onClick="calc('7')"><input type="button" name="Submit2"
  • 48. 48 | P a g e value="8" onClick="calc('8')"><input type="button" name="Submit3" value="9" onClick="calc('9')"> <input type="button" name="Submit4" value="+" onClick="calc('+')"><br><input type="button" name="Submit5" value="4" onClick="calc('4')"><input type="button" name="Submit6" value="5" onClick="calc('5')"><input type="button" name="Submit7" value="6" onClick="calc('6')"><input type="button" name="Submit8" value="-" onClick="calc('-')"><br><input type="button" name="Submit9" value="1" onClick="calc('1')"><input type="button" name="Submit10" value="2" onClick="calc('2')"><input type="button" name="Submit11" value="3" onClick="calc('3')"><input type="button" name="Submit12" value="*" onClick="calc('*')"><br><input type="button" name="Submit13" value="0" onClick="calc('0')"><input type="button" name="Submit14" value="C" onClick="calc('C')"><input type="button" name="Submit15" value="=" onClick="calc('=')"><br></form></body></html> Session 81.Create a web page with a textbox and check for validation. If empty displaymessage and set focus to it, if filled display thank you.<html><head></head><script language="JavaScript">function check() {if(form1.t.value==""){alert("Enter The Text");form1.t.focus();}else {alert("Thank You");}}</script><body><form name="form1" method="post" action="">Enter a Text<input name="t" type="text" id="t"><input type="submit" name="Submit" value="Submit" onClick="check ()"></form></body></html> Session 111. Create a program to generate a hit counter <html><head></head><script language="JavaScript">var
  • 49. 49 | P a g e counter;counter=0;function count(){counter++;alert("Counter : " + counter);}</script><body><form name="form1" method="post" action=""><div align="center"><input type="button" name="Button" value="Hit Me" onClick="count()"></div></form></body></html> 2.Create a program to check email address provided by the user is valid or invalid.<html><head></head><script language="JavaScript">function check(){if(form1.t.value==""){alert ("Enter The Text");form1.t.focus();}else{var email,a,d,diff,k,c;email=form1.t.value;a=email.indexOf ('@');d=email.indexOf('.');diff=parseInt(d)-parseInt(a);k=parseInt (d)+1;c=email.charAt(k);if(a<1||diff<=1||c==""){alert("Invalid Email ID");form1.t.focus();}}}</script><body><form name="form1" method="post" action="">Enter Email ID <input name="t" type="text" id="t"><input type="submit" name="Submit" value="Submit" onClick="check()"></form></body></html> Session 121.Write a program to scroll the text on status bar.<html><head></head><html><head></head><script language="JavaScript">var ar="Scrolling Text";var space="";var i;i=1;function count(){var cont,k=0;cont="";while(k<=i){cont=cont + " ";k++;}status=cont +ar;i++;if(i>100)i=0;window.setTimeout("count ()",5);}</script><body onLoad="count ()"></body></html><body></body></html> 2. Write a program to create a small window in a main window.<html><head><script language="JavaScript">window.open
  • 50. 50 | P a g e ("newwindow.html");</script></head><body></body></html> Session 151.Use java script for authentication and verification of the text boxes in the staticsite developed by the student in the html exercise.<html><head></head><script language="JavaScript">function check(){if(form1.t.value==""){alert("Enter The Username");form1.t.focus();}else if(form1.t2.value==""){alert("Enter The Password");form1.t2.focus();}else{if((form1.t.value!="")|| (form1.t2.value!=”")){alert("Invalid Username or Password");}}} </script><body><form name="form1" method="post" action=""><p>User Name <input name="t" type="text" id="t"> </p><p>Password <input name="t2" type="password" id="t2"> </p><p> <input type="button" name="Button" value="Button" onClick="check()"></p></form></body></html> a.VB ScriptSession 11.Write a program to display the following on a web pageHello <User Name><html><head></head><script language="VBScript">sub newpages(txt)document.writeln("Hello " + txt) end sub</script><body><form name="form1" method="post" action=""><p>Enter User Name<input name="t1" type="text" id="t1"></p><p><input type="submit" name="Submit" value="Enter"onClick="newpages (form1.t1.value)"></p></form></body></html> 2.Create a web page that display a message box with the message“welcome to my web site”<html><head></head><script language="VBScript">sub msgs()msgbox("Welcome ToMy Web Site")end sub</script><body><form name="form1" method="post" action=""><p>
  • 51. 51 | P a g e <input type="submit" name="Submit" value="Message"onClick="msgs()"> </p></form></body></html> 3.Write code to change color of text randomly.<html><head></head><script language="VBScript">dim colors(5) colors(0)="#0000FF"colors(1)="#FF0000"colors(2)="#006600"colors(3) ="#FFCC00"colors(4)="#00FFFF"colors(5)="#000000"dim ii=0sub changecolor()msgbox("Welcome ToMy Web Site")document.fgColor=colors (i)i=i+1if(i>5) theni=0end if window.setTimeout("changecolor()",100) end sub</script><body onLoad="changecolor()"><div align="center"><strong><font size="7">Hello </font></strong> </div></body></html> Session 21.Write a VB Script code that accepts the length, breadth and height and display thearea of a rectangle.<html><head></head><script language="VBScript">sub area()dim l,b,h,ar 40 l=form1.l.value b=form1.b.valueh=form1.h.valuear=l*b*hmsgbox("Area " & ar)end sub</script><body onLoad="changecolor()"><form name="form1" method="post" action="">Length <input name="l" type="text" id="l">Breadth <input name="b" type="text" id="b">Height <input name="h" type="text" id="h"><br><input type="button" name="Button" value="Area" onClick="area()"></form></body></html> 2.Create a programme to generate a hit counter <html><head></head><script language="VBScript">dim counter counter=0sub count()counter=counter+1msgbox("Counter : " & counter)end sub</script><body><form name="form1" method="post" action=""><div
  • 52. 52 | P a g e align="center"><input type="button" name="Button" value="Hit Me" onClick="count()"></div></form></body></html> Session 31.Using vbscript create a calculator <html><head></head><script language="VBScript">sub calc(ch)if(ch="=") then form1.t.value= eval(form1.t.value)elseif(ch="C") thenform1.t.value= ""elseform1.t.value=form1.t.value & chend if end if end sub</script><body onLoad="getTimes()"><form name="form1" method="post" action=""><input name="t" type="text" id="t"><br><input type="button" name="Button" value="7" onClick="calc('7')"><input type="button" name="Submit2" value="8" onClick="calc('8')"><input type="button" name="Submit3" value="9" onClick="calc('9')"><input type="button" name="Submit4" value="+" onClick="calc('+')"><br><input type="button" name="Submit5" value="4" onClick="calc('4')"><input type="button" name="Submit6" value="5" onClick="calc('5')"><input type="button" name="Submit7" value="6" onClick="calc('6')"><input type="button" name="Submit8" value="-" onClick="calc('-')"><br><input type="button" name="Submit9" value="1" onClick="calc('1')"><input type="button" name="Submit10" value="2" onClick="calc('2')"><input type="button" name="Submit11" value="3" onClick="calc('3')"><input type="button" name="Submit12" value="*" onClick="calc('*')"><br><input type="button" name="Submit13" value="0" onClick="calc('0')"><input type="button" name="Submit14" value="C" onClick="calc('C')"><input type="button" name="Submit15" value="=" onClick="calc ('=')"><br></form></body></html> Session 41.Create a programme to check for null or empty
  • 53. 53 | P a g e string<html><head></head><script language="VBScript">sub check()if (form1.t.value="")thenmsgbox("Enter The Text")form1.t.focus() elsealert("Thank You")end if end sub</script><body><form name="form1" method="post" action="">Enter a Text<input name="t" type="text" id="t"><input type="submit" name="Submit" value="Submit" onClick="check()"></form></body></html> 2.Create a form that has e-mail field. Now Write VB Script code for Validation.<html><head></head><script language="VBScript">sub check() if(form1.t.value="")thenalert("Enter The Text")form1.t.focus()elsedim email,a,d,diff,k,cemail=form1.t.valuea=InStr(1,email,"@")d=InStr (1,email,".")diff=d-ak=d+1c=Mid(email, k, 1)if(a<1 or diff<=1 or c="")thenalert("Invalid Email ID")form1.t.focus()end if end if end sub</script><body><form name="form1" method="post" action="">Enter Email ID <input name="t" type="text" id="t"><input type="submit" name="Submit" value="Submit" onClick="check()"></form></body></html> Session 51.List Mouse and Key events in vbscriptMouse Events : MouseOver, MouseOutKey Events : KeyUp,KeyDown,KeyRelease, KeyPress2.How do you create random numbers in vbscript?Random No is Generated byRndFunction Session 61.Create a form in HTML containing the following files and then perform thevalidation of each field using VBScript. Name- textboxAddress-textboxDate Of Birth-Combo boxEmail- textbox<html><head></head><script language="VBScript">sub check()if
  • 54. 54 | P a g e (form1.n.value="")thenalert("Enter The Name")form1.n.focus()elseif (form1.a.value="")thenalert("Enter The Address")form1.a.focus()elseif (form1.y.value="")thenalert("Enter The Year")form1.y.focus()elseif (form1.d.value="")thenalert("Select The Day")form1.d.focus()elseif (form1.m.value="")thenalert("Select The Month")form1.m.focus()elseif (form1.mail.value="")thendim email,a,d,diff,k,cemail=form1.t.valuea=InStr(1,email,"@")d=InStr (1,email,".")diff=d-ak=d+1c=Mid(email, k, 1)if(a<1 or diff<=1 or c="")thenalert("Invalid Email ID")form1.t.focus()end if end if end sub</script><body><form name="form1" method="post" action=""><p>Name<input name="n" type="text" id="n"><br>Address<input name="a" type="text" id="a"><br>Date Of Birth : Day<select name="d" id="d" ><option>1</option><option>2</option><option>3</option><option>4</opti on><option>5</option><option>6</option><option>7</option><option>8</op tion><option>9</option><option>10</option> <option>11</option><option>12</option><option>13</option><option>14</o ption><option>15</option><option>16</option><option>17</option><option >18</option><option>19</option><option>20</option> <option>21</option><option>22</option><option>23</option><option>24</o ption><option>25</option><option>26</option><option>27</option><option >28</option><option>29</option><option>30</option><option>31</option>< /select>Month<select name="m" id="m"><option>Jan</option><option>Feb</option><option>Mar</option><op tion>Aprl</option><option>May</option><option>Jun</option><option>July
  • 55. 55 | P a g e </option><option>Aug</option><option>Sep</option><option>Oct</option>< option>Nov</option><option>Dec</option></select>Year <input name="y" type="text" id="y" size="6"><br>Email Id <input name="mail" type="text" id="mail"><br> <input type="button" name="Button" value="Button"onClick="check()"></form></body></html> Session 8 1.Create a program the accepts the time from the system clock and accordinglydisplays a Good morning, Good Afternoon and Good Evening message to the user <html><head></head><script language="VBScript">sub wish()dim hh=Datepart("h",Now)if h>=1 and h<=12 thenmsgbox("Good Morning")elseif h>=13 and h<=18 thenmsgbox("Good Afternoon") elsemsgbox("Good Evening")end if end sub</script><body onLoad="wish ()"></body></html> Session 91.Write a programme that uses For next Looping Statements to create a FibonacciSeries.<html><head></head><script language="VBScript">sub fib()dim a,b,ca=1 b=1document.write("First 10 Fibonacci Series<br>")document.write(a & "&nbsp;&nbsp;" & b & "&nbsp;&nbsp;")for i=3 to 10c=cint(a)+cint(b)document.write(c & "&nbsp;&nbsp;")a=b b=cnextend sub</script><body onLoad="fib ()"></body></html> 2.Using Do While display the factorial of a number.<html><head></head><script language="VBScript">sub fact(n)dim f,if=1i=1do while(i<=cint(n))f=cint(f)*cint(i)i=i+1loopdocument.write ("<br>Factorial Of " & n & " is " & f)end sub</script><body><form name="form1" method="post" action=""><input name="n" type="text"
  • 56. 56 | P a g e id="n"><input name="Button" type="button" onClick="fact (form1.n.value)"value="Factorial"></form></body></html> Session 101.Write a Program that displays the multiplication of two matrices.<html><head></head><script language="VBScript">sub matmul() dim m1(3,3),m2(3,3),m3(3,3),count,i,jcount=0msgbox("Enter First matrix")for i=0 to 2for j=0 to 2m1(i,j)=inputbox("")nextnextmsgbox ("Enter Seconf matrix")for i=0 to 2for j=0 to 2m2(i,j)=inputbox("") next nextdocument.write("<br>Product of twoMatrix<br>")for i=0 to 2for j=0 to 2for k=0 to 2m3(i,j)=cint(m3(i,j))+cint(m1(i,k))* cint(m2 (k,j))nextnextnextfor i=0 to 2for j=0 to 2document.write(" " & m1 (i,j))nextdocument.write("<br>")nextdocument.write("<br>+<br>")for i=0 to 2for j=0 to 2document.write(" " & m2(i,j))nextdocument.write ("<br>")nextdocument.write("<br>=<br>")for i=0 to 2for j=0 to 2document.write(" " & m3(i,j))nextdocument.write("<br>")nextend sub</script><body onLoad="matmul()"></body> 3 . Write a program that accepts a number from the user and displays its factorialonly if it is a prime number.<html><head></head><script language="VBScript">sub ChkPrime(n)dim i,prime,k prime=truefor i=2 to cint(n)/2if (n Mod i)=0 thenprime=falseend if nextif prime=true thenfact(n)elsedocument.write("<br>The Number is Not Prime")end if end subsub fact(n)dim f,if=1i=1do while(i<=cint(n))f=cint(f)*cint(i)i=i +1loopdocument.write("<br>Factorial Of " & n & " is " & f)end sub</script><body><form name="form1" method="post" action=""><input name="n" type="text" id="n"><input name="Button" type="button"
  • 57. 57 | P a g e onClick="ChkPrime (form1.n.value)"value="factorial"></form></body></html> DreamweaverSESSION 11.Design a home page of your TLC.<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859- 1"></head><body><table width="100%" border="1" cellpadding="0"><tr><td bgcolor="#ccc123"><div align="center"><strong><font size="6">IGNOUPROGRAM STUDY CENTER</font></strong></div></td></tr><tr><td bgcolor="#cccc12"><div align="center"><strong><font size="6">WELCOMETO </font></strong></div></td></tr><tr><td bgcolor="pink"><div align="center"><strong><br><font size="4"><a href="faculty_coord.html">FACULTIES ANDCOORDINATORS</a><br><a href="theory_b_schedule.html">THEORY BATCH SCHEDULES</a> <br><a href="prac_b_schedule.html">PRACTICAL BATCH SCHEDULES</a><br><a href="sem_detail.html">SEMESTER WISE LIST OF STUDENTS</a> <br><a href="assignment.html">ASSIGNMENT AND VIVA-VOCE</a> <br><a href="ask_y_question.htm">ASK YOUR QUESTION</a> <br><a href="mail.htm">MAIL US</a> </font></strong><fontsize="4"></font></div></td></tr></table><p align="center"><br></p></body></html> 2.Design a Home Page for a toy Company. The page has an image as th background. Do some text attracting format.
  • 58. 58 | P a g e <!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Toy Page</title><meta http- equiv="Content-Type" content="text/html; charset=iso-8859- 1"></head><body background="646.jpg"><table width="100%" border="0" cellpadding="0"><tr><td><div align="center"><strong><font color="#33FF00" size="7">Tom ToysCenter</font></strong></div></td></tr><tr><td>&nbsp;</td></tr><tr> <td align="left" valign="top"><table width="100%" border="1"cellpadding="0"><tr><td width="27%"><table width="100%" border="1" cellpadding="0"><tr><td><div align="center"><font size="5"><strong><ahref="prof.htm">Profiles</a></strong></font></div>< /td></tr><tr><td><div align="center"><font size="5"><strong><ahref="Toys.htm">Toys</a></strong></font></div></td> </tr><tr><td><div align="center"><font size="5"><strong><ahref="cont.htm">ContactUs</a></strong></font></div> </td></tr></table></td><td width="73%" align="left" valign="top"><div align="justify"><fontcolor="#FFFFFF" size="4">We are one of the leading toy comapny in the city and have branchesin all major districts thoughout kerala. Our toy Shope containsa vide variety of collection of toys which taste the choice of your kids. toys posses a high quality . the toys are normally importedfrom European and American Countries.</font></div></td></tr></table></td></tr><tr><td>&nbsp;</td> </tr></table></body></html> 3.Insert a image in your page and give a zig zag motion to the image
  • 59. 59 | P a g e in you page(using timeline).<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript" type="text/JavaScript"><!--function MM_timelinePlay(tmLnName, myID) { //v1.2//Copyright 1997, 2000 Macromedia, Inc. All rights reserved.var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstT ime=false;if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st timetmLn = document.MM_Time[tmLnName];if (myID== null) { myID= ++tmLn.ID; firstTime=true;}//if new call, incr IDif (myID== tmLn.ID) { //if Im newestsetTimeout('MM_timelinePlay("'+tmLnName +'",'+myID+')',tmLn.delay);fNew = ++tmLn.curFrame;for (i=0; i<tmLn.length; i++) {sprite = tmLn[i];if (sprite.charAt(0) == 's') {if (sprite.obj) {numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//inrangekeyFrm=1;for (j=0; j<sprite.values.length; j++) {props = sprite.values[j];if (numKeyFr != props.length) {if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];else sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];} else {while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm])keyFrm++;if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];else sprite.obj[props.prop2] [props.prop] = props[keyFrm-1];} } } } }} else if (sprite.charAt(0) =='b' && fNew == sprite.frame) eval(sprite.value);if (fNew >
  • 60. 60 | P a g e tmLn.lastFrame) tmLn.ID = 0;} }}function MM_initTimelines() { //v4.0//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.var ns = navigator.appName == "Netscape";var ns4 = (ns && parseInt(navigator.appVersion) == 4);var ns5 = (ns && parseInt (navigator.appVersion) > 4);document.MM_Time = new Array (1);document.MM_Time[0] = new Array(3);document.MM_Time["Timeline1"] = document.MM_Time[0];document.MM_Time[0].MM_Name = "Timeline1";document.MM_Time[0].fps = 15;document.MM_Time[0][0] = new String("sprite");document.MM_Time[0][0].slot = 1;if (ns4) document.MM_Time[0][0].obj = document["Layer1"];else if (ns5) document.MM_Time[0][0].obj = document.getElementById ("Layer1");elsedocument.MM_Time[0][0].obj= document.all ? document.all["Layer1"] :null;document.MM_Time[0][0].keyFrames = new Array(1, 15);document.MM_Time[0][0].values = new Array(2);if (ns5) document.MM_Time[0][0].values[0] = new Array("21px", "24px", "28px","31px", "35px", "38px", "42px", "45px", "48px", "52px", "55px", "59px", "62px","66px", "69px");elsedocument.MM_Time[0][0].values[0] = newArray (21,24,28,31,35,38,42,45,48,52,55,59,62,66,69);document.MM_Time[0] [0].values[0].prop = "left";if (ns5)document.MM_Time[0][0].values[1] = new Array("16px", "21px", "25px","30px", "35px", "39px", "44px", "48px", "53px", "58px", "62px", "67px", "72px","76px", "81px");else document.MM_Time[0][0].values[1] = newArray (16,21,25,30,35,39,44,48,53,58,62,67,72,76,81);document.MM_Time[0] [0].values[1].prop = "top";if (!ns4) {document.MM_Time[0][0].values [0].prop2 = "style";document.MM_Time[0][0].values[1].prop2 =
  • 61. 61 | P a g e "style";}document.MM_Time[0][1] = new String ("sprite");document.MM_Time[0][1].slot = 1;if (ns4)document.MM_Time [0][1].obj = document["Layer1"];else if (ns5)document.MM_Time[0] [1].obj = document.getElementById("Layer1");elsedocument.MM_Time[0] [1].obj = document.all ? document.all["Layer1"] :null;document.MM_Time[0][1].keyFrames = new Array(16, 30);document.MM_Time[0][1].values = new Array(2);if (ns5) document.MM_Time[0][1].values[0] = new Array("69px", "77px", "85px","93px", "102px", "110px", "118px", "126px", "134px", "142px", "150px","159px", "167px", "175px", "183px"); elsedocument.MM_Time[0] [1].values[0] = newArray (69,77,85,93,102,110,118,126,134,142,150,159,167,175,183);document.MM_ Time[0][1].values[0].prop = "left"; if (ns5)document.MM_Time[0] [1].values[1] = new Array("81px", "77px", "72px","68px", "63px", "59px", "54px", "50px", "45px", "41px", "36px", "32px", "27px","22px", "18px");elsedocument.MM_Time[0][1].values[1] = newArray (81,77,72,68,63,59,54,50,45,41,36,32,27,22,18);document.MM_Time[0] [1].values[1].prop = "top";if (!ns4) {document.MM_Time[0][1].values [0].prop2 = "style";document.MM_Time[0][1].values[1].prop2 = "style";}document.MM_Time[0][2] = new String ("sprite");document.MM_Time[0][2].slot = 1;if (ns4)document.MM_Time [0][2].obj = document["Layer1"];else if (ns5)document.MM_Time[0] [2].obj = document.getElementById("Layer1");elsedocument.MM_Time[0] [2].obj = document.all ? document.all["Layer1"] :null;document.MM_Time[0][2].keyFrames = new Array(31,
  • 62. 62 | P a g e 45);document.MM_Time[0][2].values = new Array(2);if (ns5) document.MM_Time[0][2].values[0] = new Array("183px", "191px","198px", "206px", "213px", "221px", "228px", "236px", "243px", "251px","258px", "266px", "273px", "281px", "288px"); elsedocument.MM_Time[0] [2].values[0] = newArray (183,191,198,206,213,221,228,236,243,251,258,266,273,281,288);document .MM_Time[0][2].values[0].prop = "left";if (ns5)document.MM_Time[0] [2].values[1] = new Array("18px", "23px", "28px","32px", "37px", "42px", "47px", "51px", "56px", "61px", "66px", "71px", "75px","80px", "85px");elsedocument.MM_Time[0][2].values[1] = newArray (18,23,28,32,37,42,47,51,56,61,66,71,75,80,85);document.MM_Time[0] [2].values[1].prop = "top";if (!ns4) {document.MM_Time[0][2].values [0].prop2 = "style";document.MM_Time[0][2].values[1].prop2 = "style";}document.MM_Time[0].lastFrame = 45;for (i=0; i<document.MM_Time.length; i++) {document.MM_Time[i].ID = null;document.MM_Time[i].curFrame = 0;document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;}}//--></script></head><body onLoad="MM_timelinePlay('Timeline1')"><div id="Layer1" style="position:absolute; left:21px; top:16px; width:192px;height:147px; z-index:1"><img src="1Tourism1.jpg" name="Image1"width="196" height="141"></div></body></html> SESSION 41 . Design a form as follows.<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><form name="form1"><table
  • 63. 63 | P a g e width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="23%">Your name</td><td width="77%"><input type="text" name="textfield"></td></tr><tr><td>Yiour Address</td><td><input type="text" name="textfield2"></td></tr><tr><td>&nbsp;</td><td><input type="text" name="textfield3"></td></tr><tr><td>Your Gender</td><td><input type="radio" name="radiobutton" value="radiobutton">Male<input type="radio" name="radiobutton" value="radiobutton">Female </td></tr><tr><td>Your Country</td><td><select name="select" size="1"><option>India</option><option>America</option><option>Canada< /option><option>Denmark</option><option>Egypt</option><option>France</ option><option>Germany</option><option>Hungry</option></select></td></ tr><tr><td>Your Opinion</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><textarea name="textarea" cols="50"></textarea></td></tr><tr><td>&nbsp;</td><td><input type="reset" name="Reset" value="Reset"><input type="submit" name="Submit2" value="Submit"></td></tr></table></form></body></html> SESSION 21 . Insert an image in a page. In the browser, when you take cursor over it, another image emerges under it and when you click on the second image, it takes you toexercise 2 of session 1.<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
  • 64. 64 | P a g e 1"><script language="JavaScript" type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0var i,x,a=document.MM_sr; for (i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)x.src=x.oSrc;} function MM_preloadImages() { //v3.0var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01var p,i,x; if(!d) d=document; if((p=n.indexOf("?")) >0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;! x&&i<d.forms.length;i++) x=d.forms[i][n];for(i=0;! x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers [i].document);if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;for(i=0;i< (a.length-2);i+=3)if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++] =x; if(!x.oSrc)x.oSrc=x.src; x.src=a[i+2];}}//--></script></head><body onLoad="MM_preloadImages('animals7.JPG')"><a href="ex1session2.htm" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage ('Image1','','animals7.JPG',1)"><img src="12.jpg"name="Image1" width="218" height="140" border="0"></a></body></html>