Java, .NET, PHP, PYTHON, ANGULAR, .NET, ML, Data Scince, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

Create Three Page Application using JSP



1) Create style.css  to provide propeties to HTML Tag

*
{
    margin:0px;
}
header
{
    height:100px;
    background-color: gray;
}
section
{
   height:500px;
    background-color: orange;
}
footer
{
     height:100px;
    background-color: gray;
}
2)  Create header.jsp and link css file



<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <nav>
                <ul><li><a href="index.jsp">Home </a></li> <li><a href="about.jsp">About us </a></li><li><a href="service.jsp">Our Services </a></li><li><a href="contact.jsp">Contact us </a></li><li><a href="gallery.jsp">Gallery</a></li></ul>
               
            </nav>
            <marquee> <h3 style="color:red;">JOIN INDUSTRIAL TRAINING TO BTECH,MCA,MSC,BCA,BBA Students</h3> </marquee>
        </header>
3)  Create Footer.jsp

<footer>
</footer>
    </body>
</html>

4)  Create Index.jsp remove all html and define section  and include header.jsp and footer.jsp

<%@include file="header.jsp" %>

<section>
   
   
</section>

<%@include file="footer.jsp" %>
5)  Create <nav> to create menu or navigation  and define respective css tag
 <nav>
                <ul><li><a href="index.jsp">Home </a></li> <li><a href="about.jsp">About us </a></li><li><a href="service.jsp">Our Services </a></li><li><a href="contact.jsp">Contact us </a></li><li><a href="gallery.jsp">Gallery</a></li></ul>
               
            </nav>

6)   create about.jsp,service.jsp,contact.jsp,gallery.jsp  etc

Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post