RAJ KUMAR GOEL INSTITUTE OF TECHNOLOGY
5TH KM STONE DELHI MEERUT ROAD GHAZIABAD [UP]
WEB DESIGNING WORKSHOP
LAB FILE (BCS-353)
SUBMITTED TO :- SUBMITTED BY:-
HIMANSHI MAM MEENAKSHI NEGI
• 2200330130031
IT sec (A)
DEPARTMENT OF INFORMATION
TECHNOLOGY
Raj Kumar Goel Institute of Technology, Ghaziabad
Department of Computer Science & Engineering
INDEX
SNo. PROGRAM NAME SUBMISSION DATE SIGNATURE
1. WAP to create HOME PAGE
using HTML
2. WAP to create LOGIN PAGE
using HTML
3.
WAP to create CATALOGUE PAGE
using HTML
4.
WAP to create CART PAGE
using HTML
5. WAP to create REGISTRATION
PAGE using HTML
6. WAP to show Js VALIDATION
7. WAP to show Js VALIDATION
8. WAP to Design a web page
using CSS(Cascading Style
Sheets)
9. WAP to control the
repetition of the image with
the background-repeat
property
10. WAP to develop static web
page of TO-DO LIST
Program:1
Aim: WAP to create HOME PAGE using HTML
• The static home page must contain three frames.
• Top frame: Logo and the college name and links to
Homepage, Login page, Registration page, Catalogue
page and Cart page (the description of these pages will
be given below). For example: When you click the
link "CSE" the catalogue for CSE Books should be
displayed in the Right frame.
• Right frame: The pages to the links in the left frame must
be loaded here. Initially this page contains description of
the web site.
Objective:
1. Problem Statement: - To design a Home Page containing details about
the frames.
2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to create a simple frame
containing the record of home page.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).
Code & Outcome: - Snapshot of the homepage.
CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport"content="width=device-
width,initialscale=1.0">
</head>
<body> <style>
table,th,td{
border:2px solid rgb(0, 0, 0); border-collapse:collapse;
} th,td{
padding:10px;
} a{ color: black;
text-decoration: none;
color: rgb(134, 72, 11);
}
</style>
<table Style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img
src="[Link]
[Link]" alt="Rkgit logo" height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"
></th>
<th colspan="4" style="color: rgb(17,
88, 126);"><h1><b>RAJ KUMAR GOEL INSTITUTE OF
TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th>HOME</th>
<th><a href="[Link]">LOGIN</a></th>
<th><a href="[Link]">REGISTRATION</a></th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td
align="center">CSE<br><br><br>ECE<br><br><br>EEE<br><br><b
r>CIVIL </td>
<td colspan="4" align="center">
<p style="font-size: 20;”>Description of the
Website.</p></td>
</tr>
</table>
</body>
</html>
OUTPUT:
Experiment : 2
Aim: WAP to create LOGIN PAGE using HTML
This page contains following informations:
• User name
• Password
• Submit and reset buttons
Objective:
1. Problem Statement: - To design a Login Pagecontaining details about the
frames.
2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to createa simple frame containing the
record of home page.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).
Code & Outcome:- Snapshot of the login page
CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title> <meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
</head>
<body> <style>
table,th,td{
border:2px solid black;
border-collapse:collapse;
} th,td{
padding:10px;
} a{
color: black; text-
decoration: none; color:
rgb(134, 72, 11);
}
</style>
<table Style="width:100%">
<tr style="background-color: rgb(242, 167, 167);">
<th><img
src="[Link]
[Link]"height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"></
th>
<th colspan="4" style="background-color=red"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th>LOGIN</th>
<th><a href="[Link]">REGISTRATION</a></th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td align="center">
<pre>CSE<br><br><br><br>ECE<br><br><br><br>EEE<br><br><br><b
r>CIVIL</pre>
</td>
<td colspan="5"align="center">
<h2><b>LOGIN PAGE:</b></h2>
<form>
USER NAME: <input type="text" user name="user
name"placeholder="user name"/> <br><br/>
PASSWORD: <input type="password"
password="password"placeholder="password"/> <br><br/>
<input type="Submit" value="Submit"> <input
type="Reset" value="Reset">
</form>
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Program : 3
Aim: WAP to create CATALOGUE PAGE using HTML
The catalogue page should contain the details of all the books available
in the website in a table. The details should contain the following:
• Snap shot of Cover Page
• Author Name
• Publisher
• Price
• Add to cart button.
Objective:
1. Problem Statement: - To design a Catalogue Pagecontaining details about
the frames.
2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to createa simple frame containing
the record of home page.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).
Code & Outcome:- Snapshot of the Catalogue page.
CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport"content="width=device-
width,initialscale=1.0">
<link rel="stylesheet"
href="[Link]
/css/[Link]">
</head>
<body> <style>
table,th,td{ border:2px
solid black; border-
collapse:collapse;
} th,td{
padding:10px;
} a{ color: black;
text-decoration: none;
color: rgb(134, 72, 11);
} .btn{
border-radius: 20px;
border-width: 1px;
cursor: pointer;
width: 60%; }
.btn:active{
background-color: grey;
} .icon { padding:
10px; min-width:
50px; text-align:
center; }
</style>
<table Style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img
src="[Link]
[Link]" alt="Rkgit logo" height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"></t
h>
<th colspan="4" style="background-color=red"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th><a href="[Link]">REGISTRATION</a></th>
<th>CATALOGUE</th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td
align="center"><pre>CSE<br><br><br><br><br><br>ECE<br><br><b
r><br><br><br>EEE<br><br><br><br><br><br>CIVIL
<pre></td>
<td align="center">
<img src="[Link]
[Link]/images/I/[Link]" alt="XML Bible book"
height="70"style="max-width:100%"><br><br> <img
src="[Link]
[Link]/images/S/[Link]/books/138
5600294i/[Link]" alt="AI book"
height="70"style="maxwidth:100%"><br><br> <img
src="[Link]
[Link]"
alt="Java 2 book" height="70"style="max-width:100%"><br><br>
<img src="[Link]
[Link]/images/I/[Link]" alt="HTML in 24 hours
book" height="70">
</td>
<td><pre> Book : XML Bible
Author : Winsten
Publication : Wiely
<br><br>
Book : AI
Author : [Link]
Publication : Pricetonhall
<br><br>
Book : Java 2
Author : Watson
Publication : BPBpublication
<br><br>
Book : HTML in 24 hours
Author : Sam Peter
Publication : Sam Publication
</pre></td>
<td align="center">
₹40.5<br><br><br><br><br>
₹63<br><br><br><br><br>
₹35.5<br><br><br><br><br>
₹50
</td>
<td align="center">
<button class="btn" ><i class="fa fa-shopping-cart
icon"></i> Add to Cart </button><br><br><br><br>
<button class="btn" ><i class="fa fa-shopping-cart
icon"></i> Add to Cart </button><br><br><br><br>
<button class="btn" ><i class="fa fa-shopping-cart
icon"></i> Add to Cart </button><br><br><br><br>
<button class="btn" ><i class="fa fa-shopping-cart
icon"></i> Add to Cart </button>
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Program : 4
Aim: WAP to create CART
PAGE using HTML
The cart page contains the details about the books which are
added to the cart.
Objective:
1. Problem Statement: - To design a Cart Page containing details about the
frames.
2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to createa simple frame
containing the record of homepage.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).
Code & Outcome: - Snapshot of the Cart page.
CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport"content="width=device-
width,initialscale=1.0">
</head>
<body> <style>
table,th,td{
border:2px solid black;
border-collapse:collapse;
} th,td{
padding:10px;
} a{
color: black; text-
decoration: none; color:
rgb(134, 72, 11);
}
</style>
<table Style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img
src="[Link]
[Link]" alt="Rkgit logo" height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"></t
h>
<th colspan="4" style="background-color=red"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th><a href="[Link]">REGISTRATION</a></th>
<th><a href="[Link]">CATALOGUE</a></th>
<th>CART</th>
</tr>
<tr>
<td
align="center">CSE<br><br>ECE<br><br>EEE<br><br>CIVIL
</td>
<td colspan="4" style="font-size: 17;">
<pre>
<b> Book name Price Quantity
Amount</b><br>
Java 2 ₹35.5 2 ₹70<br>
XML bible ₹40 1 ₹40.5<br>
<b>Total amount:- ₹130.5</b>
</pre>
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Program : 5
Aim: WAPto create REGISTRATION PAGE
using HTML
Create a Registration form with the following fields:
• Name (Text field)
• Password (password field)
• E-mail id (text field)
• Phone Number (text field)
• Sex (radio button)
• Date of birth (3 select boxes)
• Languages known (checkboxes-English, Telugu, Hindi, Tamil)
Address (text area)
Objective:
1. Problem Statement: - To design a Registration Pagecontaining details
about the frames.
2. Stepwise Solution: -
• Initiate the HTML Page with simple <html> tags.
• Use the various HTML <FRAME> to create a simple frame
containing the record of home page.
• Save the file using .htm / .html extension.
• Run the file on browser (IE / google-chrome / Mozilla-firefox).
Code & Outcome: - Snapshot of the Registration page.
CODE:
<!DOCTYPE>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport"content="width=device-
width,initialscale=1.0">
</head>
<body> <style>
table,th,td{
border:2px solid black;
border-collapse:collapse;
} th,td{
padding:10px;}
a{
color: black; text-
decoration: none; color:
rgb(134, 72, 11);
}
</style>
<table Style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img
src="[Link]
[Link]" alt="Rkgit logo" height="70"
width="70"align="center"style="maxwidth:100%;height:auto;"></
th>
<th colspan="4" style="background-color=red"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th\>REGISTRATION</th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td colspan="5" align="center">
<form>
Name : <input type="text"
placeholder="name"><br><br>
Password: <input type="password"
placeholder="password"><br><br>
Email id: <input type="text" placeholder="Email
id"><br><br>
Phone : <input type="text"
placeholder="Mobile"><br><br>
Sex :
<input type="radio" value="Male"
name="Sex">Male
<input type="radio" value="Female"
name="Sex">Female
<input type="radio" value="Others"
name="Sex">Others <br><br>
Date of Birth : <input type="date" ><br><br>
Languages Known:<br>
<input type="checkbox" value="Hindi"
name="Languages">Hindi
<input type="checkbox" value="English"
name="Languages">English
<input type="checkbox" value="Telugu"
name="Languages">Telugu
<input type="checkbox" value="Tamil"
name="Languages">Tamil<br><br>
Address : <input type="text"
placeholder="Address"><br><br>
<input type="submit">
<input type="reset">
</form>
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Program:6
AIM: WAP to show Js VALIDATION
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).
CODE:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="[Link]" defer></script>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
a{
color: black;
text-decoration: none;
color: rgb(134, 72, 11);
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img src="rkgit [Link]" alt="Rkgit logo"></th>
<th colspan="4" style="background-color: rgb(204, 129, 129);"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th>REGISTRATION</th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td colspan="5" align="center">
<form onsubmit="return validateForm()">
<!-- Add ID to the input field for easy access in JavaScript -->
Name: <input type="text" id="name" name="name" placeholder="Enter
your" required><br><br>
Password: <input type="password" id="password" name="password"
placeholder="password" required><br><br>
Email id: <input type="text" placeholder="Email id"
required><br><br>
Phone: <input type="text" placeholder="Mobile" required><br><br>
Sex:
<input type="radio" name="Sex" value="Male">Male
<input type="radio" name="Sex" value="Female">Female
<input type="radio" name="Sex" value="Others">Others <br><br>
Date of Birth: <input type="date"><br><br>
Languages Known:<br>
<input type="checkbox" value="Hindi" name="Languages">Hindi
<input type="checkbox" value="English" name="Languages">English
<input type="checkbox" value="Telugu" name="Languages">Telugu
<input type="checkbox" value="Tamil" name="Languages">Tamil<br><br>
Address: <input type="text" placeholder="Address"><br><br>
<input type="submit">
<input type="reset">
</form>
</td>
</tr>
</table>
</body>
</html>
[Link]
function validateForm() {
var name = [Link]("name").value;
var password = [Link]("password").value;
// Validate Name
if (!isValidName(name)) {
alert("Name should contain alphabets and have a minimum length of 6
characters.");
return false;
}
// Validate Password
if ([Link] < 6) {
alert("Password should have a minimum length of 6 characters.");
return false;
}
return true; // Form is valid
}
function isValidName(name) {
// Use regular expression to check if the name contains alphabets and has
a minimum length of 6 characters
return /^[a-zA-Z]{6,}$/.test(name);
}
Output:
1. Name Character Validation
2. Password Validation
Program: 7
AIM: WAP to show Js VALIDATION
3. E-mail (should not contain any invalid and must follow the
standard pattern(name@[Link])
4. Phone Number(Phone number should contain 10 digits
only).
CODE:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="[Link]" defer></script>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
Type your text
th, td {
padding: 10px;
}
a{
color: black;
text-decoration: none;
color: rgb(134, 72, 11);
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img src="rkgit [Link]" alt="Rkgit logo"></th>
<th colspan="4" style="background-color: rgb(204, 129, 129);"><h1><b>RAJ
KUMAR GOEL INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th>REGISTRATION</th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td colspan="5" align="center">
<form onsubmit="return validateForm()">
<!-- Add ID to the input field for easy access in JavaScript -->
Name: <input type="text" id="name" name="name" placeholder="Minimum
6 characters" required><br><br>
Password: <input type="password" id="password" name="password"
placeholder="minimum 6 characters" required><br><br>
Email id: <input type="text" id="email" placeholder="email id"
required><br><br>
Phone: <input type="text" id="phone" placeholder="Mobile"
required><br><br>
Sex:
<input type="radio" name="Sex" value="Male">Male
<input type="radio" name="Sex" value="Female">Female
<input type="radio" name="Sex" value="Others">Others <br><br>
Date of Birth: <input type="date"><br><br>
Languages Known:<br>
<input type="checkbox" value="Hindi" name="Languages">Hindi
<input type="checkbox" value="English" name="Languages">English
<input type="checkbox" value="Telugu" name="Languages">Telugu
<input type="checkbox" value="Tamil" name="Languages">Tamil<br><br>
Address: <input type="text" placeholder="Address"><br><br>
<input type="submit">
<input type="reset">
</form>
</td>
</tr>
</table>
</body>
</html>
[Link]
function validateForm() {
var name = [Link]("name").value;
var password = [Link]("password").value;
var email = [Link]("email").value;
var phone = [Link]("phone").value;
// Validate Name
if (!isValidName(name)) {
alert("Name should contain alphabets and have a minimum length of 6
characters.");
return false;
}
// Validate Password
if ([Link] < 6) {
alert("Password should have a minimum length of 6 characters.");
return false;
}
// Validate Email
if (!isValidEmail(email)) {
alert("Please enter a valid email address.");
return false;
}
// Validate Phone Number
if (!isValidPhoneNumber(phone)) {
alert("Phone number should contain 10 digits only.");
return false;
}
return true; // Form is valid
}
function isValidName(name) {
return /^[a-zA-Z]{6,}$/.test(name);
}
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function isValidPhoneNumber(phone) {
return /^\d{10}$/.test(phone);
}
Output:
1. Email domain Validation
2. Phone number Validation
Program: 8
AIM: WAP to Design a web page using CSS(Cascading
Style Sheets) which includes-
1) Use different font, styles: In the style definion you define how
each selector should work(font, colour etc.). Then, in the body of
your pages, you refer to these selectors to acvate the styles.
2) Set a background image for both the page and single elements
on
the page. CODE:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>RKGIT</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="[Link]" defer></script>
<link rel="stylesheet" type="text/css" href="[Link]"/>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
a{
color: black;
text-decoration: none;
color: rgb(134, 72, 11);
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="background-color: rgb(231, 157, 157);">
<th><img src="rkgit [Link]" alt="Rkgit logo"></th>
<th colspan="4" style="background-color: rgb(204, 129, 129);"><h1><b>RAJ KUMAR GOEL
INSTITUTE OF TECHNOLOGY</b></h1></th>
</tr>
<tr style="background-color: rgb(235, 203, 203);">
<th><a href="[Link]">HOME</a></th>
<th><a href="[Link]">LOGIN</a></th>
<th>REGISTRATION</th>
<th><a href="[Link]">CATALOGUE</a></th>
<th><a href="[Link]">CART</a></th>
</tr>
<tr>
<td colspan="5" align="center">
<form onsubmit="return validateForm()">
<!-- Add ID to the input field for easy access in JavaScript -->
Name: <input type="text" id="name" name="name" placeholder="Minimum
6 characters" required><br><br>
Password: <input type="password" id="password" name="password"
placeholder="minimum 6 characters" required><br><br>
Email id: <input type="text" id="email" placeholder="email id"
required><br><br>
Phone: <input type="text" id="phone" placeholder="Mobile"
required><br><br>
Sex:
<input type="radio" name="Sex" value="Male">Male
<input type="radio" name="Sex" value="Female">Female
<input type="radio" name="Sex" value="Others">Others <br><br>
Date of Birth: <input type="date"><br><br>
Languages Known:<br>
<input type="checkbox" value="Hindi" name="Languages">Hindi
<input type="checkbox" value="English" name="Languages">English
<input type="checkbox" value="Telugu" name="Languages">Telugu
<input type="checkbox" value="Tamil" name="Languages">Tamil<br><br>
Address: <input type="text" placeholder="Address"><br><br>
<input type="submit">
<input type="reset">
</form>
</td>
</tr>
</table>
</body>
</html>
[Link]
/* CSS styles for the entire page */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Change
the font stack to your desired font */
background-image: url('background_image.jpg'); /* Replace
'background_image.jpg' with the path to your image */
background-size: cover;
background-repeat: no-repeat;
color: #333; /* Text color */
}
/* CSS styles for the form */
form {
background-image: url('form_background_image.jpg'); /* Replace
'form_background_image.jpg' with the path to your form background image */
background-size: cover;
background-repeat: no-repeat;
padding: 20px; /* Add padding to the form for better visibility */
}
/* Additional styles for form elements */
input[type="text"],
input[type="password"],
input[type="date"] {
width: 100%;
padding: 8px;
margin: 5px 0;
box-sizing: border-box;
font-size: 16px; /* Increase font size for better readability */
}
input[type="submit"],
input[type="reset"] {
background-color: #3498db; /* Change the color to your desired color */
color: white;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #2980b9; /* Darker color on hover */
}
Output: