Beruflich Dokumente
Kultur Dokumente
Paragraph.html:
<html>
<body>
This is a line of text before the paragraph.
<p>This is an example in html which uses a paragraph tag to display the text as in the paragraph.
<br/>Browsers automatically adds an empty line before and after paragraphs</p>
This is a line of text after the paragraph.
</body>
</html>
Output:
Image.html:
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="Sunset.jpg" WIDTH="600" HEIGHT="400" BORDER="0" ALT="This is sunset">
</BODY>
</HTML>
Output:
2. Write an HTML program which shows the various types of lists on the webpage.
<html>
<head>
<title>lists example </title>
</head>
<body>
<h3> ordered list with numbering </h3>
<ol>
<li>c lang</li>
<li>c ++</li>
<li>java</li>
<li>.net</li>
<li>wt</li>
</ol>
<h3> ordered list with alphabets </h3>
<ol type="a" >
<li>c lang</li>
<li>c ++</li>
<li>java</li>
<li>.net</li>
<li>wt</li>
</ol>
<h3> ordered list with roman numbers </h3>
<ol type="i" >
<li>c lang</li>
<li>c ++</li>
<li>java</li>
<li>.net</li>
<li>wt</li>
</ol>
<h3> ordered list with numbers using start attribute</h3>
<ol type="1" start="3">
<li>c lang</li>
<li>c ++</li>
<li>java</li>
<li>.net</li>
<li>wt</li>
</ol>
<h3> unordered list </h3>
<ul >
<li>c lang</li>
<li>c ++</li>
<li>java</li>
<li>.net</li>
<li>wt</li>
</ul>
<h3> unordered list with type(square) attribute, type can be disc|circle|square</h3>
<ul type="square">
<li>c lang</li>
<li>c ++</li>
<li>java</li>
<li>.net</li>
<li>wt</li>
</ul>
<h3> definition list </h3>
<dl>
<dt>class</dt>
<dd>collection of data members and member functions.</dd><br/>
<dt>object</dt>
<dd>is an instance of a class.</dd><br/>
<dt>polymorphism</dt>
<dd>ability to take more than one form.</dd><br/>
<dt>inheritance</dt>
<dd>process of deriving a new class from an existing class.</dd>
</dl>
</body>
</html>
3. Write an HTML program which shows the various table related tags .
<html>
<head>
<title>tables example </title>
</head>
<body>
<h3> a simple table without border</h3>
<table>
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
<tr>
<td>456</td>
<td>def</td>
</tr>
</table>
<h3> a simple table with border</h3>
<table border="1">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
<tr>
<td>456</td>
<td>def</td>
</tr>
</table>
<h3> a table with border, heading(columns) </h3>
<table border="1">
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
<tr>
<td>456</td>
<td>def</td>
</tr>
</table>
<h3> a table with border, heading(columns), cellspacing </h3>
<table border="1" cellspacing="10">
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
<tr>
<td>456</td>
<td>def</td>
</tr>
</table>
<h3> a table with border, heading(columns), cellspacing, cellpadding </h3>
<table border="1" cellspacing="10" cellpadding="20">
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
<tr>
<td>456</td>
<td>def</td>
</tr>
</table>
<h3> a table using colspan</h3>
<table border="1" width="200">
<tr >
<th colspan="2">this is a table using colspan</th>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
<tr>
<td>456</td>
<td>def</td>
</tr>
</table>
<h3> a table with caption </h3>
<table border="1" width="200">
<caption>this is the caption</caption>
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
<tr>
<td>456</td>
<td>def</td>
</tr>
</table>
</body>
</html>
Output:
Text.html:
<html>
<body>
<p><b>This text is bold</b></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Frames.html
<HTML>
<HEAD>
<TITLE>Tables Example </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frame name="topframe" src="topframe.html" />
<frame name="bottomframe" src="bottomframe.html" />
</frameset>
</HTML>
Topframe.html:
<HTML>
<HEAD>
<TITLE>Tables Example </TITLE>
</HEAD>
<body>
<A HREF="headings.html" > Headings</A> <br/>
<A HREF="paragraph1.html" target="bottomframe"> paragraph</A>
</body>
</HTML>
Bottomframe.html
<HTML>
<HEAD>
<TITLE>Tables Example </TITLE>
</HEAD>
<body>
<h2> If you click on Headings in the top frame, the headings.html is displayed in the
same(topframe)frame.
</h2>
<h2> If you click on paragraph in the top frame, the paragraph.html is displayed in the
bottomframe.
</h2>
</body>
</HTML>
Output:
5. Develop static pages (using Only HTML) of an online Book store. The website should consists
the following pages.
Home page
Registration
User Login
Books catalog
Shopping Cart
Payment
Index.html
<html>
<head>
<title>welcome to online book store</title>
</head>
<frameset rows="20%,80%" >
<frame name="head" frameborder="0" src="head.html" scrolling="no" noresize="true"/>
<frameset cols="20%,80%" >
<frame name="left" frameborder="1" src="left.html" scrolling="no"
noresize="true"/>
<frame
name="main"
frameborder="1"
src="home.html"
noresize="true"/>
</frameset>
</frameset>
</html>
Head.html
<html>
<head>
<title>untitled</title>
<style>
body{
color:blue;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td><img src="book.jpg" width="200" height="100" border="1" alt=""></td>
<td><h1><marquee direction="right" behavior="alternate">welcome to online book
store </marquee></h1></td></td>
</tr>
</table>
</body>
</html>
Left.html
<html>
<head>
<title>untitled</title>
<style>
body{
color:blue;
}
</style>
</head>
<body>
<table>
<tr>
<td ><a href="home.html" target="main">home</td>
</tr>
<tr>
<td ><a href="login.html" target="main">login</a></td>
</tr>
<tr>
<td ><a href="registration.html" target="main">registration</td>
</tr>
<tr>
<td ><a href="catalogue.html" target="main">catalogue</td>
</tr>
<tr>
<td ><a href="cart.html" target="main">cart</td>
</tr>
<tr>
<td ><a href="cardinfo.html" target="main">payment</td>
</tr>
</table>
</body>
</html>
Home.html
<html>
<head>
<title>untitled</title>
<style>
body{
color:blue;
}
</style>
</head>
<body>
<h4>
<p>
this is a website where you can find text books related to engineering.
you can register, login and add books to cart and purchase using credit card.
</p>
</h4>
</body>
</html>
Catalogue.html
<html>
<head>
<title>catologue page</title>
</head>
<body>
<table width="100%" >
<tr>
<td width="25%"><img src="book.jpg" width="50" height="50"
alt=""></td>
<td width="25%">
book: xml bible<br/>
author: witson<br/>
publication: weily
</td>
<td width="25%">$40.5
</td>
<td width="25%"><input type="button" value="add to cart"/>
</td>
</tr>
<tr>
<td width="25%"><img src="book.jpg" width="50" height="50"
alt=""></td>
<td width="25%">
book: ai<br/>
author: s russel<br/>
publication: princdton hall
</td>
<td width="25%">$63</td>
<td width="25%"><input
type="button"
value="add
to
cart"/></td>
</tr>
<tr>
<td width="25%"><img src="book.jpg" width="50" height="50"
alt=""></td>
<td width="25%">
book: java2<br/>
author: watson<br/>
publication: bpb publications
</td>
<td width="25%">$35.5</td>
<td width="25%"><input type="button"
value="add
to
cart"/></td>
</tr>
<tr>
<td width="25%"><img src="book.jpg" width="50" height="50"
alt=""></td>
<td width="25%">
book: html in 24 hours<br/>
author: sam peter<br/>
value="add
cart"/></td>
</tr>
</table>
</body>
</html>
Cart.html
<html>
<head>
<title>cart</title>
</head>
<body>
<table width="80%">
<tr >
<th align="left">book name</th>
<th align="left">price</th>
<th align="left">quantity</th>
<th align="left">amount</th>
</tr>
<tr >
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr >
<td >java2</td>
<td >$35.5</td>
<td >2</td>
<td >$70</td>
</tr>
<tr>
<td >xml bible</td>
<td >$40.5</td>
<td >1</td>
<td >$40.5</td>
</tr>
<tr >
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
to
<tr>
<td > </td>
<td > </td>
<td >total amount</td>
<td >$130.5</td>
</tr>
</table>
</body>
</html>
Cardinfo.html
<html>
<head>
<title> new document </title>
</head>
<body>
<h1> card(credit/debit) information </h1>
<hr/>
<table>
<tr>
<td>select card type:</td>
<td>
<select name="cardtype">
<option name="type"> type</option>
<option name="master"> master card</option>
<option name="visa"> visa</option>
<option name="gold"> gold card</option>
<option name="store"> store card</option>
</select>
</td>
</tr>
<tr>
<td>enter card number:</td>
<td><input type="text" name="cardnumber"></td>
</tr>
<tr>
<td>name on card:</td>
<td><input type="text" name="nameoncard"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
border="0"
cellpadding="0"
cellspacing="0"
summary=""
align="center">
<tr>
<td>Login:</td>
<td><input type="text" name="userid"
id="userid"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input
type="password"
name="password" id="password"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><button
type="Submit">Submit</button></td>
<td><button
>Reset</button></td>
</tr>
</form>
</table>
</body>
</html>
Registration.html
type="reset"
<html>
<head>
<title>Registration Page</title>
</head>
<body>
<form action="register.jsp" method="" name="" >
<table
border="0"
cellpadding="0"
cellspacing="0"
summary=""
align="center">
<tr>
<td>Name:</td>
<td><input
type="text"
id="name"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input
type="password"
<td>E-mail Id:</td>
<td><input
type="text"
<td>Phone number:</td>
<td><input
type="text"
id="password"/></td>
</tr>
<tr>
id="email"/></td>
</tr>
<tr>
id="phno"/></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea rows="6" cols="30"
name="address" id="address">
</textarea>
</td>
</tr>
<tr>
<td
align="center"><br/><button type="submit">Register</button></td>
</tr>
</form>
</table>
</body>
</html>
colspan="2"
Output:
6. Validate the Registration, user login and payment by credit card pages using JavaScript.
PROCEDURE:
Registration.html
<html>
<head>
<title>Registration Page</title>
<script>
function validateForm() {
errMsg = "";
name = document.getElementById("name").value;
password = document.getElementById("password").value;
email = document.getElementById("email").value;
phno = document.getElementById("phno").value;
nameReg = /^[a-zA-Z]{4,}$/
passwordReg = /^[a-zA-Z0-9]{6,}$/
phnoReg = /^[0-9]{10}$/
if(name == "")
errMsg += "Name can not be empty \n";
else if(name.match(nameReg) == null)
errMsg += "Name should contain alphabets only (minimum of 6
characters) \n";
if(password == "")
errMsg += "password can not be empty \n";
else if(password.match(passwordReg) == null)
errMsg += "password must be atleast 6 characters \n";
if(email == "")
errMsg += "email can not be empty \n";
if(phno == "")
errMsg += "phno can not be empty \n";
else if(phno.match(phnoReg) == null)
if(errMsg != "") {
alert(errMsg);
return false;
}
}
</script>
</head>
<body>
<form action="success.jsp" method="" name="" onsubmit="return validateForm();">
<table
border="0"
cellpadding="0"
cellspacing="0"
summary=""
align="center">
<tr>
<td>Name:</td>
<td><input
type="text"
id="name"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input
type="password"
<td>E-mail Id:</td>
<td><input
type="text"
<td>Phone number:</td>
<td><input
type="text"
id="password"/></td>
</tr>
<tr>
id="email"/></td>
</tr>
<tr>
id="phno"/></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea rows="6" cols="30"
name="address" id="address">
</textarea>
</td>
</tr>
<tr>
<td
align="center"><br/><button type="submit">Register</button></td>
</tr>
</table>
</form>
</body>
</html>
output:
When you click on Register with a blank form you will get an alert
Login.html
colspan="2"
<html>
<head>
<title>Login Page</title>
<script>
function validateForm() {
userId = document.getElementById("userid").value;
pwd = document.getElementById("password").value;
if(userId=='' || pwd == '') {
alert("userid / password can not be empty !!");
return false;
}
else
return true;
}
</script>
</head>
<body>
<form action="success.html" method="" name="" onsubmit="return validateForm();">
<table
border="0"
cellpadding="0"
cellspacing="0"
summary=""
align="center">
<tr>
<td>Login:</td>
<td><input type="text" name="userid"
id="userid"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input
type="password"
name="password" id="password"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><button
type="Submit">Submit</button></td>
<td><button
>Reset</button></td>
</tr>
</form>
</table>
</body>
</html>
When you click on Submit with no user id, password error alert box is shown with messages.
type="reset"
When you click on Proceed blank form error alert box is shown with messages.
7. Create and save an XML document at the server,which contain some users information.write a
program,which takes user id as an input and returns the user details by taking the user
information from the XML document.
StudentDetails.Java :
import javax.servlet.*;
import java.util.*;
import java.io.*;
import javax.xml.parsers.*;
import org.w3c.dom.*;
public class StudentDetails implements Servlet
{
private DocumentBuilderFactory fact;
private DocumentBuilder builder;
private Document doc;
private NodeList list,childs;
private Node node,parent,child;
private String str;
private String hallTicket;
private ServletConfig sc;
public void init(ServletConfig sc)
{
try
{
this.sc=sc;
str ="C:\Program Files\Apache Software Foundation\Tomcat
5.0\webapps\StudentDetails\WEB-INF\classes\Details.xml";
fact=DocumentBuilderFactory.newInstance();
builder =fact.newDocumentBuilder();
doc=builder.parse(str);
System.out.println("In the Init Method");
}
catch(Exception e)
{
System.out.println("Error in the Init Method"+e.getMessage());
}
}
public void service(ServletRequest req, ServletResponse res)throws
ServletException,IOException
{
hallTicket=req.getParameter("hall");
res.setContentType("text/html");
PrintWriter pw=res.getWriter();
list=doc.getElementsByTagName("HallTicketNo");
LogIn.html :
<html>
<head>
<title>StudentDetails</title>
</head>
<body style="height: 100%;width:100%; margin: 0; padding: 0;overflow-y:hidden;">
<form method="post"
action="http://localhost:8080/StudentDetails/MyServletEx">
<div
style="position:absolute;top:0;left:0;width:100%;height:100%;margin:0;p
adding:0;z-index:0;">
<img src="college.jpg" width="100%" height="100%">
</div>
<div style="position:absolute;top:4%;left:25%;z-index:1" align="center"
>
<font size="6" color="red" >Vidya Vikas Institute of Technololy</font>
<br/>
<font size=4 color="red">(Affiliated to JNTU Approved By
AICTE)</font>
<br/>
<font size=3 color="red">Sy. No 103 &104 Shabad X Road,
Chevella</font>
<br/>
<font size=3 color="red">Ranga Reddy District Andhra Pradesh</font>
<br/>
</div>
<div style="position:absolute;top:60%;right:5%; z-index:2">
<input type="text" SIZE="10" name="hall"><br/>
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
web.xml :
<web-app>
<servlet>
<servlet-name>Student</servlet-name>
<servlet-class>StudentDetails</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Student</servlet-name>
<url-pattern>/MyServletEx</url-pattern>
</servlet-mapping>
</web-app>
Details.xml output :
- <StudentDetails>
- <Details>
<HallTicketNo>05e21a0501</HallTicketNo>
<Name>Vinayak</Name>
<Education>M.Tech</Education>
<Specialization>CSE</Specialization>
<Year>I</Year>
<Semester>I</Semester>
<Ambition>Professor</Ambition>
<Hobby>Reading Books, Browsing Net</Hobby>
</Details>
- <Details>
<HallTicketNo>05e21a0502</HallTicketNo>
<Name>UshaSingh</Name>
<Education>B.Tech</Education>
<Specialization>CSE</Specialization>
<Year>IV</Year>
<Semester>I</Semester>
<Ambition>SoftwareEngineer</Ambition>
<Hobby>Dance</Hobby>
</Details>
- <Details>
<HallTicketNo>05e21a0503</HallTicketNo>
<Name>Archana</Name>
<Education>B.Tech</Education>
<Specialization>CSE</Specialization>
<Year>IV</Year>
<Semester>I</Semester>
<Ambition>SoftwareEngineer</Ambition>
<Hobby>Foot Boll</Hobby>
</Details>
- <Details>
<HallTicketNo>05e21a0504</HallTicketNo>
<Name>Pavani</Name>
<Education>B.Tech</Education>
<Specialization>CSE</Specialization>
<Year>IV</Year>
<Semester>I</Semester>
<Ambition>SoftwareEngineer</Ambition>
<Hobby>Cricket</Hobby>
</Details>
</StudentDetails>
Output:
Enter a valid hall ticket no and click on submit to view student information.
8. Develop a javabean which gives the exchange value of INR(Indian rupees) into equivalent
American/canadan/Australian dollor value.
Converter.java :
package sunw.demo.converter;
import java.awt.*;
import java.text.NumberFormat;
public class Converter extends Canvas{
private String rupees;
private String usDollars;
private String ausDollars;
private String canDollars;
private double usExchaneRate;
private double ausExchaneRate;
private double canExchaneRate;
private NumberFormat nf = NumberFormat.getInstance();
public Converter() {
rupees = "100";
usDollars = "";
ausDollars = "";
canDollars = "";
usExchaneRate = 0.02;
ausExchaneRate = 0.04;
canExchaneRate = 0.03;
setSize(300,300);
}
public String getRupees() {
return rupees;
}
public void setRupees(String rupees) {
this.rupees = rupees;
}
OUTPUT :
Indian 233 rs converted into American, Australian, Canada dollars and shown in Beanbox
window
Automobile:
package sunw.demo.traff;
import java.awt.*;
import java.beans.*;
import java.io.*;
import java.util.Date;
import javax.swing.JTextField;
state="Stopped";
}
else if((Color)e.getNewValue() == Color.orange)
{
state="Ready";
}
else if((Color)e.getNewValue() == Color.green)
{
state="Move";
}
tx.setText(state);
}
}
TrafficLight:
package sunw.demo.traff;
import java.awt.*;
import java.awt.event.*;
import java.io.*;
import java.beans.*;
public class TrafficLight extends Panel implements Runnable, Serializable,
PropertyChangeListener
{
private Color color;
private Label label;
private PropertyChangeSupport changes;
private int interval;
transient Thread runner;
public TrafficLight()
{
setSize(50, 50);
color = Color.red;
label = new Label();
label.setSize(100,100);
label.setBackground(Color.red);
add(label);
changes = new PropertyChangeSupport(this);
changes.addPropertyChangeListener(this);
interval = 5;
runner = new Thread(this);
runner.start();
}
public void addPropertyChangeListener(PropertyChangeListener propertychangelistener)
{
changes.addPropertyChangeListener(propertychangelistener);
}
public void removePropertyChangeListener(PropertyChangeListener
propertychangelistener)
{
changes.removePropertyChangeListener(propertychangelistener);
}
public int getInterval()
{
return interval;
}
public void setInterval(int i)
{
interval = i;
if(runner != null)
runner.interrupt();
}
public void run()
{
do
{
if(color == Color.red)
{
color = Color.orange;
changes.firePropertyChange("color", Color.red, Color.orange);
}
else if(color == Color.orange)
{
color = Color.green;
changes.firePropertyChange("color", Color.orange, Color.green);
}
} while(true);
}
public void propertyChange(PropertyChangeEvent e)
{
label.setBackground((Color)e.getNewValue());
}
}
Automobile.mft :
Manifest-Version: 1.0
Name: sunw/demo/traff/Automobile.class
Java-Bean: True
TraficLight.mft :
Manifest-Version: 1.0
Java-Bean: True
Name: sunw/demo/traff/TraficLight.class
Created-By: 1.6.0 (Sun Microsystems Inc.)
Output:
10. Implement the "Hello World!" program using JSP Struts Framework
PROCEDURE:
Step 1:
2.success.jsp
Step 2:
Write HelloWorld.java class within package hello, compile and paste the .class file in classes/hello folder.
package hello;
public class HelloWorld {
private String message;
private String userName;
public HelloWorld() {
}
public String execute() {
setMessage("Hello " + getUserName());
return "SUCCESS";
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
}
Step 3:
</web-app>
Step 4:
Now enter your name in the text box and click on submit.