Shubh 0037

Shivam Chaudhary (SEC : C)Roll No.
2203330100157 (CSE)
EXPERIMENT No-1
Aim: WAP to create HOME PAGE using HTML
1. 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: -
• Problem Statement :To design a Home Page containing details about the frames.
. - Stepwise Solution:
• 1-– Initiate the HTML Page with simple <html> tags

2 – Use the various HTML <FRAME> to create a simple frame containing the record of
. home page
3- Save the file using .html / .htm extension

4 – Run the file on browser (IE / google-chrome / Mozilla-Firefox)
3. Code & Outcome: - Snapshot of the homepage.
HTML CODE: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>website</title>
<link rel="stylesheet" type="text/css" href="home_page.css">
</head>
<body>
<table id="table">
<tr id="logo">
<th>
<a href="https://rkgit.edu.in/" title="Home" target="_blank"
rel="noopener">
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)
<img src="images.jpeg" alt="logo" align="center"

bgcolor="rgb(247, 186, 112)" height="25PX"
Width="50PX">
</a>
</th>
<th colspan="4">
<font id="title">
<center>
RAJ KUMAR GOEL INSTITUTE OF TECHNOLOGY
</center>
</font>
</th>
</tr>
<h3>
<tr id="home">
<th>
Ho
me
</th>
<th>
<a href="login_page.html" title=""
target="iframe_a" class="link"> Login
</a>
</th>
<th><a href="registration_page.html" title=""
target="iframe_a">
Registration
</a></th>
<th><a href="catalague_page.html" title=""
target="iframe_a">
Catalague
</a></th>
<th><a href="cart_page.html" title="" target="iframe_a">
Cart
</a></th>
</tr>
<tr>
<td>CSE</td>
<td id="loginpage" rowspan="5" colspan="4">
<iframe name="iframe_a" title="Iframe Example"
id="CSE" height="500" width="100%"> </iframe>
</td>
</tr>
<tr>
<td>ECE</td>
</tr>
<tr>
<td>EEE</td>
</tr>
<tr>
<td>CIVIL</td>
</tr>
</table>
</h3>
</body>
</html>
CSS CODE: -
img {
width: 50px; height:
50px; object-fit:
cover; border-radius:
50%;
}
#CS
E{
border:none;
}
#Login{
text-decoration: none;color:black;
}
#table{ width:
100%;
}
tabl
e,
th{
border: 1px solid black;
border-collapse: collapse;
}
#logo{
background-color:rgb(247, 186, 112);
}
td{
text-align: center;
border-right: 1px solid black;
th{
padding: 20px;
}
#title{
font-size:25px;color:blue;
}
#home{
background-color:bisque;
}
OUTPUT: -
EXPERIMENT No-2
Aim: WAP to create LOGIN PAGE using HTML

• Create a LOGIN PAGE with the following fields
• Username (Text field)
• Password (password field)
• Submit Button
• Reset Button
Objective: -
• Problem Statement:T-o design a Login Page containing details about the Username and
Password.
• Stepwise Solution: -
• – Initiate the HTML Page with simple <html> tags
• – Use the various HTML <form>, <input >,<label> to create a simple form
containing the record of Login page
• Save the file using .html / .htm extension
• Run the file on browser (IE / google-chrome / Mozilla-Firefox)
: - Snapshot of the homepage.
4. Code & Outcome
HTML CODE: -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="login_page.css">
<title>Document</title>
</head>
<body>
<p>Login Page</p>
<form>
<ul>
<li>
<label for="email">UserName: </label>
<input type="text" name="email" id="email">
</li>
<li>
<label for="form-pswd">Passwords: </label>
<input type="password" name="pswd" maxlength=12 minlength=6
id="form-pswd">
</li>
</ul><br><br>
<button type="button">submit</button>
<button type="button">reset</button>
</form>
</body>
</html>
CSS CODE: -
ul {
list-style-type: none;
margin: 0;
line-height: 1.5em;
padding: 2;
}
.pos{
text-align: center;
margin-top: 20px;
}
body{
text-align: center;
}
OUTPUT: -
EXPERIMENT No-3
Aim: WAP to create CATALAGUE 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:
• Snapshot of Cover Page.
• Author Name.
• Publisher.
• Price
• Add to cart button.
Objective: -
• Problem Statement: - To design a Catalogue Page containing details about the Book,
Price, Authors Name and Add to Cart Button.
• – Use the various <table>,<img>,<button> to create a simple table containing
the record of Book
• Code & Outcome
HTML CODE: -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css"
href="catalague_page.css">
</head>
<body>
<table width="100%">
<tr height="250">
<td class="image">
<div class="zoom">
<img src="https://m.media-
amazon.com/images/I/51-IavXnYkL._SY466_.jpg" alt="no photo" class="center"
height="200px" width="200px">
</div>
</td>
<td class="info">
<pre>
BOOK : XML BIBLE
AUTHOR : WINSTON
PUBLICATION :
WILEY
</pre>
</td>
<td class="price"> $ 40.5</td>
<td class="atc"><img src="Yellow-Add-To-Cart-Button-PNG- Image.png"
alt="" height="25px" width="100px"></td>
</tr>
<tr height="250">
<td>
<div class="zoom">
<img
src= "https://pe opl e. mat h.harvard.ed u/~ kn ill /sfm/literat ure /s_ 00 07.jp g" alt="no
photo"
class="center" height="200px" width="200px">
</div>
</td>
<td class="info">
<pre>
BOOK :
AI
AUTHOR : S.RUSSEL
PUBLICATION :
PRINCETONHALL
</pre>
</td>
<td class="price"> $63</td>
<td class="atc"><img src="Yellow-Add-To-Cart-Button-PNG- Image.png"
alt="" height="25px" width="100px"></td>
</tr>
<tr height="250">
<td>
<div class="zoom">
<img src="https://rukminim1.flixcart.com/image/300/300/book/1/0/2/web-
enabl ed- co mme rc ial -ap pl ications-d ev elo pm ent -using-java- 2-o ri gin al-
imadyxxjpcxmhhna.jpeg"
alt="no photo" class="center" height="200px"
width="200px">
</div>
</td>
<td>
<pre>
BOOK : JAVA 2
AUTHOR :
WATSON
PUBLICATION : BPB PUBLICATIONS
</pre>
</td>
<td> $35.5</td>
<td><img src="Yellow-Add-To-Cart-Button-PNG-Image.png" alt=""
height="25px" width="100px"></td>
</tr>
<tr height="250">
<td>
<div class="zoom">
<img src="https://m.media-
amazon.com/images/I/51hdK2vXTVL.jpg" alt="no photo" class="center" height="200px"
width="200px">
</div>
</td>
<td>
<pre>
BOOK : HTML IN 24 HOURS

AUTHOR : SAM PETER
PUBLICATION : SAM
PUBLICATION
</pre>
</td>
<td> $50</td>
<td><img src="Yellow-Add-To-Cart-Button-PNG-Image.png" alt=""
height="25px" width="100px"></td>
</tr>
</table>
</body>
</html>
CSS CODE: -
tabl
e,
th,
td
{
border: 1px solid black;
border-collapse: collapse;
}
.center {
display:
block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.zoom:hover{
transition: transform .2s;
transform: scale(1.5);
}
.image{ widt
h: 20.55%;
}
.info{
width: 33.1%;
}
.price{ wid
th: 29%;
}
OUTPUT: -
EXPERIMENT No-4
Aim: WAP to create CART PAGE using HTML
• The CART PAGE contains the details about the books which are added to the cart. The
cart page should look like this:
BOOK NAME PRICE QUANTITY 2 AMOUN

T
JAVA 2 $35.5 1 $70
XML BIBLE $40.5 $40.5
TOTAL AMOUNT -$130.5
Objective:
• Problem Statement:T-o design a CART Page containing details about the Book, Price,
Quantity and Amount of Book.
• – Use the various <table>, <tr>, <td>to create a simple table containing the record of
Book added to cart.
Code & Outcome
HTML CODE: -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="cart_page.css">
</head>
<body>
<table width="100%">
<div class="align">
<tr>
<td>BOOK NAME</td>
<td>PRICE</td>
<td>QUANTITY</td>
<td>AMOUNT</td>
</tr>
<tr>
<td>JAVA 2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td>XML BIBLE</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
<tr>
<td>TOTAL AMOUNT</td>
<td>-$130.5</td>
</tr>
</div>
</table>
</body>
</html>
CSS CODE: -
.div{
}
text-align: center;
OUTPUT: -
EXPERIMENT No-5
Aim: WAP to create REGISTRATION PAGE using HTML
1.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:
• Problem Statement: - To design a CART Page containing details about the Book, Price,
Quantity and Amount of Book.
• – Use the various <form>, <input >,<label> to create a simple table containing the
record of Book added to cart.
• Code & Outcome
HTML CODE: -
<!DOCTYPE html>
<html lang="en">
<head>
href="registration_page.css">
</head>
<body>
<div class="container">
<form>
<h1>Register</h1>
<hr>
<p>Please fill in this form to create an account.</p>
<label for="text"><b>Name</b></label><br>
<input type="text" placeholder="Name" id="name" required>

<br>
<label for="psw"><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw"
id="psw" required>
<br>
<label for="psw-repeat"><b>Repeat
Password</b></label><br>
<input type="password" placeholder="Repeat Password"
name="psw-repeat" id="psw-repeat" required>
<br>
<label for="email"><b>Email</b></label><br>
<input type="text" placeholder="Enter Email" name="email"
id="email" required>
<br>
<label for="text"><b>Phone Number</b></label><br>
<input type="text" placeholder="Enter Phone Number" id="phoneno"
required>
<br>
<p><b>Sex:</b></p>
<input type="radio" id="male" name="fav_language">
<label for="male">Male</label><br>
<input type="radio" id="female" name="fav_language">
<label for="female">Female</label><br>
<input type="radio" id="other" name="fav_language" >
<label for="other">Other</label>
<p><b>Language:</b></p>
<input type="checkbox" id="english" name="fav_language">

<label for="english">English</label><br>
<input type="checkbox" id="hindi" name="fav_language" >
<label for="hindi">Hindi</label><br>
<input type="checkbox" id="tamil" name="fav_language" >
<label for="tamil">Tamil</label>
<br><br>
<label for="text"><b>Address</b></label><br>
<input type="text" placeholder="Address" id="address" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms &
Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</form>
</div>
</body>
</html>
CSS CODE: -
/* Add padding to containers */

.container {
padding:
16px; display:
grid;
place-items: center;
min-height: 100vh;
}
/* Full-width input fields */

input[type=text], input[type=password] { width:
100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */ hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit/register button */

.registerbtn {
background-color: #04AA6D; color:
white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 1;
}
.registerbtn:hover {
opacity:1;
}
/* Add a blue text color to links */ a {

color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
width:
100%;
background-color: #f1f1f1;
}
OUTPUT: -
EXPERIMENT No-6
Aim: WAP to VALIDATE REGISTRATION PAGE using JAVASCRIPT
• Write JavaScript to validate the following fields of the above registration page.
• Name (Name should contains alphabets and the length should not be less than 6
characters).
• Password (Password should not be less than 6 characters length).
Objective:
• Problem StatementT: -o validate the Registration Page using JavaScript
• – Use the various JavaScript functions to validate the name and Password Field of the
Form.
• Code & Outcome
HTML CODE: -
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function validateForm(){
let x=document.forms["myForm"]["fname"].value; let
p=document.forms["myForm"]["psw"].value; if(x==""){
alert("Name must be filled out"); return
false;
}
else if(x.length<6 || x.length>15){
alert("Name must be 6 to 15 characters long"); return
false;
}
else if (!/^[A-Za-z]+$/.test(x)) {
alert("Name must contain only alphabets"); return
false;
}
else if(p==""){
alert("Password must be filled out"); return false;
}
else if(p.length<6 || p.length>15){
alert("Password must be 6 to 15 characters long");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="" onsubmit="return validateForm()" method="POST">
<h1>Register</h1>
<hr>
<input type="text" placeholder="Name" name="fname" id="name"

required>
<br>
id="psw" required>
<br>
<input type="text" placeholder="Enter Email" name="email" id="email"
required>
<br>
required>
<br>
<p><b>Sex:</b></p>
<br><br>
<hr>
Privacy</a>.</p>
</form>
</div>
</body>
</html>
CSS CODE: -

.container {
padding:
16px; display:
grid;
min-height: 100vh;
}

100%;
padding: 15px;
border: none;
}
outline: none;
}
{
}

.registerbtn {
white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 1;
}
opacity:1;
}

color: dodgerblue;
}
.signin {
width:
100%;
}
OUTPUT: -
EXPERIMENT No-7
Aim: WAP to VALIDATE REGISTRATION PAGE using JAVASCRIPT
1. Write JavaScript to validate the following fields of the above registration page.
1.E-mailid (should not contain any invalid and must follow the standard
pattern(name@domain.com)
• Phone Number (Phone number should contain 10 digits only).
Objective:
To validate the Registration Page using JavaScript
• Problem Statement: -
• – Use the various JavaScript functions to validate the name and Password Field of the
Form.

Code & Outcome
HTML CODE: -
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function validateEmail(email) {
const re =
/^(( [^<> () [\] \\.,;:\s@"] +(\ .[^<>()[ \]\ \. ,;: \s @"] +)*)|(" .+"))@((\[ [0-
9]{1 ,3} \.[0-9] {1,3}\. [0 -9]{1 ,3 }\. [0 -9] {1 ,3} \] )| (([a-zA- Z\- 0-
9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validateForm(){
let x=document.forms["myForm"]["name"].value; let
p=document.forms["myForm"]["psw"].value; let
e=document.forms["myForm"]["email"].value;
let ph=document.forms["myForm"]["phoneno"].value;
if(x==""){
alert("Name must be filled out"); return
false;
}
else if(x.length<6 || x.length>15){
alert("Name must be 6 to 15 characters long"); return false;
}
else if (!/^[A-Za-z]+$/.test(x)) {
alert("Name must contain only alphabets"); return
false;
}
else if(p==""){
alert("Password must be filled out"); return false;
}
else if(p.length<6 || p.length>15){
alert("Password must be 6 to 15 characters long"); return false;
}
else if(ph=""){
alert("Phone Number must be filled out"); return
false;
}
else if(ph.length!=10){
alert("Phone Number must be 10 digits long"); return false;
}
else if (!/^[0-9]+$/.test(ph)) {
alert("Phone Number must contain only numbers"); return false;
}
if (validateEmail(e))
{ alert("Valid email address");
} else {
alert("Invalid email address");
}
}
</script>
</head>
<body>
<form name="myForm" action="" onsubmit="return validateForm()" method="POST">
<h1>Register</h1>
<hr>
<input type="text" placeholder="Name" name="fname" id="name"
required>
<br>
id="psw" required>
<br>
<input type="text" placeholder="Enter Email" name="email"
id="email" required>
<br>
required>
<br>
<p><b>Sex:</b></p>

<br><br>
<hr>
Privacy</a>.</p>
</form>
</div>
</body>
</html>
CSS CODE: -
.container {
padding:
16px; display:
grid;
min-height: 100vh;
}
100%;
padding: 15px;
border: none;
}
outline: none;
}
{
}

.registerbtn {

white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 1;
}
opacity:1;
}

color: dodgerblue;
}
.signin {
width:
100%;
}
OUTPUT: -

Shubh 0037

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Shubh 0037

Uploaded by

Copyright:

Available Formats

Shivam Chaudhary (SEC : C)Roll No.

Aim: WAP to create HOME PAGE using HTML

1. The static HOME PAGE must contain three frames.

• 1-– Initiate the HTML Page with simple <html> tags

3- Save the file using .html / .htm extension

3. Code & Outcome: - Snapshot of the homepage.

<img src="images.jpeg" alt="logo" align="center"

Aim: WAP to create LOGIN PAGE using HTML

Aim: WAP to create CATALAGUE PAGE using HTML

• Add to cart button.

• Code & Outcome

BOOK : HTML IN 24 HOURS

Aim: WAP to create CART PAGE using HTML

BOOK NAME PRICE QUANTITY 2 AMOUN

Aim: WAP to create REGISTRATION PAGE using HTML

1.Create a“ registration form“ with the following fields

• Password (password field)

• E-mail id(text field)

• Phone Number(text field)

• Date of birth(3 select boxes)

• Languages known(checkboxes–English, Telugu, Hindi, Tamil)

<p>Please fill in this form to create an account.</p>

<input type="text" placeholder="Name" id="name" required>

<input type="checkbox" id="english" name="fav_language">

/* Add padding to containers */

/* Full-width input fields */

/* Set a style for the submit/register button */

/* Add a blue text color to links */ a {

Aim: WAP to VALIDATE REGISTRATION PAGE using JAVASCRIPT

• Code & Outcome

<input type="text" placeholder="Name" name="fname" id="name"

/* Add padding to containers */

/* Full-width input fields */

/* Set a style for the submit/register button */

/* Add a blue text color to links */ a {

Aim: WAP to VALIDATE REGISTRATION PAGE using JAVASCRIPT

• Run the file on browser (IE / google-chrome / Mozilla-Firefox)

<input type="checkbox" id="hindi" name="fav_language" >

/* Add padding to containers */

/* Set a style for the submit/register button */

background-color: #04AA6D; color:

/* Add a blue text color to links */ a {

You might also like