GALGOTIAS UNIVERSITY
GAUTAM BUDDH NAGAR,U.P
SCHOOL OF COMPUTER SCIENCE AND ENGINEERING
LAB MANUAL
R1UC508C - FRONTEND DEVELOPMENT
III B.TECH – V SEM
INDEX
S.No. Experiment Details
1 a. Write a HTML program
i. to create lists.
ii. to create Tables.
iii. to display your education details in a tabular format.
b. Write an HTML code to create a Home page having three links: About Us, Our Services and
Contact Us. Create separate web pages for the three links.
2 Write an HTML code to create a login form. On submitting the form, the user
should get navigated to a profile page.
3 a. Write an HTML code to create a Registration Form. On submitting the
form, the user should be asked to login with this new credentials.
b. Write an HTML code to create a frameset having header, navigation and content
sections
4 Create a HTML page
a. To embed an image map in a web page.
b. To fix the hot spots.
c. Show all the related information when the hot spots are clicked.
5 Write an HTML page that has one input, which can take multi-line text and a submit button.
Once the user clicks the submit button ,it should show the number of characters ,lines and words
in the text entered using an alert message. Words are separated with white space and lines are
separated with new line character.
6 a. Create a webpage and perform styling with inline, internal, and external stylesheets.
b. Write client side scripts for validating web page using DHTML controls.
7 Design a web page using CSS(Cascading Style Sheets) which includes the following: 1) Use
different font, styles: In the style definition you define how each selector should work(font, color
etc.). Then, in the body of your pages, you refer to these selectors to activate the styles. 2) Set a
background image for both the page and single elements on the page.
8 Write an HTML page with Javascript that takes a number from one text field in the range 0-999
and display it in other text field in words.If the number is out of range ,it shold show “out of
range” and if it is not a number ,it should show “not a number” message in the result box.
9 Design and implement a simple shopping cart Website using HTML,CSS & JS.
10 Write JavaScript to validate the following fields of the above registration page. 1. Name (Name
should contains alphabets and the length should not be less than 6 characters). 2. Password
(Password should not be less than 6 characters length).3. E-mailid (should not contain any
invalid and must follow the standard pattern(
[email protected]) 4. Phone Number(Phone
number should contain 10 digits only).
.
Experiment no.1
a. Write a HTML program
i. to create lists.
ii. to create Tables.
iii. to display your education details in a tabular format.
b. Write an HTML code to create a Home page having three links: About Us, Our
Services and Contact Us. Create separate web pages for the three links.
a.
<!DOCTYPE html><html><body>
Unordered list
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Ordered List
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
<table>
<tr> <th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
a. iii
<!DOCTYPE html>
<html>
<head>
<title>Education Details</title>
</head>
<body>
<table> <caption>Education Details</caption>
<tr> <th>Degree</th>
<th>Institution</th> <th>Year</th>
</tr>
<tr> <td>Bachelor of Science</td> <td>XYZ University</td> <td>2018</td>
</tr>
<tr> <td>Master of Science</td> <td>ABC Institute</td> <td>2020</td> </tr>
</table>
</body>
</html>
b.
<!DOCTYPE html>
<header class="header">
<a href="#" class="logo">Developer</a>
<nav class="nav-items">
<a href="\home.html">Home</a>
<a href="\about.html">About</a>
<a href="\contact.html">Contact</a>
</nav>
</header>
<main>
<div class="intro">
<h1>A Web Developer</h1>
<p>I am a web developer and I love to create websites.</p>
<button>Learn More</button>
</div>
<div class="achievements">
<div class="work">
<i class="fas fa-atom"></i>
<p class="work-heading">Projects</p>
<p class="work-text">I have worked on many projects and I am very proud of them. I am
a very good developer and I am always looking for new projects.</p>
</div>
<div class="work">
<i class="fas fa-skiing"></i>
<p class="work-heading">Skills</p>
<p class="work-text">I have a lot of skills and I am very good at them. I am very good at
programming and I am always looking for new skills.</p>
</div>
<div class="work">
<i class="fas fa-ethernet"></i>
<p class="work-heading">Network</p>
<p class="work-text">I have a lot of network skills and I am very good at them. I am
very good at networking and I am always looking for new network skills.</p>
</div>
</div>
<div class="about-me">
<div class="about-me-text">
<h2>About Me</h2>
<p>I am a web developer and I love to create websites. I am a very good developer and I
am always looking for new projects. I am a very good developer and I am always looking for
new projects.</p>
</div>
<img src="https://images.unsplash.com/photo-1596495578065-6e0763fa1178?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fi
t=crop&w=871&q=80" alt="me">
</div>
</main>
<footer class="footer">
<div class="copy">© 2022 Developer</div>
<div class="bottom-links">
<div class="links">
<span>More Info</span>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="links">
<span>Social Links</span>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</footer>
Home.html
<!DOCTYPE HTML>
<HTML>
<BODY>
HOME
</BODY
</HTML>
About.html
<!DOCTYPE HTML>
<HTML>
<BODY>
ABOUT
</BODY
</HTML>
Contact.html
<HTML>
<BODY>
Contact
</BODY
</HTML>
Experiment No. 2
Write an HTML code to create a login form. On submitting the form, the user should
get navigated to a profile page.
<!DOCTYPE HTML>
<html>
<form action="profile.html" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</html>
Experiment No. 3
a. Write an HTML code to create a Registration Form. On submitting the form,
the user should be asked to login with this new credentials.
b. Write an HTML code to create a frameset having header, navigation and content
sections.
a.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
.main h2 {
color: #4caf50;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
}
button[type="submit"] {
padding: 15px;
border-radius: 10px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
width: 100%;
font-size: 16px;
</style>
</head>
<body>
<div class="main">
<h2>Registration Form</h2>
<form action="login.html">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" required />
<label for="last">Last Name:</label>
<input type="text" id="last" name="last" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password"
pattern="^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$"
title="Password must contain at least one number,
one alphabet, one symbol, and be at
least 8 characters long" required />
<label for="repassword">Re-type Password:</label>
<input type="password" id="repassword" name="repassword" required />
<label for="mobile">Contact:</label>
<input type="text" id="mobile" name="mobile" maxlength="10" required />
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">
Male
</option>
<option value="female">
Female
</option>
<option value="other">
Other
</option>
</select>
<button type="submit">
Submit
</button>
</form>
</div>
</body>
</html>
b. <!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="20%, 80%">
<frame src="header.html" name="header">
<frameset cols="20%, 80%">
<frame src="navigation.html" name="navigation">
<frame src="content.html" name="content">
</frameset>
<noframes>
<body>
<p>Your browser does not support frames.</p>
</body>
</noframes>
</frameset>
</html>
Experiment No. 4
Create a HTML page
a. To embed an image map in a web page.
b. To fix the hot spots.
c. Show all the related information when the hot spots are clicked.
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the
topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
Experiment No.5
Write an HTML page that has one input, which can take multi-line text and a submit
button. Once the user clicks the submit button ,it should show the number of characters
,lines and words in the text entered using an alert message. Words are separated with
white space and lines are separated with new line character.
<html>
<head>
<title>Lines,words,characters</title>
<script language="javascript">
function wcount()
var str=document.forms["frm1"].inputstring.value;
var lines=str.split('\n').length;
document.forms["frm1"].linecount.value=lines;
document.forms["frm1"].wordcount.value=str.split(/\s/).length;
document.forms["frm1"].charactercount.value=str.length-(lines-1);
</script></head>
<body>
<form name="frm1">
<center><b>Enter Multiple lines of text </b><br/><br/><textarea name="inputstring"
cols="50" rows="5"></textarea><br/><br/>
<input type="button" name="count" value="Count" onclick="wcount()"></input><br/><br/>
Number of lines: <input name="linecount" type="text" value=" " size="6"><br/><br/>
Number of words: <input name="wordcount" type="text" value=" " size="6"><br/><br/>
Number of characters: <input name="charactercount"type="text" value=" "
size="6"><br/><br/>
</form>
</body>
</html>
Experiment No. 6
a. Create a webpage and perform styling with inline, internal, and external
stylesheets.
b. Write client side scripts for validating web page using DHTML controls.
a.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
p{
color: green;
margin-top: 10px;
</style>
</head>
<body>
<p style="color: red; padding: 5px;">Red text with padding>Red paragraph with
padding.</p>
</body>
</html>
b.
<html>
<head>
<title>A Simple Form with JavaScript Validation</title>
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.contact_form.contact_name.value == "" )
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
if ( document.contact_form.contact_name.value != "" )
alert ( "Succesfull" );
valid = false;
return valid;
}//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="contact_form" method="post" onSubmit="return validate_form ( );">
Please Enter Your Name
<p>Your Name: <input type="text" name="contact_name"></p>
<p><input type="submit" name="send" value="Send Details"></p>
</form>
</body>
</html>
Experiment No.7
Design a web page using CSS(Cascading Style Sheets) which includes the following: 1)
Use different font, styles: In the style definition you define how each selector should
work(font, color etc.). Then, in the body of your pages, you refer to these selectors to
activate the styles. 2) Set a background image for both the page and single elements on
the page.
<html><head><style type="text/css">
a:link{
color:blue;
}
a:hover{
background-color:green;
color:white;
}
a:visited{color:cyan;}
a:active
{
bacground-color:orange;
}</style></head>
<body background="hulk.gif" height="200" width="400">
<i><marquee> <h1>NATIONAL INSTITUTE OF TECHNOLOGY WARANGAL</h1>
</marquee>
</i><a href="g.html"><h2>Click Here !!!</h2></a>
</body>
</html>
Experiment No.8
Write an HTML page with Javascript that takes a number from one text field in the
range 0-999 and display it in other text field in words. If the number is out of range ,it
should show “out of range” and if it is not a number ,it should show “not a number”
message in the result box.
<html>
<head>
<title>Number in words</title>
<script language="javascript">
function convert()
var num=document.forms["frm1"].num.value;
document.forms["frm1"].words.value="";
if(isNaN(num))
alert("Not a Number");
else if (num<0 || num>999)
alert("Out of Range");
}
else
var len=num.length;
var words="";
for(var i=0;i<len;i++)
{
var n=num.substr(i,1);
switch(n)
case '0':words+="Zero ";break;
case '1':words+="One ";break;
case '2':words+="Two ";break;
case '3':words+="Three ";break;
case '4':words+="Four ";break;
case '5':words+="Five ";break;
case '6':words+="Six ";break;
case '7':words+="Seven ";break;
case '8':words+="Eight ";break;
default:words+="Nine ";
}}
document.forms["frm1"].words.value=words;
}</script>
</head>
<body>
<form name="frm1">
<center><h3>NUMBER IN WORDS</h3></center>
<br/>
<center>Enter a Number :<input type="text" name="num"</input><br/></center>
<br/>
<center><input type="button" name="inwords" value="In Words"
onclick="convert()"></input></center>
<br/><br/><center>Number in Words :<input type="text" name="words"</input></center>
<br/>
</form>
</body>
</html>
Experiment No. 9
Design and implement a simple shopping cart Website using HTML,CSS & JS.
<!DOCTYPE HTML>
<HTML>
<head>
*{
box-sizing: border-box;
html,
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #7EC855;
font-family: 'Roboto', sans-serif;
.shopping-cart {
width: 750px;
height: 423px;
margin: 80px auto;
background: #FFFFFF;
box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10);
border-radius: 6px;
display: flex;
flex-direction: column;
.title {
height: 60px;
border-bottom: 1px solid #E1E8EE;
padding: 20px 30px;
color: #5E6977;
font-size: 18px;
font-weight: 400;
.item {
padding: 20px 30px;
height: 120px;
display: flex;
.item:nth-child(3) {
border-top: 1px solid #E1E8EE;
border-bottom: 1px solid #E1E8EE;
.buttons {
position: relative;
padding-top: 30px;
margin-right: 60px;
.delete-btn,
.like-btn {
display: inline-block;
Cursor: pointer;
.delete-btn {
width: 18px;
height: 17px;
background: url("delete-icn.svg") no-repeat center;
.like-btn {
position: absolute;
top: 9px;
left: 15px;
background: url('twitter-heart.png');
width: 60px;
height: 60px;
background-size: 2900%;
background-repeat: no-repeat;
.is-active {
animation-name: animate;
animation-duration: .8s;
animation-iteration-count: 1;
animation-timing-function: steps(28);
animation-fill-mode: forwards;
@keyframes animate {
0% { background-position: left; }
50% { background-position: right; }
100% { background-position: right; }
.image {
margin-right: 50px;
Let's add some basic style to product name and description.
.description {
padding-top: 10px;
margin-right: 60px;
width: 115px;
}
.description span {
display: block;
font-size: 14px;
color: #43484D;
font-weight: 400;
.description span:first-child {
margin-bottom: 5px;
.description span:last-child {
font-weight: 300;
margin-top: 8px;
color: #86939E;
.quantity {
padding-top: 20px;
margin-right: 60px;
.quantity input {
-webkit-appearance: none;
border: none;
text-align: center;
width: 32px;
font-size: 16px;
color: #43484D;
font-weight: 300;
button[class*=btn] {
width: 30px;
height: 30px;
background-color: #E1E8EE;
border-radius: 6px;
border: none;
cursor: pointer;
.minus-btn img {
margin-bottom: 3px;
.plus-btn img {
margin-top: 2px;
button:focus,
input:focus {
outline:0;
.total-price {
width: 83px;
padding-top: 27px;
text-align: center;
font-size: 16px;
color: #43484D;
font-weight: 300;
@media (max-width: 800px) {
.shopping-cart {
width: 100%;
height: auto;
overflow: hidden;
.item {
height: auto;
flex-wrap: wrap;
justify-content: center;
}
.image img {
width: 50%;
.image,
.quantity,
.description {
width: 100%;
text-align: center;
margin: 6px 0;
.buttons {
margin-right: 20px;
</style>
<script>
$('.like-btn').on('click', function() {
$(this).toggleClass('is-active');
});
$('.minus-btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.closest('div').find('input');
var value = parseInt($input.val());
if (value > 1) {
value = value - 1;
} else {
value = 0;
$input.val(value);
});
$('.plus-btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.closest('div').find('input');
var value = parseInt($input.val());
if (value < 100) {
value = value + 1;
} else {
value =100;
$input.val(value);
});
</script>
</HEAD>
<BODY>
<div class="shopping-cart">
<!-- Title -->
<div class="title">
Shopping Bag
</div>
<!-- Product #1 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-1.png" alt="" />
</div>
<div class="description">
<span>Common Projects</span>
<span>Bball High</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">
<img src="plus.svg" alt="" />
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<img src="minus.svg" alt="" />
</button>
</div>
<div class="total-price">$549</div>
</div>
<!-- Product #2 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-2.png" alt=""/>
</div>
<div class="description">
<span>Maison Margiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">
<img src="plus.svg" alt="" />
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<img src="minus.svg" alt="" />
</button>
</div>
<div class="total-price">$870</div>
</div>
<!-- Product #3 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-3.png" alt="" />
</div>
<div class="description">
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">
<img src="plus.svg" alt="" />
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
<img src="minus.svg" alt="" />
</button>
</div>
<div class="total-price">$349</div>
</div>
</div>
</BODY>
</HTML>
Experiment No.10
Write JavaScript to validate the following fields of the above registration page. 1. Name
(Name should contains alphabets and the length should not be less than 6 characters). 2.
Password (Password should not be less than 6 characters length).3. E-mailid (should not
contain any invalid and must follow the standard pattern([email protected]) 4. Phone
Number(Phone number should contain 10 digits only).
<!DOCTYPE html>
<html>
<HEAD>
<SCRIPT>
function validateFields()
var name=document.getElementById("name").value;
var password=document.getElementById("password").value;
if(validateName(name) && validatePassword(password))
return true;
function validatePassword(str)
if(str.length>=6)
return true;
else
alert("Password should not be less than 6 characters length")
}
function validateName(str)
let regex = /^[a-zA-Z]+$/;
if(regex.test(str)&&str.length>=6)
return true;
else
alert("Name should contain alphabets and the length should not be less than 6 characters")
</SCRIPT>
</HEAD>
<BODY>
<form onsubmit="validateFields()">
Name <input type="text" id="name" name="name"/>
Password <input type="password" id="password" name="password"/>
Email <input type="email" id="email" name="email"/>
Phone number <input type="tel" id="num" name="phone_num"/>
<input type="submit" value="submit"/>
</form>
</BODY>
</html>
