[go: up one dir, main page]
Scribd
Upload
17 views42 pages

WD Practical Record (2) BCS353

The document contains a series of HTML experiments showcasing various web pages including a bookstore homepage, login page, catalogue page, cart page, registration page, password validation, phone number validation, and a CSS styled web page. Each experiment includes HTML code demonstrating different functionalities and layouts. The overall focus is on creating user interfaces for a bookstore application.

Uploaded by

harendra tomar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
17 views42 pages

WD Practical Record (2) BCS353

The document contains a series of HTML experiments showcasing various web pages including a bookstore homepage, login page, catalogue page, cart page, registration page, password validation, phone number validation, and a CSS styled web page. Each experiment includes HTML code demonstrating different functionalities and layouts. The overall focus is on creating user interfaces for a bookstore application.

Uploaded by

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

Experiment 1

Homepage (For book store)


HTML CODE:
<html lang="en">

<head>

<title>Book store</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*{

box-sizing: border-box;

/* Style the body */

body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

.header {

padding: 0px;

text-align: center;

background: #1abc9c;

color: white;

.header h1 {

font-size: 30px;

.navbar {

overflow: hidden;

background-color: #333;

position: sticky;

position: -webkit-sticky;

top: 0;

.navbar a {
float: left;

display: block;

color: white;

text-align: center;

padding: 10px 15px;

text-decoration: none;

.navbara.right {

float: right;

.navbar a:hover {

background-color: #ddd;

color: black;

.navbara.active {

background-color: #666;

color: white;

.row {

display: -ms-flexbox; /* IE10 */

display: flex;

-ms-flex-wrap: wrap; /* IE10 */

flex-wrap: wrap;

.side {

-ms-flex: 30%; /* IE10 */

flex: 30%;

background-color: #f1f1f1;

padding: 20px;

.main {

-ms-flex: 70%; /* IE10 */

flex: 70%;

background-color: white;

padding: 20px;
}

.fakeimg {

background-color: #aaa;

width: 100%;

padding: 10px;

@media screen and (max-width: 500px) {

.row {

flex-direction: column;

}}

@media screen and (max-width: 200px) {

.navbar a {

float: none;

width: 100%;

}}

</style>

</head>

<body>

<div class="header">

<h1>Book Store</h1>

</div>

<div class="navbar">

<a href="#" class="active">Home</a>

<a href="#">Link</a>

</div>

<div class="main">

<h2>C Book</h2>

<imgsrc="C:\Users\harsh\Downloads\C.jpeg" height="150" width="150">

<p>C Programming Course From Basic To Advance Level Please Download a Pdf File and Make You To A Professional Developer
Or Freelancer.</p>

<a href="https://drive.google.com/file/d/1BQsKJ7yCo93vCW9SoJibFOUGPYivdgQ_/view?usp=sharing" download

target="_blank" class="btnbtn-info" data-toggle="tooltip" data-bs-placement="right"

title="Download Book">Download Book</a>

<br>

<h2>Java Programming</h2>

<imgsrc="C:\Users\harsh\Downloads\Java.jpeg" height="150" width="150">


<p>Advance Java Programming Course From Pdf File Please Download This File From Here and You Have From Zero To Hero In
Java Programming.</p>

<a href="https://drive.google.com/file/d/1_NA-zRm6BXcI8Q45UJmQ0o1NGBQkFQF8/view?usp=sharing" download

target="_blank" class="btnbtn-info" data-toggle="tooltip" data-bs-placement="right"

title="Download Book">Download Book</a>

</div>

</div>

</body>

</html>
OUTPUT:
EXPERIMENT 2
Login Page

HTML CODE:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login Page </title>
<style>
Body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
button {
background-color: #4CAF50;
width: 100%;
color: orange;
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
display: inline-block;
border: 2px solid green;
box-sizing: border-box;
}
button:hover {
opacity: 0.7;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
margin: 10px 5px;
}
.container {
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<center><h1> Student Login Form </h1></center>
<form>
<div class="container">
<label>Username :</label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password :</label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
<button type="button" class="cancelbtn"> Cancel</button>
Forgot <a href="#"> password? </a>
</div>
</form>
</body>
</html>
OUTPUT:
EXPERIMENT 3
CATOLOGUE PAGE
HTML CODE:
<html>
<head>
<title>catalouge</title>
</head>
<body>
<center>
<table border=4 cellpadding=10 cellspacing=10>
<tr>
<td bgcolor="lightgray"><imgsrc="C:\Users\harsh\Downloads\xml.jpeg" height=100 width=100></td>
<td bgcolor="lightblue">Book:XML Bible<br>Author:Wingston<br>Publication:wiely</td>
<td bgcolor="powderblue">$40.5</td>
<td bgcolor="orange"><input type="button"value="add to cart"></td>
</tr>
<tr>
<td bgcolor="lightgray"><imgsrc ="C:\Users\harsh\Downloads\A1.jpg" height=100 width=100></td>
<td bgcolor="lightblue">Book:A1<br>Author:S.Rusell<br>Publication:Princeton hall</td>
<td bgcolor="powderblue">$63</td>
<td bgcolor="orange"><input type="button"value="add to cart"></td>
</tr>
<tr>
<td bgcolor="lightgray"><imgsrc="C:\Users\harsh\Downloads\Java.jpeg" height=100 width=100></td>
<td bgcolor="lightblue">Book:JAVA 2<br>Author:Joseph L. Weber<br>Publication:QUE</td>
<td bgcolor="powderblue">$35.5</td>
<td bgcolor="orange"><input type="button"value="add to cart"></td>
</tr>
<tr>
<td bgcolor="lightgray"><imgsrc="C:\Users\harsh\Downloads\html.jpeg" height=100 width=100></td>
<td bgcolor="lightblue">Book:Html in 24 hrs<br>Author:Sam Peter<br>Publication:SAM</td>
<td bgcolor="powderblue">$50</td>
<td bgcolor="orange"><input type="button"value="add to cart"></td>
</tr>
</table>
</center>
</body>
</html>
OUTPUT:
EXPERIMENT 4
CART PAGE

HTML CODE:
<html>
<body bgcolor="yellow">
<table border=4 align="center" bgcolor="white" cellspacing="25" cellpadding="20">
<tr bgcolor="lightgray">
<td><b>Book Name</b></td>
<td><b>Price</></td>
<td><b>Quantity</b></td>
<td><b>Amount</b></td>
</tr>
<tr>
<td bgcolor="lightgray"><b>Java2</b></td>
<td bgcolor="orange">$35.5</td>
<td bgcolor="skyblue">2</td>
<td bgcolor="red">$70</td>
</tr>
<tr>
<td bgcolor="lightgray"><b>XML bible</b></td>
<td bgcolor="orange">$40.5</td>
<td bgcolor="skyblue">1</td>
<td bgcolor="red">$40.5</td>
</tr>
<tr>
<td bgcolor="lightgray"><b>Total Amount</b></td>
<td bgcolor="orange">$130.5</td>
</tr>
</body>
</html>
OUTPUT:
EXPERIMENT 5
REGISTRATION PAGE
HTML CODE:
<html>
<head>
<title>Registration Page</title>
</head>
<body bgcolor="lightgray">
<center>
<h3 align="center"><u>REGISTRATION PAGE</u></h3>
<table border="3">
<tr><td>
<form name="f1" action="" method="post" onsubmit="">
<table bgcolor="white" cellspacing="10" cellpadding="5">
<tr><td>NAME:</td><td><input type="text" size="30" name="uname"/></td></tr>
<tr><td>PASSWORD:</td><td><input type="password" size="30" name="pass"/></td></tr>
<tr><td>E-MAIL ID:</td><td><input type="text" size="30" name="email"/></td></tr>
<tr><td> PHONE NUMBER:</td><td><input type="text" size="15" name="phone"/></td></tr>
<tr><td>GENDER:</td><td><input type="radio" name="gen" value="m" />MALE
<input type="radio" name="gen" value="f" />FEMALE </td></tr>
<tr><td>DATE OF BIRTH:</td>
<td><select name="day">
<option value="day">DAY</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="month">
<option value="month">MONTH</option>
<option value="jan">JANUARY</option>
<option value="feb">FEBRUARY</option>
<option value="mar">MARCH</option>
<option value="apr">APRIL</option>
<option value="may">MAY</option>
<option value="jun">JUNE</option>
<option value="jul">JULY</option>
<option value="aug">AUGUST</option>
<option value="sep">SEPTEMBER</option>
<option value="oct">OCTOBER</option>
<option value="nov">NOVEMBER</option>
<option value="dec">DECEMBER</option>
</select>
<select name="year">
<option value="year">YEAR</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">1980</option>
<option value="2012">1981</option>
<option value="2013">1982</option>
<option value="2014">1983</option>
</select></td></tr>
<tr><td>LANGUAGES KNOWN:</td>
<td>
<input type="checkbox" value="eng" name="lang" />ENGLISH
<input type="checkbox" value="tel" name="lang" />TELUGU
<input type="checkbox" value="hin" name="lang" />HINDI
<input type="checkbox" value="tam" name="lang" />TAMIL
</td></tr>
<tr>
<td>ADDRESS:</td>
<td><textarea name="addr" cols="25" rows="5"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="SUBMIT"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="RESET" /></td></tr>
</table>
</form>
</td></tr></table>
</center>
</body>
</html>
OUTPUT:

EXPERIMENT 6
PASSWORD VALIDATION
HTML CODE:
<html>
<head>
<title>PASSWORD VALIDATION</title>
<script language="javascript"> function pass()
{
var pw=f.pw.value; varcpw=f.cpw.value; if(pw.length<6)
{
alert("PASSWORD MUST BE 6 CHARACTERS"); } if(pw!=cpw
)
{
alert("PASSWORD DON'T MATCH");
}
else if(pw.length>=6)
alert("PASSWORD VALIDATION SUCCESS");
}
</script>
</head>
<body>
<form name="f">
<table align="center">
<h2 align="center"><u>PASSWORD VALIDATION</u></h2>
<br>
<tr>
<tdalign="right"><b>Password:</b></td>
<tdalign="left"><input type="Password" maxlength="10" size="30"name="pw"></td>
</tr>
<tr>
<tdalign="right"><b>Confirm Password:</b></td>
<td align="left"><input type="PassWord" maxlength="10" size="30"name="cpw"></td></tr>
<tr><td></td>
<td><input type="button" value="SUBMIT" onClick="pass()"/></td>
</tr>
</table>
</form>
</body>
</html>

OUTPUT:
EXPERIMENT 7
PHONE NUMBER VALIDATION

HTML CODE:
<html>
<head>
<title>PHONE NUMBER VALIDATION</title>
<script language="javascript"> functionphno()
{ varph=f.ph.value; if(ph.length==10)
{ if(isNaN(ph)) alert("It is not a valid Phone number"); else alert("It is a valid Phone number");
} else alert("Please enter a valid phone number");
}
</script>
</head>
<body bgcolor="lightgray">
<form name="f">
<table align="center"><br><br><br><br>
<h2 align="center"><u>PHONE NUMBER VALIDATION</u></h2> 3
<br>
<tr><tdalign="right">PHONE NO:</td>
<tdalign="left"><input type="text" maxlength="15" size="30"name="ph"></td>
</tr>
<tr><td></td>
<td><input type="button" value="SUBMIT" onClick="phno()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
EXPERIMENT 8
DESGIN A WEB PAGE USING CSS(CASCADING STYLE SHEET)

HTML CODE:
<html>
<head>
<style>
h1
{
color:red;
font-family:caStellar;
font-size:22pt;
text-decoration:underline;
}
h2
{
color:pink;
font-family:Chiller;
font-size:18pt;
text-decoration:overline;
}
p
{ color:purple;
font-family:Trebuchet MS;
font-size:14pt;
font-style:italic;
}
</style>
<title>Usage of different font,styles and colors </title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body background="C:\Users\harsh\Downloads\camel.jpeg">
<h1>This header is in red</h1>
<h2>This header is in pink</h2>
<p>This is normal text</p>
</body>
</html>
OUTPUT:

EXPERIMENT 9
DESIGN STYLES OF LINK

HTML CODE:
<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 bgcolor="lightgray">
<i><center><U><h1>RAJ KUMAR GOEL INSTITUTE OF TECHNOLOGY & MANAGEMENT </h1></U></center>
</i>
<a href="pr(9a).html">
<h2>Click Here !!!</h2>
</a>
</body>
</html>

OUTPUT:
EXPERIMENT 10
MY OWN PORTFOLIO

HTML CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Project</title>
<style>
*{
background-color: ;
}
</style>
</head>
<body>
<!--Header(start)-->
<table id="header" border="0"
width="100%" cellpadding="0"
cellspacing="0" bgcolor="#4CAF50">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="90%"
align="center">
<tr>
<td>
</td>

<td>
<font face="Comic sans MS" size="6">
<b>Portfolio</b>
</font>
</td>
<td width="15%">
</td>
<td>
<a href="#home"
style="text-decoration:none">
<font face="Verdana"
size="5" color=black>
Home
</font>
</a>
</td>
<td>
|
</td>
<td>
<a href="#about"
style="text-decoration:none">
<font face="Verdana"
size="5" color=black>
About
</font>
</a>
</td>
<td>
|
</td>
<td>
<a href="#projects"
style="text-decoration:none">
<font face="Verdana"
size="5" color=black>
Projects
</font>
</a>
</td>
<td>
|
</td>

<td>
<a href="#contact"
style="text-decoration:none">
<font face="Verdana"
size="5" color=black>
Contact
</font>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Header(end)-->
<!--Home(start)-->
<table id="home" border="1" width="100%"
cellpadding="20" cellspacing="0" bgcolor="red">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="90%" align="center">
<tr>
<tdalign="center" valign="middle">
<h3>
<font face="Times New Roman"
size="6" color="#ffffff">
Hi Viewers!
</font>
</h3>

<h2>
<font face="Verdana" size="6"
color="#4CAF50">
<!-- Freelance Programmer -->
</font>
</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Home(end)-->

<!--About(start)-->
<table id="about" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="black">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center"
valign="middle" colspan="2">
<font face="Verdana" size="7"
color="#4CAF50">
About Me
</font>
<hr color="#4CAF50" width="90">
</td>
</tr>

<tr>

<td width="60%">
<font face="Verdana" size="4"
color="white">
<hr color="black">
Harsh Tyagi second year student of RKGITM ,Ghaziabad. I
love to solve programming problems.
<hr color="black">

I do my work mainly in C-Language and


C++. C++ and Data Structure.
Besides these I know Web Development.

<hr color="black">

This website is basically one of my


Web Development project which is
built using HTML only.
Here one can also find ideas for
projects in different languages.

<hr color="black">
Thank you,
<br>
</font>
</td>
</tr>
</table>
<hr color="black">
<hr color="black">
<hr color="black">
</td>
</tr>
</table>
<!--About(end)-->
<!--Projects(start)-->
<table id="projects" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="#c2c0c3">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center"
valign="middle" colspan="2">
<font face="Verdana" size="7"
color="black">
Projects
</font>
<hr color="black" width="90">
</td>
</tr>
<tr>
<td height="10">
<font face="Times New Roman"
size="5" color="black">
<ul>
<li>
BMI Calculator
<a href="#"
style="text-decoration:none">
➲
</a>
</li>
<li>
<hr color="#c2c0c3">
Calculator
<a href="#"
style="text-decoration:none"
color="#c2c0c3">
➲
</a>
</li>
<li>
<hr color="#c2c0c3">
Calendar
<a href="#"
style="text-decoration:none">
➲
</a>
</li>
<li>
<hr color="#c2c0c3">
ChatBot
<a href="#"
style="text-decoration:none">
➲
</a>
</li>
</ul>
<hr color="#c2c0c3">
<hr color="#c2c0c3">
<hr color="#c2c0c3">
<hr color="#c2c0c3">
</font>
</td>
<td width="45%">
<imgsrc="C:\Users\harsh\Downloads\bmi.png"
alt="Project" width="75%">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Projects(end)-->
<!--Contact(start)-->
<table id="contact" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="#c2c0c3">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center"
valign="middle" colspan="2">
<font face="Verdana" size="7"
color="black">
Contact
</font>
<hr color="black" width="90">
</td>
</tr>
<tr>
<tdalign="center" valign="top">
<table border="0" width="50%" cellpadding="15"
cellspacing="0" align="center" bgcolor="black">
<tr>
<td width="30%">
<hr color="black">
<font face="Verdana" size="4"
color="#ffffff">
Name
</font>
</td>
<td width="70%">
<font face="Verdana" size="4"
color="#ffffff">
<input type="text" size="40">
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="Verdana" size="4"
color="#ffffff">
Email
</font>
</td>
<td width="70%">
<font face="Verdana" size="4"
color="#ffffff">
<input type="email" size="40">
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="Verdana" size="4"
color="#ffffff">
Number
</font>
</td>
<td width="70%">
<font face="Verdana" size="4"
color="#ffffff">
<input type="number" size="12">
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="Verdana" size="4"
color="#ffffff">
Message
</font>
</td>
<td width="70%">
<font face="Verdana" size="4"
color="#ffffff">
<textarea rows="5"
cols="37">
</textarea>
</font>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<button type="Submit">
<font face="Verdana"
size="4" color="black">
<b>Submit</b>
</font>
</button>
<hr color="black">
<hr color="black">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Contact(end)-->

<!--Footer2(start)-->
<table id="footer" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="black">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="90%" align="center">
</table>
</td>
</tr>
</table>
<!--Footer2(end)-->
</body>
</html>
OUTPUT:

You might also like