Scribd
Upload
138 views

WT Lab Manual

The document describes creating a webpage with an image map to display information about different states in India when clicking on hotspots. It includes: 1. Creating an HTML page with two frames - one containing a map of India image and the other for displaying information. 2. Adding hotspots to five states in the India map image. 3. Creating separate HTML pages for each state with its image and details. 4. Clicking a hotspot opens the corresponding state page in the same tab.

Uploaded by

Benitaarun
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
138 views

WT Lab Manual

The document describes creating a webpage with an image map to display information about different states in India when clicking on hotspots. It includes: 1. Creating an HTML page with two frames - one containing a map of India image and the other for displaying information. 2. Adding hotspots to five states in the India map image. 3. Creating separate HTML pages for each state with its image and details. 4. Clicking a hotspot opens the corresponding state page in the same tab.

Uploaded by

Benitaarun
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 23

Ex.

No: 1 AIM:

WEB PAGE CREATION USING IMAGE MAP

To create a webpage with the following using HTML: a. Embed an image in a webpage. b. Show all the related information when the hotspots are clicked.

ALGORITHM: 1. Create an html file with two frames. One frame containing the map of India and the other tag containing information about India. This will serve as the main page. 2. Create hotspots for five states in the image of India. 3. Create a separate html page for each state containing an image of the state and information on the state. 4. When the hotspot for a particular state is clicked, the corresponding html page opens in the same tab.

PROGRAM: IndiaMap.html <html> <head> <title>INDIA MAP</title> </head> <body> <img src="images/India_map.jpg" usemap="#IndiaStates" />> <map name="IndiaStates"> <area shape="circle" coords="180,480,25" href="Tamil.html" alt="Tamil" target="_parent"/> <area shape="circle" coords="50,280,35" href="Gujarat.html" alt="Gujarat" target="_parent"/> <area shape="circle" coords="200,380,45" href="Andra.html" alt="Andra" target="_parent"/> </map> </body> </html> Andra.html <html> <head> <title>ANDHRA PRADESH</title> <head> <body> <center><h1>ANDHRA PRADESH</h1></center> <table border="1"> <tr> <td><img src="images/andhra.jpg"/></td> <td> <ul><li>It is India's fourth largest state by area and fifth largest by population. </li> <li>Its capital and largest city is Hyderabad. </li> <li>The State has the second-longest coastline 972 km (604 mi) among all the States in India. </li> <li>The official language of Andhra Pradesh is Telugu, </li> <li>Other languages spoken in Andhra Pradesh are Kannada, Urdu, English, Tamil and Hindi. </li></ul></td> </tr> </table> <a href="India.html">Main</a> </body> </html> Gujarat.html <html> <head> <title>GUJARAT</title> <head> <body> <center><h1>GUJARAT</h1></center> <table border="1">

<tr> <td><img src="images/gujarat.jpg"/></td> <td><ul><li>Its capital is Gandhinagar, while its largest city is Ahmedabad.</li> <li>Gujarat is home to the Gujarati-speaking people of India. </li> <li>The state encompasses major sites of the ancient Indus Valley Civilization, such as Lothal and Dholavira.</li> <li>Lothal, one of the world's first ports, is located in Gujarat.</li> <li>Mohandas Gandhi, considered India's "father of the nation",was a Gujarati who led the Indian Independence Movement against the British colonial rule.</li> <li>Even today, Gujarat has one of the fastest growing economies in India</li></ul></td> </tr> </table> <a href="India.html">Main</a> </body> </html> Tamil.html <html> <head> <title>TAMIL NADU</title> <head> <body> <center><h1>TAMIL NADU</h1></center> <table border="1"> <tr> <td><img src="images/tamil1.jpg"/></td> <td><ul><li>Its capital and largest city is Chennai.</li> <li>Tamil Nadu lies in the southernmost part of the Indian Peninsula </li> <li>Tamil Nadu is the eleventh largest state in India by area (about the size of Greece).</li> <li>The seventh most populous state.</li> <li>It is the fifth largest contributor to India's GDP[4] and ranks tenth in Human Development Index as of 2006.</li> <li>Tamil Nadu is also the most urbanised state in India.</li> <li>The state has the highest number (10.56%) of business enterprises.</li> <li>Stands second in total employment (9.97%) in India,compared to the population share of about 6%.</li> </ul></td> </tr> </table> <a href="India.html">Main</a> </body> </html>

OUTPUT

RESULT: Thus to Embed an image in a webpage and to show all the related information when the hotspots are clicked was executed.

Ex.No: 2

WEBSITE CREATION USING CASCADING STYLE SHEET

AIM: To design the college website using cascading style sheets. ALGORITHM: 1. Create a simple HTML page. 2. Write internal CSS using <style> tag in the same page become internal CSS. 3. Create another CSS file using <style> tag with extension .css file, which becomes external CSS file. 4. Include the external CSS file in your file. 5. Find the style changes on your page.

PROGRAM: Main.html <HTML> <HEAD> <link rel="stylesheet"type="text/css"href="sample2.css"/> <style type="text/css"> font-style:bold; p { color:green; } h2 { color:#9999FF font-name:arial; font-size:20pt; } </style> <title>hello welcome</title> </HEAD><body><H1>DMI COLLEGE OF ENGINEERING</H1><p><b>About Us</b> <H3>Established in 1995, dmi college is co-educational institution, specializing in engineering and technology, plus specalized post-graduate program in computer applications and bussiness administration. The college is recognized as one of the out standing comprehensive colleges in chennai.DMI ENGINEERING COLLEGE</H3></P><H2> Our College Placement Details</H2><table border=/> <th>department</th> <th>students placed</th> <tr><td>CSE</td> <td>34</td></tr><tr><td>EEE</td><td>39</td></tr><tr><td>ECE</td> <td>37</td></tr><tr><td>CIVIL ENGINEERING</td><td>45</td></tr></table><br/><br/><br/> UNDER GRADUATE PROGRAMS <ol> <li>CSE</li> <li>ECE</li> <li>EEE</li> <li>CIVIL ENGINEERING</li> <li>IT</li> </ol> POST GRADUATE PROGRAMS </ol> <li>CSE</li> <li>IT</li> <li>APLLIED ELECTRONICS</li><ol> </body>

</HTML>

Sample2.css H1 { color:#CC6699; font-weight:bold; } H3 { color:#FF3366; font-style:italic; } table { background-color:#0066FF }

OUTPUT:

RESULT: Thus the college website has been designed using cascading style sheets was executed.

Ex.No: 3 AIM

FORM VALIDATION USING JAVA SCRIPT

To design a webpage to validate a form using javascript.

ALGORITHM 1. Design a page for signup form with rich user interface. 2. Write the java script function to validate all mandatory fields on your web page. 3. Validation should be done after the submit operation. 4. Use appropriate tags to display the contents. 5. Make sure the page is working efficiently.

PROGRAM: Signup.html <html> <head> <title>Student Registration Form</title> <script type="text/javascript"> <!-function validate() { if(document.signup.fname.value=="") { alert("Please Enter First Name!"); return false; } if(document.signup.lname.value=="") { alert("Please Enter Last Name!"); return false; } if(document.signup.uname.value=="") { alert("Please Enter User Name!"); return false; } if(document.signup.pword1.value=="") { alert("Please Enter Password!"); return false; } if(document.signup.pword1.value.length<6) { alert("Please enter min 6 characters!"); return false; } if(document.signup.pword2.value=="") { alert("Please Enter Password again!"); return false; } if(document.signup.pword2.value!=document.signup.pword1.value) { alert("Password is mismatch. Re-enter password!"); return false; } alert("Details Entered Successfully"); fname=document.signup.fname.value;

Lname=document.signup.lname.value; Uname=document.signup.uname.value; Country=document.signup.country.value; email=document.signup.aemail.value display(); } function display() { document.writeln('<h2>'+"Details Entered..."+'</h2>'); document.writeln("First Name: "+ fname+'<br>'); document.writeln("Last Name :"+Lname+'<br>'); document.writeln("Username :"+Uname+'<br>'); document.writeln("Country :"+Country+'<br>'); document.writeln("Email :"+email); } --> </script> </head> <body align="center" bgcolor="grey" > <table width="100%" height="100%"> <td colspan="1" bgcolor="#FFFFFF" width="70%" height="100%"> <h1 align="center"><font color="#0066FF">SMail</font></h1> <h2 align="center"><font color="#0066FF">New User Signup Form</font></h2> <form name="signup" onSubmit="return validate()"> <p>&nbsp;&nbsp;*First Name:<input type="text" name="fname" size="20"> &nbsp;&nbsp;*Last Name:<input type="text" name="lname" size="20"> </p> <p style=" border:">&nbsp;&nbsp;*User Name:<input type="text" name="uname" size="20">@smail.com</p> <p style=" border:">&nbsp;&nbsp;*Password :&nbsp;<input type="password" name="pword1">(min 6 characters)</p> <p style=" border:">&nbsp;&nbsp;*Confirm Password:<input type="password" name="pword2" size="20"></p> <p>&nbsp;&nbsp;Gender : <input type="radio" name="gen" value="male">Male <input type="radio" name="gen" value="female">Female </p> <p>&nbsp;&nbsp;Country: <select name="country"> <option selected>Select Country</option> <option name="country" value="india">India</option> <option name="country" value="russia">Russia</option> <option name="country" value="france">France</option> <option name="country" value="italy">Italy</option> </select> </p> <p>&nbsp;&nbsp;Language Known:<br/> &nbsp;&nbsp;<input type="checkbox" name="lang" value="tamil">Tamil<br/> &nbsp;&nbsp;<input type="checkbox" name="lang" value="english">English<br/> &nbsp;&nbsp;<input type="checkbox" name="lang" value="hindi">Hindi<br/> &nbsp;&nbsp;<input type="checkbox" name="lang"value="Malayalam">Malayalayam<br/>

</p> <p style=" border:">&nbsp;&nbsp;Alternate Email:<input type="text" name="aemail" size="20"></p> <p align="center"><input type="checkbox" name="agree" value="agree">I agree the terms and conditions</p> <p align="center"><input type="submit" value="Submit"><input type="Reset" value="Reset"></p> </font> </form> </td> </table> </body> </html>

OUTPUT

RESULT: Thus to design a webpage to validate a form using javascript was executed.

Ex.No: 4 AIM:

COLOR PALETTE USING APPLETS

To design a color palette using applets.

ALGORITHM: 1. Select a color from the palette. 2. If foreground radio button is selected, the text in the text area appears in color selected. 3. If background radio button is selected, the background of the text area appears in the color selected. 4. If load image check box is selected, the image is loaded as background of the applet window.

PROGRAM: Palette.java import java.awt.*; import java.awt.event.*; import java.util.*; import javax.swing.*; /* <applet code="palette.class" width="400" height="400"> </applet> */ public class palette extends JApplet implements ActionListener { Button bt[] = new Button[25]; Random r = new Random(); Checkbox c,c1; TextArea ta; int v1,v2,v3; Panel p,p1; GridLayout g; public void init() { g = new GridLayout(5,5); ta = new TextArea("Example Program",5,25); p = new Panel(); p1 = new Panel(); p1.setLayout(g); CheckboxGroup cbg = new CheckboxGroup(); c = new Checkbox("ForeGround",cbg,true); c1 = new Checkbox("BackGround",cbg,true); p.add(c); p.add(c1); p.add(ta); for(int i=0;i<10;i++) { bt[i] = new Button(); p1.add(bt[i]); v1 = r.nextInt(255); v2 = r.nextInt(255); v3 = r.nextInt(255); Color cl = new Color(v1,v2,v3); bt[i].setBackground(cl); bt[i].addActionListener(this); } p.add(p1); getContentPane().add(p); } public void actionPerformed(ActionEvent ae) { for(int i=0;i<10;i++) {

if(ae.getSource() == bt[i]) { Color cl = bt[i].getBackground(); if(c.getState() == true) ta.setForeground(cl); else ta.setBackground(cl); } } } }

OUTPUT:

RESULT: Thus to design a color palette using applets was executed.

You might also like