Examples Java Code Geeks

Eclipse Web Development Tutorial

Photo of Mohammad Meraj Zia

The Web development environment provides the tools we need to develop Web applications as defined in the Sun Microsystems Java™ Servlet 2.3 Specification and the Sun Microsystems JSP 1.2 Specification. Web applications can be simple (consisting of only static Web pages) or they can be more advanced and include JavaServer Pages (JSP) files and Java servlets.

These resources, along with an XML deployment descriptor (and other Web resources, are contained within a Web project during development. We deploy the Web project to the server in the form of a Web archive (WAR) file once it’s ready. The end user can then view the Web application as a Web site from a URL.  

Table Of Contents

The integrated Web development environment makes it easy to cooperatively create, assemble, publish, deploy and maintain dynamic, interactive Web applications.

In this tutorial we will see how we can develop a web application using eclipse.

1. Web resources

In most cases, all of the resources that we need to create for our Web application are developed during Web site or Web page design; However, there are additional resources that we may need to include in our Web project if we are using more advanced Web technologies in your application. These Web resources are not typical Web page files, and are often not the resources that we consider part of the final Web site. For example, tag libraries and Java™ resources, such as JAR files, are resources we might need to include in our Web project.

In fact, even the WAR file itself could be considered a Web resource, if we consider importing or exporting the resource.

2. Web page design

Web pages are an integral part of every Web application. Each Web page should serve to help achieve the overall goal of the entire Web site. There are many types of Web pages, ranging from simple HTML pages that contain no dynamic elements, to advanced Java-based pages that make use of servlets, scripts, forms, or data access components. A few of the many items you should consider when designing your pages are markup language, links, images, and style sheets.

3. Web projects

Web projects hold all of the Web resources that are created and used when developing your Web application. The first step to creating or importing a Web application is to create either a static or a dynamic Web project. Static Web projects are meant to contain only simple Web site resources, such as HTML files. Dynamic Web projects are used to structure Web applications that will use more complicated, dynamic Web technologies, such as JavaServer Pages files, and possibly data access resources.

Though the Web project is structured on your file system in compliance with the Java EE Web application standard for deployment purposes, the Project Explorer view is designed to show the most convenient display of project resources for use, while you are actually developing the Web application. When you are finished developing your Web application, you use the Web project to deploy the correct resources to the server. These resources will be packaged in a file called a Web archive, or WAR file.

4. Web archive (WAR)

A Web application is a group of HTML pages, JSP pages, servlets, resources and source file, which can be managed as a single unit. A Web archive (WAR) file is a packaged Web application. WAR files can be used to import a Web application into a Web server. In addition to project resources, the WAR file includes a Web deployment descriptor file. The Web deployment descriptor is an XML file that contains deployment information, MIME types, session configuration details, and other settings for a Web application. The Web deployment descriptor file (web.xml) provides information about the WAR file and is shared with the developers, assemblers, and deployers in a Java EE environment.

5. Creating a dynamic Web project

You create and maintain the resources for your Web applications in Web projects. Unlike with static Web projects, dynamic Web projects enable you to create resources such as JavaServer Pages and servlets. To create a new dynamic Web project, complete the following steps:

1. Open the Java EE perspective 2. Go to File => New => Dynamic Web Project

If you don’t see the ‘Dynamic Web Project’ option choose Other and in the Wizards text box start writing ‘Dynamic Web’.

3. In the pop-up enter the Project Name. For our example we will choose MyFirstDynamicProject. Choose the project location and the Target runtime . Use this field to define a new installed runtime environment. Runtimes are used at build time to compile projects. For our example we will use Tomcat 7.0. If you haven’t downloaded the Apache Tomcat you can do this from  Tomcat 7.0 . For the Dynamic web module version we will use 2.5. Leave the other fields as it is and click ‘ Finish ‘

On the next pop-up click ‘Next’. In the next pop-up (Web Module) you can define the Context root and content directory. For our example we will leave the default values as it is.

Click ‘Finish’. Eclipse will generate some files.

Now lets create a very simple servlet for our example. Right click on the ‘src’ folder and choose New=>Package. Give the package name (com.javacodegeeks). Click Finish. Now right click on the package and choose New=>Servlet. Give the servlet name (MyServlet) and click ‘Finish’.

Eclipse will create a sample MyServlet class with two methods – ‘doGet()’ and ‘doPost()’. These are the two most important methods of any servlet. You can read more about these methods here:  doGet() ,  doPost() . Now lets update the doGet() method. First we will get the reference to the PrintWriter by calling the response.getWriter() method. This returns a PrintWriter object that can send character text to the client. The PrintWriter uses the character encoding returned by getCharacterEncoding() . If the response’s character encoding has not been specified as described in getCharacterEncoding (i.e., the method just returns the default value ISO-8859-1), getWriter updates it to ISO-8859-1. Calling flush() on the PrintWriter commits the response. Either this method or getOutputStream() may be called to write the body, not both.

The doGet() method will look like below:

Now lets test the application. Fist we need to start the server. To start the Server right click on the server and select Start.

Once the server is started successfully, go to your preferred browser and type this URL: http://localhost:8080/MyFirstDynamicProject/MyServlet and press enter. You will see the text you set in the print writer is displayed. Now lets understand what the composition of URL. URL stands for U niform R esource L ocator. It is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it.

The first part of the URL is the scheme . In out case it’s ‘http’. ‘http’ is referred to as Hyper Text Transfer Protocol. ‘localhost’ refer to the machine where our application is deployed. In our case it’s the localhost. After the host, we provide the port where the application is listening to. After the post, we provide the context root. For our application it’s the same as the project name. You must be wondering what the last part (MyServlet) is ? When we created the default Servlet using Eclipse, Eclipse update the web.xml with the below entries:

5.1. Project Facets

how to create a web page in eclipse

We will contact you soon.

5.2. Context Root

The context root is the Web application root, which is the top-level directory of your application when it is deployed to the Web server. You can change the context root after you create a project using the project Properties dialog, which you access from the project’s pop-up menu. The context root can also be used by the links builder to ensure that your links remain ready to publish as you move and rename files inside your project.

6. Dynamic Web applications

There are two types of Web projects: dynamic and static. Dynamic web projects can contain dynamic Java EE resources such as servlets, JSP files, filters, and associated metadata, in addition to static resources such as images and HTML files. Static web projects only contain static resources. When you create Web projects, you can include cascading style sheets and JSP tag libraries (for dynamic Web projects), so that you can begin development with a richer set of project resources.

Dynamic Web projects are always embedded in Enterprise Application projects. The wizard that you use to create a dynamic Web project will also create an Enterprise Application (EAR) project if it does not already exist. The wizard will also update the application.xml deployment descriptor of the specified Enterprise Application project to define the Web project as a module element. If you are importing a WAR file rather than creating a dynamic Web project new, the WAR Import wizard requires that you specify a Web project, which already requires an EAR project.

6.1. WebContent folder

The mandatory location of all Web resources, includes HTML, JSP, graphic files, and so on. If the files are not placed in this directory (or in a subdirectory structure under this directory), the files will not be available when the application is executed on a server. The Web content folder represents the contents of the WAR file that will be deployed to the server. Any files not under the Web content folder are considered development-time resources (for example, .java files, .sql files, and .mif files), and are not deployed when the project is unit tested or published.

Though the default name given to the folder is WebContent, you can change the name in the Project Explorer by right-clicking the folder and selecting RefactorRename or from the Web page of the project’s Properties dialog. In a dynamic Web project, changing the folder name will update the Java build output directory.

6.1.1. META-INF

This directory contains the MANIFEST.MF file, which is used to map class paths for dependent JAR files that exist in other projects in the same Enterprise Application project. An entry in this file will update the run-time project class path and Java build settings to include the referenced JAR files.

6.1.2. WEB-INF

Based on the Sun Microsystems Java Servlet 2.3 Specification, this directory contains the supporting Web resources for a Web application, including the web.xml file and the classes and lib directories.

6.1.3. Classes

This directory is for servlets, utility classes, and the Java compiler output directory. The classes in this directory are used by the application class loader to load the classes. Folders in this directory will map package and class names, as in: /WEB-INF/classes/com/mycorp/servlets/MyServlet.class. Do not place any .class files directly into this directory. The .class files are placed in this directory automatically when the Java compiler compiles Java source files that are in the Java Resources directory. Any files placed directly in this directory will be deleted by the Java compiler when it runs.

The supporting JAR files that your Web application references. Any classes in .jar files placed in this directory will be available for your Web application.

7. Testing and publishing on your server

The testing and publishing tools provides runtime environments where you can test JSP files, servlets, HTML files, Java™ classes and many more artifacts. You can use the workbench to test and publish resources from many types of projects. Here are some examples:

  • Dynamic Web projects, which typically contain JSP files, HTML files, servlets, and JavaBeans™
  • Static Web projects, which typically contain HTML files and graphic files
  • Enterprise Applications projects, which may contain Java Archive (JAR) files or Web Archive (WAR) files or both, and pointers to other Web or EJB projects
  • EJB projects, which contain enterprise beans
  • Application client projects

After testing your application, you can use the tools to publish the application.

7.1. Server definitions

The workbench defines servers to test and publish your projects. Servers are definitions that identify where you want to test your projects. You can either have the development environment create the servers automatically for you, or you can create them using the New Server wizard. To open the Server view go to Window=>Show View=>Servers. If there is no Server defined you will see a link saying ‘No servers are available. Click this link to create a new server…’. Click on this link

For our example we will choose ‘Tomcat v7.0 Server’. Leave the rest of the field values as default. Click ‘Next’. On the next screen select the project and click ‘Add’ then click ‘Finish’

You will see the server in the Servers tab and also in the Project Explorer tab. The Servers view (similar to the one shown below) allows you to manage the servers. This view displays a list of all your servers and projects that are associated with that server. A project displays under a server when a project from the workbench is added to the server. You can use this view to start, start in debug mode, restart, or stop the servers. In addition, you can use the Servers view to determine the current status and state of the server; and the projects added to the server from the workbench.

8. Conclusion

In this tutorial we saw how we can make use of the in-build features of Eclipse to create a web application. This is a simple example of the features which Eclipse provides. There are a lot other features which can be used for building much more complex applications.

how to create a web page in eclipse

Mohammad Meraj Zia

Related articles.

how to create a web page in eclipse

Eclipse WindowBuilder Tutorial

Eclipse window builder tutorial for gui creation, eclipse environment variable setup example, eclipse not starting: troubleshooting, how to check your eclipse version, how to install and use the eclipse marketplace plugin, eclipse html plugin example, eclipse yaml editor tutorial.

guest

This site uses Akismet to reduce spam. Learn how your comment data is processed .

mrinal kumar singh

need help in developing dynamic web based java project on e-learning

Michael Hollins

Web design and development is one of the best tool for marketing your business now a days . It is the best representation of your business in an online market. Most of the business must need to website to grow their business. Web design is the most crucial part of web development as is make for the working website . I am also want to learn web development but not find any suitable platform but no doubt your site is quite amazing.You have define very well .Thanks for sharing this useful information.

how to create a web page in eclipse

How to write an HTML and CSS code with eclipse ide

Before we start today blog, let me tell you that writing HTML code is different than normal languages such as python, and, C/C++ 

Because, to use the python and C/C++, you won’t need a web browser to view the output of the program instead you can use any specific ide to display the output on the console but when it comes to HTML we use a web browser to display the output on the webpage

So, to see the output of the Html code we need a web server and also we need to configure our eclipse ide with a web server

in reality, The web server, that we will be using for this blog is Apache Tomcat

Step #1: download the eclipse ide Java EE IDE

before you install eclipse ide on your system make sure you have installed java on your system

Because the eclipse is a purely  java based ide and you need java on your system to operate eclipse on your system

who to determine whether java is installed or not on your system?

To  check whether you have a java installed on your system you need to use a shortcut key as win + R from the keyboard and type cmd then press OK to open the window console

Once you see, a command prompt window popup on the screen, then, at that instance, type the below command to determine whether you have java on your system

with this in mind, Clear as mud?

on this occasion, Let’s jump in to download the eclipse ide

Click here —>to download the ide from the eclipse website

Once, you opened the eclipse website, then, at  that instant, go to the download packages section and choose the Eclipse ide for Enterprise Java web Developers

Choose your operating system, in my case, I have a window 64bit operating system so, choose your operating system according to the system requirement and download it

In case, if you don’t know whether you have a 32bit or 64bit system type

Then in that case type, the command in the command prompt  mentioned below to view your system type

Pretty effective, right?

Once, you finished downloading the eclipse ide, then, at that instant, extract the files from the .zip file through a WinRAR software

when you finished the extraction of files, then, at that instance, go to the eclipse folder  and launch the eclipse application

Step #2: download the Apache Tomcat webserver

Okay, here’s another one, that you need to download

Click here —>to download the Apache Tomcat webserver

this time, Choose the version which you would like to download and download it on your system

Once you finished downloading the file, extract the .zip file

Step #3: configure the eclipse ide with web server Apache Tomcat

in similar fashion, Let’s dive in to configure the eclipse ide

without a doubt, First, Launch your eclipse ide

on this occasion, go to the servers tab and click on (no servers are available click this link to create a new server )

In case, if you didn’t see the servers tab then at that instant

of course, click window —>show view —> and select servers option

not to mention, Next, select the Apache Tomcat version which you have downloaded and click next  

Browse to the path where you have saved the Tomcat server in my case, the path directory is (C:\Users\Mohammed Anees\Desktop\software\apache_tomcat\apache-tomcat-8.5.73 ) then click next

Finally, click Finish to complete the configuration to connect eclipse ide to  web server Apache Tomcat

without a doubt, That’s it!

up to the present time, We configured, eclipse ide with the web server Apache Tomcat

Step #4: Test the configuration

in reality, let’s see whether we configured it right.

this time, By default, the server will be in stop mode

So, to test the configuration, that we have set,

to be sure, first, click on the server section, and on the server section, right-click on the” Tomcat v9.0 Server at localhost[stopped]” and click start

On your console tab, you will see something like this below when you click start

Once the server started, then on the server tab you will see

this time, “ Tomcat v9.0 Server at localhost[started,synchronized]”

 If you double click on the “ Tomcat v9.0 Server at localhost[started, synchronized]” then at that instance, you will be able to see the port number of the webserver which is 8080

As we know that our server is started then let’s do a simple test to check the server on a web browser

until now, Okay,

First, open your web browser and type the address as “ localhost:8080 ” then you will get a result something like the below image

in reality, which means that you got a response from the Tomcat server

in short, whoa!

on the positive side, let me congrats you, that we have setup our eclipse ide with the tomcat server

in a word, Next, we will see, how we can create our first project right?

Step #5: Create a web project in eclipse

Once you configured the eclipse-ide with web server  Apache Tomcat then we can create a new  project

First, go to new—>Dynamic web project —> write the project name “Demo”—> next—> next —> finish

Second , right click on the demo project —>new —>HTML file—> write file name —> finish

Third, save the project(ctrl+s)

Fourth, run the project by going to run as —> 1 run on server —> click on localhost —>select Tomcat v9.0 Server at localhost —> next —> finish —> ok

Fifth : you will see the output on the web browser, if you don’t see any output on the web browser then at that instant, click on window —-> web browser and select the browser  

not to mention Some basics about HTML

Structure of a HTML document

<head> tag  is the place where you keep data that will not be visible to end-users  but adds functionalities to the web page such as title, styles

<body> tag is the place where keep content of the page such as headings, buttons, text

Comment in HTML file

in a word, To comment in an HTML file use the below code

that is to say, body tag applied all over Html document, usually, there has to be only one body tag that will be available in the whole Html document

The things that a body tag can do can also be done with the help of CSS and it is also, recommended to use CSS instead of  a body tag

to begin with, Let’s see, How to use a body tag  in an Html document

Headings tags

A paragraph  , sub tag and sup tag.

on this occasion, let’s see how we can  write subscript(sub tag) and superscript(sup tag) in Html and how we can use it, to generate subscript and superscripts to the letters

The sub and sup elements

water H 2 O

Temperature in degrees 30 °C text.

Create space in Html

Striking a text.

Note: strike tag is removed from the HTML5

striking a text

hi there! People, let’s see, how we can strike a text? Successfully !

Second paragraph!

Third paragraph

Hyperlinks are nothings but Html links that you can create to link a text,  image, button, or any other  element to a certain destination

Example Text :To use the below code,  you need to copy and paste code in your Arduino ide and install a library called ESPAsyncWebServer

Use ” target=”_blank” to open the link in a new tab window

Linking a text and button

CSS (cascading style sheets)

in brief, CSS is used to style the HTML document and it consists of 3 major attributes

  • Selectors: [a selector is an HTML tag at which you can apply a style such as  <h1> or <p1> etc]
  • Property: [for example, colour is a property which denotes the colour of the text ]
  • Property value: [ for example, the colour property has property value #ff0000 for red and #00ff00 for green]

How to link a CSS style sheet  to an HTML document

in general, There are three ways by which you can link a CSS style sheet to an HTML document

this time, You can create an external file in eclipse by right-clicking the project folder in my case Demo folder —>new —>CSS.FILE—>write file with .css extention  —>finish

Inline style defines within a specific element so, that it will not interfere with the other remainging elements on the web page

To write a CSS you need to use style tag <style></style> but is recommended to place in the <head></head> tags of your html document

This is a heading

This is a paragraph.

How to use Classes and ids

not to mention, by using classes you can change tags with different styles and  use the below code by creating an external .css file called style.css

NOTE : to begin with, always use dot(.) prefix for class

For example(.blue, .yellow, .pink)

For ids replace the word class with ids and also replace the prefix dot(.) with a hash(#)

You can use classes and ids but the best practice is that ids have to be unique on a page

Because it will be helpful for you when you write a java script

Meta tag in HTML

in short, The meta tag provides information related to the HTML page and the content of the meta tag will not be visible to the end-user or web page

Meta tags, metadata is used by browsers and search engines to get information related to a webpage such as description, keywords, author, character set

in general, the Meta tags are always used in <head> element

not to mention,The meta tag viewport will scale the web page  to a mobile device or any other device

in brief, The span tag is a line tag and it is used to format a text

hi there! People I have just created a paragraph to explain the concept of span tag and let me create a second line of the paragraph so that I can extend the paragraph

When we use span tag it will not have any effect on the text

Because to format, a text span won’t have any local attributes we can only use global attributes(such as class, ids, style) in the span tag that we usually use in other tags

in sum, The div tag divides the whole Html document into different sections and the div element is often used as a container(similar to a box) for other Html elements

When we use a div tag it will not have any effect on the div section

Because to format, a section div won’t have any local attributes we can only use global attributes(such as class, ids, style) in the div tag that we usually use in other tags

to sum up, We can change the properties of div by using CSS

Difference between div tag and span tag

Both div tag and span tag are similar to each but div tag is used for a section of elements while the span is used for inline

In the below code, the span tag is interchanged with the div tag so that you can see the difference

in case, If you have noticed!

That when I applied div into the line of a text, it immediately move to next line similarly, in case of span tags it works smoothly within the single line of text

Some div tag examples

table of content

Position a text

' src=

Mohammed Anees

Hey there, welcome to aneescraftsmanship I am Mohammed Anees an independent developer/blogger. I like to share and discuss the craft with others plus the things which I have learned because I believe that through discussion and sharing a new world opens up

Leave a Reply Cancel reply

Your email address will not be published.

How to use WiFi.h library with esp32 board

Copyright© 2018-2021 aneescraftsmanship 

Java web development with Eclipse WTP - Tutorial

1. eclipse web tool platform, 2. installation and configuration of eclipse wtp, 3.1. setting up runtime environments, 3.2. starting a web server, 4.1. create web project, 4.2. creating data access object, 4.3. creating the servlet, 4.4. deployment of the servlet, 4.5. validate the deployment, 5. web archive - how to create a war file from eclipse, 6. web development resources.

Eclipse Web Tool Platform (WTP). This tutorial describes the development of servlets and Java web application with Eclipse WTP.

The Eclipse WTP project provides tools for developing standard Java web applications. Typical web artifacts in a Java environment are HTML, CSS and XML files, webservices and servlets. Eclipse WTP simplifies the creation these web artifacts. It provides runtime environments in which these artifacts can be deployed, started and debugged.

In Eclipse WTP you create Dynamic Web Projects . These projects provide the necessary functionality to run, debug and deploy Java web applications.

Eclipse WTP supports all major web containers. This includes Jetty and Apache Tomcat as well as most Java EE application server. In this tutorial we use Apache Tomcat as the web container.

The tutorial describes the creation of a web application using Java servlets.

Your Eclipse IDE might already have the WTP tooling installed, in this case skip this step.

Use the Eclipse Update Manager to install the following features from the Web, XML, Java EE Developmentand OSGi Enterprise Development category.

Eclipse Java EE Developer Tools

Eclipse Java Web Developer Tools

Eclipse Web Developer Tools

JST Server Adapters

JST Server Adapters Extensions

Eclipse WTP installation

3. Web server configuration in Eclipse

Download the latest version of Tomcast from http://tomcat.apache.org/ . Extract them to your file system.

To configure Eclipse WTP, select from the menu Window   Preferences   Server   Runtime Environments . Press the Add button.

WTPConfig10

Select your version of Tomcat and select the Create a new local server flag.

WTPConfig20

Point to your existing Tomcat download.

WTPConfig30

Press the Finish and afterwards OK .

You are now control the Tomcat server instance from your Eclipse IDE.

Once you have configure a local Tomcat server the Servers view allows you to start start and stop this server. To open this view select Window   Show View   Other…​   Server   Servers…​ .

wtp tomcatserver10

You can stop and start the Tomcat server via the Servers view.

wtp tomcatserver20

4. Exercise: Create and run a servlet

In this exercise you create a servlet which works as a webpage counter. It tracks the number of visitors of the webpage and persists the number in a text file.

Create a new Dynamic Web Project called com.vogella.web.filecounter by selecting File   New   Other…​   Web   Dynamic Web Project .

wtp first project10

Press twice the Next button and select the Generate web.xml deployment descriptor on the last page.

wtp first project30

Afterwards press the Finish button.

If Eclipse asks you, to switch to the Java EE Perspective answer yes.

A new project has been created with the standard structure of a Java web application. The WEB-INF/lib directory holds all the JAR files that the Java web application requires.

Create a new package called com.vogella.web.filecounter.dao .

Create the following new Java class to read and write the counter value to and from the file.

Create a servlet. Right-click on your project and select New   Servlet .

Enter the following data.

wtp first project40

Press finish .

You could also create a servlet without the wizard. The wizard creates a Java class which extends the javax.servlet.http.HttpServlet and adds the servlet settings to the web.xml file.

Enter the following code.

This code will read the counter from a file on the server and return plain text to the browser. The servlet will increase the counter if the user was inactive for 5 seconds.

You application must be deployed to the server and started there. Select your servlet or your project, right-click on it and select Run As   Run on Server from the context menu and select your existing server.

wtp first project60

Ensure your servlet is selected to run on the server.

wtp first project70

In case you get the error "The Tomcat server configuration at \Servers\Tomcat v7.0 Server at localhost-config is missing. Check the server for errors.", simply delete the existing server configuration and create a new one.

Press the Finish button.

If the deployment was successfully you should be able to access your servlet via the following URL:

The servlet will return the number of times it was accessed. If you wait 5 seconds and refresh the browser, the number should increase.

wtp first project80

Congratulations. You created your first working servlet with Eclipse WTP!

The following describes how to create a Web Archive (WAR) from Eclipse.

Right-click on the project and select Export .

Specify the target directory and press Finish .

You can now import the WAR file to your production Tomcat system and test the web application.

Introduction to Java Web development

JavaServer Faces (JSF) development tutorial

If you need more assistance we offer Online Training and Onsite training as well as consulting

See License for license information .

how to create a web page in eclipse

Javatpoint Logo

Java Tutorial

Control statements, java object class, java inheritance, java polymorphism, java abstraction, java encapsulation, java oops misc.

JavaTpoint

Java is one of the most used programming languages for developing dynamic web applications. A web application is computer software that utilizes the web browser and technologies to perform tasks over the internet. A web application is deployed on a web server.

provides some technologies like and that allow us to develop and deploy a web application on a server easily. It also provides some frameworks such as Spring, Spring Boot that simplify the work and provide an efficient way to develop a web application. They reduce the effort of the developer.

We can create a website using static pages and style them using , but we need server-side technology when we want to create a dynamic website.

In this section, we will see how to create a website using Java Servlets and HTML. Further, we will see how these technologies are useful for developing a web application.

In this section, we have included:

Let's understand the components of a web application:

A web application is computer software that can be accessed using any web browser. Usually, the frontend of a web application is created using the scripting languages such as HTML, CSS, and JavaScript, supported by almost all web browsers. In contrast, the backend is created by any of the programming languages such as Java, Python, Php, etc., and databases. Unlike the mobile application, there is no specific tool for developing web applications; we can use any of the supported IDE for developing the web application.

The web server is a process that handles the client's request and responds. It processes the request made by the client by using the related protocols. The main function of the webserver is to store the request and respond to them with web pages. It is a medium between client and server. For example, Apache is a leading webserver.

A client is a software that allows users to request and assist them in communicating with the server. The web browsers are the clients in a web application; some leading clients are Google Chrome, Firefox, Safari, Internet Explorer, etc.

The HTML stands for HyperText Markup Language; it is a common language for Web Server and Web Client communication. Since both the web server and web client are two different software components of the web, we need a language that communicates between them.

The HTTP stands for HyperText Transfer Protocol; it is a communication protocol between the client and the server. It runs on top of the TCP/IP protocol.

Some of the integral components of an HTTP Request are as following:

The HTTP method defines an action to be performed; usually, they are GET, POST, PUT, etc.

URL is a web address that is defined while developing a web application. It is used to access a webpage.

The form parameter is just like an argument in a Java method. It is passed to provide the details such as user, password details on a login page.

URL stands for Universal Resource Locator used to locate the server and resource. It is an address of a web page. Every web page on a project must have a unique name.

A URL looks like as follows:

Where,

It is the starting point of the URL that specifies the protocol to be used for communication.

The localhost is the address of the server. When we run our application locally, it is called localhost; if we deployed our project over the web, then it is accessed by using the domain name like "javatpoint.com". The domain name maps the server to IP addresses.

This is the port number for the local server; it is optional and may differ in different machines. If we do not manually type the port number in the URL, then by default, the request goes to the default port of the protocol. Usually, the port no between 0 to 1023 are reserved for some well-known services such as HTTP, HTTPS, FTP, etc.

We have discussed all the major components of a web application. Let's move towards our main motive How to build a web application in Java.

First, understand servlet:

A Servlet is a Java program that runs within a web server; it receives the requests and responds to them using related protocols (Usually HTTP). The Servlets are capable enough to respond to any type of request; they are commonly used to make the application functional.

We can create a static website using only HTML and CSS, but when it comes to dynamic, we need a server-side programming language. For these applications, Java provides Servlet technology, which contains HTTP-specific servlet classes.

The and packages contain interfaces and classes for creating servlets. All servlets should implement the Servlet interface, which defines life-cycle methods. To implement a generic service, we can use the GenericServlet class by extending it. It provides and methods to handle HTTP-specific services.

Web servers are capable enough to serve static HTML requests, but they don't know how to deal with dynamic requests and databases. So, we need a language for dynamic content; these languages are PHP, Python, Java, Ruby on Rails, etc. In Java, there are two technologies Servlet and JSPs, that deals with dynamic content and database. Java also provides frameworks such as Spring, Spring Boot, Hibernate, and Struts to use the servlet and JSP easily.

The Servlets and JSPs are server-side technologies that extend the functionality of a web server. They support dynamic response and data persistence. We can easily create a web application using these technologies.

Let's create our first web applications:

To create a web application, we need the following tools:

IDE ( or Netbeans)

Database (Oracle or )

Server ( )

Before Creating any web application, ensure that all of the above tools are properly installed on your system.

Now, follow the below steps to develop a web application:

Open the Eclipse IDE, navigate to

Now, enter the project name and click to continue.

deployment descriptor.

Now, create a servlet by right-clicking on the folder. To create a servlet right click on the folder and navigate to menu. Here, provide the Servlet name:

button. It will create a TestServlet as specified. You can choose any of your Servlet names.

We can see our Servlet is displaying lots of errors it is because we have not added the jar file yet. To add the jar file, right-click on the project and select the configuration option by navigating to option. Now, click on the option.

file.

to continue.

Now select option. It will add the jar file to our project.

Now, our first web application is almost ready. We can create HTML pages that we want to display on our website.

To create an HTML page, right-click on the folder and select the New HTML file option from the menu with the name .

We have created the follwing HTML file:

> <title>First Web Application</title> </head> <body> <h1>Welcome</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </body> </html>

Now, map this file in the web.xml file. The web.xml is a deployment descriptor for the Servlet applications. Since, Servlet 3.0, we can use annotations instead of the deployment descriptor.

To map a servlet, we have to provide the servlet details such as Servlet name and class. Consider the below code:

We can also define our welcome file; a welcome file is the first file of the project that initiates the project, also known as Home. We can define multiple welcome files.

Consider the below code:

From the above code, we can see by default the servlet defines several welcome files. If you want to use any file other than the listed files, you can define that here.

Now, our first web application is ready.

To run the application, right-click on the project and run it on the server by selecting option.

Now, we can design this by adding more web pages and styles.

Add the image file into folder.

In this section, we have discussed how to create a web application using Java Servlets. Java facilitates with other frameworks such as Spring and Spring Boot that helps us to develop web applications easily. These frameworks reduce the effort of the developer.

Check out our and tutorials.





Youtube

  • Send your Feedback to [email protected]

Help Others, Please Share

facebook

Learn Latest Tutorials

Splunk tutorial

Transact-SQL

Tumblr tutorial

Reinforcement Learning

R Programming tutorial

R Programming

RxJS tutorial

React Native

Python Design Patterns

Python Design Patterns

Python Pillow tutorial

Python Pillow

Python Turtle tutorial

Python Turtle

Keras tutorial

Preparation

Aptitude

Verbal Ability

Interview Questions

Interview Questions

Company Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

Artificial Intelligence

AWS Tutorial

Cloud Computing

Hadoop tutorial

Data Science

Angular 7 Tutorial

Machine Learning

DevOps Tutorial

B.Tech / MCA

DBMS tutorial

Data Structures

DAA tutorial

Operating System

Computer Network tutorial

Computer Network

Compiler Design tutorial

Compiler Design

Computer Organization and Architecture

Computer Organization

Discrete Mathematics Tutorial

Discrete Mathematics

Ethical Hacking

Ethical Hacking

Computer Graphics Tutorial

Computer Graphics

Software Engineering

Software Engineering

html tutorial

Web Technology

Cyber Security tutorial

Cyber Security

Automata Tutorial

C Programming

C++ tutorial

Control System

Data Mining Tutorial

Data Mining

Data Warehouse Tutorial

Data Warehouse

RSS Feed

How To Create Dynamic Web Project Using Eclipse [Step By Step Explanation]

How To Create Dynamic Web Project Using Eclipse [Step By Step Explanation]

Creating a dynamic web project using Eclipse is a crucial skill for web developers aiming to build interactive and responsive applications. How To Create Dynamic Web Projects using Eclipse is a comprehensive guide for professionals at any stage of their career, offering step-by-step ins tructions to master this essential aspect of web devel opment. Unlike static web proj ects, dynamic ones interact with users in real time, processing and displaying data according to user requests. Eclipse, a leading integrated de velopment environment (IDE), provides a power ful platform for deve lopers to construct, deploy, and manage dynamic web projects efficiently . This article will delve into key a reas, including the difference between static and dynamic we b projects, how to i nitiate a dynamic web project in Eclipse, addressing the common ‘Eclipse Dynamic Web Project Mi ssing’ error , and providing final thoughts for a smooth development process .

This guide is designed to equip developers with the necessary tools and knowledge to navigate the complexities of creating dynamic web projects, ensuring they are well-prepared to tackle the challenges of modern web development.  

Check out our  freecourses  to get an edge over the competition.

Explore Our Software Development Free Courses

Difference Between Static and Dynamic Web Projects

A common question among students is what’s the difference between static web projects and dynamic ones. Static web projects don’t have Java and its related technologies (JSP, servlets, etc.). They only have essential web development components, such as HTML and CSS. They don’t have external files or databases. This keeps them simple and relatively easy to modify but restricts their functionality substantially. 

Ads of upGrad blog

Check Out upGrad Full Stack Development Bootcamp (JS/MERN)

Dynamic web projects have more advanced components, such as Java, PHP, ASP, etc. They have a lot of focus on server-side development. Dynamic web projects offer many advantages over static web projects as they can provide more information and functionalities. It would be best if you chose dynamic web projects over static web projects because of these facilities. Dynamic web projects allow you to manage more information and create complex and advanced websites. 

Read:  Java Project Ideas & Topics

Explore our Popular Software Engineering Courses

View All our Courses Below

How to Launch a Dynamic Web Project in Eclipse

First, we’ll start Eclipse and switch to the Java EE perspective. 

Click on the ‘File’ button, which will show you a menu. Select ‘New’ there and choose the dynamic web project option there. Now select ‘Next’ to proceed to the next step.

Check Out upGrad Advanced Certification in DevOps

Now you’ll see a menu pop up where you have to enter your project name. Enter your desired project name. Before selecting the ‘Finish’ button, you first have to take care of the Target Runtime. 

There are three possibilities in this section: you may have the server runtime installed, not installed, or the field might be blank. All of them require different steps. 

First, let’s discuss the situation where you don’t have the server runtime installed. In this case, the Target runtime field wouldn’t have any option configured automatically. So you’d have to click on ‘New’ and get the required Target runtime. 

If you had installed Tomcat 5.0 previously, and the default workbench JRE is JRE 1.4, the software would select Apache Tomcat v5.0 as the default Target runtime. In this case, you don’t have to choose any Target runtime. Click the Finish button to proceed to the next step.

However, it is possible to have the Target runtime field blank. In that case, select Next to head to the Project Facet page and choose Java version 1.4 there. You’d see the Apache Tomcat v5.0 appear in the ‘Runtimes’ section. Please select it and click on Bind to bind the selected Java version to the runtime. Once done, click the ‘Finish’ button, and this still will finish. 

In-Demand Software Development Skills

upGrad’s Exclusive Software and Tech Webinar for you –

SAAS Business – What is So Different?

Now that we have given our project a name and have selected its runtime, we only have to do a few formalities to start our Eclipse dynamic web project. When you complete the previous step, you’d see a license agreement, select Yes to accept it, and proceed to the final step. 

Select ‘Yes’ on the new window. It would open the J2EE perspective where you can see your newly created project under the Dynamic Web Projects folder of the Project Explorer. You can see your project’s contents by selecting it, and that’s it. You have now successfully created an Eclipse dynamic web project. 

Learn  Software Development Courses  online from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs or Masters Programs to fast-track your career.

Fixing the Eclipse Dynamic Web Project Missing Error

Sometimes people can’t find the option to start a Dynamic Web Project Using Eclipse. It is a common error and frustrates many users. If you don’t see the option to launch a Dynamic Web Project Using Eclipse, then you should follow these steps to fix this issue:

Open Eclipse in your system and click on the ‘Help’ button. You’d see a menu appear, select the ‘Install New Software’ option there.  

Now you’d see an input field called ‘Work with.’ Add the following link there:  http://download.eclipse.org/releases/mars .

However, the link we have shared here is specifically for the mars version of Eclipse. If you have another Eclipse version in your system, you’d have to use a different link. It isn’t tricky. Replace ‘mars’ with the name of your Eclipse version, and you’ll be good to go. 

After you add the link we shared above, and you’ll see multiple folders open. ‘Find the Web, XML, Java EE and OSGI Enterprise Development’ option there and under it, select these three options:

  • Eclipse Web Developer Tools
  • Eclipse Java EE Developer Tools
  • Eclipse Java Web Developer Tools

You’d see many other options but ignore them for now. Once you have selected these options, click next, and the software would start the installation. After the software installation finishes, you’d see a popup that would ask you to restart Eclipse. So, restart Eclipse, and that’s it. When you’d head to Eclipse’s menu now, you would find the dynamic web project option. You have successfully fixed the error in Eclipse. 

Read: 15 Exciting PHP Project Ideas & Topics For Beginners

Read our Popular Articles related to Software Development

Final Thoughts

We hope you found this guide on Dynamic Web Project Using Eclipse useful. You can now launch dynamic web projects in Eclipse quickly. If you have any questions or thoughts on this article, please let us know through the comments section below. We’d love to hear from you.

You can learn more about Java and its related solutions on our blog. We regularly share informational and exciting resources (like this one) there. The following are some articles for your further reading.

  • How to Code, Compile and Run Java Projects
  • Top 24 Java Interview Questions
  • 17 Project Ideas for Java Developers

If you’re interested to learn more about full-stack development, check out upGrad & IIIT-B’s Executive PG Programme in Software Development – Specialisation in Full Stack Development  which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects, and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.

Profile

Something went wrong

Our Trending Software Engineering Courses

  • Master of Science in Computer Science from LJMU
  • Executive PG Program in Software Development Specialisation in Full Stack Development from IIIT-B
  • Advanced Certificate Programme in Cyber Security from IIITB
  • Full Stack Software Development Bootcamp
  • Software Engineering Bootcamp from upGrad

Our Popular Software Engineering Courses

Full Stack Development

Popular Software Development Skills

  • React Courses
  • Javascript Courses
  • Core Java Courses
  • Data Structures Courses
  • ReactJS Courses
  • NodeJS Courses
  • Blockchain Courses
  • SQL Courses
  • Full Stack Development Courses
  • Big Data Courses
  • Devops Courses
  • NFT Courses
  • Cyber Security Courses
  • Cloud Computing Courses
  • Database Design Courses
  • Crypto Courses
  • Python Courses

Frequently Asked Questions (FAQs)

Eclipse is a software development platform for creating computer-based programs using a variety of programming languages such as Java, Python, C/C++, Ruby, and others. There are a number of plugins available, and more can be added to the platform. The Eclipse platform, which constitutes the basis for the Eclipse IDE, is made up of plugins intended to be extendable by including new plugins. The Eclipse platform, which was created using Java, may be used to develop sophisticated client applications, unified developer tools, and other tools. Any programming language where a plugin is accessible can be used with Eclipse as an IDE. The Eclipse IDE is a feature-rich IDE that offers a variety of programming tools for developers, making it easier for them to create complex applications on the Eclipse platform.

Plugins for any programming language are available in the Eclipse IDE, allowing it to quickly recognize keywords and aid in the development of applications on this platform. It gives a workspace where the user may group all of their projects into one. The source files, artifacts, and pictures may all be kept in one single workspace. The user has total control over the workspace name and project management in a single workspace. It includes editors and views for moving between IDEs and editing material. In Eclipse IDE, these various perspectives are referred to as viewpoints. A different view is offered to the user for each set of data.

Because the platform is the top java-based development environment, the eclipse IDE is mainly utilized for programming. It has a market share of roughly 65%. It's utilized because it allows you to plug in a variety of various components to the platform. Because of its capability, several types of IT organizations use the Eclipse IDE. It's also popular since it works with a variety of programming languages. The applications may be written in a variety of programming languages, including JAVA, C, C++, Python, PHP, and others. The Eclipse IDE, which includes various sophisticated capabilities for building Java-based applications, was selected by the majority of developers for producing JAVA-based apps.

Related Programs View All

Certification

40 Hrs Live, Expert-Led Sessions

2 High-Quality Practice Exams

View Program

how to create a web page in eclipse

Master's Degree

40000+ Enrolled Learners

how to create a web page in eclipse

Executive PG Program

IIIT-B Alumni Status

how to create a web page in eclipse

2 Unique Specialisations

how to create a web page in eclipse

Job Assistance

300+ Hiring Partners

159+ Hours of Live Sessions

how to create a web page in eclipse

126+ Hours of Live Sessions

Fully Online

20+ Hrs Instructor-Led Sessions

Live Doubt-Solving Sessions

13+ Hrs Instructor-Led Sessions

17+ Hrs Instructor-Led Training

3 Real-World Capstone Projects

32-Hr Training by Dustin Brimberry

Question Bank with 300+ Practice Qs

16 Hrs Live Expert-Led Training

CLF-C02 Exam Prep Support

how to create a web page in eclipse

Microsoft-Approved Curriculum

24 Hrs Live Expert-Led Training

4 Real-World Capstone Projects

45 Hrs Live Expert-Led Training

289 Hours of Self-Paced Learning

10+ Capstone Projects

288 Hours Self-Paced Learning

9 Capstone Projects

490+ Hours Self-Paced Learning

4 Real-World Projects

690+ Hours Self-Paced Learning

Cloud Labs-Enabled Learning

40 Hrs Live Expert-Led Sessions

2 Mock Exams, 9 Assessments

how to create a web page in eclipse

Executive PG Certification

GenAI integrated curriculum

how to create a web page in eclipse

Job Prep Support

Instructor-Led Sessions

Hands-on UI/UX

16 Hrs Live Expert-Led Sessions

12 Hrs Hand-On Practice

30+ Hrs Live Expert-Led Sessions

24+ Hrs Hands-On with Open Stack

2 Days Live, Expert-Led Sessions

34+ Hrs Instructor-Led Sessions

10 Real-World Live Projects

24 Hrs Live Expert-Led Sessions

16 Hrs Hand-On Practice

8 Hrs Instructor-Led Training

Case-Study Based Discussions

40 Hrs Instructor-Led Sessions

Hands-On Practice, Exam Support

24-Hrs Live Expert-Led Sessions

Regular Doubt-Clearing Sessions

Extensive Exam Prep Support

6 Hrs Live Expert-Led Sessions

440+ Hours Self-Paced Learning

400 Hours of Cloud Labs

15-Hrs Live Expert-Led Sessions

32 Hrs Live Expert-Led Sessions

28 Hrs Hand-On Practice

Mentorship by Industry Experts

24 Hrs Live Trainer-Led Sessions

Mentorship by Certified Trainers

GenAI Integrated Curriculum

Full Access to Digital Resources

16 Hrs Live Instructor-Led Sessions

80+ Hrs Hands-On with Cloud Labs

160+ Hours Live Instructor-Led Sessions

Hackathons and Mock Interviews

31+ Hrs Instructor-Led Sessions

120+ Hrs of Cloud Labs Access

35+ Hrs Instructor-Led Sessions

6 Real-World Live Projects

24+ Hrs Instructor-Led Training

Self-Paced Course by Nikolai Schuler

Access Digital Resources Library

300+ Hrs Live Expert-Led Training

90 Hrs Doubt Clearing Sessions

56 Hours Instructor-Led Sessions

82 Hrs Live Expert-Led Sessions

22 Hrs Live, Expert-Led Sessions

CISA Job Practice Exams

Explore Free Courses

Study Abroad Free Course

Learn more about the education system, top universities, entrance tests, course information, and employment opportunities in Canada through this course.

Marketing

Advance your career in the field of marketing with Industry relevant free courses

Data Science & Machine Learning

Build your foundation in one of the hottest industry of the 21st century

Management

Master industry-relevant skills that are required to become a leader and drive organizational success

Technology

Build essential technical skills to move forward in your career in these evolving times

Career Planning

Get insights from industry leaders and career counselors and learn how to stay ahead in your career

Law

Kickstart your career in law by building a solid foundation with these relevant free courses.

Chat GPT + Gen AI

Stay ahead of the curve and upskill yourself on Generative AI and ChatGPT

Soft Skills

Build your confidence by learning essential soft skills to help you become an Industry ready professional.

Study Abroad Free Course

Learn more about the education system, top universities, entrance tests, course information, and employment opportunities in USA through this course.

Suggested Tutorials

Python Tutorial

Explore Python programming with this concise tutorial, covering basics to advanced concepts for beginners and enthusiasts alike.

C Tutorial

Introduction to C Programming, Learn all the C programming language concepts in this tutorial.

Suggested Blogs

Top 10 Exciting Spring Boot Projects &#038; Topics For Beginners [2024]

by Rohan Vats

23 Jun 2024

Prime Numbers From 1 To 100 in Java: Display 1 to 100 in Java

21 Jun 2024

Literals In Java: Types of Literals in Java [With Examples]

20 Jun 2024

Top 32 Exception Handling Interview Questions and Answers in 2024 [For Freshers &amp; Experienced]

19 Jun 2024

Top 7 Popular String Functions in C [With Examples]

18 Jun 2024

Abstraction vs Encapsulation: Difference Between Abstraction and Encapsulation

01 Jun 2024

9 Best Full Stack Coding Project Ideas &amp; Topics For Beginners

30 May 2024

How to create, deploy and run Java Servlet in Eclipse

  •           JDK 7
  •           Eclipse IDE for Java EE Developers (Juno 4.2)
  •           Tomcat 7.0

You can use newer versions of these software programs.

Table of Content:

1. Create Dynamic Web Project

2. Create Servlet class

3. Deploy the servlet

4. Run and test the servlet

1. Create Java Dynamic Web Project

-           Project name: MyFirstServlet

-           Target runtime: Apache Tomcat v7.0. If Apache Tomcat v7.0 is not available in the dropdown list, click New Runtime button. The dialog New Server Runtime Environment appears, select Apache Tomcat v7.0:

new server runtime environment

Click Next . In the next screen, click Browse button to select Tomcat installation directory:

specify tomcat installation directory

Click Finish and Apache Tomcat v7.0 will be added to the dropdown list.

-           Dynamic web module version: 3.0

-           Configuration: Default Configuration for Apache Tomcat v7.0

New Dynamic Web Project screen 1

The configuration we have chosen conforms to Servlet specification version 3.0.

Leave other stuff as default, click Finish . The MyFirstServlet project is created.

2. Create Java Servlet class

-           Java package: net.codejava

-           Class name: HelloServlet

Create Servlet dialog

-           The annotation @WebServlet tells that the annotated class is a servlet. This annotation has been introduced since Servlet API 3.0. The URL mapping /HelloServlet is passed as a parameter of the annotation.

-           HttpServlet class is the base class for all servlets that are serving client’s requests through HTTP.

-           The doGet() method is overridden from the HttpServlet class, since we have chosen to override it in the dialog Create Servlet .

-           The no-argument constructor HelloServlet() is generated to place initialization code. Since we don’t initialize anything, this constructor can be safely deleted.

response.getWriter().println("Hello friend!" ) ;

project structure

3. Deploy the Java Servlet

new server dialog

4. Run and test the Java servlet

server started

Related Java Servlet Tutorials:

  • Java Servlet tutorial for beginners (XML)
  • Java Servlet tutorial for beginners (annotations)
  • Java Servlet and JSP Hello World Tutorial with Eclipse, Maven and Apache Tomcat

Other Eclipse Tutorials:

  • How to use Eclipse IDE for Java EE Developers
  • How to create, build and run a Java Hello World program with Eclipse
  • How to generate Javadoc in Eclipse
  • How to generate JAR file in Eclipse
  • How to create WAR file for Java web application in Eclipse
  • How to create Ant build file for existing Java project in Eclipse
  • How to pass arguments when running a Java program in Eclipse
  • How to create Java web project with Maven in Eclipse
  • 25 Eclipse Shortcut Keys for Code Editing
  • How to Add Copyright License Header for Java Source Files in Eclipse

About the Author:

how to create a web page in eclipse

Add comment

   

Notify me of follow-up comments

Comments  

  • Java Arrays
  • Java Strings
  • Java Collection
  • Java 8 Tutorial
  • Java Multithreading
  • Java Exception Handling
  • Java Programs
  • Java Project
  • Java Collections Interview
  • Java Interview Questions
  • Spring Boot
  • Solve Coding Problems
  • Share Your Experience
  • Spring Tutorial

Basics of Spring Framework

  • Introduction to Spring Framework
  • Spring Framework Architecture
  • 10 Reasons to Use Spring Framework in Projects
  • Spring Initializr
  • Difference Between Spring DAO vs Spring ORM vs Spring JDBC
  • Top 10 Most Common Spring Framework Mistakes
  • Spring vs. Struts in Java

Software Setup and Configuration

  • How to Download and Install Spring Tool Suite (Spring Tools 4 for Eclipse) IDE?
  • How to Create and Setup Spring Boot Project in Spring Tool Suite?
  • How to Create a Spring Boot Project with IntelliJ IDEA?
  • How to Create and Setup Spring Boot Project in Eclipse IDE?

How to Create a Dynamic Web Project in Eclipse/Spring Tool Suite?

  • How to Run Your First Spring Boot Application in IntelliJ IDEA?
  • How to Run Your First Spring Boot Application in Spring Tool Suite?
  • How to Turn on Code Suggestion in Eclipse or Spring Tool Suite?

Core Spring

  • Spring - Understanding Inversion of Control with Example
  • Spring - BeanFactory
  • Spring - ApplicationContext
  • Spring - Difference Between BeanFactory and ApplicationContext
  • Spring Dependency Injection with Example
  • Spring - Difference Between Inversion of Control and Dependency Injection
  • Spring - Injecting Objects By Constructor Injection
  • Spring - Setter Injection with Map
  • Spring - Dependency Injection with Factory Method
  • Spring - Dependency Injection by Setter Method
  • Spring - Setter Injection with Non-String Map
  • Spring - Constructor Injection with Non-String Map
  • Spring - Constructor Injection with Map
  • Spring - Setter Injection with Dependent Object
  • Spring - Constructor Injection with Dependent Object
  • Spring - Setter Injection with Collection
  • Spring - Setter Injection with Non-String Collection
  • Spring - Constructor Injection with Collection
  • Spring - Injecting Objects by Setter Injection
  • Spring - Injecting Literal Values By Setter Injection
  • Spring - Injecting Literal Values By Constructor Injection
  • Bean life cycle in Java Spring
  • Custom Bean Scope in Spring
  • How to Create a Spring Bean in 3 Different Ways?
  • Spring - IoC Container
  • Spring - Autowiring
  • Singleton and Prototype Bean Scopes in Java Spring
  • How to Configure Dispatcher Servlet in web.xml File?
  • Spring - Configure Dispatcher Servlet in Three Different Ways
  • How to Configure Dispatcher Servlet in Just Two Lines of Code in Spring?
  • Spring - When to Use Factory Design Pattern Instead of Dependency Injection
  • How to Create a Simple Spring Application?
  • Spring - init() and destroy() Methods with Example
  • Spring WebApplicationInitializer with Example
  • Spring - Project Modules
  • Spring - Remoting by HTTP Invoker
  • Spring - Expression Language(SpEL)
  • Spring - Variable in SpEL
  • What is Ambiguous Mapping in Spring?
  • Spring - Add New Query Parameters in GET Call Through Configurations
  • Spring - Integrate HornetQ
  • Remoting in Spring Framework
  • Spring - Application Events
  • Spring c-namespace with Example
  • Parse Nested User-Defined Functions using Spring Expression Language (SpEL)
  • Spring - AbstractRoutingDataSource
  • Circular Dependencies in Spring
  • Spring - ResourceLoaderAware with Example
  • Spring Framework Standalone Collections
  • How to Create a Project using Spring and Struts 2?
  • Spring - Perform Update Operation in CRUD
  • How to Transfer Data in Spring using DTO?
  • Spring - Resource Bundle Message Source (i18n)
  • Spring Application Without Any .xml Configuration
  • Spring - BeanPostProcessor
  • Spring and JAXB Integration
  • Spring - Difference Between Dependency Injection and Factory Pattern
  • Spring - REST Pagination
  • Spring - Remoting By Burlap
  • Spring - Remoting By Hessian
  • Spring with Castor Example
  • Spring - REST XML Response
  • Spring - Inheriting Bean
  • Spring - Change DispatcherServlet Context Configuration File Name
  • Spring - JMS Integration
  • Spring - Difference Between RowMapper and ResultSetExtractor
  • Spring with Xstream
  • Spring - RowMapper Interface with Example
  • Spring - util:constant
  • Spring - Static Factory Method
  • Spring - FactoryBean
  • Difference between EJB and Spring
  • Spring Framework Annotations
  • Spring Core Annotations
  • Spring - Stereotype Annotations
  • Spring @Bean Annotation with Example
  • Spring @Controller Annotation with Example
  • Spring @Value Annotation with Example
  • Spring @Configuration Annotation with Example
  • Spring @ComponentScan Annotation with Example
  • Spring @Qualifier Annotation with Example
  • Spring @Service Annotation with Example
  • Spring @Repository Annotation with Example
  • Spring - Required Annotation
  • Spring @Component Annotation with Example
  • Spring @Autowired Annotation
  • Spring - @PostConstruct and @PreDestroy Annotation with Example
  • Java Spring - Using @PropertySource Annotation and Resource Interface
  • Java Spring - Using @Scope Annotation to Set a POJO's Scope
  • Spring @Required Annotation with Example
  • Spring Boot Tutorial
  • Spring MVC Tutorial

Spring with REST API

  • Spring - REST JSON Response
  • Spring - REST Controller

Spring Data

  • What is Spring Data JPA?
  • Spring Data JPA - Find Records From MySQL
  • Spring Data JPA - Delete Records From MySQL
  • Spring Data JPA - @Table Annotation
  • Spring Data JPA - Insert Data in MySQL Table
  • Spring Data JPA - Attributes of @Column Annotation with Example
  • Spring Data JPA - @Column Annotation
  • Spring Data JPA - @Id Annotation
  • Introduction to the Spring Data Framework
  • Spring Boot | How to access database using Spring Data JPA
  • How to Make a Project Using Spring Boot, MySQL, Spring Data JPA, and Maven?

Spring JDBC

  • Spring - JDBC Template
  • Spring JDBC Example
  • Spring - SimpleJDBCTemplate with Example
  • Spring - Prepared Statement JDBC Template
  • Spring - NamedParameterJdbcTemplate
  • Spring - Using SQL Scripts with Spring JDBC + JPA + HSQLDB
  • Spring - ResultSetExtractor

Spring Hibernate

  • Spring Hibernate Configuration and Create a Table in Database
  • Hibernate Lifecycle
  • Java - JPA vs Hibernate
  • Spring ORM Example using Hibernate
  • Hibernate - One-to-One Mapping
  • Hibernate - Cache Eviction with Example
  • Hibernate - Cache Expiration
  • Hibernate - Enable and Implement First and Second Level Cache
  • Hibernate - Save Image and Other Types of Values to Database
  • Hibernate - Pagination
  • Hibernate - Different Cascade Types
  • Hibernate Native SQL Query with Example
  • Hibernate - Caching
  • Hibernate - @Embeddable and @Embedded Annotation
  • Hibernate - Eager/Lazy Loading
  • Hibernate - get() and load() Method
  • Hibernate Validator
  • CRUD Operations using Hibernate
  • Hibernate Example without IDE
  • Hibernate - Inheritance Mapping
  • Automatic Table Creation Using Hibernate
  • Hibernate - Batch Processing
  • Hibernate - Component Mapping
  • Hibernate - Mapping List
  • Hibernate - Collection Mapping
  • Hibernate - Bag Mapping
  • Hibernate - Difference Between List and Bag Mapping
  • Hibernate - SortedSet Mapping
  • Hibernate - SortedMap Mapping
  • Hibernate - Native SQL
  • Hibernate - Logging by Log4j using xml File
  • Hibernate - Many-to-One Mapping
  • Hibernate - Logging By Log4j Using Properties File
  • Hibernate - Table Per Concrete Class Using Annotation
  • Hibernate - Table Per Subclass using Annotation
  • Hibernate - Interceptors
  • Hibernate - Many-to-Many Mapping
  • Hibernate - Types of Mapping
  • Hibernate - Criteria Queries
  • Hibernate - Table Per Hierarchy using Annotation
  • Hibernate - Table Per Subclass Example using XML File
  • Hibernate - Table Per Hierarchy using XML File
  • Hibernate - Create POJO Classes
  • Hibernate - Web Application
  • Hibernate - Table Per Concrete Class using XML File
  • Hibernate - Generator Classes
  • Hibernate - SQL Dialects
  • Hibernate - Query Language
  • Hibernate - Difference Between ORM and JDBC
  • Hibernate - Annotations
  • Hibernate Example using XML in Eclipse
  • Hibernate - Create Hibernate Configuration File with the Help of Plugin
  • Hibernate Example using JPA and MySQL
  • Hibernate - One-to-Many Mapping
  • Aspect Oriented Programming and AOP in Spring Framework
  • Spring - AOP Example (Spring1.2 Old Style AOP)
  • Spring - AOP AspectJ Xml Configuration
  • Spring AOP - AspectJ Annotation
  • Usage of @Before, @After, @Around, @AfterReturning, and @AfterThrowing in a Single Spring AOP Project

Spring Security

  • Introduction to Spring Security and its Features
  • Some Important Terms in Spring Security
  • OAuth2 Authentication with Spring and Github
  • Spring Security at Method Level
  • Spring - Security JSP Tag Library
  • Spring - Security Form-Based Authentication
  • Spring Security - Remember Me
  • Spring Security XML
  • Spring Security Project Example using Java Configuration
  • How to Change Default User and Password in Spring Security?
  • Spring - Add Roles in Spring Security
  • Spring - Add User Name and Password in Spring Security
  • Java Backend Development Course

Eclipse is an Integrated Development Environment (IDE) used in computer programming. It includes a base workspace and an extensible plug-in system for customizing the environment. It is the second-most-popular IDE for Java development. Eclipse is written mostly in Java and its primary use is for developing Java applications, but it may also be used to develop applications in other programming languages via plug-ins, including C, C++, C#, Groovy, JavaScript, etc. Similarly, Spring Tool Suite (STS) is a java IDE tailored for developing Spring-based enterprise applications. It is easier, faster, and more convenient. And most importantly it is based on Eclipse IDE . 

What is a Dynamic Web Project?

Dynamic web projects have more advanced components than static web projects, such as Java, PHP, ASP, etc. They have a lot of focus on server-side development. Dynamic web projects offer many advantages over static web projects as they can provide more information and functionalities. Dynamic web projects allow you to manage more information and create complex and advanced websites. In this article, we are going to discuss how to create a Dynamic Web Project in Eclipse/Spring Tool Suite IDE.

Prerequisites: How to Download and Install Spring Tool Suite (Spring Tools 4 for Eclipse) IDE? Eclipse IDE For Enterprise Java and Web Developers

Implementation:

Step 1: Open your Eclipse/Spring Tool Suite IDE then go to the File > New > Other as shown in the below image. 

how to create a web page in eclipse

Step 2: Now in the select wizard search for the Dynamic Web Project as shown in the below image. And click on the Next button.

how to create a web page in eclipse

Step 3: In the next screen you have to provide your project name as per your choice and don’t touch anything else for now. Click on the Next button.  

how to create a web page in eclipse

Step 4: In the next screen just click on the Next button. 

how to create a web page in eclipse

Step 5: In the last screen just check out the Generate web.xml deployment descriptor box because we need it during the development of a Spring MVC project. Now click on the Finish button and you are done. 

how to create a web page in eclipse

Now your Dynamic Web Project is ready and below is the file structure.  

how to create a web page in eclipse

Please Login to comment...

Similar reads.

  • Geeks-Premier-League-2022
  • Java-Spring
  • Geeks Premier League

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

Create a Dynamic Web Application in Eclipse

Congratulations for making it this far. You've learned a lot! You know how to create object-oriented Java applications and some HTML. You can use that knowledge to develop a true enterprise application.

What is an enterprise application?

Software developed for business that lots of people depend on is an enterprise application. It's unlikely in business that you'll create a lot of desktop applications. That's why this course focuses on web applications. Businesses want software that is scalable, distributed and reliable. We meet those goals by focusing developing software and testing it.

How to create a dynamic web project in Eclipse.

  • From the Eclipse menu, select File | New | Dynamic Web Project
  • On the window that pops up, type in a project name
  • Select 'Apache Tomcat v. 7.0' for the target runtime
  • Click Next twice. Then click Finish.
  • You'll need to add the jar files to the WebContent/WEB-INF/lib folder . Browse your computer to find the ojdbc6.jar file on your computer and copy it to this folder.

Right-click on the project name and select Build Path | Configure Build Path The Properties window will open and you should select the Libraries tab. Click the button to Add External JARs. Browse for the ojdbc6.jar file. You can browse to the .jar you placed in WEB-INF/lib or the one on your computer. Do not select a jar file on the network. Eclipse has trouble finding those.

Your servlet code will be placed under Java Resources | src folder. You can create subfolders under that if you like.

  • Your html and jsp code will be placed under the WebContent folder. Again, you can create subfolders as necessary. For example, you'll probably have subfolders for images and javascript.

Next, you'll create a servlet that sends it's output to a web page.

The components of the dynamic web project

  • JavaServer Pages (JSP) - web pages that integrate Java code with HTML or XML. You can use JSP technology to create dynamically generated web pages.

Create an index.html page

Create your first servlet.

The action attribute of index.html tells the web server to direct the form's output to the greetingServlet . The servlet will process the form data from index.html and return it to the output.jsp page.

The form data is submitted using the post method so the doPost() method responds. In this method the servlet retrieves the posted data. Next, the servlet sets the name attribute and redirects the response to the jsp page.

Create your first JavaServer Page (JSP)

The JSP will accept the attribute from the servlet and set its value to the name.

Your Assignment

Create a new dynamic web application with a web page and a servlet. It should display your name. Copy the code above to the file locations indicated by the comment on the first line. Run your project. Since you want to start with the index.html page you should select index.html from the project explorer in Eclipse. Right-click on this file. Select Run As | Run on Server from the pop-up menu.

Improve your application

Modify your JSP page to include Bootstrap.

results matching " "

No results matching " ".

Static Web projects

If you want to create a content-based Web application that does not contain any dynamic content (such as servlets, JSP files, filters, and associated metadata) you might prefer to create a static Web project, as opposed to a dynamic Web project .

  • a Web content folder (called WebContent) for all publishable resources, You can change the name of this folder from the project's pop-up menu.
  • a Theme folder, the suggested directory for storing cascading style sheets and other style-related objects.
  • the ability to define folders outside of the Web content folder, for storing intermediate files, such as MIF files
  • a conversion path from a static Web project to a dynamic Web project. If you decide to convert the project, it will be a fully-valid dynamic Web project.
  • HTML syntax validation
  • a broken link fix-up wizard
  • a Web site navigation tool
  • a new server type, the Static Web server, which makes it easy to publish static Web projects

The folder that a static Web project is published to is modifiable, so that when you set the publishing "root" value (called a context root ), such as /web1 , for a static project, everything in the Web content folder will be published to the web1 folder under the Web server's doc root. This enables you to group Web resources on a Web server in folders that correspond to Web projects in the workbench. When projects defined in this way are ready for production, you can publish specific projects directly to the doc root by changing the value to / and all publishing, link fixing, and browsing will update automatically.

  • From the Server view, double-click on the static Web server configuration to open the server configuration editor. Note: This assumes that you've already defined the static Web server.
  • Click the Configuration editor tab.
  • Scroll down to the Alias Path Mapping section, and add the new Alias mapping.

how to create a web page in eclipse

Create and use modern pages on a SharePoint site

Using pages is a great way to share ideas using images, Excel, Word and PowerPoint documents, video , and more. You can create and publish pages quickly and easily, and they look great on any device. 

When you create a page, you can add and customize web parts , and then publish your page with just a few steps.

Some functionality is introduced gradually to organizations that have opted in to the Targeted Release program . This means that you may not yet have this feature or it may look different than what is described in the help articles.

You must be a site owner or SharePoint administrator to add pages. If you are a site owner but you are unable to add a page, your administrator may have turned off the ability to do so. 

This article applies to modern pages in SharePoint in Microsoft 365, SharePoint Server Subscription Edition, or SharePoint Server 2019. If you are using classic pages, or you are using an earlier version of SharePoint, check out  Create and edit classic SharePoint pages .

Creation of modern pages is supported in the Site Pages library only. Additionally, you cannot change the URL of a page.

Your browser does not support video. Install Microsoft Silverlight, Adobe Flash Player, or Internet Explorer 9.

What would you like to do?

Add and publish a page.

Add web parts

Customize the title area

Help others find your page.

Edit your page and check spelling and grammar with Editor 

Use page anchors (bookmarks)

Learn about comments, likes, and views

Immersive reader in pages

Expand content (focus mode)

Save for later

Share your page

Find out where pages are stored

Delete your page

Go to the site where you want to add a page. 

Go to the home page of the site.

Select + New , and then select Page .

New Page

Alternately, you can go to an existing page, select + New , and select Page . Or, you can choose Copy of this page to create a new page that has the same web parts and content as the existing page.

Choose a page template to start with. For this example, we'll use the Blank template. Then select  Create page .

Note:  To make a private draft, select  Create as a private draft . Private drafts are only visible to you and the people you share it with.

The dialog box for selecting a page template.

Add a page title in top area where it reads Add a title . A page title is required to save the page. Check out the Customize the title area .

Web parts are the building blocks of your page. For more information on the different types of web parts and how to use them, check out  Using web parts on pages .

Plus sign for adding web parts to a page

You can also add sections and columns to a page. To learn more, check out  Add sections or columns on a page .

When you're done editing, you can select  Save as draft to save your changes and close edit mode. Your audience won't be able to view or read the page until you publish it. Only people with edit permissions on your site will have access.  

Note:  Instead of Save as draft , you may see Save and close in the command bar. This means your organization has pages coauthoring capability where you can invite other authors to edit the same page or news post at the same time. You can learn more about that here . 

When you are ready for your audience to view and read the page, select  Publish .

For more information on publishing and the lifecycle of a page, check out  Management and lifecycle of a SharePoint modern page .

You can remove the title area, and you can customize the title area with an image, a choice of six layouts, text above the title, the ability to change the displayed author, and you can show or hide the published date.

Remove the title area

To remove the title area, select  Delete web part  in the left toolbar.

Note:  Once removed, you can click Undo or choose a Banner web part to add the title area back.

Add an image

Add image button

Note:  If you want to replace an image, select  Change image in the left toolbar.

Choose a recent image or get an image from stock images provided by Microsoft, from a web search, your site, your computer, or a link. If your organization has specified a set of approved images, you'll be able to choose from that set under Your organization. 

Image of file picker options.

Web search uses Bing images that utilize the Creative Common license. You are responsible for reviewing licensing for an image before you insert it on your page.

Images look best when they are landscape or 16:9 or greater in aspect ratio, and when they are at least 1 MB in size. For more information on image sizing, check out  Image sizing and scaling in SharePoint modern pages .

 If you're a SharePoint Admin and want to learn how to create an asset library for Your organization, check out  Create an organization assets library .

If you're a SharePoint admin, we recommend enabling a Content Delivery Network (CDN) to improve performance for getting images. Learn more about CDNs .

Set focal point button

Add or change displayed page author

In the title area, add a name, partial name, or email name in the author box. The name will be searched against your organization's profiles, and you will be presented with suggested people. Choose the one you want, and you're done! If you do not enter a name, an author byline will not show.

Page author entry box

Choose a layout

Web part edit button

Set alignment

Note:  Alignment is not available for layout of Fade or Author .

Add text above the title

You can add text in a colored block above your title to qualify the title or call attention to something on the page, as in the example below where NEW is the text above the title. In newspaper jargon, this is called a kicker. The color of the block the text is in is based on your site theme.

Text above title

Show or hide published date

Add the page title

To edit the page title, go into the first Banner web part at the top of the page (previously Title area) or the Title box on the command bar, enter up to 255 characters of text in the Title box.

Title box on the command bar

Note:  A page title is required before you can Save and close or Publish the page.

Change the page name

The page name is automatically generated the first time you enter a page title. To modify the page name, go into Edit mode, select the Page details  on the command bar, and make your changes.

Page name under page details

You can use one or more of the following options:

Add page to navigation : Adds a link to your page, using the page title, to the left-side navigation.

Post as News on this site : Adds a News post to the Home page of your site. For more information on News, check out Keep your team updated with News on your team site .

Email : Allows you to send an email with a preview of the page and an optional message to your selected recipients.

Yammer : Allows you to send the page through your organization's Yammer channels.

Save page as template : Save the page so you can use it as a template to make similar pages more easily.

Copy address : The page address is shown so you can copy it and send to others.

Edit your page and manage spellcheck and grammar with Editor

To make changes to your page, do this:

Select  Edit at the top right.

When you select  Edit , the page is checked out to you. As long as the page is open for editing, or checked out, no one else can edit it. The page is "locked" until changes are saved or discarded, or until the page is published. An exception is that if the page has no activity for 5 minutes, the editing session will time out and the page will be "unlocked."

Make your changes. For help on page layout and using web parts, check out  Add sections and columns on a page and  Using web parts on SharePoint pages .

When you're done making changes, choose Save as draft to save your changes and close edit mode.  

If you're ready for users to view and read your changes, select  Republish . For more information on publishing and the lifecycle of a page, check out  Management and lifecycle of a SharePoint modern page .

Tip:  If you want your changes to go live immediately, you can select  Republish  without having to save a draft.

To check spelling and grammar with Editor within Text web parts on your page, 

Select Edit at the top right.

Select Page details at the top of a page that has already been published.

In the page details pane, adjust the toggle under Use Editor to check spelling, grammar, and more to On or Off .

Editor toggle screenshot

Learn more about managing Page details . 

Specific permissions are required to edit and rename pages. If you can't rename a page, contact your site administrator to make sure you have Delete Items permission. If you can't edit a page, make sure you have Browse User Information permission.

If you are used to working with customized pages and site definitions, you should know that this type of page has no association with a site definition; therefore, it cannot be reset to a site definition.

While making changes to your site, such as adding or modifying web parts, you can undo or redo the changes. Select Undo , and from the dropdown, select Undo or Redo as needed. (You can also use the keyboard shortcuts of Ctrl+Z or Ctrl+Y, respectively.)

The hyperlink symbol.

You can right-click a page anchor and select Copy link  to copy the page anchor location for use outside of SharePoint pages. Once the page anchor is on the clipboard, you can paste it wherever you want to send it, like an email or a message. 

To link to a Heading 1 from somewhere else on your page, add a hyperlink to the text you want to link from, then paste the URL of Heading 1 link, as in this example:

Example of a link with bookmark

Comments, likes, and views

People who view your page can leave comments and likes at the bottom of the page. You can also find out how many views your page has. Hover over Likes to view some of the people who liked your page. Select Likes and you can view a list of all of the people who liked your page.

how to create a web page in eclipse

When someone likes or comments on a page or a news post you created, or mentions you using @, you will be notified by email .

Note:  Comments, likes, and views are not available on site home pages.

The Comments section of a SharePoint page lets readers give feedback to the author.

Note:  Save for later is not supported for Guest users. They may be able to select Save for later, but the item won't be saved.

When Saved for later is selected, a list of Recently saved items is displayed. You can select  See all saved items to view the entire list of saved items.

Recently saved items

Use Immersive reader in pages

Use the immersive reader tool to help your audience focus on the content of your site. The immersive reader tool includes built in text to speech, and word-in-line highlighting. Immersive reader can be used to suit the individual needs of each site user making the site easier to engage with.

Site users can change the speed and voice of the reader, as well as various visual aspects of the text itself. Immersive reader also offers the ability to translate the content on the page to a wide variety of languages.

Screenshot of the immersive reader task bar

To use immersive reader:

Select the Immersive reader option in the task bar.

screenshot of text preferences icon

After you have chosen your immersive reader experience preferences, select Play at the bottom of the screen.

Note:  The immersive reader feature is not available on the home page.

Hide or show header and navigation (focus mode)

Eliminate visual distractions by using expand mode in SharePoint Site Pages. Expand mode helps you focus on the primary content by removing navigation bars on the page.

Screenshot of the expand content task bar

Share your page 

People can now share a SharePoint page or news post in OneDrive and SharePoint, just like Word, Excel, and PowerPoint files. The page editor or site owner can share just the page without having to share the entire site with specific users or an entire organization. 

Note:  This page sharing feature is available only for modern SharePoint site home pages, news posts, and pages. All site level and organization level file sharing settings will be respected with this sharing experience.

To share a page, select the Share  button at the top of the page. 

Screenshot of the Share button in the right top of the page.

The Share page  option from the drop-down opens the familiar Sharing dialog experience. You can send an email to your share recipients with a link to the page right from the page. 

create and use modern sharepoint screenshot one version three.png

Note:  The Share page command shares only the page itself and items such as images and files that were uploaded to the page directly. If you see a warning message banner in the sharing experience, it means the page you are trying to share has content such as embedded documents, videos, and SharePoint lists that are stored in a different OneDrive or SharePoint location. You will need to edit the page and verify that all such content used in the page has the right permission before the page is shared.

Selecting the  Copy option lets you copy a sharing link to be pasted elsewhere, like a Teams chat or another document. 

create and use modern sharepoint screenshot two version two.png

Use Share page  and Copy link to   page  for inviting others to have access to the page for contributing content or for reading just this page from the site. This new feature shares a link that provides access to a recipient if they did not have access already.  

With the Send to email  option, you can send an email that includes a link, thumbnail preview, description, and an optional message to one or more people. This allows informing any recipient, including distribution groups or lists about this page or news post. Note that this is not a sharing link and will only work for people who already have access to the site.

Screenshot of the Send this News post by email option.

Where are pages stored?

Pages that you create, save, or publish are stored in the Pages library for your site. To get to the Pages library:

Go to the site where your page is.

On the top or left side navigation, select  Pages .

Note:  If Pages isn't listed on the left side of your SharePoint site, select Settings > Site Contents in the upper right. Then on the left, select Pages . Your page may be in a folder within the Pages library designated by the site owner.

SharePoint site owners and administrators can easily delete modern pages from a SharePoint site. For more information on how to delete a page, check out  Delete a page from a SharePoint site .

Edit your page

Learn about comments

Use web parts

Alternately, you can go to an existing page, select + New , and select Start from a blank page .

Add a page name in the title area. A page name is required to save the page. Check out the Customize the title area .

Hover your mouse below the title area and there will be a line with a circled +, like this:

Select  + to add content like text, documents, video and more. To learn more about how to find and use web parts, check out  Using web parts .

When you're done editing, you can select  Save as draft to save your changes and close edit mode. Your audience won't have access to the page until you publish it. Only people with edit permissions on your site will have access.

You can customize the title area with an image, a choice of four layouts, text above the title, the ability to change the displayed author, and you can show or hide the published date.

Choose a recent image or get an image from your site, your computer, or a link. 

Note:  Images look best when they are landscape or 16:9 or greater in aspect ratio, and when they are at least 1 MB in size. For more information on image sizing, check out  Image sizing and scaling in SharePoint modern pages .

To modify the title area later, just make sure your page is in edit mode, select the title area, and then use the toolbar on the left to change title text and other information, and use the image button to change the image. To change the name in the title area, just select the title area and type over the existing name.

The first time you publish your page, you'll be prompted to help others find your page. If you want to do this later, you can select  Promote at the top of the page after the page is published.

Options to help others find your page

Post as News on this site : Adds a News post to the Home page of your site. For more information on News, check out  Keep your team updated with News on your team site .

Email : Allows you to send an email to your selected recipients.

People who view your page can leave comments at the bottom of the page.

On the top or left side navigation, select  Pages . If  Pages  isn't on the left side, select  Site Contents  from  Settings  on the upper right, then on the left side of the Site Contents page, select  Pages . Your page may be in a folder within the Pages library designated by the site owner.

Using web parts

Web parts are the building blocks of your page. You can add web parts to your page by selecting the  + sign on the page. For more information on the different types of web parts and how to use them, check out  Using web parts on pages .

Add a page name in the title area. A page name is required to save the page. Check out Customize the title area .

Hover your mouse below the title area and there will be a circled +, like this:

select  + to add content like text, documents, video and more. To learn more about how to find and use web parts, check out  Using web parts .

When you're done editing, you can select  Save as draft to save your changes and close edit mode. Your audience won't have access to the page until you publish it. Only people with edit permissions on your site will be able to access it.

When you're done making changes, choose Save as draft to save your changes and close edit mode.

If you're ready for users to view and read your changes, select  Publish . For more information on publishing and the lifecycle of a page, check out  Management and lifecycle of a SharePoint modern page .

On the top or left side navigation, select  Pages . If Pages  isn't on the left side, select  Site Contents  from  Settings  on the upper right, then on the left side of the Site Contents page, select  Pages . Your page may be in a folder within the Pages library designated by the site owner.

SharePoint site owners and administrators can easily delete modern pages from a SharePoint site in the Page details pane. 

Ensure the page is in edit mode by selecting Edit at the top right of the page.

On the command bar, select Page details.

Select Delete page .

Confirm or cancel your deletion in the confirmation box that appears by selecting Delete or Cancel .

Screenshot of the delete page option in page details pane

Learn more about Deleting a page from a SharePoint site . 

Facebook

Need more help?

Want more options.

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

how to create a web page in eclipse

Microsoft 365 subscription benefits

how to create a web page in eclipse

Microsoft 365 training

how to create a web page in eclipse

Microsoft security

how to create a web page in eclipse

Accessibility center

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.

how to create a web page in eclipse

Ask the Microsoft Community

how to create a web page in eclipse

Microsoft Tech Community

how to create a web page in eclipse

Windows Insiders

Microsoft 365 Insiders

Was this information helpful?

Thank you for your feedback.

  • Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
  • Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
  • OverflowAI GenAI features for Teams
  • OverflowAPI Train & fine-tune LLMs
  • Labs The future of collective knowledge sharing
  • About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Create and publish a static web project in Eclipse

when I tried to create and publish a static web project in eclipse I got: "Error copying file index.html: No such file or directory"

My environment: SuSE 12.2, Eclipse Indigo Release 2, Apache2 2.2.22,

This is what I did to create the project:

1) Create new Server

  • Basic, HTTP Server
  • Publishing Directory: /srv/www/htdocs
  • Enable publishing to this server: true

2) Create Project

  • New -> Static Web Project
  • Project Name: Simplepage
  • Target Runtime: HTTP Server (from 1)
  • Default Configuration
  • Content root: Simplepage
  • Web content folder name: WebContent

3) Create very simple page

  • Create new HTML file
  • Parent folder: Simplepage/WebContent
  • Name: index.html
  • Content: <!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=${encoding}"> <title>Insert title here</title> </head> <body> Test </body> </html>

4) Start Project

  • Right Click on Project Name -> Run as -> Run on Server

Here I got the error message mentioned above. At this point there is a new folder /srv/www/htdocs/Simplepage created but has no content.

Later I made a test with the following configuration:

  • Change publishing directory to: "/srv/www/htdocs/XY"

Start Project gives error: "Access forbidden! You don't have permission to access the requested directory..."

At this time there is a new directory created: /srv/www/htdocs/XY/Simplepage containing the file index.html .

The window in eclipse is showing the path http://localhost/Simplepage/ . When I change this manually to http://localhost/XY/Simplepage/ the newly created page is shown.

I don't understand this behaviour. Can someone explain this?

Kara's user avatar

You have installed Apache2 server on your home computer, with the publishing directory /srv/www

Note that Apache2 runs on its own user (on my Ubuntu it is www-data). Apache's publishing directory /srv/www is normally owned by Apache's user.

You have also directed HTTP Server of Eclipse to the same directory. Note that this server is different from Apache; it is run by Eclipse inside its belly, and usually on different ports from Apache, to avoid port conflict. I think this server is run on the same user Eclipse runs, i.e., your regular user on your home comp.

I think that the error messages you get, are permission mismatch: Eclipse cannot publish in directories owned by Apache's user.

The solution is not to try to use Apache's directories but rather the default directories of Eclipse.

I have explained this in more detail here: Eclipse Web (http) servers: Debugging and publishing http files in Eclipse .

I do use both Eclipse' HTTP Preview server and Apache2:

  • Eclipse' HTTP Preview server for files I work on in Eclipse, and
  • Apache2 to run a localhost copy of my Wordpress site.

When files I work on in Eclipse, are mature, I transfer them manually to Wordpress as posts or pages.

Baruch Youssin's user avatar

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged eclipse or ask your own question .

  • Featured on Meta
  • Upcoming sign-up experiments related to tags
  • Policy: Generative AI (e.g., ChatGPT) is banned
  • The [lib] tag is being burninated
  • What makes a homepage useful for logged-in users

Hot Network Questions

  • What is the term for when a hyperlink maliciously opens different URL from URL displayed when hovered over?
  • Duplicating Matryoshka dolls
  • Do known physical systems all have a unique time evolution?
  • Integration of the product of two exponential functions
  • Will feeblemind affect the original creature's body when it was cast on it while it was polymorphed and reverted to its original form afterwards?
  • minimum atmospheric nitrogen for nitrogen fixation?
  • Was BCD a limiting factor on 6502 speed?
  • add an apostrophe to equation number having a distant scope
  • How is Victor Timely a variant of He Who Remains in the 19th century?
  • Summation of arithmetic series
  • How to Pick Out Strings of a Specified Length
  • I wanna start making scripts for my own Indie animation series, but can't find a good way to start it
  • Predictable Network Interface Names: ensX vs enpXsY
  • Are there examples of triple entendres in English?
  • What kind of sequence is between an arithmetic and a geometric sequence?
  • Is it unfair to retroactively excuse a student for absences?
  • What's the point of Dream Chaser?
  • Does the Ogre-Faced Spider regenerate part of its eyes daily?
  • Did the BBC censor a non-binary character in Transformers: EarthSpark?
  • Were there engineers in airship nacelles, and why were they there?
  • Nesting two environments
  • Would the command spell fail if the commanded action becomes directly harmful later on, but initially appears benign?
  • Cloud masking ECOSTRESS LST data
  • Was Balarama included in the list of Dashavatara in any scripture instead of Buddha?

how to create a web page in eclipse

IMAGES

  1. How to create dynamic web projects in Eclipse

    how to create a web page in eclipse

  2. How to Create Dynamic Web Project using Maven in Eclipse? • Crunchify

    how to create a web page in eclipse

  3. web project in eclipse

    how to create a web page in eclipse

  4. how to create dynamic Web Project in Eclipse

    how to create a web page in eclipse

  5. first jsp program in eclipse part-3 How to Create JSP Page in eclipse

    how to create a web page in eclipse

  6. Creating JSP page in Eclipse IDE for Java EE Developers

    how to create a web page in eclipse

VIDEO

  1. How to create web page using html and css tags

  2. Create web page in HTML

  3. HTML ll form create web page ll Pooja Education ll admission Open 2024

  4. How to Create Coming Soon... Web Page Using HTML and CSS in Hindi

  5. HTML Coding for Beginners

  6. How To Create Web Page In HTML

COMMENTS

  1. Eclipse Web Development Tutorial

    The Web development environment provides the tools we need to develop Web applications as defined in the Sun Microsystems Java™ Servlet 2.3 Specification and the Sun Microsystems JSP 1.2 Specification. Web applications can be simple (consisting of only static Web pages) or they can be more advanced and include JavaServer Pages (JSP) files and ...

  2. Creating a Simple Web Application using Eclipse: A Beginner's Tutorial

    In this tutorial, you will learn how to create a simple web application using Eclipse, a popular integrated development environment (IDE) for Java developers...

  3. How to write an HTML and CSS code with eclipse ide

    Step #5: Create a web project in eclipse. Once you configured the eclipse-ide with web server Apache Tomcat then we can create a new project. First, go to new—>Dynamic web project —> write the project name "Demo"—> next—> next —> finish. Second, right click on the demo project —>new —>HTML file—> write file name —> finish.

  4. Creating a Web Application with Eclipse IDE

    This Video demonstrates creating a dynamic web project with Eclipse IDE with brief overview of JSP & Servlet and its configuration in Deployment Descriptor(w...

  5. Java web development with Eclipse WTP

    This tutorial describes the development of servlets and Java web application with Eclipse WTP. 1. Eclipse Web Tool Platform. The Eclipse WTP project provides tools for developing standard Java web applications. Typical web artifacts in a Java environment are HTML, CSS and XML files, webservices and servlets. Eclipse WTP simplifies the creation ...

  6. How to build a Web Application Using Java

    Now, follow the below steps to develop a web application: Step1: Open Eclipse Create a Dynamic Web Project. Open the Eclipse IDE, navigate to File-> New-> Dynamic Web Project. If the dynamic web project is not listed in your IDE, then go to the other option and search for it. Click on it to continue.

  7. How to create Java web project with Maven in Eclipse

    So here's the proper way to create a Java web project in Eclipse with Maven support: First, you create a new project as usual, click File > New > Dynamic Web Project: Then follow the wizards to create a Java dynamic web project normally. The newly created project would look like this: Now, right click on the project name and click Configure ...

  8. How To Create Dynamic Web Project Using Eclipse [Step By Step ...

    Step #1: First, we'll start Eclipse and switch to the Java EE perspective. Step #2: Click on the 'File' button, which will show you a menu. Select 'New' there and choose the dynamic web project option there. Now select 'Next' to proceed to the next step. Check Out upGrad Advanced Certification in DevOps. Step #3:

  9. Creating a static Web project

    To create a new static Web project, complete the following steps: Open the Java EE perspective. In the Project Explorer, right click on Other Projects and select New->Other->Web->Static Web Project from the context menu. The New Static Web Project wizard starts. Follow the project wizard prompts. General Information.

  10. How to create a Simple Web Application in Eclipse with Tomcat

    Check out our website: http://www.telusko.comFollow Telusko on Twitter: https://twitter.com/navinreddy20Follow on Facebook: Telusko : https://www.facebook.co...

  11. How to create, deploy and run Java Servlet in Eclipse

    4. Run and test the servlet. 1. Create Java Dynamic Web Project. Servlet is for Java web application, so we need to create a Java EE project first. In Eclipse, make sure the current perspective is Java EE (if not, select Window > Open Perpsective > Java EE, or hold down Ctrl + F8 and select Java EE ). Click File > New > Dynamic Web Project, the ...

  12. How to Create a Dynamic Web Project in Eclipse/Spring Tool Suite?

    Implementation: Step 1: Open your Eclipse/Spring Tool Suite IDE then go to the File > New > Other as shown in the below image. Step 2: Now in the select wizard search for the Dynamic Web Project as shown in the below image. And click on the Next button. Step 3: In the next screen you have to provide your project name as per your choice and don ...

  13. Creating a dynamic Web project

    Unlike with static Web projects, dynamic Web projects enable you to create resources such as JavaServer Pages and servlets. To create a new dynamic Web project, complete the following steps: Open the Java EE perspective. In the Project Explorer, right click on Dynamic Web Projects, and select New > Dynamic Web Project from the context menu. The ...

  14. Create a Dynamic Web Application in Eclipse · JavaEE Bootcamp

    How to create a dynamic web project in Eclipse. Click Next twice. Then click Finish. You'll need to add the jar files to the WebContent/WEB-INF/lib folder. Browse your computer to find the ojdbc6.jar file on your computer and copy it to this folder. Right-click on the project name and select Build Path | Configure Build Path The Properties ...

  15. Dynamic Web Project option missing in Eclipse

    Click on Help and then click on "Install New Software". Scroll down to find "Web, XML, Java EE and OSGI Enterprise Development" option and expand it. Click next and you would see that the software are installing. Wait for some time and then a popup would ask your permission to restart the Eclipse.

  16. How to create a dynamic web project in Eclipse with Tomcat 10

    This is a complete tutorial, here, You will get learn how to create a dynamic web project in Eclipse and also learn how to deploy dynamic web project in Ecli...

  17. Static Web projects

    a Web site navigation tool. a new server type, the Static Web server, which makes it easy to publish static Web projects. The folder that a static Web project is published to is modifiable, so that when you set the publishing "root" value (called a context root ), such as /web1, for a static project, everything in the Web content folder will be ...

  18. Java Web Project

    How to create a Java Web project in Eclipse | Eclipse - Create Java Web ProjectEclipse - Create Java Web Project#eclipse#javaWebProject#java#program*****...

  19. Create and use modern pages on a SharePoint site

    Using pages is a great way to share ideas using images, Excel, Word and PowerPoint documents, video, and more. You can create and publish pages quickly and easily, and they look great on any device. When you create a page, you can add and customize web parts, and then publish your page with just a few steps.

  20. Create and publish a static web project in Eclipse

    I have explained this in more detail here: Eclipse Web (http) servers: Debugging and publishing http files in Eclipse. I do use both Eclipse' HTTP Preview server and Apache2: Eclipse' HTTP Preview server for files I work on in Eclipse, and; Apache2 to run a localhost copy of my Wordpress site.