EX.No.

:1(a) CREATION OF WEB PAGE USING HTML TAGS

AIM:
To create a web page using basic html tags including title ,marquee paragraph, textbox and
button tag.

DESCRIPTION:

In this program the entire web page is created using basic HTML tags .The important tags used
were
<title> - define the title of webpage
<marquee> - non- standard HTML element which causes text to scroll up automatically
<p> - define a paragraph
Textbox - an area on the screen where the user can enter the text input.
<button> - represents a clickable button to submit forms or anywhere in a document for
accessible

PROCEDURE:
STEP1: open the notepad
STEP 2: Use the required html tags to create a web page
STEP 3: Save the file as filename.html extension
STEP 4: Open the text document with any web browser to view the web page

RESULT:
Thus, the web page using basic html tags including title, marquee, paragraph, textbox and
button tag had been created and executed successfully

EX.No.:1(b) CREATION OF FORM

AIM:
To create a web page which accepts a user’s username and password as input and reset the page
when reset button is clicked.
 PROCEDURE:
STEP1: Open the notepad
STEP 2: Create a form using <form> tag
STEP 3: Input type as text is used to get user name
STEP 4: Password of the user is displayed using input type as password
STEP 5: Field set tag is used to group form elements
STEP 7: Submit button accepts the user’s data
STEP 8: Reset button reset the user’s entered information
STEP 9: Save the file with .html extension
STEP 10: Open the text document with any web browser which display the web page

RESULT:
Thus, the web page which accepts a user’s username and password as input and reset the page
when reset button is clicked had been created and executed successfully.

EX.No.:2 CREATE A WEB PAGE WITH THE FOLLOWING USING HTML

A. TO EMBED A MAP IN A WEB PAGE.

B. TO FIX THE HOT SPOTS IN THAT MAP.
C. SHOW ALL THE RELATED INFORMATION WHEN THE HOT SPOTS
ARE CLICKED

AIM:

To create a web page with image map to fix the hotspots and show its related information.
.

DESCRIPTION:

In Web page development, an image map is a graphic image so that a user can
click on different areas of the image and be linked to different destinations. User make
an image map by defining each of the sensitive areas in terms of their x and y
coordinates (that is, a certain horizontal distance and a certain vertical distance from the
left-hand corner of the image). With each set of coordinates, user specify a Uniform
 Resource Locator or Web address that will be linked to when the user clicks on that area.

There are three HTML elements used to create image maps:

<img> specifies the location of the image to be included in the map.
<map> is used to create the map of clickable areas.
<area> is used within the map element to define the clickable areas

RESULT:
Thus the web page had been created using image map to fix the hotspots and relevant
information had been displayed successfully.

EX.No.:3 CREATON OF WEB PAGE USING STYLE SHEETS

AIM:

To create a webpage with all types of Cascading Style Sheets.

DESCRIPTION:
Cascading Style Sheet (CSS) is used to set the style in web pages using HTML
elements. It sets the background color, font-size, font-family, color etc property of
elements in web pages.
There are three types of CSS which are given below:
 Inline style sheet
 Internal or Embedded style sheet
 External style sheet
PROCEDURE:

Inline CSS:
STEP 1: Create a HTML program
STEP 2: Select the selector and specify the format required for the web within the selector tag itself
 STEP 3: Run the program with a web browser.

Internal CSS:
STEP 4: Create a HTML program with <style> tag.
STEP 5: Inside the <style> tag, specify the format required for that web page.
STEP 6: Run the program with a web browser.

External CSS:
STEP 7: Open a notepad, type the needed CSS in it and save it with .css extension.
STEP 8: Refer this .css file in the HTML using the tag <link>.
STEP 9: Run the program with a web browser.

RESULT:
Thus a web page has been created with all types of CSS successfully.

VALIDATE THE EMAIL ID, PHONE NUMBER AND PASSWORD WHILE

EX.No.:4 ENTERING THE INFORMATION OF A STUDENT USING JAVASCRIPT

AIM:
To validate the email id, phone number and password while entering the information of a
student using JavaScript.

PROCEDURE:

STEP1: Open the notepad and type the required html elements and save it as index.html

STEP2: Open a another notepad, type the needed CSS in it and save it as app.css extension

STEP3: Refer this app.css file in the HTML using the tag <link>.

STEP4: Open the notepad, type the needed script in it and save it as a app.js extension
 STEP3: Refer this app.js file in the HTML using the tag <script>.

STEP5: The form includes text fields called name ,email, phoneno, password, confirm
password and a register button.

STEP6: Validation script will ensure the user entered details before the form is sent
to the server.

STEP7: Error message will be displayed if the register button is pressed without filling any
of the text fields.

STEP9: Function trim() is used to remove empty spaces. Each text field is set with certain if
condition for validation.

STEP10: Function called validate_Input() is used to performs the form validation,

followed by the formitself.
STEP11: Run the program with a web browser

RESULT:
Thus the validation of email id, phone number and password while entering the information
of a student using JavaScript has been implemented and executed successfully.

EX.No.:5 a INVOKING SERVLETS FROM HTML FORMS

AIM:

To write the servlet program to invoke servlet from html forms.

PROCEDURE:

Index.html

STEP1: Open net beans click new project select java web and select web application
STEP2: Right click on the web application and select HTML file and save the HTML file as
index.html
STEP3: Create a web page using HTML form that contains the invoke button
STEP4: Set the URL of the server as the value of form’s actionattribute.
STEP5: Run the HTMLprogram.
STEP6: Submit the form data to theserver.

NewServlet.java
 STEP1: Right click on the web application and select servlet file and save the file as
NewServlet.java
STEP2: Define the class server that extends the property of the classGenericServlet.
STEP3: Handle the request from the client by using the method service()
ofGenericServlet class.
STEP6: Get the parameter values from the HTML forms by using the
methodgetParameter().
STEP7: Send the response to the client by using the method of PrintWriterclass.

RESULT:

Thus the servlet program to invoke servlet from html forms has been implemented
and executed successfully.

EX.No.:5b SESSION TRACKING USING HIDDEN FORM FIELDS AND SESSION TRACKING
FOR A HIT COUNT

AIM:
To create a simple application to perform session tracking using hidden form fields
and for hit count

DESCRIPTION:
Session simply means a particular interval of time. Session Tracking is a way to
maintain state (data) of an user. It is also known as session management inservlet.

PROCEDURE
Index.html

STEP1: Create a web page using HTML form that contains the fields such as text,
and go button.

STEP2: Set the URL of the server as the value of form’s actionattribute.

STEP3: Run the HTMLprogram.

STEP4: Submit the form data to theserver.

Servlet.java
 STEP1: Right click on the web application and select servlet file and create FirstServlet.java and
Second Servlet.java
STEP2: Define the class server that extends the property of the classGenericServlet.

STEP3: Handle the request from the client by using the method service()
ofGenericServlet class.

STEP6: Get the parameter values from the HTML forms by using the methodgetParameter().

STEP7: Send the response to the client by using the method of PrintWriterclass.

STEP8: In FirstServlet.java the text field is hidden and the value is caught and displayed in
the Second servlet.java using getparameter().

Session tracking for hit count:

PROCEDURE:
STEP1: Right click on the web application and select servlet file and create hitcount.java
STEP2: Get session object from request.
STEP3: Retrieve visit count from session attributes
STEP4: If visit Count is null. Set count to 1. Else increment count by 1
STEP5: Set updated visit Count in session attributes and display it using HTML.
STEP6:Run the program

RESULT:
Thus the simple application to perform session tracking using hidden form fields and for hit
count has been implemented and executed successfully.

EX.No.:6
CREATION OF THREE-TIER APPLICATION
TO CONDUCT ONLINE EXAMINATION

AIM:

To create three tier application to conduct online examination.

PROCEDURE:
 1. Design the HTML page (login.html) with thefollowing
Create a form to get the input username and password from theuser.
Database is created to store username and password
Set the URL of the server (Acceptuser.java) as the value of the action attribute.
Use submit button to send form data to the server.
2. Create the Acceptuser.java file with the following

Read the input from the client.

Retrieve the username and password from table from the database.
Match the user input details with the correct answers from the database table.
The valid users alone allowed to take online examination.

3. Design the HTML page (ExamClient.html) with the following

Create a form to get the input from the user.
Use radio buttons to make various options for the questions.
Set the URL of the server (ExamServer.jsp) as the value of the action attribute.
Use submit button to invoke the server and send the form data to the server.
4. Create the ExamServer.java file with the following

Read the input from the client.

Retrieve the answers from the database.
Match the answers from the user with the correct answers from the database table.
For each correct answer increment the mark by5.

RESULT:
Thus the three tier application to conduct online application has been implemented and
executed successfully.

EX.No.:7
DYNAMIC WEBPAGE FOR SHOPPING CART

AIM:
To Install TOMCAT web server. Convert the static web pages into dynamic web pages
using servlets and cookies. Hint: Users information (user id, password,credit card number)
would be stored in web.xml. Each user should have a separate Shopping Cart.

PROCEDURE:
 STEP1 : First install the tomcat into the system.
STEP 2: Then make a subdirectory (eg., tr) in the \tomcat\webapps.
STEP3: Under tr create WEB-INF directory and also place the html files in this tr directory
only.
STEP4: Next under WEB-INF create two subclasses lib, classes and web.xml
STEP5:Next place all the class files under the classes and jar files(servlet-api.jar,classes12.jar
etc…) under lib sub directories.
STEP6: After this start tomcat by giving the following command at the
install_dir>tomcat>bin Catalina.bat run
STEP7: At the web browser give the url as http;//localhost:8080//tr/html.file or servlet url
pattern.
STEP8: Assign port no 8080 for tomcat.
STE 9: Run the servlet program
protected

RESULT :

Thus the dynamic webpage for shopping cart using servlets and cookies has been
implemented and executed successfully.

EX.No.:8
DYNAMIC WEBPAGES USING JSP

AIM:

Redo the previous task using JSP by converting the static web pages into dynamic
web pages. Create a database with user information and books information. The books
catalogue should be dynamically loaded from the database.

PROCEDURE:

1. Design the HTML page (index.html) with thefollowing

Create a form to get the input book name from theuser and view all book to display
the books.
Database is created to store book with attributes like s.no, name, author, publication
and edition.
Set the URL of the server (bookdisplay.jsp) as the value of the actionattribute to
 display all the books in the database
Set the URL of the server (booksearch.jsp) as the value of the actionattribute to
display the book giving the book name as input.
Use search button to send form data to theserver.
2. Create the.jsp file with thefollowing

Read the input from theclient.

In book display.jsp all the book in the book catalogue is viewed from the database
In book search.jsp books are searched and viewed based on their name as input from
the database

RESULT:

Thus the conversion of dynamic webpages into static web pagesinto using jsp has been
implemented and executed successfully

XML DOCUMENT TO STORE INFORMATION OF 10 USERS

EX.No.:9

AIM:

To Create and save an XML document at the server, which contains 10 students
Information. Write a Program, which takes student’s Id as input and returns the students
details from the XML document.

PROCEDURE:

STEP 1: Create a xml document with student details like id, name, place ,phone no and
email address

STEP 2: Create html document with a text box and search button

STEP3: Set the student id as input to display the student details

STEP4: Use getElementByTagName in the script to fetch the student details from XML
document

STEP 5: Run the program.

RESULT:
 Thus the XML document to store information of 10 users, which takes student’s Id as
input and returns the students details from the XML document has been implemented and
executed successfully.

(i)VALIDATE THE FORM USING PHP REGULAR EXPRESSION.

EX.No.:10
(ii)USING PHP TO STORE A FORM DATA INTO DATABASE

AIM:

To validate the form using PHP regular expression and to store data in the database.

PROCEDURE :

STEP 1: Create a form with email, phone password summit button.

STEP 2: Set the php server as the action of attribute.

STEP 3: Validate the email whether it is well formed using the function fiter_var()

STEP 4: Validate the phone if it contains only 10 numeric digits

STEP 5: Validate the password if it contain only 8 characters
STEP 6 : Submit the data to the server

STEP 7: Result is displayed within the web page using php_self .

STEP 8: Create a database and table with attributes in the phpmyadmin.

STEP 9: Create connection with database by defining localhost, username and password.

STEP 10: Submit the data in the database through html form.

RESULT:

Thus the validation of form using PHP regular expression and to store data in the
database has been implemented and executed successfully.