Scribd
Upload
33 views45 pages

Web D Experiment 1-10

The document outlines three experiments conducted by Pranay Kumar, focusing on web development using HTML and CSS. Experiment 1 involves creating a static home page with frames for navigation and content display, while Experiment 2 focuses on designing a login page with username and password fields. Experiment 3 details the creation of a catalogue page displaying book details, including images, authors, prices, and an 'Add to Cart' button.

Uploaded by

lakshay
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
33 views45 pages

Web D Experiment 1-10

The document outlines three experiments conducted by Pranay Kumar, focusing on web development using HTML and CSS. Experiment 1 involves creating a static home page with frames for navigation and content display, while Experiment 2 focuses on designing a login page with username and password fields. Experiment 3 details the creation of a catalogue page displaying book details, including images, authors, prices, and an 'Add to Cart' button.

Uploaded by

lakshay
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/ 45

NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT:-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: -
1. Problem Statement: - To design a Home Page containing details about the frames.

2. 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 / .html extension
4 – Run the file on browser (IE / google-chrome / Mozilla-fire fox)
3. Code & Outcome: - Snapshot of the homepage.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head> <style> table, th, td {
border: 1px solid black;
border-collapse:collapse;
}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href= "homepagse.cs"
>
</head>
<body>
<table class="table">

<tr class="row1">
<th><img src="kcc logo.png"
class="logo"></th>
<th colspan ="4">KCCITM OFFICIAL</th>
</tr>
<tr class="row2">
<td><a href= "https://www.kccitm.edu.in/" >Home</a></td>
<td><a href= "https://admissions.kccitm.edu.in/">Login</a></td>
<td><a href= "https://admissions.kccitm.edu.in/">Registration</a></td>
<td><a
href="https://www.amazon.in/b/?ie=UTF8&node=976389031&ext_vrnc=hi&tag=googinhy
dr1-
21&ref=pd_sl_6kjp75wy9e_e&adgrpid=60623360604&hvpone=&hvptwo=&hvadid=597006866
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

786&hvpos=&hvnetw=g&hvrand=5901907534289687999&hvqmt=e&hvdev=c&hvdvcmdl=&hvloc
int=&hvlocphy=9184416&hvtargid=kwd-
301378608398&hydadcr=23640_2222251">Catalogue</a></td></td>
<td><a
href="https://www.amazon.in/gp/cart/view.html?ref_=nav_cart">Cart</a></td>
</tr>
<tr>
<td class="Home" ><a herf="https://www.kccitm.edu.in/academics/faculty">CSE</a>
<P><a
href= "https://www.kccitm.edu.in/academics/faculty"> EEE </a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty"> ECE </a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty"> CIVIL </a></P>

</td>
<TD colspan="4" style="text-align: center;">Discription of the
Website</TD>
</tr>
</table>
</body>
</html>

CSS CODE
.logo{
height: 40px;
width:40px;
}
.table {
width: 100%;
height: 90px ;
border:2px solid black;
}
.row1 {
background-color: rgb(227, 143, 8);

}
.row2 {
background-color: rgb(249, 187, 99);
text-align: center;
}
td,tr,th {
border: 2px solid black;
/* border-collapse: collapse; */
margin: 0px;
}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

.Home {
padding: 5px;
}
a{
text-decoration: none;
color: black;
}

OUTPUT
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT :-2

AIM: - WAP to Create a “Login Page” using HTML


The Login page should contain the details of the following fields
1. Username (Text field)
2. Password (password field)
3. Submit Button
4. Reset Button
OBJECTIVE: -
1.Problem Statement: - To design a Login Page containing details about the Username and
Password.
2.Stepwise Solution: -
1 – Initiate the HTML Page with simple <html> tags
2 – Use the various HTML <form>, <input >,<label> to create a simple form containing the
record of Login page
3- Save the file using .html / .html 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> <style> table, th, td {
border: 1px solid black;
border-collapse:collapse;
}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href= "login.cs" >
</head>
<body>
<table class="table">

<tr class="row1">
<th><img src="kcc logo.png"
class="logo"></th>
<th colspan ="4">KCCITM OFFICIAL</th>
</tr>
<tr class="row2">
<td><a href= "https://www.kccitm.edu.in/">Home</a></td>
<td><a href= "https://admissions.kccitm.edu.in/">Login</a></td>
<td><a href= "https://admissions.kccitm.edu.in/">Registration</a></td>
<td><a
href="https://www.amazon.in/b/?ie=UTF8&node=976389031&ext_vrnc=hi&tag=googinhy
dr1-
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

21&ref=pd_sl_6kjp75wy9e_e&adgrpid=60623360604&hvpone=&hvptwo=&hvadid=597006866
786&hvpos=&hvnetw=g&hvrand=5901907534289687999&hvqmt=e&hvdev=c&hvdvcmdl=&hvloc
int=&hvlocphy=9184416&hvtargid=kwd-
301378608398&hydadcr=23640_2222251">Catalogue</a></td></td>
<td><a
href="https://www.amazon.in/gp/cart/view.html?ref_=nav_cart">Cart</a></td>
</tr>
<tr>
<td class="Home" ><a herf="https://www.kccitm.edu.in/academics/faculty">CSE</a>
<P><a
href="https://www.kccitm.edu.in/academics/faculty" > EEE </a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty" >ECE </a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty" > CIVIL</a></P>

</td>
<TD colspan="4" style="text-align: center;"><pre>Login Page </pre>

<P>
<label for="user"> User Name:</label>
<input type="text" name="" id="user"></P>
<P>
<label for="pass">Password:</label>
<input type="password" name="" id="pass" class="pass">
</P>
<P>
<button id="btn1">Submit</button>
<button id="btn2">Reset</button>
</P></TD>
</tr>
</table>
</body>
</html>

CSS CODE
.logo{
height: 40px;
width:40px;
}
.table {
width: 100%;
height: 90px ;
border:2px solid black;
}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

.row1 {
background-color: rgb(227, 143, 8);

}
.row2 {
background-color: rgb(249, 187, 99);
text-align: center;
}
td,tr,th {
border: 2px solid black;
/* border-collapse: collapse; */
margin: 0px;
}
.Home {
padding: 5px;
}
#pass{
border: 2px solid black;
}
#user{
border: 2px solid black;
}
#btn1 {
border: 2px solid black;
color: red;
}
#btn2 {
color:red ;
}
a{
text-decoration: none;
color: #000;
}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

OUTPUT
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT:-3
The catalogue page should contain the details of all the books available in the website in a
table. The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price
5. Add to cart button.
OBJECTIVE: -
1.Problem Statement: - To design a Catalogue Page containing details about the Book,
Price, Authors Name and Add to Cart Button.

2.Stepwise Solution: -
1 – Initiate the HTML Page with simple <html> tags
2 – Use the various <table>,<img>,<button> to create a simple table containing the record of
Book
3- Save the file using .html / .html 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> <style> table, th, td {
border: 1px solid black;
border-collapse:collapse;
}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href= "CATOLOGUE.css"
>
</head>
<body>
<table class="table">

<tr class="row1">
<th><img src="kcc logo.png"
class="logo"></th>
<th colspan ="4">KCCITM OFFICIAL</th>
</tr>
<tr class="row2">
<td id="link"><a
href="https://www.kccitm.edu.in/" > Home </a></td>
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

<td id=" link"><a


href= "https://admissions.kccitm.edu.in/" > Login </a></td>
<td id=" link"><a
href="https://admissions.kccitm.edu.in/"> Registration </a></td>
<td id=" link"><a
href="https://www.amazon.in/b/?ie=UTF8&node=976389031&ext_vrnc=hi&tag=googinhy
dr1-
21&ref=pd_sl_6kjp75wy9e_e&adgrpid=60623360604&hvpone=&hvptwo=&hvadid=597006866
786&hvpos=&hvnetw=g&hvrand=5901907534289687999&hvqmt=e&hvdev=c&hvdvcmdl=&hvloc
int=&hvlocphy=9184416&hvtargid=kwd-
301378608398&hydadcr=23640_2222251">Catalogue</a></td>
<td id=" link"><a
href="https://www.amazon.in/gp/cart/view.html?ref_=nav_cart">Cart</a></td>
</tr>
<tr>
<td class="Home">
<div class="branch"><P><a
href="https://www.kccitm.edu.in/academics/faculty" > EEE </a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty" > ECE </a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty" > CIVIL</a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty" > CSE </a></P>
</div>
</td>
<td style="width: 200px;">
<div class="bookimg"><p><img src="bible.avif"alt=""
id="biblebook"></p>
<p><img src= "ai.jpg"
id="aibook"></p>
<p><img src= "java.jpeg" alt="" id="javabook"></p>
<p><img src= "html.jpeg"alt=" " id="htmlbook"></p></div>

</td>
<td class="bookdetail"><div class="booktitle"><div class="bible">
<p><a id="link" href=
"https://www.amazon.in/s?k=bible&crid=IO789A54BS9P&sprefix
=bibl%2Caps%2C273&ref=nb_sb_noss_2">
Books: XMLBible</a></p>
<p>Author:Wiston</p>
<p>publication:Wiely</p></div>
<div class="ai" ><p><a href=
"https://amazon.in/s?k=AI+books&crid=6K9CVE2BLOV2&sprefix=ai+book%2Cap
s%2C298&ref=nb_sb_noss_2">
Books:AI</a></p>
<p>Author:S.Russel</p>
<p>publication:Princetonhall</p></div>
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

<div class="java"><p><a href=


"https://amazon.in/s?k=java+books&crid=2SBVJ2IDPJ9I2&sprefix=java+book
%2Caps%2C289&ref=nb_sb_noss_1"
>Books:Java 2</a></p>
<p>Author:Waston</p>
<p>publication:BPBpublications</p></div>
<div class="html"><p><a href=
"https://amazon.in/s?k=html+books&crid=3B82LCSA7PO13&sprefix=html+boo%
2Caps%2C336&ref=nb_sb_noss_2"
>Books:HTML is 24 hours</a></p>
<p>Author:Sem Peter</p>
<p>publication:Sampublication </p></div></div></td>

<td> <div class="para" style="width: 60px;"> <p id="p1">$40.5</p>


<p id="p2">$63</p>
<p id="p3">$35.5</p>
<p id="p4">$50</p></div>

</td>
<td>
<div class="cart"><div class="cart1"><img src="amazonelogo.png"
height="20px" width="20px" style="margin-top: 4px;" alt="">Add to
cart</div>
<div class="cart2"><img src="amazonelogo.png" height="20px"
width="20px" alt="" style="margin-top: 4px;"> Add to cart</div>
<div class="cart3"><img src="amazonelogo.png" height="20px"
width="20px" alt=""style="margin-top: 4px;" > Add to cart</div>
<div class="cart4"><img src="amazonelogo.png" height="20px"
width="20px" alt=""style="margin-top: 4px;" > Add to cart</div></div>

</td></tr>
</table>

</body>
</html>

CSS CODE

a{
text-decoration: none;
color: black;
}
.logo{
height: 40px;
width:40px;
}
.table {
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

width: 100%;
height: 200px ;
border:2px solid black;
}
.row1 {
background-color: rgb(227, 143, 8);

}
.row2 {
background-color: rgb(249, 187, 99);
text-align: center;
}
td,tr,th {
border: 2px solid black;
margin: 0px;
}
.Home {
padding: 5px;
}
#biblebook:hover{
height: 150px;
width: 150px;
box-shadow: 20px 20px 40px black;
}
#biblebook{
height: 80px;
width: 80px;
transition: .5s;
}
#aibook{
height: 80px;
width: 80px;
padding: 70px 30px 30px 0px;
transition: .5s;
}
#aibook:hover{
height: 150px;
width: 150px;
box-shadow: 20px 20px 40px black;
}
#htmlbook{
height: 80px;
width: 80px;
padding: 30px 30px 30px 0px;
transition: .5s;
}
#htmlbook:hover{
height: 150px;
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

width: 150px;
box-shadow: 20px 20px 40px black;
}
#javabook{
height: 80px;
width: 80px;
padding: 30px 30px 30px 0px;
transition:.5s;
}
#javabook:hover{
height: 150px;
width: 150px;
box-shadow: 20px 20px 40px black;
}
.bible{
padding: 20px;
}
.java{

height: 100px;
padding: 20px;
}
.ai{
height: 100px;
padding: 20px;
}.html{
height: 100px;
padding: 20px;
}
.branch{
height: 100%;
}
.cart{
width: 100%;
height: 100%;
border: 1px solid white;
}
.cart1{
width: 100px;
height: 30px;
border: 1px solid black;
border-radius: 20px;
color: blue;
background-color: rgb(241, 222, 5);
margin: 100px 0px 0px 10px;
text-align:center;
}
.cart2{
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

margin: 10px;
width: 100px;
height: 30px;
border: 1px solid black;
border-radius: 20px;
color: blue;
background-color: rgb(241, 222, 5);
margin: 140px 0px 0px 10px;
text-align:center;
}
.cart3{
margin: 10px;
width: 100px;
height: 30px;
border: 1px solid black;
border-radius: 20px;
color: blue;
background-color: rgb(241, 222, 5);
margin: 100px 0px 0px 10px;
text-align:center;
}
.cart4{
margin: 10px;
width: 100px;
height: 30px;
border: 1px solid black;
border-radius: 20px;
color: blue;
background-color:rgb(241, 222, 5);
margin: 120px 0px 0px 10px;
text-align:center;
}
.para{
height: 100%;
padding: 20px;
}
#p1{
margin-top: 88px;
}
#p2{
margin-top: 130px;
}
#p3{
margin-top: 130px;
}
#p4{
margin-top: 100px;
}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

.booktitle{
height: 100%;
}
.bookimg{
height: 100%;
padding: 10px;
margin-top: 0px;
}

OUTPUT
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT:- 4
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 AMOUNT
JAVA 2 $35.5 2 $70
XML BIBLE $40.5 1 $40.5
TOTAL AMOUNT -$130.5

OBJECTIVE:
1.Problem Statement: - To design a CART Page containing details about the Book,Price,Quantity and
Amount of Book.
2.Stepwise Solution: -
1 – Initiate the HTML Page with simple <html> tags
2 – Use the various <table>,<tr>,<td>to create a simple table containing the record of Book added to cart.
3- Save the file using .html / .html 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> <style> table, th, td {
border: 1px solid black;
border-collapse:collapse;
}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href= "cartpage.css" >
</head>
<body>
<table class="table">

<tr class="row1">
<th><img src= "kcc logo.png"
class="logo"></th>
<th colspan ="4">KCCITM OFFICIAL</th>
</tr>
<tr class="row2">
<td id="link"><a
href="https://www.kccitm.edu.in/" >Home </a></td>
<td id=" link"><a
href= "https://admissions.kccitm.edu.in/"> Login </a></td>
<td id=" link"><a
href= "https://admissions.kccitm.edu.in/" > Resigtration</a></td>
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

<td id=" link"><a


href="https://www.amazon.in/b/?ie=UTF8&node=976389031&ext_vrnc=hi&tag=googinhy
dr1-
21&ref=pd_sl_6kjp75wy9e_e&adgrpid=60623360604&hvpone=&hvptwo=&hvadid=597006866
786&hvpos=&hvnetw=g&hvrand=5901907534289687999&hvqmt=e&hvdev=c&hvdvcmdl=&hvloc
int=&hvlocphy=9184416&hvtargid=kwd-
301378608398&hydadcr=23640_2222251">Catalogue</a></td>
<td id=" link"><a
href="https://www.amazon.in/gp/cart/view.html?ref_=nav_cart">Cart</a></td>
</tr>
<tr>
<td class="Home">
<P><a
href="https://www.kccitm.edu.in/academics/faculty"> EEE </a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty">ECE</a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty" >CIVIL </a></P>
<P><a
href="https://www.kccitm.edu.in/academics/faculty"> CSE </a></P>
</td>
<TD colspan="4">
<div class="information">

<pre> Book name Price Quantity Amount </pre>


<pre> Java2 $35.5 2 $70 </pre>
<pre> XML bible $40.5 1 $40.5 </pre>

<pre> Total amount $1230.5 </pre>


</div>
</TD>
</tr>
</table>
</body>
</html>

CSS CODE
.logo{
height: 40px;
width:40px;
}
.table {
width: 100%;
height: 90px ;
border:2px solid black;
}
NAME:- PRANAY KUMAR ROLL NO:-2304921540118

.row1 {
background-color: rgb(227, 143, 8);

}
.row2 {
background-color: rgb(249, 187, 99);
text-align: center;
}
td,tr,th {
border: 2px solid black;
/* border-collapse: collapse; */
margin: 0px;
}
.Home {
padding: 5px;
}
#pass{
border: 2px solid black;
}
#user{
border: 2px solid black;
}
#btn1 {
border: 2px solid black;
color: red;
}
#btn2 {
color:red ;
}
.information{
margin: 30px;
}
a{
text-decoration: none;
color: #000;
}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

OUTPUT
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT:- 5
REGISTRATION PAGE: Create a “registration form ”with the following fields
1.Name (Text field )
2.Password (Password field)
3.Emailid(Text field)
4.Phone Number(Text field)
5.Sex(radio button)
6.Date of birth (3select boxes)
7.Language known(checkboxes-English,Telugu,Hindi,Tamil)
8.Address(text area)
OBJECTIVE:
1.Problem Statement: : Create a “registration form ”with the following fields Amount of Book.
2.Stepwise Solution: -
1 – Initiate the HTML Page with simple <html> tags
2 – Use the various tag like label ,placeholder and their type.
3- Save the file using .html / .html extension
4- Run the file on browser (IE / google-chrome / Mozilla-firefox)
5.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>Document</title>
<link rel="stylesheet" href="REGISTRATION.css" >
</head>
<body>
<div class="fullPage"><form action=""> <div class="name"><label
for="name">
Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="text" name="" id="name" placeholder="Enter your
name:"></div>
<div class="pass"><label for="pass">Password:&nbsp;</label>
<input type="password" name="" id="pass" placeholder="password"></div>
<div class="mail"><label
for="mail">mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="email" name="" id="mail" placeholder="Enter your email:"></div>
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

<div class="contact"><label
for="contact">contact:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="number" name="" id="contact" placeholder="Enter your contact
number:"></div>
<div class="sex"><label for="sex">Sex:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<label for="male">male</label>
<input type="radio" id="male">
<label for="female">female</label>
<input type="radio" name="" id="female"></div>
<div class="birth"><label
for="birth">D.O.B:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="date" name="" id="birth"></div>
<div class="lang">
<div class="lanHead"><p>Select your language:</p></div>
<label for="hindi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;Hindi</label>
<input type="checkbox" id="hindi">
<label for="eng">English</label>
<input type="checkbox" id="eng">
<label for="tamil">Tamil</label>
<input type="checkbox" id="tamil">
<label for="urdu">Urdu</label>
<input type="checkbox" id="urdu">
</div>
<div class="address"><label for="add">Address:&nbsp;&nbsp;&nbsp;</label>
<input type="'text'" name="" id="add" placeholder="Enter your
address:"></div>
</form>
</div>
</body>
</html>

CSS CODE
.fullPage{

padding: 40px;
margin: 50px;
text-align:left;
height: 700px;
width: 500px;
background-color: pink;
}
.name{
margin: 10px ;
}
.pass{
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

margin: 10px;
}
.mail{
margin: 10px;
}
.contact{
margin: 10px;
}
.sex{
margin: 10px;
}
.birth{
margin: 10px;
}
.lang{
margin: 10px;
}
.address{
margin: 10px;}

OUTPUT
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT:-6
Js VALIDATION: Write JavaScript to validate the following fields of the above
registration page
1. Name (Name should not contains alphabets and the length should not be less than 6
character).
2. Password (Password should not be less than 6 characters length).
OBJECTIVE: -
1.Problem Statement: - To validate the Registration Page using JavaScript.

2.Stepwise Solution: -
1 – Initiate the HTML Page with simple <html> tags
2 –Use the various JavaScript functions to validate the name and Password Field of the Form.
3- Save the file using .html / .html extension
4- Run the file on browser (IE / google-chrome / Mozilla-Firefox)
5-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>using javascript
</title>
<link rel="stylesheet" href= "JsVALIDATION.css" >
</head>
<body> <div class="page">
<h1>Registration Form </h1>
<div class="name">
<p id="nameLable"><label for="name">Name</label></p>
<p id="name"><input type="text" name="name" placeholder="Enter your
name" id="named"></p>
</div>
<div class ="password">
<p id="passwordLable"><label for="password">Password</label></p>
<p id="password"><input type="password" placeholder="Enter your
password" name="password" id="passwordd"></p>
</div>
<div class ="password">
<p id="passwordLable"><label for="confirm">Confirm
Password</label></p>
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

<p id="password"><input type="password" placeholder="Enter your


password" name="confirm" id="confirmPass"></p>
</div>
<div id="submit"><button type="submit"
class="button">Submit</button></div>
</div>
<script src= "JsVALIDATION.js" ></script>
</body>
</html>

RESULT PAGE HTML CODE


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Form successfully submitted</h2>
</body>
</html>

CSS CODE
body{
/* background-color: rgb(166, 225, 163); */
background:linear-gradient(170deg,rgb(251, 6, 47),rgb(242, 229, 214),
rgb(252, 116, 116),rgb(16, 48, 233)
);
}
h1{
font-size: 70px;
margin: 10px;
}
.name , .password{
/* display: inline-block; */
margin-left: 60px;
}
.page{
margin: 300px 0 0 700px;
width: 50%;
box-shadow: 10px 10px 10px black;
height: 800px;
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

background-color: white;
border-radius: 10px;
}
#nameLable{
margin-left: 20px;
line-height: 60px;
font-size: xx-large;
font-weight: bolder;
}
#passwordLable{
margin-left: 45px;
line-height: 60px;
font-size: xx-large;
font-weight: bolder;
}
#named{
margin-left: 10px;
line-height: 40px;
width: 400px;
border-radius: 6px;

}
#passwordd{
margin-left: 20px;
line-height: 40px;
width: 400px;
border-radius: 6px;
}
#confirmPass{
margin-left: 20px;
line-height: 40px;
width: 400px;
border-radius: 6px;
}
.button{
width: 500px;
height:50px;
border-radius: 8px;
background:linear-gradient(135deg , rgb(250, 191, 201) , rgb(246, 196,
101));
}
#submit{
margin: 40px 0 10px 150px;

}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

JAVASCRIPT CODE
let button = document.querySelector("button");
let name = document.getElementById("named");
let pass= document.getElementById("passwordd");
let confirm=document.getElementById("confirmPass");
let body
button.addEventListener("click",function(){
if(name.value==""){
alert("Enter your name ");
return false;
}
if(name.value.length<6){
alert("Enter valid name please");
return false;
}
if(pass.value==""){
alert("Enter password");
return false;
}
if(pass.value.length<6){
alert("Password is to short");
return false;
}
if(confirm.value==""){
alert("Please confirm pass")
return false;
}
if(pass.value!=confirm.value){
alert("Pass not match")
return false;
}
button.innerText="Submitted";
window.location.replace(href="result.html");
});
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

OUTPUT

Name and password


is empty can’t submit

Name can’t less


than 6 letter
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

Password is too short

Can’t submit

Password is not match

All details valid and form

has been submitted successfully


NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT:- 7
Js VALIDATION: Write JavaScript to validate the following fields of the above registration
page.
1) E-mail(should not contain any invalid and must follow the standard pattern([email protected]))
2) Phone Number(Phone Number should contain 10 digits only).

OBJECTIVE:-
1.Problem Statement :- Write JavaScript to validate the following fields of the above registration
page.
2. Stepwise Solution :-
1. Initiate the HTML page with simple <html>tags.
2. Use various HTML Element div and the various JavaScript function to validate E-mail and Phone
Number field of the form.
3.Link the HTML file with CSS using <link> tags and JAVASCRIPT.
4. Save the HTML file using .html extension..
6- Run the file on browser (IE / google-chrome / Mozilla-firefox)
7.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>Form</title>
<link rel="stylesheet" href= "js.css" >
</head>
<body>
<div class="page">
<h1>Registration Form </h1>
<div class="email">
<p id="emailLable"><label for="mail">Email Address</label></p>
<p id="mail"><input type="email" name="mail" placeholder="Enter
your email address" id="email"></p>
</div>
<div class ="phone">
<p id="phoneLable"><label for="phone">Phone Number</label></p>
<p id="phone"><input type="number" placeholder="Enter your phone
number" name="number" id="phoneNumber"></p>
</div>
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

<div id="submit"><button type="submit"


class="button">Submit</button></div>
</div>
<script src="js.js" ></script>
</body>
</html>

RESULT PAGE HTML CODE


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Form successfully submitted</h2>
</body>
</html>

CSS CODE
body{
/* background-color: rgb(166, 225, 163); */
background:linear-gradient(170deg,rgb(251, 6, 47),rgb(242, 229, 214),
rgb(252, 116, 116),rgb(16, 48, 233)
);
}
h1{
font-size: 70px;
margin: 10px;
}
.email , .phone{
/* display: inline-block; */
margin-left: 60px;
}
.page{
margin: 300px 0 0 700px;
width: 50%;
box-shadow: 10px 10px 10px black;
height: 600px;
background-color: white;
border-radius: 10px;
}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

#emailLable{
margin-left: 20px;
line-height: 60px;
font-size: xx-large;
font-weight: bolder;
}
#phoneLable{
margin-left: 45px;
line-height: 60px;
font-size: xx-large;
font-weight: bolder;
}
#email{
margin-left: 10px;
line-height: 40px;
width: 400px;
border-radius: 6px;

}
#phoneNumber{
margin-left: 20px;
line-height: 40px;
width: 400px;
border-radius: 6px;
}
.button{
width: 400px;
height:50px;
border-radius: 8px;
background:linear-gradient(135deg , rgb(250, 191, 201) , rgb(246, 196,
101));
}
#submit{
margin: 40px 0 10px 150px;
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

JAVASCRIPT CODE
let button = document.querySelector("button");
let email = document.getElementById("email");
let phone = document.getElementById("phoneNumber");
button.addEventListener("click",function(){
if(email.value.length<11){
alert("Please Enter email address");
return false;
}
if(email.value.slice(email.value.length-10)!="@gmail.com"){
alert("Enter valid email");
return false;
}
if(phone.value==""){
alert("Enter Mobile number please");
return false;
}
if(phone.value.length!=10){
alert("Enter valid phone number")
return false;
}
button.innerText="Submitted"
window.location.replace(href="result.html");
});
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

OUTPUT

Email and Phone


can’t empty

Enter valid email

address
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

Enter valid Phone Number

Email and phone number both are

correct hence form successfully


submitted
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT:- 8
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.

OBJECTIVE:-
1.Problem Statement :- To design a web page which contain background image, different font ,styles :
2. Stepwise Solution :-
1. Initiate the HTML page with simple <html>tags.

2. Use various HTML Element div , paragraph etc.

3.Link the HTML file with CSS using <link> tags.

4. Save the HTML file using .html extension.

5. In CSS file add background image using background-image property and add font using font family .

6- Run the file on browser (IE / google-chrome / Mozilla-firefox)


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

HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href= "style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>resposive</title>
</head>
<body>
<h3>@tom and jerry</h3>
<h1 >Card devided into two part</h1>
<div class="main">

<div class="tom">
<img id="t" src= "tom.jpeg" alt ="tom" >
<div class="tomtext">
<h4 id="tomname">TOM</h4>
<p>Thomas Jasper "Tom" Cat Sr. is a fictional character and one of
the two titular main protagonists (the other being Jerry Mouse) in Metro-
Goldwyn-Mayer's series of Tom and Jerry theatrical animated short films.
NAME:- PRANAY KUMAR ROLL NO:- 2305921540118

Created by William Hanna and Joseph Barbera, he is a grey and white


anthropomorphic domestic short haired mute tuxedo British.</p>
</div></div>
<div class="jerry">
<img id="j" src="jerry.jpeg" alt ="jerry" >
<div class="jerrytext">
<h4 id="jerryname">JERRY</h4>
<P>Gerald Jinx "Jerry" Mouse is a fictional character and one of the two
titular characters in Metro-Goldwyn-Mayer's series of Tom and Jerry theatrical
animated short films and other animated media, usually acting as the
protagonist opposite his rival Tom Cat. Created by William Hanna and Joseph
Barbera, Jerry is a cute</P></div>
</div></div> </body>
</html>

CSS CODE
body{
background-image: url("nItQK.png");
}
h1 {
text-align: center;
color: red;
}
.main{
display: flex;
justify-content: space-evenly;

}
.tom {
width: 350px;
height: 500px;
background-color: aquamarine;
border: 2px black solid;
text-align: center;
border-radius: 4%;
background-image: url(download.jpeg);

}
.jerry {
width: 350px;
height: 500px;
background-color: aquamarine;
border: 2px black solid;
text-align: center;
border-radius: 4%;
background-image: url(download.jpeg);
}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

#t {
width: 90%;
height: 50%;
padding:10px ;
border-radius: 10%;

}
#j {
width: 90%;
height: 50%;
padding: 10px;
border-radius: 10%;
}
.jerrytext{

text-align: left;
padding: 4px;
}
.tomtext{
text-align: left;
padding: 4px;
}
@media(max-width:450px){
.main{
display: block;
}
}

@media(max-width:450px){
.tom{
margin-bottom: 10px;
}
}
#tomname{
font-family: 'Courier New', Courier, monospace;
font-size: x-large;
color:blue;
}
#jerryname{
font-family: 'Courier New', Courier, monospace;
color: blue;
font-size: x-large;
}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

OUTPUT
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT:- 9
Design a web page using CSS(Cascading Style Sheets) which includes the following:

1) Control the repetition of the image with the background repeat property.

2) Define style for links as:

A:link

A:visited

A:active

A:hover

OBJECTIVE:-
1.Problem Statement :- To design a web page which contain background image, different style for links
mentioned above:

2. Stepwise Solution :-
1. Initiate the HTML page with simple <html>tags.

2. Use various HTML Element div , paragraph etc.

3.Link the HTML file with CSS using <link> tags.

4. Save the HTML file using .html extension.

5. In CSS file add background image using background-image property and add different link style like visisted

hover , link, active .

6- Run the file on browser (IE / google-chrome / Mozilla-firefox)


7.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>All year notes and PYQs nadeem </title>
<link rel="stylesheet" href= "index1.css" >
</head>
<body>
<div class="fullPage">
<h2>All Year Notes</h2>
<div class="notes">
<div class="firstYear">
<div class="img"><img src="first.jpeg" ></div>
<h3><a href="#">CSE</a></h3>
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

<h3><a href="#">DS</a></h3>
<h3><a href="#">IOT</a></h3>
<h3><a href="#">IT</a></h3>
<h3><a href="#">ECE</a></h3>
<h3><a href="#">AIML</a></h3>
</div>
<div class="secondYear">
<div class="img"><img src="second.jpeg" ></div>
<h3><a href="#">CSE</a></h3>
<h3><a href="#">DS</a></h3>
<h3><a href="#">IOT</a></h3>
<h3><a href="#">IT</a></h3>
<h3><a href="#">ECE</a></h3>
<h3><a href="#">AIML</a></h3>
</div>
<div class="thirdYear">
<div class="img"><img src="third.jpeg" alt= " ></div> "
<h3><a href="#">CSE</a></h3>
<h3><a href="#">DS</a></h3>
<h3><a href="#">IOT</a></h3>
<h3><a href="#">IT</a></h3>
<h3><a href="#">ECE</a></h3>
<h3><a href="#">AIML</a></h3>
</div>
<div class="fourthYear"><div class="img"><img src="fourth.png"
alt=" ></div>"
<h3><a href="#">CSE</a></h3>
<h3><a href="#">DS</a></h3>
<h3><a href="#">IOT</a></h3>
<h3><a href="#">IT</a></h3>
<h3><a href="#">ECE</a></h3>
<h3><a href="#">AIML</a></h3>
</div>
</div>
<h2>All Year PYQs</h2>
<div class="pyq">
<div class="firstYear">
<div class="img"><img src="first.jpeg" alt= " ></div> "
<h3><a href="#">CSE</a></h3>
<h3><a href="#">DS</a></h3>
<h3><a href="#">IOT</a></h3>
<h3><a href="#">IT</a></h3>
<h3><a href="#">ECE</a></h3>
<h3><a href="#">AIML</a></h3>
</div>
<div class="secondYear">
<div class="img"><img src="second.jpeg"alt= " ></div> "
<h3><a href="#">CSE</a></h3>
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

<h3><a href="#">DS</a></h3>
<h3><a href="#">IOT</a></h3>
<h3><a href="#">IT</a></h3>
<h3><a href="#">ECE</a></h3>
<h3><a href="#">AIML</a></h3>
</div>
<div class="thirdYear">
<div class="img"><img src="third.jpeg" alt= " ></div> "
<h3><a href="#">CSE</a></h3>
<h3><a href="#">DS</a></h3>
<h3><a href="#">IOT</a></h3>
<h3><a href="#">IT</a></h3>
<h3><a href="#">ECE</a></h3>
<h3><a href="#">AIML</a></h3>
</div>
<div class="fourthYear"><div class="img"><img src="fourth.png"
alt=" ></div> "
<h3><a href="#">CSE</a></h3>
<h3><a href="#">DS</a></h3>
<h3><a href="#">IOT</a></h3>
<h3><a href="#">IT</a></h3>
<h3><a href="#">ECE</a></h3>
<h3><a href="#">AIML</a></h3>
</div>
</div>
</div>
</body>
</html>

CSS CODE
*{
margin: 0;
padding:0 ;
box-sizing: border-box;
font-family: 'Poppins,sans-serif';
}

body{
/* background:linear-gradient(45deg,#80f0f1,#f6e1f6); */
background-image: url(empty-showcase-abstract-pastel-color-background-3d-
illustration-free-vector.jpg);
height: 100vh;
width: 100wh;
display: flex;
justify-content: center;
padding: 10px;
background-size: cover;
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

}
.notes,.pyq {
display: flex;
}
.firstYear,.secondYear ,.thirdYear ,.fourthYear {
height: 300px;
width:200px;
background-color: white;
text-align: center;
border-radius: 0px 40px 0px 40px;
margin: 10px;
}
.img img{
margin-top: 10px;
height: 150px;
width: 150px;
border-radius: 0px 30px 0px 0px;
}
h3 a {
color: black;
width: 60px;
border: 2px black;
}
h2{
margin-left: 350px;
margin-top: 20px;
}
h3 a:visited {
color: blue;
}
h3 a:active {
background-color: pink;
}
h3 a:hover {
text-decoration: none;
}
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

OUTPUT
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

EXPERIMENT:- 10
Consider a small topic of your choice on which you can develop static Webpages and try to implement all topics of html,
CSS and JS within the topic.
To-Do List

OBJECTIVE:
1.Problem Statement: - To design a static web page which can take input from client side and working on it
like print , delete;.
2.Stepwise Solution: -
1 - Create a HTML file and link with CSS and JavaScript
2 -Make a design using CSS for Todo App.
3- Save the file using .html / .html extension , .css,.js.
4-Select the element of HTML using document.qureySelectorAll(“”).
5- Run the file on browser (IE / google-chrome / Mozilla-firefox).
6-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>Document</title>
<link rel="stylesheet" href= "index2.css" >
</head>
<body>
<div class="fullContent">
<div class="initialDiv">
<h1>TODO APP</h1>
<input placeholder="Enter your task"">
<button class="addTask">Add Task</button>
<ul>
<li>Eat<button class="delete">Delete</button></li>
<li>Sleep<button class="delete">Delete</button></li>
</ul></div>
<div>
<script src="index2.js"></script>
</body>
</html>

CSS CODE

.fullContent{
background-color: pink;
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

height: 100%;
width: 100%;

}
.initialDiv{
margin-left: 500px;
}
li{
font-weight: bold;
font-size: x-large;
}
.addTask{
background-color: rgb(248, 248, 212);
border: 0.1rem solid rgb(0,0,0);
}

JAVA-SCRIPT CODE
let button = document.querySelector("button");
let ul = document.querySelector("ul");
let inp = document.querySelector("input");
button.addEventListener("click",function(){
let item = document.createElement("li");
item.innerText = inp.value;
let delBtn = document.createElement("button");
delBtn.innerText = "Delete";
delBtn.classList.add("del");
item.appendChild(delBtn);
ul.appendChild(item);

console.log(inp.value );
inp.value = "";
});
ul.addEventListener("click",function(event){

if(event.target.nodeName=="BUTTON"){
let listItem = event.target.parentElement;
listItem.remove();
console.log("listItem");
};
});
NAME:- PRANAY KUMAR ROLL NO:- 2304921540118

OUTPUT

You might also like