Professional Documents
Culture Documents
EX.NO:1
**************************************************************
<HTML> - The HTML stands for Hyper Text Markup Language. The
HTML element represents the root of an HTML document.
o <HTML>
o <HEAD></HEAD>
o <BODY></BODY>
o </HTML>
<HEAD> - The HEAD element represents a collection of metadata for the
document.
o <HEAD><TITLE>header</TITLE></HEAD>
<TITLE> - The title element represent the document's title or name.
o <TITLE>WELCOME SCREEN</TITLE>
<META> - The meta element can represent document-level metadata with
the name attribute, http-equiv attribute, and the file's character encoding
declaration.
o <META http-equiv=Content-Type content=text\HTML;
charset=UTF-8>
o </META>
<STYLE> - The style element allows authors to embed style information in
their documents. The style element is one of several inputs to the styling
processing model. The element does not represent content for the user.
o <style type=text\css>
o body { color: black; background: white; }
o em { font-style: normal; color: red; }
o </style>
<SCRIPT> - The script element allows authors to include dynamic script
and data blocks in their documents. The element does not represent content
for the user.
o <script src="game-engine.js"></script>
<LINK> - The link element allows authors to link their document to other
resources. The link element allows authors to link their document to other
resources.
o <LINK rel="stylesheet" href="B" type="text/css"></LINK>
<BOBY> - The BOBY element represents the main content of the
document.
o <HTML>
o <BOBY> Welcome Screen</BOBY>
o </HTML>
<DIV> - The div element has no special meaning at all. It represents its
children. It can be used with the class, Lang, and title attributes to mark up
semantics common to a group of consecutive elements.
o <div>
o <P>My other cat, colored black and white.</P>
o <P>He apparently visited our neighbors. </P></div>
<H1> - These elements represent headings for their sections.
o <H1>Let's call it a drawing surface</H1>
o <H2>Let's call it a drawing surface</H2>
o <H3>Let's call it a drawing surface</H3>
o <H4>Let's call it a drawing surface</H4>
o <H5>Let's call it a drawing surface</H5>
o </DL>
<EMBED> - The embed element represents an integration point for an
external application or interactive content.
o <embed src="catgame.swf" quality="high">
<OL> - The OL element represents a list of items, where the items have
been intentionally ordered, such that changing the order would change the
meaning of the document. The items of the list are the li element child nodes
of the OL element, in tree order.
o <OL>
o <LI>United Kingdom
o <LI>Switzerland
o </OL>
<UL> - The UL element represents a list of items, where the order of the
items is not important that is, where changing the order would not
materially change the meaning of the document. The items of the list are the
LI element child nodes of the UL element.
o <UL>
o <LI>Switzerland
o <LI>Norway
o </UL>
<FORM> - The FORM element represents a collection of form-associated
elements, some of which can represent editable values that can be submitted
to a server for processing.
o <FORM action="http://www.google.com/search" method="get">
o Google: <input type="search" name="q"/>
o <input type="submit" value="Search">
o </FORM>
<INPUT> - The input element represents a typed data field, usually with a
FORM control to allow the user to edit the data.
o <input type="button" value="cLIck">
o <input type="text" name=text>
o <input type="radio" name=radio>
o <input type="checkbox" name="checkbox">
<BUTTON> - The button element represents a button. If the element is not
disabled, then the user agent should allow the user to activate the button.
o <button onclick="alert(hello')"> Show hint</button>
o </P>
<BR> - The BR element represents a line break.
o <BR/>The valuator complained<BR/> So the author was pained
<FONT> - The FONT element changes the font style, size, color of the text
in the document.
o <FONT face=Arial sixe=43 color=blue>visit again</font>
<APPLET> - The APPLET element use to display the java file in the html
document file.
o <APPLET code=javafile.class height=50% width=50%>
o </APPLET>
******************************************************************
EX.NO:2
******************************************************************
Aim
Program:
HOME.HTML
<html>
<head>
<title>Home - States of India!!!</title>
</head>
<body bgcolor="gold">
<h1><u><center>Republic of India</center></u></h1>
<p>
India is the Seventh Lagest country in the world by geographical area, the
second
most populous country with over 1.2 billion people, and the
<body bgcolor="wheat">
<h1><center>Karnataka</center></h1>
<h3>
<ul>
<li>Districts<i> - 30</i>
<li>Capital City<i> - Bangalore</i>
<li>Largest City<i> - Bangalore</i>
<li>Governor<i>- Hansraj Bhardwaj</i>
<li>Chief Minister<i> - D. V. Sadananda Gowda</i>
<li>Population<i> - 61,130,704</i>
<li>Tourist spots<i> - Gol Gumbaz, Mysore Palace, Keshava Temple
etc.,</i>
</ul>
</h3>
<a href="Home.html">back</a>
</body></html>
KERALA.HTML
<html>
<head><title>Kerala - India</title></head>
<body bgcolor="indianred">
<h1><center>Kerala</center></h1>
<h3>
<ul>
<li>Districts<i> - 14</i>
<li>Capital City<i> - Thiruvanandapuram</i>
<li>Largest City<i> - Thiruvanandapuram</i>
<li>Governor<i> - Hansraj Bhardwaj</i>
<li>Chief Minister<i> -Oommen Chandy </i>
<li>Population<i> - 33,387,677</i>
<li>Tourist spots<i> - Edakkal Caves, Palayur, Kovalam Beach,Munnar,
Kochi, Alapuzha etc.,</i>
</ul>
</h3>
<a href="Home.html">Back</a>
</body></html>
TAMILNADU.HTML
<html>
<head><title>Tanil Nadu - India</title></head>
<body bgcolor="palegreen">
<h1><center>Tamil Nadu</center></h1>
<h3>is one of the 28 states of India. Its capital and largest city is Chennai.
Tamil Nadu lies in the southernmost part of the Indian Peninsula and
is bordered by the States of puducherry, Kerala, Karnataka, Andha
Pradesh.
</h3>
<h3> <ul>
<li>Districts<i> - 32</i>
<li>Capital City<i> - Chennai</i>
<li>Largest City<i> - Chennai</i>
<li>Governor<i> - Konijeti Rosaiah</i>
<li>Chief Minister<i> - Jayalalithaa</i>
<li>Population<i> - 72,138,958</i>
<li>Tourist spots<i> - Mamallapuran, Ooty, Kodaikanal, Marina,
Mudurai Meenakshi Amman Temple, Thanjavur etc.,</i>
</ul>
<a href="Home.html">back</a>
</body>
</html>
SCREEN SHOTS
****************************************************************
EX.NO:3
**************************************************************
Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in a markup language. Its most common
application is to style web pages written in HTML and XHTML, but the language
can be applied to any kind of XML document.
In CSS, selectors are used to declare which elements a style applies to, a
kind of match expression. Selectors may apply to all elements of a specific type, or
only those elements which match a certain attribute; elements may be matched
depending on how they are placed relative to each other in the markup code, or on
how they are nested within the document object model
A style sheet consists of a list of rules. Each rule or rule-set consists of one
or more selectors and a declaration block. A declaration-block consists of a list of
semicolon-separated declarations in braces. Each declaration itself consists of a
property, a colon (:), a value, then a semi-colon (;)
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is
the attribute you wish to change, and each property can take a value. The property
and value are separated by a colon, and surrounded by curly braces:
body {color: black}
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing one
file. Each page must link to the style sheet using the <link> tag.
The <link> tag goes inside the head section:
<head><link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the
document according to it.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique
style. You define internal styles in the head section by using the <style> tag,
<head><style>
selector {property:value; property:value;..}
</style></head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing
content with presentation. Use this method sparingly, such as when a style is to be
applied to a single occurrence of an element. To use inline styles you use the style
attribute in the relevant tag. The style attribute can contain any CSS property.
<p style="color: sienna; margin-left: 20px">
This is a paragraph </p>
******************************************************************
EX.NO:4
******************************************************************
Aim:
To create a HTML page using types of Cascading Style Sheet.
ALGORITHM
Internal CSS:
STEP 1: Create a HTML program with <style> tag.
STEP 2: Inside the <style> tag, specify the format required for that web page.
STEP3 : Run the program with a web browser.
External CSS:
STEP 4: Open a notepad, type the needed CSS in it and save it with .css extension.
STEP5: Refer this .css file in the HTML using the tag <link>.
STEP 6: Run the program with a web browser.
ROBUST
CSSFILE.HTML
<html>
<head>
<title>FLOWERS</title>
<!--Extended Style Sheet -->
<link rel="stylesheet" type="text/css" href="newcss.css">
<!--
<style type="text/css">
p{
background-color: lightgrey;
text-align: justify;
margin: 2em 7em;
}
</style>
</head>
<body id="body">
<h1>FLOWER</h1>
<p>
<span style="font: 200 x-large fantasy">Flower</span>
sometimes known as a bloom or blossom,
is the reproductive structure found in flowering plants.
The flower is God's finest workmanship in the world.
It is his finest gift to the mankind.
We have seen the flowers of many kinds and to many colors.
In India we see the flowers like
</p>
<!--
<li><a href="">Rose</a></li>
<li><a href="">Jasmine</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS.CSS
h1,h2{
text-decoration: underline;
font-style: italic;
text-align: center;
}
#body{
background-color: tan;
color: blue;
}
ul li{
font-size: small;
}
OUTPUT
SCREEN SHOT
******************************************************************
EX.NO:5
******************************************************************
AIM
To write a java script program that performs form validation.
ALGORITHM:
STEP 1: Start the program,
STEP 2: Create a Form using form elements,
STEP 3: Write a script program for validate the form using javascript,
STEP 4: Save the file with extension html.
STEP 5: Execute the page by opening html file from any browser.
STEP 6: Stop the program.
STUDENTVALIDATION.HTML
<html>
<head>
<title>CGPA CALCULATION</title>
<script type="text/Javascript">
function mark()
{ var name=document.getElementById('name');
var regno=document.getElementById('regno');
var dept=document.getElementById('dept');
var sem1=document.getElementById('sem1');
var sem2=document.getElementById('sem2');
var sem3=document.getElementById('sem3');
var sem4=document.getElementById('sem4');
var sem5=document.getElementById('sem5');
var sem6=document.getElementById('sem6');
var sem7=document.getElementById('sem7');
var sem8=document.getElementById('sem8');
var cgpa=document.getElementById('cgpa');
var dest=document.getElementById('dest');
if(name.value == 0 ){alert("pls enter the name");return false;}
if(regno.value == 0 ){alert("pls enter the register number");return false;}
if(dept.value == 0 ){alert("pls enter the department");return false;}
if(sem1.value == 0 ){alert("pls enter semester 1 gpa");return false;}
if(sem1.value > 10 ){alert("pls enter semester 1 gpa between 1-10");return
false;}
if(sem2.value == 0 ){alert("pls enter semester 2 gpa");return false;}
if(sem2.value > 10 ){alert("pls enter semester 2 gpa between 1-10");return
false;}
if(sem3.value == 0 ){alert("pls enter semester 3 gpa");return false;}
if(sem3.value > 10 ){alert("pls enter semester 3 gpa between 1-10");return
false;}
if(sem4.value == 0 ){alert("pls enter semester 4 gpa");return false;}
if(sem4.value > 10 ){alert("pls enter semester 4 gpa between 1-10");return
false;}
</script>
</head>
<body bgcolor="pink" align="center">
<form>
<h2><center><u>STUDENT CGPA VALIDATION</u></center></h2>
<br/>
<table align="center">
<tr><td>Student Name</td>
<td><input type="text" id="name" /></td></tr>
<tr><td>Register No:</td>
<td><input type="text" id="regno"/></td></tr>
<tr><td>Department</td>
<td><input type="text" id="dept"/></td></tr>
<tr><td>Semester 1</td>
<td><input type="text" id="sem1"/></td></tr>
<tr><td>Semester 2</td>
<td><input type="text" id="sem2"/></td></tr>
<tr><td>Semester 3</td>
<td><input type="text" id="sem3"/></td></tr>
<tr><td>Semester 4</td>
<td><input type="text" id="sem4"/></td></tr>
<tr><td>Semester 5</td>
<td><input type="text" id="sem5"/></td></tr>
<tr><td>Semester 6</td>
<td><input type="text" id="sem6"/></td></tr>
<tr><td>Semester 7</td>
<td><input type="text" id="sem7"/></td></tr>
<tr><td>Semester 8</td>
<td><input type="text" id="sem8"/></td></tr>
<tr><td>CGPA</td>
<td><input type="text" id="cgpa"/></td></tr>
<tr><td>Destinction</td>
<td><input type="text" id="dest"/></td></tr>
</table>
<br/>
<center>
<input type="button" value="Calculate" onclick="mark();"/>
<input type="Reset" size="25" value="reset"/>
</center>
</form>
</body>
</html>
OUTPUT
******************************************************************
EX.NO:6
******************************************************************
AIM:
Image img1;
CheckboxGroup cbg = new CheckboxGroup();
Checkbox box1 = new Checkbox("Background Color", cbg, true);
Checkbox box2 = new Checkbox("Text Color", cbg, false);
Checkbox box3 = new Checkbox("Loading Image ", cbg, false);
public void init() {
for (int i = 0; i < 6; i++) {
buttons[i] = new Button("
");
add(buttons[i]);
}
buttons[0].setBackground(Color.red);
buttons[1].setBackground(Color.blue);
buttons[2].setBackground(Color.green);
buttons[3].setBackground(Color.yellow);
buttons[4].setBackground(Color.magenta);
buttons[5].setBackground(Color.pink);
add(box1);
add(box2);
add(box3);
box1.addItemListener(this);
box2.addItemListener(this);
box3.addItemListener(this);
}
public void itemStateChanged(ItemEvent ev) {
if (box1.getState() == true) {
flag = 1;
} else if (box2.getState() == true) {
text = "Default color is black";
flag = 2;
} else if (box3.getState() == true) {
img1 = getImage(getDocumentBase(), "sample.gif");
flag = 3;
}
repaint();
}
public void paint(Graphics g) {
if (flag == 2) {
g.drawString(text, 30, 100);
switch (curcolor) {
case 0: g.setColor(Color.red);
break;
case 1: g.setColor(Color.blue);
break;
case 2: g.setColor(Color.green);
break;
case 3: g.setColor(Color.yellow);
break;
case 4: g.setColor(Color.magenta);
break;
case 5: g.setColor(Color.pink);
break;
case 6: g.setColor(Color.black);
break;
}
g.drawString(text, 30, 100);
} else if (flag == 1) {
g.drawString(text, 30, 100);
switch (curcolor) {
case 0: setBackground(Color.red);
break;
case 1: setBackground(Color.blue);
case 2: setBackground(Color.green);
case 3: setBackground(Color.yellow);
break;
break;
break;
break;
case 6: setBackground(Color.white);
}
} else if (flag == 3) {
g.drawImage(img1, 200, 300, this);
}
}
public boolean action(Event e, Object o) {
for (int i = 0; i < 6; i++) {
if (e.target == buttons[i]) {
curcolor = i;
text = "You have Chosen" + colors[i];
repaint();
return true;
}
}
return false;
}
}
APPLET.HTML
break;
SCREEN SHOT: 2
******************************************************************
EX.NO:7
******************************************************************
AIM:
To write a program to invoke Servlet from HTML form.
ALGORITHM
STEP1: Create a HTML page including some form elements.
STEP2: Inside the <form> tag, for the action attribute specify the full path name of
the File.
STEP3: Create a .java file that imports javax.http.servlet.*;
STEP4: Set classpath where servlet-api.jar file resides.
STEP5: Compile the servlet program using javac programname.java
STEP6: Place the class file \Tomcat 5.5\webapps\Examples\WEBINF\classes\folder.
STEP7: Define the doPost function to process the data obtained from the HTML
file.
STEP8: Modify the web.xml file using your servletClassName.
STEP9: Invoke the class file using http://localhost:8080/servetClassName from
your browser
Postparam.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
public class postparam extends GenericServlet
{
public void service(ServletRequest request,ServletResponse response)throws
ServletException,IOException
{
PrintWriter pw=response.getWriter();
Enumeration e=request.getParameterNames();
while(e.hasMoreElements())
{
String pname=(String)e.nextElement();
pw.print(pname+"=");
String pvalue=request.getParameter(pname);
pw.println(pvalue);
}
pw.close();
}
}
Postparam.html
<html>
<body>
<center>
<form name="Postparam" method=POST
action="http://localhost:8080/examples/postparam">
<table>
<tr>
<td><B>Employee</B></td>
<td><input type="textbox" name="ename" size="25" value=""></td>
</tr>
<tr>
<td><B>phone</B></td>
<td><input type="textbox"name="phoneno" size="25" value=""></td>
</tr>
</table>
<input type="submit" value="Submit">
</body>
</html>
XML CODE:
<servlet>
<servlet-name>Postparam</servlet-name>
<servlet-class>Postparam</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Postparam</servlet-name>
<url-pattern>/Postparam</url-pattern>
</servlet-mapping>
OUTPUT
SCREEN SHOTS:
******************************************************************
EX.NO:8
******************************************************************
AIM:
To write an online Examination using JSP with three tier architecture
ALGORITHM:
STEP 1: Create a user interface form for getting Seat number and Name
STEP2: Create jsp file which calculates the total marks on the server
STEP3: Place the jsp file \Tomcat 5.5\webapps\Examples\WEB-INF\jsp\ folder.
STEP4: Create a data base to store the existing user details. If a new login has to be
created, then display the corresponding page.
STEP5: Create a table in MS ACCESS or ORACLE that contains three fields .
STEP6: Create a DSN to map the Microsoft Access Driver using ODBC in
Administrative Tools.
STEP7: Import java.sql.* in the java program to execute the SQL queries.
STEP8: Load the database driver by using Class.forName().
STEP9: Create a Connection and Statement Object.
STEP10: Establish a Database Connection with DSN using
DriverManager.getConnection( ).
STEP11: Execute the query using executeQuery() and that gets stored in a
Resultset.
STEP12: Until there are records in table specified get the fields in each record one
by one and display onto the screen.
STEP13: Close the Statement and Connection Object.
STEP 14: DIsplay the results
Home.html
<html>
<head>
<title>Online Examination</title>
</head>
<body bgcolor=lightgreen>
<center>
<h1>OnLine Examination</h1>
</center>
<form action="http://localhost:8080/examples/jsp/exam/exam.jsp" method=post
name="f1">
<table>
<tr>
<td><h3>Seat Number:</h3></td>
<td><input type="text" name="seatno"></td>
</tr>
<tr>
<td><h3>Name:</h3></td>
<td><input type="text" name="name" size="50"></td>
</tr>
<br/>
<tr>
<td><b>Total Marks:10(Each question carries equal marks) </b></td>
<td></td><td></td><td></td><td><b>Time: 15 Min.</b></td>
</tr>
</table>
<br/>
<b>1. Apache is an open source web server</b><br/>
<input type="radio" name="group1" value="True">True
<input type="radio" name="group1" value="False">False
<br/>
<b>2. In Modern PC there is no cache memory.</b><br/>
<input type="radio" name="group2" value="True">True
<input type="radio" name="group2" value="False">False
<br/>
<b>3. Tim-Berner Lee is the originator of Java.</b><br/>
<input type="radio" name="group3" value="True">True
<input type="radio" name="group3" value="False">False
<br/>
exam.jsp
a1=1;
else
a1=0;
}
String ans2=request.getParameter("group2");
if(request.getParameter("group2")!=null){
if(ans2.equals("True"))
a2=0;
else
a2=1;
}
String ans3=request.getParameter("group3");
if(request.getParameter("group3")!=null){
if(ans3.equals("True"))
a3=0;
else
a3=1;
}
String ans4=request.getParameter("group4");
if(request.getParameter("group4")!=null){
if(ans4.equals("True"))
a4=1;
else
a4=0;
}
String ans5=request.getParameter("group5");
if(request.getParameter("group5")!=null){
if(ans5.equals("True"))
a5=0;
else
a5=1;
}
int tot=a1+a2+a3+a4+a5;
if(seatno!=""){
stmt=conn.createStatement();
myquery="INSERT INTO STUDENTTABLE
VALUES('"+seatno+"','"+name+"',"+tot+")";
stmt.executeUpdate(myquery);
stmt.close();
}
stmt=conn.createStatement();
myquery="select * from StudentTable";
rs=stmt.executeQuery(myquery);
%>
<html>
<head>
<title>Online Examination</title>
</head>
<body bgcolor="pink"> <br/><br/>
<center>
<h1>Student Database</h1> <br/>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><b>Seat No</b></td>
<td><b>Name</b></td>
<td><b>Mark</b></td>
</tr>
<%
while(rs.next())
{
out.println("<tr>");
out.println("<td>"+rs.getString(1)+"</td>");
out.println("<td>"+rs.getString(2)+"</td>");
out.println("<td>"+rs.getString(3)+"</td>");
out.println("</tr>");
}
rs.close();
stmt.close();
conn.close();
%>
</table>
<br/><br/>
<h1>Thanks!....</h1>
</center>
</body>
</html>
OUTPUT:
******************************************************************
EX.NO:9
******************************************************************
Aim:
Programs using XML-Schema-XSLT/XSL
Algorithm:
Step 1: Start the Program
Step 2: Create a root process for food
Step 3: Create a style for XSLT with focus on each item
Step 4: Output the items
Step 5: Stop
STRUCTURE.XML
<food>
<name>strawberry</name>
<price>$56.7</price>
<description>a good ice cream</description>
<calories>450</calories>
</food>
<food>
<name>chapathy</name>
<price>$5.89</price>
<description>morning meal</description>
<calories>780</calories>
</food>
<food>
<name>bread</name>
<price>$6.78</price>
<description>with jam and butter</description>
<calories>670</calories>
</food>
</breakfast_menu>
STOCK.XSL
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body bgcolor="tomato">
<h2><center>FOOD STRUCTURE</center></h2>
<table border="1" align="center">
<tr bgcolor="silver">
<th>Name</th>
<th>Price</th>
<th>Description</th>
<th>Calories</th>
</tr>
<xsl:for-each select="breakfast_menu/food">
<tr bgcolor="tan">
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="price"/></td>
<td><xsl:value-of select="description"/></td>
<td><xsl:value-of select="calories"/></td>
</tr>
</xsl:for-each>
</table></body> </html>
</xsl:template>
</xsl:stylesheet>
OUTPUT :
SCREEN SHOT
******************************************************************
EX.NO:10
******************************************************************
AIM:
To write programs to search and display chemistry elements definition detail using
JSP.
Algorithm:
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","info",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>This line is going to change</h2></div>
<h3> Welcome to Ajax program</h3>
<h3> Press the button to get the definition of ajax</h3>
<button type="button" onclick="loadXMLDoc()">Change</button>
</body>
</html>
Info.txt
Ajax exchanges the data with the server, and update parts of a web page without
reloading the whole page.
OUTPUT:
******************************************************************
EX.NO:11 IMPLEMENTING AN APPLICATION WITH WEB SERVICES
AIM:
To implement an application using web services and database .
Algorithm:
Step 1: Start the Program
Step 2: Create a root process for Reservation
Step 3: Create a service with focus on each item
Step 4: Output the items
Step 5: Stop
Program:
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Solution11.16 -->
<!-- Airline Reservation System-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Airline Reservation System</title>
{
document.writeln("The First Class is already fully
booked<br/>");
secondQuestion(seats);
}
else if (element ==-1 && input == 2)
{
document.writeln("The Economy Class is already fully
booked<br/>");
secondQuestion(seats);
}
else
boarding Pass(input);
}
//to terminate the program
else
{
window.status="Bye-bye!";
System.exit(0);
}
}
}
function linear Search(the Array)
{
if (input == 1)
{
for (var n=0; n<6 ; n++)
if (the Array [n] == 0)
return n;
}
else if (input == 2)
{
for (var n=6; n<11 ; n++)
if (the Array [n] == 0)
return n;
}
return -1;
}
economyCount++;
}
}
functionsecondQuestion(theArray)
{
if (input == 1)
{
for (var n=6; n<11 ;n++)
{
if (theArray [n] == 0)
{
second Input = window.prompt("Do you want to move to Economy Class?
(If YES, please press 1. If NO, please press 2)","0");
if ( second Input == 1)
{
input = 2;
element=linear Search(seats);
document.writeln("You have been allocated to Economy
Class<br/>");
boardingPass(input);
break;
}
else if (secondInput == 2)
{
document.writeln("Next flight leaves in 3 hours<br/>"); break;
}
}
}
}
else if (input == 2)
{
for (var n=0; n<6 ;n++)
{
if (theArray [n] == 0)
{
secondInput = window.prompt("Do you want to move to First Class? (If YES,
please press 1. If NO, please press 2)","0");
for (var n=0; n<6 ;n++)
{
if (theArray [n] == 0)
{
secondInput = window.prompt("Do you want to move to First Class? (If YES,
please press 1. If
NO, please press 2)","0");
boarding Pass(input); break;
}
else if (secondInput == 2)
{
document.writeln("Next flight leaves in 3 hours<br/>");
break;
}
}
}
}
}
//-->
</script>
</head>
<body onload = "startArray()"></body>
</html>
Output:
******************************************************************
EX.NO:12
AIM:
To create menus and menu grouping using HTML.
Algorithm:
Step 1: Start the program.
Step 2: Create a HTML file content for creating menus and menu group
Step 3: Use javascript to display the group of elements
Step 4: Use option command for selection
Step 5: Display the output with menus and menu groups
Step 6:Stop the program
Algorithm:
Menus.Html <html>
<body>
<select> <option>volvo</option>
<option>saab</option>
<option>mercedes</option>
<option>audi</option>
</select> </body>
</html>
Menugroup.html
<html>
<body>
<select> <optgroup label="swedish cars">
<option value="volvo">volvo</option>
<option value="saab">saab</option>
<optgroup> <optgroup label="German cars">
<option value="mercedes">mercedes</option>
<option values="audi">audi</option> </optgroup>
</select>
</body>
</html>
Output:
******************************************************************
EX.NO:13
******************************************************************
Aim:
To create timetable using CSS in html.
Algorithm:
Step 1: Start the program.
Step 2: Create the table using<table><tr> <th><td> tags
Step 3: Apply the rowspan and colspan tags in table
Step 4: Apply the styles in html program
Step 5:Stop the program
Program:
Table.html
<!doctype html>
<html>
<head>
<title>Timetable</title>
<style type="text/css">
body
{
font-family: arial;
}
th,td
{
margin: 0;
text-align: center;
border-collapse: collapse;
outline: 1px solid #e3e3e3;
}
td
{
padding: 5px 10px;
}
th
{
background: #666;
color: white;
padding: 5px 10px;
}
td:hover
{
cursor: pointer;
background: #666;
color: white;
}
</style>
</head>
<body>
<table width="80%" align="center" >
<div id="head_nav">
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</div>
<tr>
<th>10:00 - 11:00</th>
<td>Physics-1</td>
<td>English</td>
<td title="No Class" class="Holiday"></td>
<td>Chemestry-1</td>
<td>Alzebra</td>
<td>Physical</td>
</div>
</tr>
<tr>
<th>11:00 - 12:00</td>
<td>Math-2</td>
<td>Chemestry-2</td>
<td>Physics-1</td>
<td>Hindi</td>
<td>English</td>
<td>Soft Skill</td>
</div>
</tr>
<tr>
<th>12:00 - 01:00</td>
<td>Hindi</td>
<td>English</td>
<td>Math-1</td>
<td>Chemistry</td>
<td>Physics</td>
<td>Chem.Lab</td>
</div>
</tr>
<tr>
<th>01:00 - 02:00</td>
<td>Cumm. Skill</td>
<td>Sports</td>
<td>English</td>
<td>Computer Lab</td>
<td>Header</td>
<td>Header</td>
</div>
</tr>
<tr>
<th>02:00 - 03:00</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</div>
</tr>
</table>
</body>
</html>
Output: