Scribd
Upload
84 views31 pages

Lab Programs

1. The document describes how to create a webpage about Mahatma Gandhi using formatting tools in HTML like headings, fonts, images, etc. It provides the HTML code to do so. 2. It explains how to create a webpage with hyperlinks to demonstrate linking between pages about different continents and countries. HTML code is given to create pages for continents and individual countries that link between each other. 3. It shows how to create an image map of India with hotspots linking to pages about different states using coordinates. HTML code and pages for some states like Andhra Pradesh, Karnataka, Kerala, and Tamil Nadu are provided. 4. It begins describing how to create a webpage about Ch

Uploaded by

ShaikYusaf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
84 views31 pages

Lab Programs

1. The document describes how to create a webpage about Mahatma Gandhi using formatting tools in HTML like headings, fonts, images, etc. It provides the HTML code to do so. 2. It explains how to create a webpage with hyperlinks to demonstrate linking between pages about different continents and countries. HTML code is given to create pages for continents and individual countries that link between each other. 3. It shows how to create an image map of India with hotspots linking to pages about different states using coordinates. HTML code and pages for some states like Andhra Pradesh, Karnataka, Kerala, and Tamil Nadu are provided. 4. It begins describing how to create a webpage about Ch

Uploaded by

ShaikYusaf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 31

Final B.

com

1. Mahatma Gandhi
Problem Definition:
Design a webpage exploring Mahatma Gandhi’s biography using text formatting, paragraph
formatting, headings, horizontal rulers, font and colors, images
Aim:
To design a webpage about Mahatma Gandhi by using text formatting, paragraph formatting,
headings, horizontal rulers, font and colors, images etc.,
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code
Step 3: Save the document by selecting File - Save and save the document as ‘Gandhi.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
Gandhi.html
<html>
<head>
<title>Mahatma Gandhiji</title>
</head>
<body>
<center>
<font size="7" color="blue">Mahatma Gandhi</font>
<br>
<font size="5" color="orange">The Father of the Nation<br>
<img src="Gandhiji.jpg" height="40%" width="20%">
</font>
<br>
<font size="5" face="Monotype Corsiva" color="Green">
My Life is My Message</font>
<br>
<img src="Signature.jpg">
</center>
<font color="red">
<h2>Life History</h2>
</font>
<hr>
<font size="4" color="blue">

1
Final B.com

Mohandas Karamchand Gandhi was born on 2nd October 1869 in Porbandar. His father name is
Karmachand Gandhi and
His mother name is Putilibai.

Mohandas Karamchand Gandhi was the pre-eminent political and idelogical leader of India during the
Indian independence
movement.

He pioneered satyagraha. In India he is also called Bapu,


He is officially honoured in India as the Father of the Nation
his birthday, 2nd October is commemorated there as Gandhi Jayanthi,
a national holiday, and worldwide as the International Day of Non-violence.
Gandhi was assassinated on 30 Januray 1948 by Nathuram Godse.
</font>
<hr>
<font color="brown">
<h2>Bio-Data</h2>
</font>
<hr>
<font size="4" color="green">
Name: Mohandas Karamchand Gandhi<br>
Parents: Karamchand Gandhi (Father), Putilibai Gandhi (Mother)<br>
Wife: Kasturba Gandhi<br>
Children: Harilal, Manilal, Ramdas, Devdas<br>
Born: 2nd October 1869<br>
Born Place: Porbandar, Bombay Presidency, British India<br>
Died: 30 January 1948(aged 78)<br>
Place: New Delhi, Union of India<br>
Education: University College London, University of London<br>
</font>
<hr>
</body>
</html>
2. Hyperlinks
Problem Definition:
Design a webpage to demonstrate the anchor tag to describe various continents
Aim:
To create html document that has headings, paragraphs and hypertext to link another html
document or a webpage
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using

2
Final B.com

Start - Programs - Accessories - Notepad


(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code
Step 3: Save the document by selecting File - Save and save the documents with appropriate names
with ‘.html’ extension
Step 4: Launch the web browser by double clicking the saved document.

Program:
Continents.html
<html>
<head>
<title>Continents</title>
</head>
<body>
<font size="8">Continents</font>
<br><br><font size="5">Some Continents:<br>
1.<a href="Asia.html">Asia</a>
<br>
2.<a href="Africa.html">Africa</a>
<br>
3.<a href="Australia.html">Australia</a>
<br>
</font>
</body></html>

Asia.html
<html>
<head>
<title>Asia</title>
</head>
<body>
<font size="8">Asia Continent</font>
<br><br><font size="5"><i>Some Countries in Asia</i> <br>
1.<a href="India.html">India</a>
<br>
2.<a href="Srilanka.html">Srilanka</a>
<br>
3.<a href="China.html">China</a>
<br>
<p align=center><a href="Continents.html">Back</a></p>
</font>
</body>
</html>

3
Final B.com

India.html
<html>
<head>
<title>About India</title>
</head>
<body>
<p align="center">
<font size="7">Details of India</font>
<br><br>
<font size="5">
Area:3.2 million square kilometeres<br>
India is the sixth largest country in the world<br>and is approxiametly one third the size of
China<br>Population: 126 crores people <br> India is the 2nd most populated country in the world
<br>
<br>
<br>
<a href="Asia.html">Back</a>
</font>
</p>
</body>
</html>

Srilanka.html
<html>
<head>
<title>About Srilanka</title>
</head>
<body>
<p align="center">
<font size="7">Details of Srilanka</font>
<br><br>
<font size="5">
Area:25,332 square miles<br>
Sri Lanka, officially the Democratic Socialist Republic <br> Sri Lanka is an island country in the
northern Indian Ocean of the southeast coast of the<br> Indian subcontinent in South Asia
<br>
<br>
<a href="Asia.html">Back</a>
</font>
</p>
</body>
</html>

China.html
<html>

4
Final B.com

<head>
<title>About China</title>
</head>
<body>
<p align="center">
<font size="7">Details of China</font>
<br><br>
<font size="5">
Area:9596960 square kilometers<br>
Population:1,331,460,000 persons<br>
<br>
<br>
<a href="Asia.html">Back</a>
</font>
</p>
</body>
</html>
3. India Image Map
Problem Definition:
Design a webpage which shows map of India and by using hot spots display corresponding
html document
Aim:
To create image hotspots using image map
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code
Step 3: Save the document by selecting File - Save and save the document as ‘Indiamap.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
Indiamap.html
<HTML>
<HEAD>
<TITLE>Image Map</TITLE>
</HEAD>
<BODY>
<MAP id = "picture">
<AREA href = "TamilNadu.html" shape = "circle"
coords = "170, 490, 30" alt = "Tamil Nadu" />

5
Final B.com

<AREA href = "Karnataka.html" shape = "rect"


coords = "115, 390, 150, 450" alt = "Karnataka" />
<AREA href = "Andhrapradesh.html" shape = "circle"
coords = "200,410,15" alt = "Andhra Pradesh" />
<AREA href = "Kerala.html" shape = "poly"
coords = "115, 455, 160, 470, 140, 485, 150, 505, 150,
530, 135, 500, 115, 455" alt = "Kerala" />
</MAP>
<IMG src = "India.Jpg" alt = "India" usemap = "#picture" />
</BODY>
</HTML>

Andhrapradesh.html
<html>
<head>
<title>Andhrapradesh</title>
</head>
<body>
<b><u><font size="6"><p align="center">Andhra Pradesh</p></b></u>
<p align="center">
Andhra Pradesh is a state located in Southern India.
<br>It shares its boundaries with Chhattisgarh, Maharashtra, Telangana and Odisha to the north, Tamil
Nadu
<br> in the south, the Bay of Bengal to the east, and Karnataka in the west.
<br> Andhra Pradesh is the fourth largest state by
area and the fifth largest state by population in India
<br><br>
<a href="Indiamap.html">Home</a>
</p>
</body>
</html>

Karnataka.html
<html>
<head>
<title>Karnataka</title>
</head>
<body>
<b><u><font size="6"><p align="center">About Karnataka</p></b></u>
<p align="center">
Karnataka is the eighth biggest state in India.

6
Final B.com

<br>The capital of Karnataka is Bangalore or Bengaluru which is dubbed as the information


technology capital of India
<br><br>
<a href="Indiamap.html">Home</a>
</p>
</body>
</html>

Kerala.html
<html>
<head>
<title>Kerala</title>
</head>
<body>
<b><u><font size="6"><p align="center">About Kerala</p></b></u>
<p align="center">
The state has 14 districts which are further divided into 21 Revenue divisions Taluks and
Revenue Villages
<br>Thiruvananthapuram is the capital of the state, while other important cities include Kannur,
Kozhikode, Thrissur, Kolam, etc
<br><br>
<a href="Indiamap.html">Home</a>
</p>
</body>
</html>

Tamilnadu.html
<html>
<head>
<title>Tamilnadu</title>
</head>
<body>
<b><u><font size="6"><p align="center">About Tamilnadu</p></b></u>
<p align="center">
Tamil Nadu is the most urbanized state in India.
<br>The key industries of the state are heavy engineering and manufacturing-based companies and
textiles
<br><br>
<a href="Indiamap.html">Home</a>
</p>
</body>
</html>

7
Final B.com

4. Chittoor District
Problem Definition:
Design a webpage which shows map of India and by using hot spots display corresponding
html document
Aim:
To create image hotspots using image map
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code
Step 3: Save the document by selecting File - Save and save the document as ‘Chittoor.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:

Chittoor.html
<html>
<head>
<title> ABOUT CHITTOOR DISTRICT</title>
</head>
<body>
<center>
<font size="7" color="red">
CHITTOOR DISRICT
</font>
</center>
<br>
<br>
<p>
<font size="5" color="Brown">
CHITTOOR DISRICT
</font>
<br>
<hr color="green">
<font size="3" color="blue">
chittoor district is a town and district of india's Andhra Pradesh State. The district has a population of
3,735,000 (2001 census).
chittoor ditrict is famous for the Tirupathi, Kanipakam and sri Kalahasti temples.
it lies in the Poini River Valley of southernmost Andhra Pradesh, on the Banglore-Chennai highway.

8
Final B.com

it is a marketcenter for mangoes, grain, sugarcane, and peanuts. its industries include oilseed and rice
milling.
it is also home to Nutrine Confectionaries, a major chocolate, Granate industries and mango pulp
manufacture in india.
<hr color="brown">
<br>
<font size="5" color="orange">
Geography
</font>
<br>
<hr color="green">
<font size="3" color="red">

The district is bounded by ananthapur district to the northwest, Kadapa district to the north, nellore
district to the north east, Krishnagiri district, vellore district and tiruvallur district of tamil nadu state to
the south, and Kolar district of Karnataka state to the west.Chittoor ditrict lies extreme south of the
Andhra Pradesh State.

Approximately between 120 37 '- 140 8 'north lattitudes and 120 37 '-140 8 ' east longitudes.
30% of total land area is covered by forest in the district.

The district has an area of 15,359 kilometer square and population of 3,745,875 of which 21.65% for
urban as of 2001.

<hr color="brown">
<br>
<font size="5" color="blue">
Formation
</font>
<br>
<hr color="green">
<font size="3" color="green">
Chittoor District was formed on 1 April 1911, diving the then cuddapah, Nellore nad North Arcot
district as a result of recommendations of pataskar commission.
Telugu is the native language in the district.
<br>
<hr color="brown">
</front>
</body>
</html>
5. List Types
Problem Definition:

9
Final B.com

Design a webpage to demonstrate list types


Aim:
To create html document to demonstrate list types
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code
Step 3: Save the document by selecting File - Save and save the document as ‘List.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
List.html
<html>
<head>
<title> List Programme</title>
</head>
<body>
<h1><font face="Century Gothic" color=Blue>Ordered List ::</font></h1>
<font size="4" color="orange">

Who can use solar water heater? <br>


Anybody with a regular hot water demand.
<ol>
<li> In house for domestic purpose (Cooking, bathing, washing) </li>
<li> For engineering/Chemical industries, dairies, textiles/leather processing plants.</li>
<li> For hotels, hospitals, guest house and industrial canteens.</li>
<li> For food processing plants and processing application.</li>
</ol>
</font>
<h1><font face="Bodoni MT">Un-Ordered List::</font></h1>
<font size="4" color="orange">
Who can use soloar water heater? <br>
Anybody with a regular hot water demand.
<ul>
<li> In house for domestic purpose (Cooking, bathing, washing)</li>
<li> For engineering/Chemical industries, dairies, textiles/leather processing plants.</li>
<li> For hotels, hospitals, guest house and industrial canteens.</li>
<li> For food processing plants and processing applications.</li>
</ul>

10
Final B.com

</body>
</html>
6. Biodata
Problem Definition:
Design a html document to display your bio-data using tables in following format

Aim:
To create html document that illustrating table tags
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code
Step 3: Save the document by selecting File - Save and save the document as ‘Biodata.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
<html>
<head><title>Biodata</title>
</head>
<body>
<center><h1>BIO-DATA</h1>
<table border="3" cellspacing="10">
<tr>
<th>NAME</th>
<td>YUSAF</td>
</tr>
<tr>
<th>FATHER'S NAME</th>

11
Final B.com

<td>MOHAMMED</td>
</tr>
<tr>
<th>GENDER</th>
<td>Male</td>
</tr>
<tr>
<th>NATIONALITY</th>
<td>Indian</td>
</tr>
<tr>
<th>ADDRESS</th>
<td><pre>12344-1,
Kummara Street,
Chittoor
Pin - 517001</pre></td>
</tr>
<tr>
<th>PHONE/FAX</th>
<td>PHONE(RES):22222<br>
PHONE(OFF):22123<br>
PHONE(RES):22222<br>
<br>
FAX(OFFICE):23878<br>
FAX(RES): 298993</td>
</tr>
<tr>
<th colspan="4">Educational Qualifications
</tr>
<tr>
<th>Degree\Course</th>
<th>University\Board</th>
<th>Marks Percentage</th>
<th>Year</th>
</tr>
<tr>
<th>SSC</th>
<td>Board of Secondary Education</td>
<td>88</td>
<td>2004</td>
</tr>
<tr>

12
Final B.com

<th>INTERMEDIATE</th>
<td>Board of Intermediate Education</td>
<td>88</td>
<td>2004</td>
</tr>
</table>
</body>
</html>
7. Frames
Problem Definition:
Design a html document explaining html frames
Aim:
To develop a webpage that contains html frames(horizontal and vertical frameset)
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code
Step 3: Save the document by selecting File - Save and save the documents with appropriate names
with ‘.html’ extension
Step 4: Launch the web browser by double clicking the saved document.

Program:

Frameshorizontal.html
<html>
<head>
<title>Frame set</title>
</head>
<frameset rows="60%,60%,60%">
<frame src="Andhrapradesh.html" noresize>
<frame src="Karnataka.html" noresize>
<frame src="Tamilnadu.html" noresize>
</frameset>
</html>

Framesvertical.html
<html>
<head>
<title>Frame set</title>

13
Final B.com

</head>
<frameset cols="60%,60%,60%">
<frame src="Andhrapradesh.html" noresize>
<frame src="Karnataka.html" noresize>
<frame src="Tamilnadu.html" noresize>
</frameset>
</html>

Andhrapradesh.html
<html>
<head>
<title>Andhrapradesh</title>
</head>
<body>
<b><u><font size="4"><p align="center">Andhra Pradesh</p></b></u>
<p align="center">
Andhra Pradesh is a state located in Southern India.
<br>It shares its boundaries with Chhattisgarh, Maharashtra, Telangana and Odisha to the north, Tamil
Nadu
<br> in the south, the Bay of Bengal to the east, and Karnataka in the west.
<br> Andhra Pradesh is the fourth largest state by
area and the fifth largest state by population in India
</p>
</body>
</html>

Karnataka.html
<html>
<head>
<title>Karnataka</title>
</head>
<body>
<b><u><font size="4"><p align="center">Karnataka</p></b></u>
<p align="center">
Karnataka is the eighth biggest state in India.
<br>The capital of Karnataka is Bangalore or Bengaluru which is dubbed as the information
technology capital of India
</p>
</body>
</html>

Tamilnadu.html

14
Final B.com

<html>
<head>
<title>Tamilnadu</title>
</head>
<body>
<b><u><font size="4"><p align="center">Tamilnadu</p></b></u>
<p align="center">
Tamil Nadu is the most urbanized state in India.
<br>The key industries of the state are heavy engineering and manufacturing-based companies and
textiles

</p>
</body>
</html>
8.E-Mail ID Creation
Problem Definition:
Design a html document to display the registration form for E-Mail id creation
Aim:
To develop a webpage for E-Mail id registration form using form objects
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code
Step 3: Save the document by selecting File - Save and save the documents as ‘E-Mail.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
E-Mail.html
<html>
<head>
<title>Email ID Creation</title>
</head>
<body bgcolor="oldlace" text=maroon>
<form name=emailform>
<center>
<font size=6 face="Maiandra GD" color=purple>
CREATION OF E-MAIL ID</font>
<hr color=pink>
<table style="font-weight:bold;font-size:17px" color="#ffffcc" cellpadding=5 cellspacing=6>

15
Final B.com

<tr>
<td>First Name:</td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="t2"></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type="radio" name=gender>Male
<input type="radio" name=gender>Female</td>
</tr>
<tr>
<td>E-Mail ID:</td>
<td><input type="text" name="e1">@vdc.com</td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="p1"></td>
</tr>
<tr>
<td>Re-type Password:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>Select Country:</td>
<td><select style="width:150px">
<option selected>India</option>
<option>Usa</option>
<option>Switzerland</option>
<option>Canada</option>
</select>
</td>
</tr>
<tr>
<td>Zipcode:</td>
<td><input type="text" name="z1"></td>
</tr>
<tr>
<td>D.O.B</td>
<th>Date:<select name="DOB" size="1">

16
Final B.com

<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<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</option>
<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="DOB" size="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>

17
Final B.com

<option>10</option>
<option>11</option>
<option>12</option>
</select>
Year <select name="DOB" size="1">
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
</select></th>
</tr>
<tr>
<th>Languages Known:</th>

18
Final B.com

<th>English<input type="checkbox" >


Hindi<input type="checkbox" >
Telugu<input type="checkbox">
Tamil<input type="checkbox"></th>
</tr>
<tr>
<th>Address</th>
<td><textarea name="tarea" cols="20"
rows="3"></textarea></td>
</tr>
<tr>
<th><input type="Submit" value="Submit"></th>
<th> <input type="Reset" value="Reset"></th>
</tr>
</table>
</center>
</form>
</body>
</html>
9.Reverse a Number
Problem Definition:
Write a vbscript program to reverse a four digit number by taking input from a user
Aim:
To develop a vbscript programs to reverse the four digit number
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code with the script
Step 3: Save the document by selecting File - Save and save the documents as ‘Reverse.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
<html>
<head>
<title>Reverse order</title>
</head>
<body>
<script language="vbscript">
dim num,rev

19
Final B.com

num=inputbox("Enter a number")
if len(num)=4 then
rev=rev*10+num mod 10
num=left(num,3)
rev=rev*10+num mod 10
num=num/10
num=left(num,2)
rev=rev*10+num mod 10
num=num/10
num=left(num,1)
rev=rev*10+num mod 10
msgbox "Reverse Order of the number is "&rev
else
msgbox "Invalid number"
end if
</script>
</body>
</html>
10.Airticket Reservation
Problem Definition:
Write a vbscript program using radio buttons and decision structures for flight ticket booking
by using following fares

Airways Fare
Indian Airlines 7,800
Alliance Airways 7,000
Jet Airways 7,300
Others 7,500
Aim:
To develop a vbscript programs for flight ticket booking service
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code with the script
Step 3: Save the document by selecting File - Save and save the documents as ‘Airticket.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:

20
Final B.com

<html>
<head>
<title>Airticket</title>
<script language="vbscript">
sub b1_onclick
if document.myform.r1(0).checked then
msgbox "The Fare per head
is..Rs."&document.myform.r1(0).value,vbinformation,"Indian Airlines"
end if
if document.myform.r1(1).checked then
msgbox "The Fare per head
is..Rs."&document.myform.r1(1).value,vbinformation,"Alliance Air"
end if
if document.myform.r1(2).checked then
msgbox "The Fare per head is..Rs."&document.myform.r1(2).value,vbinformation,"Jet
Airways"
end if
if document.myform.r1(3).checked then
msgbox "The Fare per head
is..Rs."&document.myform.r1(3).value,vbinformation,"Other Airlines"
end if
end sub
</script>
</head>
<body bgcolor="yellow">
<h1 align="center"><font color="blue">Welcome to Robin Travels</font></h1>
<p><h3>Select the Airline you wish to book ticket form <i>chennai</i> to <i>New
Delhi</i>.</h3></p>
<form name="myform">
<input type="radio" name="r1" value="7800"><b>Indian Airlines</b><br>
<input type="radio" name="r1" value="7000"><b>Aliance Air</b><br>
<input type="radio" name="r1" value="7300"><b>Jet Airways</b><br>
<input type="radio" name="r1" value="7500"><b>Others</b><br>
<input type="button" name="b1" value="Book">
</form>
</body>
</html>

11. Form Validation


Problem Definition:
Write a vbscript program which accepts user name, age and E-mail using forms in html and
validate it using scripts

21
Final B.com

Aim:
To develop a vbscript programs for Form Validation
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code with the script
Step 3: Save the document by selecting File - Save and save the documents as ‘Fomvalid.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
<html>
<head>
<script language = "vbscript">
sub cmdUserInfo_onclick
if len(form.txtName.value)<2 or IsNumeric(form.txtName.value)then
msgbox("Type a valid name")
form.txtName.focus
elseif len(form.txtAge.value) <2 or Not IsNumeric(form.txtAge.value) then
msgbox("Type a valid age")
elseif form.txtEmail.value="" then
msgbox("Enter a valid email")
form.txtEmail.focus
elseif instr(form.txtEmail.value,"@") = 0 then
msgbox("Type a valid email")
form.txtEmail.focus
else
msgbox"Welcome "&document.form.txtName.value&"..!"
d1.style.visibility="visible"
dt1.value=document.form.txtName.value
dt2.value=document.form.txtAge.value
dt3.value=document.form.txtEmail.value
end if
end sub
</script>
</head>
<body bgColor=#ff9966>
<center>
<h1>Welcome to <font face=impact>MYSPACE.COM</font></h1>
<h2>Chittoor</h2>

22
Final B.com

<hr>
<form name = "form">
<font size=20 face="monotype corsiva" color=blue>
<table border=5 style="font-size:30">
<tr>
<td>Name:</td><td><input type = "text"name = "txtName"></td>
</tr>
<tr>
<td>Age:</td><td><input type = "text" name = "txtAge"></td>
</tr>
<tr>
<td>Email:</td><td><input type = "text"name ="txtEmail"></td>
</tr>
<tr>
<td><input type = "button" name = "cmdUserInfo" value = "Submit"></td>
<td><input type = "reset" value = "Clear"></td>
</tr>
</table>
</font>
* indicates a required field
</form>
<center>
<div id=d1 align=center style="VISIBILITY:hidden">
<strong>The Data you entered is......</strong>
<table border=1>
<tr>
<td>Name:</td><td><input name=dt1></td>
</tr>
<tr>
<td>Age:</td><td><input name=dt2></td>
</tr>
<tr>
<td>Email:</td><td><input name=dt3></td>
</tr>
</table>
</div>
</body>
</html>

23
Final B.com

12. Current Time and Week day


Problem Definition:
Write a vbscript program to display current time and day’s week like Sunday, Monday etc and
display different images for each corresponding days
Aim:
To develop a vbscript programs to display current days’ week and time and different images for
each day
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code with the script
Step 3: Save the document by selecting File - Save and save the documents as ‘CurrentDT.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
CurrentDT.html
<html>
<head>
<title>Displaying Week with Images</title>
</head>
<body bgcolor=#ffccff onload="f1()">
<center><strong><font color=maroon size=6>Displaying Images according to
Weekday</font></strong>
<hr size=4 color=navy>
<p align=center>
<script language="vbscript">
dim n
document.write("<font size=4>"&"Today is"&"</font>")&"&nbsp;"
document.write("<font size=4
color=blue>"&WeekDayName(WeekDay(DateValue(Now())))&"</font>")
n=weekday(datevalue(now()))
function f1()
select case n
case 0
myform.img.src="W.jpg"
case 1
myform.img.src="W.jpg"
case 2
myform.img.src="W.jpg"

24
Final B.com

case 3
myform.img.src="W.jpg"
case 4
myform.img.src="W.jpg"
case 5
myform.img.src="W.jpg"
case 6
myform.img.src="W.jpg"
end select
end function
</script>
</p>
<p>
<form name=myform>
<img id=img height=200 widht=250 name=image><br>
</form>
</p>
</center>
</body>
</html>
13. Student Mark List
Problem Definition:
Write a vbscript program for a school to display student’s marks, total, percentage and Grade
Aim:
To write a vbscript for html page using decision structures.
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code with the script
Step 3: Save the document by selecting File - Save and save the documents as ‘Student.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
Student.html
<html>
<head>
<title>Student Result</title>
<script language="vbscript">
sub c1_onclick

25
Final B.com

t=cint(f1.t2.value)
h=cint(f1.t3.value)
e=cint(f1.t4.value)
m=cint(f1.t5.value)
sc=cint(f1.t6.value)
so=cint(f1.t7.value)
if t<35 or h<35 or e<35 or m<35 or sc<35 or so<35 then
str="Failed"
total=t+h+e+m+sc+so
avg=total/6
else
total=t+h+e+m+sc+so
avg=total/6
if avg>=75 then
str="DISTINCTION"
elseif avg>=60 then
str="FIRST CLASS"
elseif avg>=50 then
str="SECOND CLASS"
else
str="THIRD CLASS"
end if
end if
f1.t8.value="Name:"&f1.t1.value&"Total:"&total&"Percentage:"&avg&"Result:"&str
end sub
sub c2_onclick
f1.t1.value=" "
f1.t2.value=" "
f1.t3.value=" "
f1.t4.value=" "
f1.t5.value=" "
f1.t6.value=" "
f1.t7.value=" "
f1.t8.value=" "
end sub
</script>
</head>
<body bgcolor=#ccffcc>
<form name=f1>
<font size=7 face="monotype corsiva" color=blue>
<u><center><b style="color:#330000">Student Results</u>
</font>

26
Final B.com

<table border=0 style="font-size:25px">


<tr>
<td>Name</td>
<td><input name=t1>
</tr>
<tr>
<td>Telugu</td>
<td><input name=t2>
</tr>
<tr>
<td>Hindi</td>
<td><input name=t3>
</tr>
<tr>
<td>English</td>
<td><input name=t4>
</tr>
<tr>
<td>Maths</td>
<td><input name=t5>
</tr>
<tr>
<td>Science</td>
<td><input name=t6>
</tr>
<tr>
<td>Social</td>
<td><input name=t7>
</tr>
<tr>
<td colspan=2>Your Result is</td>
<td><textarea style="font-weight:bold;font-size:20px;width:280px;height:144px;
font name=arial" name=t8 rows=6 cols=20></textarea></td>
</tr>
<tr>
<td><input type=button name=c1 value="Result" style="font-size:20px;width:200px"></td>
<td><input type=button name=c2 value="Clear" style="font-size:20px;width:200px"></td>
</body>
</html>
14. Mouse Rollover
Problem Definition:
Design a webpage that demonstrates the mouse rollover effect

27
Final B.com

Aim:
To develop a vbscript demonstrating the mouse rollover effect.
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code with the script
Step 3: Save the document by selecting File - Save and save the documents as ‘Mouseroll.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
Mouseroll.html
<html>
<head>
<title>Example on mouse over event</title>
<script language=vbscript>
sub f1_onmouseover
f1.style.fontweight="bold"
f1.style.backgroundColor="red"
f1.style.color="white"
f1.style.filter="shadow(color=red)"
f1.style.fontFamily="Impact"
end sub
sub f1_onmouseout
f1.style.fontweight="normal"
f1.style.backgroundColor="lightgreen"
f1.style.color="Black"
f1.style.filter="shadow(color=red)"
f1.style.fontFamily="Times new roman"
end sub

</script>
</head>
<body>
<center>
<p>
<form name=f1>
<font size=7>
MOUSE OVER EVENT EXAMPLE
</font>

28
Final B.com

</form>
</p>
</center>
</body>
</html>

15. Mouse Events


Problem Definition:
Write a vbscript program to demonstrate the mouse events in a webpage
Aim:
To develop a vbscript demonstrating the mouse events.
Procedure:
Step 1: Starting Notepad
 Invoke notepad by using
Start - Programs - Accessories - Notepad
(or)
- Select Start- Run and type notepad and click on ‘ok’
Step 2: Type the code with the script
Step 3: Save the document by selecting File - Save and save the documents as ‘Mousevents.html’
Step 4: Launch the web browser by double clicking the saved document.

Program:
Mouseevents.html
<html>
<head>
<title>Mouse Events</title>
<script language="vbscript">
function AlertMsg
Msgbox("Mouse is Out of the textbox !")
End function
function b1_onclick
msgbox("Button Clicked Event Fired")
end function
sub b2_onmouseover
msgbox "Mouse over Event Fired"
end sub
sub b3_onmouseout
msgbox "Mouse out Event Fired"

29
Final B.com

end sub
sub b4_onmousedown
msgbox "Mouse Down Event Fired"
end sub
sub b5_onmouseup
msgbox "Mouse Up Event Fired"
end sub
sub b6_onmousemove
msgbox "Mouse Move Event Fired"
end sub
sub b7_ondblclick
msgbox "Double Click Event Fired"
end sub
</script>
</head>
<body bgcolor=aquamarine>
<center>
<font face=tahoma size=5><strong><font color=#ff6600 size=6>VBScript Mouse
Events</font></strong></font>
</center>
<form name=form1>
<table border=1 align=center>
<tr>
<td><strong>Onclick Event</strong></td>
<td><input type="button" value="Hello!" name="b1"></td>
</tr>
<tr>
<td><strong>OnMouseOver Event</strong></td>
<td><input type="button" value="Mouse Over!" name="b2"></td>
</tr>
<tr>
<td><strong>OnMouseOut Event</strong></td>
<td><input type="button" value="Mouse out!" name="b3"></td>
</tr>
<tr>
<td><strong>OnMouseDown Event</strong></td>
<td><input type="button" value="Mouse Down!" name="b4"></td>
</tr>
<tr>
<td><strong>OnMouseUp Event</strong></td>
<td><input type="button" value="Mouse Up!" name="b5"></td>
</tr>

30
Final B.com

<tr>
<td><strong>OnMouseMouse Event</strong></td>
<td><input type="button" value="Mouse Move!" name="b6"></td>
</tr>
<tr>
<td><strong>DbClick Event</strong></td>
<td><input type="button" value="Dbl Click!" name="b7"></td>
</tr>
</table>
</form>
</body>
</html>

31

You might also like