Step by Step guide for Hello World Page (HTML and JSP)

This post has been moved to http://srinichekuri.com/2016/01/14/step-by-step-guide-for-hello-world-html-and-jsp/

**********************************************************************

This post is a step by step guide to develop your first html and jsp. Traditionally, developers code ‘Hello World !!!’ as first page and I am sticking to this tradition.

I am using a Eclipse IDE and Apache Tomcat for this tutorial. I recommend going through ‘Step by Step guide to configure Eclipse and Apache Tomcat‘ before you proceed any further.

Step-1: Create Dynamic Web Application

Create a new Dynamic Web Project by clicking on FIle -> New -> Dynamic Web Project

dynamic_project.png

Give a project name and click on Finish.

dynamic_project_1

Step-2: Create a HTML page

Create a new html page by right clicking on WebContent and selecting New -> HTML File.

dynamic_project_2.png

Put in a filename helloWorld.html and click on Finish.

dynamic_project_3.png

Put in this code in helloWorld.html.

<!DOCTYPE html>
<html>
<head>
 <meta charset="ISO-8859-1">
 <title>Hello World</title>
</head>
<body>
 <h5>Hello World - html</h5>
</body>
</html>

Step-3: Create a JSP page

Create a new jsp page by right clicking on WEB-INF and selecting New -> JSP File.

dynamic_project_9

 

Put in a filename helloWorld.jsp and click on Finish.

dynamic_project_10

 

You are seeing any compilation errors then make sure that you have right Runtimes checked as shown below.

dynamic_project_5_1

Put in below code into the jsp.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World</title>
</head>
<body>
<h5>Hello World - jsp</h5>
</body>
</html>

Step-4: Add Project to Server.

Add Project server to Server.

dynamic_project_5_2

dynamic_project_5_3.png

Step-5: Access new pages.

Access html page by url in browser. Url will be in “http://localhost:<port>/HelloWorld/helloWorld.html&#8221; format

dynamic_project_6.png

Access jsp page by url in browser. Url will be in “http://localhost:<port>/HelloWorld/helloWorld.jsp&#8221; format

dynamic_project_7.png

 

 

Advertisements