Scribd
Upload
29 views16 pages

Weblabdj

Web development

Uploaded by

aysingh7598
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
29 views16 pages

Weblabdj

Web development

Uploaded by

aysingh7598
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/ 16

EXPERIMENT 2

LOGIN PAGE:
This page looks like below:

THEORY:
An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user
to enter data that is to be sent to the server for processing such as name, email address,
password, phone number, etc. . HTML forms are required if you want to collect some data from
of the site visitor. For example: If a user want to purchase some items on internet, he/she must
fill the form such as shipping address and credit/debit card details so that item can be sent to
the given address.

HTML CODE:
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initialscale=1.0" />
<title>Online Book Store by Aditya</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<img src="https://jssaten.ac.in//assets/images/logo/jsslogoicon.png" alt="LOGOJSS"/>
<h1>Online Book Store</h1>
</header>
<nav class="navbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="">Registrations</a></li>
<li><a href="">Catalouge</a></li>
<li><a href="">Cart</a></li>
</ul>
</nav>
<div class="container">
<div class="sidebar">
<h3>Categories</h3>
<ul>
<li><a href="">CSE Books</a></li>
<li><a href="">ECE Books</a></li>
<li><a href="">EEE Books</a></li>
<li><a href="">CE Books</a></li>
</ul>
</div>
<main>
<div class="form-container">
<form>
<h2>Login As</h2>
<div id="login-as">
<input type="radio" />
<label for="Student">Student</label>
<input type="radio" />
<label for="Faculty">Faculty</label>
<input type="radio" />
<label for="Admin">Admin</label>
</div>
<br />
<label for="UserName">User ID: </label>
<input type="text" /><br />
<label for="Password">Password: </label>
<input type="password" /><br />
<br /><br />
<input type="submit" value="Submit" />
<input type="button" value="Reset" />
</form>
</div>
</main>
</div>
</body>
</html>

OUTPUT:
EXPERIMENT 3
CATALOGUE PAGE: The catalogue page should contain the details of all the books
available in the website in a table.

THEORY: HTML tables allow you to organize data into rows and columns. A basic table is
created using the <table> tag, with each row defined by a <tr> tag. Within each row, you place
<td> tags for standard cells or <th> tags for header cells. You can enhance tables with attributes
like border, cell padding, and cell spacing to control the appearance. Tables can also span multiple rows
or columns using the row span and col span attributes.

HTML &CSS CODES


Catalogue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initialscale=1.0" />
<title>Catalouge</title>
<link rel="stylesheet" href="catalogue_style.css" />
</head>
<body>
<header>
<img src="https://jssaten.ac.in//assets/images/logo/jsslogoicon.png"
alt="LOGO JSS" />
<h1>Online Book Store</h1>
</header>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="registrations.html">Registrations</a></li>
<li><a href="catalogue.html">Catalouge</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
<div class="container">
<div class="sidebar">
<h3>Categories</h3>
<ul>
<li><a href="">CSE Books</a></li>
<li><a href="">ECE Books</a></li>
<li><a href="">EEE Books</a></li>
<li><a href="">CE Books</a></li>
</ul>
</div>
<main>
<table>
<tr>
<th>Book Cover</th>
<th>Book Details</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
<tr>
<td>
<img src="https://m.media-amazon.com/images/I/71U2tTFifoL._SY342_.jpg" />
</td>
<td>
Book: Data Structures<br />Author: E Balagurusamy<br />Publication:
McGraw Hill Education (India) Private Limited, 2019
</td>
<td>₹ 1735.43</td>
<td><button type="button">Add to Cart</button></td>
</tr>
<tr>
<td>
<img src="https://m.media-amazon.com/images/I/61H-WJNF9AL.SY466.jpg"
alt="B.Ram" />
</td>
<td>
Book: Computer Fundamentals: Architecture and Organization<br />Author:
B. Ram<br />Publication: New Age International Publishers
</td>
<td>₹ 282.45</td>
<td><button type="button">Add to Cart</button></td>
</tr>
<tr>
<td>
<img src="https://m.media-
amazon.com/images/I/81Vgo2Om+ML.SY466.jpg” />
</td>
<td>
Book: Discrete Structure and theory of Logics<br />Author:
KENNETH H. ROSEN , DR. KAMALA KRITHIVASAN <br />Publication:
McGraw Hill Education (India) Private Limited, 2019
</td>
<td>₹ 803.48</td>
<td><button type="button">Add to Cart</button></td>
</tr>
<tr>
<td>
<img src="https://m.media-amazon.com/images/I/71vK0WVQ4rL.SY466.jpg"
alt="hwf&ipeop" />
</td>
<td>
Book: How to win friends and influence people<br />Author: DALE
CARNEGIE <br />Publication: DALE CARNEGIE
</td>
<td>₹ 149.99</td>
<td><button type="button">Add to Cart</button></td>
</tr>
<tr>
<td>
<img src=”https://m.media-amazon.com/images/I/51W1dv3p65L.SY466.jpg”
alt="androidDEv" />
</td>
<td>
Book: Beginning Android Development With Kotlin<br />Author: Grem
Lim <br />Publication: Oxford University Press
</td>
<td>₹ 1153.99</td>
<td><button type="button">Add to Cart</button></td>
</tr>
</table>
</main>
</div>
</body>
</html>
Catalogue style.css
.navbar ul {
list-style: none;
background-color: rgb(105, 103, 103);
padding: 0px;
margin: 0px;
overflow: hidden;
align-items: center;
}
.navbar a {
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
}
.navbar a:hover {
background-color: rgb(53, 52, 52);
}
.navbar li {
float: left;
}
.sidebar ul {
list-style: none;
display: block;
}
.container {
display: inline-flex;
}
.sidebar a {
display: block;
text-decoration: none;
color: white;
height: 100%;
width: 100%;
font-size: 20px;
padding: 10px;
}
main {
margin: 20px;
}
img {
height: 150px;
width: 150px;
border-radius: 8px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
button {
background-color: white;
color: black;
border: 2px solid red;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
th,
td {
padding: 8px;
font-family: "Times New Roman", Times, serif;
}
tr:hover {
background-color: #d6eeee;
}

OUTPUT:
EXPERIMENT 4
CART PAGE: The cart page contains the details about the books which are added to the
cart.

THEORY: CSS, or Cascading Style Sheets, defines the visual presentation of HTML elements on
a web page. By separating content from design, CSS allows for more flexibility and control in
the layout and appearance. In its simplest form, CSS consists of rules with selectors to target
HTML elements and declarations that define the styles, such as colors, fonts, and spacing.
These rules can be included directly within HTML using the <style> tag or applied externally via
a linked stylesheet file. CSS follows the box model, treating each element as a rectangular box,
with properties for margins, borders, padding, and content area.

HTML & CSS CODES


Cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initialscale=1.0" />
<title>Cart</title>
<link rel="stylesheet" href="one.css" />
</head>
<body>
<header>
<img src="https://jssaten.ac.in//assets/images/logo/jsslogoicon.png" />
<h1>Online Book Store</h1>
</header>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="registrations.html">Registrations</a></li>
<li><a href="catalogue.html">Catalouge</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
<div class="container">
<div class="sidebar">
<h3>Categories</h3>
<ul>
<li><a href="">CSE Books</a></li>
<li><a href="">ECE Books</a></li>
<li><a href="">EEE Books</a></li>
<li><a href="">CE Books</a></li>
</ul>
</div>
<main>
<table border="black">
<tr>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>Data Structures</td>
<td>₹400.75</td>
<td>1</td>
<td>₹400.75</td>
</tr>
<tr>
<td>Discreate Mathematics</td>
<td>₹250.85</td>
<td>2</td>
<td>₹501.70</td>
</tr>
<tr>
<td>Android Development</td>
<td>₹625.75</td>
<td>1</td>
<td>₹625.75</td>
</tr>
</table>
<br />
<p><b>Total Amount: ₹1528.20</b></p>
<button type="button">Proceed to Pay</button>
</main>
</div>
</body>
</html>
Cart style.css
.sidebar {
position: relative;
height: 1000px;
left: 0;
width: 300px;
background: rgb(105, 103, 103);
}
main {
margin: 20px;
}
th,
td {
padding: 8px;
font-family: "Times New Roman", Times, serif;
}
tr:hover {
background-color: #d6eeee; }

OUTPUT:
EXPERIMENT 5
REGISTRATION PAGE: 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
 Languages known (checkboxes–English, Telugu, Hindi, Tamil)
 Address (text area)

THEORY
An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user
to enter data that is to be sent to the server for processing such as name, email address,
password, phone number, etc. . HTML forms are required if you want to collect some data from
of the site visitor. For example: If a user want to purchase some items on internet, he/she must
fill the form such as shipping address and credit/debit card details so that item can be sent to
the given address.

HTML & CSS CODES


Registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initialscale=1.0" />
<title>Registrations</title>
<link rel="stylesheet" href="registration_style.css" />
</head>
<body>
<header>
<img
src=””
alt="LOGO JSS"
/>
<h1>Online Book Store</h1>
</header>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="registrations.html">Registrations</a></li>
<li><a href="catalogue.html">Catalouge</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
<div class="container">
<div class="sidebar">
<h3>Categories</h3>
<ul>
<li><a href="">CSE Books</a></li>
<li><a href="">ECE Books</a></li>
<li><a href="">EEE Books</a></li>
<li><a href="">CE Books</a></li>
</ul>
</div>
<main>
<form>
<label for="name">Name: </label><br />
<input type="text" id="name" name="name" /><br />
<label for="password">Password: </label><br />
<input type="password" id="password" name="password" /><br />
<label for="email">Email: </label><br />
<input type="text" id="email" name="email" /><br />
<label for="phone">Phone Number: </label><br />
<input type="text" id="phone" name="phone" /><br />
<p>Choose your Sex:</p>
<input type="radio" id="male" name="sex" value="Male" />
<label for="male">Male</label><br />
<input type="radio" id="female" name="sex" value="Female" />
<label for="female">Female</label><br />
<input type="radio" id="others" name="sex" value="Others" />
<label for="male">Others</label><br />
<label for="dob">Date of Birth: </label><br />
<input type="date" id="dob" name="date" /><br />
<p>Languages Known:</p>
<input type="checkbox" id="hindi" value="hindi" />
<label for="hindi">Hindi</label><br />
<input type="checkbox" id="english" value="english" />
<label for="english">English</label><br />
<input type="checkbox" id="tamil" value="tamil" />
<label for="tamil">Tamil</label><br />
<input type="checkbox" id="kannad" value="kannad" />
<label for="kannad">Kannada</label><br />
<input type="checkbox" id="gujrati" value="gujrati" />
<label for="gujrati">Gujrati</label><br />
<br />
<label for="address">Address: </label><br />
<input type="text" id="address" name="address" />
</form>
</main>
</div>
</body>
</html>

Catalogue.css
input[type="text"] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
border: 2px solid red;
border-radius: 4px;
}
input[type="password"] {
width: 80%;
padding: 12px 20px;
border: 2px solid red;
border-radius: 4px;
}

OUTPUT:

You might also like