Scribd
Upload
21 views24 pages

FEDT

The document is a practical file for a course on Front End Design Tools and Web Technologies at Guru Gobind Singh Indraprastha University. It includes various programming tasks such as designing a personal CV using HTML, redesigning the university's homepage, and writing XML and JSP programs for student profiles and web functionalities. The document provides code examples and outlines the structure of the projects to be completed by the student, Harsh Batra.

Uploaded by

Atul Kushwaha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views24 pages

FEDT

The document is a practical file for a course on Front End Design Tools and Web Technologies at Guru Gobind Singh Indraprastha University. It includes various programming tasks such as designing a personal CV using HTML, redesigning the university's homepage, and writing XML and JSP programs for student profiles and web functionalities. The document provides code examples and outlines the structure of the projects to be completed by the student, Harsh Batra.

Uploaded by

Atul Kushwaha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

PRACTICAL FILE

OF
FRONT END DESIGN TOOLS AND WEB
TECHNOLOGIES (IT-455)

UNIVERSITY SCHOOL OF INFORMATION AND COMMUNICATION TECHNOLOGY

GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY,


UNIVERSITY, NEW DELHI-110078
(2020-2024)

SUBMITTED TO: SUBMITTED BY:


Dr. Ruchi Sehrawat Harsh Batra

Assistant Professor B.Tech. IT 7th Semester


USICT, GGSIPU ENROLL NO: 02716401520

1
Table Content

Sr.No. Topic

1. Using HTML Tags, design your own Curriculum Vitae

2. Using HTML Tags, redesign the home page of GGSIP University


3. Write a XML Program to display Student profile having tags like
Student Roll No., Name, Age, Semester, Email Id, Phone number,
Department Name. Apply and validate using DTD.

4. Write a JSP Program to check whether an input number is Palindrome


number or not.

5. Write a JSP Program to auto refresh a page.

6. Write a JSP Program to upload file into server.

2
Program No. 1
Using HTML Tags, design your own Curriculum Vitae -

CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(253, 254, 255);
display: flex;
justify-content: center;
align-items: center;
}
.full {
width: 50%;
max-width: 1000px;
min-height: 100px;
background-color: rgb(245, 239, 231);
margin: 0px;
display: grid;

3
grid-template-columns: 2fr 4fr;
}
.left {
position: initial;
background-color: rgb(126, 219, 231);
padding: 20px;
}
.right {
position: initial;
background-color: rgb(162, 202, 206);
padding: 20px;
}
.image, .Contact, .Skills, .Language, .Hobbies, .title,
.Summary, .Experience, .Education, .project {
margin-bottom: 30px;
}
.h2 {
background-color: rgb(4, 96, 150);
}
</style>
</head>
<body>
<div class="full">
<div class="left">
<div class="image">
<img src=
"https://i.postimg.cc/Gh5S6j0Q/harsh-p.jpg"
alt="gfg-logo"
style="width:100px;height:100px;">

4
</div>
<div class="Contact">
<h2>Contact</h2>
<p><b>Email id:</b>[email protected]</p>
<p><b>Mobile no :</b>8890286834</p>
</div>
<div class="Skills">
<h2>Skills</h2>
<ul>
<li><b>Programming Languages :
C, C++, JavaScript</b></li>
<li><b>Frontend : HTML5, CSS3,
JavaScript, React</b></li>
<li><b>Backend : Node.js</b></li>
</ul>
</div>
<div class="Language">
<h2>Language</h2>
<ul>
<li>English</li>
<li>Hindi</li>
</ul>
</div>
<div class="Hobbies">
<h2>Hobbies</h2>
<ul>
<li>Playing Badminton</li>
<li>Reading Books</li>
</ul>

5
</div>
</div>
<div class="right">
<div class="name">
<h1>Harsh Batra</h1>
</div>
<div class="title">
<p>Software Developer</p>
</div>
<div class="Summary">
<h2>Summary</h2>
<p>To secure a challenging position in a reputable organization to expand my learning
knowledge and skill</p>
</div>
<div class="Experience">
<h2>Experience</h2>
<h3>Sunbeam Technology pvt ltd - Full Stack Developer</h3>
<p>August 2022 to October 2022</p>
<ul>
<li>Actively engaged in web creative design and development.</li>
<li>Designing project & planing</li>
</ul>

</div>
<div class="Education">
<h2>Education</h2>
<table>
<tr>
<th>University/college </th>

6
<th>Passing year </th>
<th>percentage/cgpa</th>
</tr>
<tr>
<td>USICT</td>
<td>2024</td>
<td>8.8</td>
</tr>
<tr>
<td>12th</td>
<td>2020</td>
<td>87%</td>
</tr>
</table>
</div>
<div class="project">
<ul>
<li>
<h2>GoogleMeet Clone</h2>
<p>This project is based on html & used React</p>
</li>
<li>
<h2>To Do List</h2>
<p>This project is based on html & used React</p>
</li>
</ul>
</div>
</div>
</div>

7
</body>
</html>

OUTPUT:

8
Program No. 2
Using HTML Tags, redesign the home page of GGSIP University

CODE:
<!doctype html>
<html lang="en">
<head>
<title>Guru Gobind Singh Indraprastha University</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="main">
<div style="top:5px; right:5px; position:absolute;"> <a href="#"> </a>
</div>
<div id="sidebar">
<div id="menu">
<ul>
<li > <a href="#"><i class="fa fa-home"></i>Home</a>
</li>
<li ><a href="#"> <ok>About Us<ok></a>
<ul>
<li ><a href='#'><ok>Overview</ok></a></li>
<li ><a href='#'><ok>Director's Desk</ok></a></li>
<li ><a href='#'><ok>About Management</ok></a></li>
<li ><a href='#'><ok>Important Functionaries</ok></a></li>
<li ><a href='#'><ok>Vision & Mission</ok></a></li>
<li ><a href='#'><ok>Organization Chart</ok></a></li>
<li ><a href='#'><ok>Mandatory Disclosures</ok></a></li>
</ul>
</li>
<li ><a href='#'><ok>Academics</ok></a>
<ul>
<li ><a href='#'><ok>Applied Science</ok></a></li>
<li ><a href='#'><ok>Computer Science & Engineering</ok></a></li>
<li ><a href='#'><ok>Electronics & Communication
Engineering</ok></a></li>
<li ><a href='#'><ok>Electrical & Electronics Engineering</ok></a></li>
<li ><a href='#'><ok>Information Technology Engineering</ok></a></li>
<li ><a href='#'><ok>Mechanical Engineering</ok></a></li>
<li ><a href='#'><ok>Civil Engineering</ok></a></li>
</ul>

9
</li>
<li ><a href='#'><ok>Admission</ok></a>
<ul>
<li ><a href='#'><ok>Admission's Overview</ok></a></li>
<li ><a href='#'><ok>Courses Offered</ok></a></li>
<li ><a href='#'><ok>Admission Procedure</ok></a></li>
<li ><a href='#'><ok>Instructions for B.Tech Admission</ok></a></li>
<li ><a href='#'><ok>Instructions for M.Tech Admission</ok></a></li>
<li ><a href='#'><ok>Fee Structure</ok></a></li>
<li ><a href='#'><ok>Registration Form</ok></a></li>
<li ><a href='#'><ok>Admission Notices</ok></a></li>
</ul>
</li>
<li ><a href='#'><ok>Research</ok></a>
<ul>
<li ><a href='#'><ok>Project Guidelines for Final Year</ok></a></li>
<li ><a href='#'><ok>Collaborations</ok></a></li>
<li ><a href='#'><ok>TechGuru Sessions</ok></a></li>
</ul>
</li>
<li ><a href='#'><ok>Training & Placement</ok></a>
<ul>
<li ><a href='#'><ok>Training & Placement - Overview</ok></a></li>
<li ><a href='#'><ok>Training & Placement - Team</ok></a></li>
<li ><a href='#'><ok>About Placement Department</ok></a></li>
<li ><a href='#'><ok>Finishing School</ok></a></li>
</ul>
</li>
<li ><a href='#'><ok>Alumni</ok></a></li>
<li ><a href='#'><ok>Notice Board</ok></a></li>
<li ><a href='#'><ok>Career @ GGSIPU</ok></a>
<li ><a href='#'><ok>Quick Links</ok></a> </li>
<li ><a href='#'><ok>Downloads</ok></a></li>
<li ><a href='#'><ok>Campus Life</ok></a></li>
</ul>
</div>
<div id="address" style="padding: 8px 23px 8px 23px; color: #ffffff;">
<br>
<strong style="font-size:16px; font-weight:400;"><i>Contact
Us</i></strong>
<p style="font-size:12px;">Golf Course Rd, Sector 16 C &amp; Dwarka,
Delhi<br>

10
<b>Pin :</b> 110078 <br>
<b>Phone :</b> 91-999999999<br>
<b>Tele-Fax :</b> 91-999999999<br>
<b>Director's Direct Number :</b> 91-99999999<br>
<b>E-mail :</b> [email protected]<br>
<b>WebSite :</b> http://www.ipu.ac.in </p>
<hr>
<p style="font-size:10px; font-weight:400; text-align:center;">Designed by
<YourName>.<br>
&copy; Copyright 2022.</p>
<hr>
<br>
</div>
</div>
<div id="content">
<header> <img src="image1.jpg" width="100%" height="130" >
<h1><font size="5" >Guru Gobind Singh Indraprastha
University</font></h1>
<p> Established in 1998 as a teaching-cum-affiliating university.</p>
</header>
<div id="center" >
<div id="one">
<h1>Events <a href="#" class="right"></a></h1>
<div class="date">
<div class="day"><em>19</em>
<div class="month"> <em>DEC</em>
</div>
</div>
</div>
<p class="rightside" > <a href="#">Alumni Meet for Batch ( 2010 to
2012 ) </a>. </p>
<div class="clear"></div>
<div class="date">
<div class="day"><em>29</em>
<div class="month"> <em>SEP</em>
</div>
</div>
</div>
<p class="rightside" > <a href="#">EMPLOYABILITY TEST From
29-SEP-22 to 01-OCT-22</a></p>
<div class="clear"></div>
<div class="date">

11
<div class="day"><em>24</em>
<div class="month"><em>SEP</em>
</div>
</div>
</div>
<p class="rightside" > <a href="#" >NSS Day Celebration from (
09 am - 11 am ).</a></p>
<div class="clear"></div>
<div class="date">
<div class="day"><em>21</em>
<div class="month"><em>SEP</em>
</div>
</div>
</div>
<p class="rightside" > <a href="#">Tech Mahindra Placement
Drive ( Day 1 ). </a></p>
<div class="clear"></div>
<br>
<div>
<h1><YourName><a href="#" style="color:#FFFFFF;"\></a></h1> <div
style="padding:2.5%;">
<div style="float:right; width:55%; padding:2.5%; font-size:12px;">
<strong style="font-size:13px;"><YourName></strong> <br>
<br>
"GGSIPU, in its ten years of existence, has always shown a positive
graph of growth in all areas of functionality..."
<br><br><br>
</div>
</div></div>
</div>
<div id="one">
<h1>Courses offered<a href="#"></a></h1> <table
border="0" style="font-size:13px; width:100%;
padding:2.5%;">
<tr>
<td><strong>Bachelor of Technology</strong></td>
<td><b>Seats</b></td>
</tr>
<tr>
<td>Computer Science &amp; Engineering</td>
<td>240</td>
</tr>

12
<tr>
<td>Electronics &amp; Communication Engineering</td>
<td>180</td>
</tr>
<tr>
<td>Electrical &amp; Electronics Engineering</td>
<td>120</td>
</tr>
<tr>
<td>Mechanical Engineering</td>
<td>180</td>
</tr>
<tr>
<td>Information Technology</td>
<td>60</td>
</tr>
<tr>
<td>Civil Engineering</td>
<td>60</td>
</tr>
<tr>
<td style="font-style:italic;">SECOND SHIFT</td>
</tr>
<tr>
<td>Mechanical Engineering</td>
<td>60</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Master of Technology</strong></td>
<td><b>Seats</b></td>
</tr>
<tr>
<td>Computer Science &amp; Engineering</td>
<td>18</td>
</tr>
<tr>
<td>Electronics &amp; Communication Engineering</td>
<td>18</td>

13
</tr>
</table>
</div>
<div id="one">
<h1>Highlights<a href="#"></a></h1>
<p> <a href='#'>CONGRATULATIONS!!! to all students selected in "Tech
mahindra". </a></p>
<p> <a href="#">Student List Selected in Tech Mahindra.</a> </p>
<p> <a href="#">Selection Criteria for Campus Drive &amp;
Placement.</a> </p>
<p> <a href="#">Online Aptitude Practice session for B.Tech Final
Year (All Branch).</a> </p>
<p> <a href="#">Blood Donation Camp on 30/09/15.</a> </p>
<p> <a href="#">EMPLOYABILITY TEST Notice.</a></p>
<br>
<div>
<h1>Accreditations<a href="#" style="color:#FFFFFF;"></a></h1> <div
style="padding:2.5% 20%"> <img src="image1.jpg" width="100%"> <img
src="image1.jpg" width="100%"><br>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="m">
<marquee><image src="image1.jpg" height="80" width="140">
</marquee>
</div>
</div>
</div>
</body> </html>
style.css
#main
{
margin:0; padding:0;
width:100%;
height:100%;
}
#sidebar
{

14
width: 15%; position:
absolute; float: left;
top: 0px;
left: 2px;
top: 0; left:
0;
height: 74vmax;
background: #3B5998;
color: #FFFFFF; z-index:
9999;
}
#logo1
{
width:80%; padding: 25px 20px;
background: #283B66; border-bottom:
solid 1px #FFFFFF;
}
#logo
{
background:#283B66; height:140px;
}
#content
{
width: 86.1%; display:
block; margin-top: -8px;
margin-right: -10px;
background: #F5F5F5;
z-index: 9999999;
float: right;
}
#content header
{
font-family: Georgia, "Times New Roman", Times, serif; text-
align: center; width: 100%; color: #FFFFFF; background:
#283B66; height: 190px; border-bottom: solid 1px
#FFFFFF; font-size:7px;
text-shadow: 5px 4px 7px #666666;
}
#content header p {
text-align: center;
font-size:9px;
}
#center

15
{ font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#one
{ float:
left;
margin: 1% 2.5%;
text-align: justify; width:
28%;
}
#one a
{
text-decoration:none;
font-weight: 700; color:
#283B66;
}
#one p
{
font-size: 13px; padding:
2.5% 5%; margin: 0px;
}
#one h1
{
font-size: 16px; margin: 0px;
padding: 2.5%; background:
rgba(59,89,152,0.5); color:
#FFFFFF; font-weight: 400;
}
.clear { clear:
both; }
.date { font-family: Georgia, "Times New Roman", Times,
serif; height: 62px; width: 62px; background:
rgba(59,89,152,0.5); display: block; margin: 2.5%; border-
radius: 25%; color: #FFFFFF;
float:left; }
.day em { font-size:
25px; text-align: left;
display: block;
}
.rightside { width:
64%;
float: right; }
.rightside a

16
{
text-decoration: none; color:
#283B66; font-weight: 700;
}
#footer { z-index: 99999;
background: #FFFFFF;
width: 100%;
float: right; height:
140px;
}
#menu
{
height: 35vmax;
}
#menu ul { width:100%;
list-style: none;
margin: 0; padding: 0;
margin-bottom: 0px;
position: absolute;
float: left;
background: #3B5998;
color: #FFFFFF; z-index:
9999;
}
#menu li { position:
relative; margin: 0;
padding: 0;
border-bottom: solid 1px #CCCCCC;
}
#menu ul li
{
background-color: #3B5998;
}
#menu ul li a
{
text-decoration:none;
font-size: 19px; position:
relative; display: block;
padding: 8px 23px;
color: #FFFFFF; z-index:
2;
}

17
#menu li ul { position: absolute; visibility: hidden; left:
100%; top: -1px; background-color: #3B5998; box-
shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); opacity:
0;
}
#menu ul li a:hover
{
color: #FFFFFF;
background: #283B66;
-webkit-transition: background 0.4s linear 0s, color 0.4s linear 0s;
}
#menu li:hover > ul
{ visibility:visible;
opacity:1;
}
.fa-home:before
{
content: "\f015";
}
#menu .fa { margin-right:
5px;
}
#m img{ margin-
left:40px;
}

18
OUTPUT -

19
Program No. 3
Write a XML Program to display Student profile having tags like Student Roll
No., Name, Age, Semester, Email Id, Phone number, Department Name.
Apply and validate using DTD

CODE:

<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE Profile [
<!ELEMENT Profile (StudentRollNo,Name,Age,Semester,Email,Phone,DepartmentName)>
<!ELEMENT StudentRollNo(#PCDATA)>
<!ELEMENT Name (#PCDATA)>
<!ELEMENT Age (#PCDATA)>
<!ELEMENT Semester(#PCDATA)>
<!ELEMENT Email (#PCDATA)>
<!ELEMENT Phone (#PCDATA)>
<!ELEMENT DepartmentName (#PCDATA)>
]>
<Profile>
<StudentRollNo>02716401520</StudentRollNo>
<Name>Harsh Batra </Name>
<Age>21</Age>
<Semester>7</Semester>
<Email>[email protected]</Email>
<Phone>8890286834</Phone>
<DepartmentName>IT </DepartmentName>
</Profile>

OUTPUT:

20
Program No. 4
Write a JSP Program to check whether an input number is Palindrome
number or not.
CODE:

palindrome.html
<html>
<head>
<title>Palindrome Number</title>
</head>

<body>
<form action = "palindrome.jsp" method = "post">
<label for="ip">Enter a Number:
<input type = "text" name = "ip">
<input type = "submit" value = "submit">
</form>
</body>
</html>

palindrome.jsp
<%@page language="java" contentType="text/html;
charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<!DOCTYPE html>

<%num =
Integer.parseInt(request.getParameter("num")); int n =
num; int rem,no = 0; while(n!=0)
{
rem = n%10; no =
no*10 + rem;
n = n/10;
}
if(no == num)
{
out.println("\Palindrome Number");
}

21
else
{
out.println("Not Palindrome");
}
%>

OUTPUT –

22
Program No. 5
Write a JSP Program to auto refresh a page.
CODE:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Auto Refresh Page</title>
</head>
<body>

<h1>Auto Refresh Page</h1>

<%
// Get the current time
java.util.Date d = new java.util.Date();
%>

<p>Current time: <%= d %></p>

<%
// Set the refresh interval to 5 seconds
int refreshInterval = 5;
%>

<meta http-equiv="refresh" content="<%= refreshInterval %>">

</body>
</html>

OUTPUT –

23
Program No. 6
Write a JSP Program to upload file into server
CODE:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-
8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File Upload</title>
</head>
<body>

<h1>File Upload</h1>

<form action="upload" method="post" enctype="multipart/form-data">


Select file to upload:
<input type="file" name="file">
<br>
<input type="submit" value="Upload">
</form>

</body>
</html>

OUTPUT -

24

You might also like