Experiment 1 Aim: To Design Webpages Using HTML For An Online Book Store

Experiment 1
Aim: To design webpages using HTML for an online book store
Theory:
HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language

 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page
HTML Tags:
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before the tag
name
The <form> Element

The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons,
submit buttons, and more.
The <input> Element

The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
HTML Images
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Links
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
The href attribute specifies the destination address (https://www.google.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).Clicking on the link text will send you to
the specified address.
Implementation:
1. homepage.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Home Page</title>
</head>
<body background="images/images.jpg">
<center><img src="images/logo_cmyk.gif"></center>
<br>
<hr>
<div align="center">
<a href="#"><font face="verdana;serif" color="black"
size="5">Home</font></a>     <a href="#category_table"><font
face="verdana;serif" size="5"
color="black">Categories</font></a>
<a href="loginpage.html"><font face="verdana;serif" color="black"
size="5">Login</font></a> /
<a href="regpage.html"><font face="verdana;serif" color="black"
size="5">Register</font></a>
<a href="userprofile.html"><font face="verdana;serif" color="black" size="5">User
Profile</font></a>
<a href="shoppingcart.html"><font face="verdana;serif" color="black" size="5">Shopping
Cart</font></a>
</div>
<hr>
<marquee direction = "right" behavior="alternate" hspace="50" vspace="50"
scrollamount="20">
<img src="images/cam1.jpg">
</marquee>
<hr>
<center>
<a href="sample_book_catalog.html"><font face="verdana;serif" color="black"
size="5">New Releases</font></a>
size="5">Coming Soon</font></a>
size="5">Best Sellers</font></a>
size="5">Trending Now</font></a>
size="5">Promotions</font></a>
</center>
<hr>
<center>
<table width="75%">
<tr>
<td>
<div>
<center>
<a href="#"><img src="images/bfs2.jpg" alt="book"></a>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
<button type="button">Add to Cart</button>
</center>
</div>
</td>
<td>
<div>
<center><a href="#"><img src="images/bfs3.jpg" alt="book"></a>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
</tr>
<tr>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
</tr>
</table>
</center>
<br><br><br>
<center>
<table border="20px" id="category_table">
<tr>
<td>
<a href="sample_book_catalog.html">
<div>
<img src="images/architecture.jpg" alt="Architecture & Interiors"
height="250px" width="250px">
</div>
<div>
<center><font face="verdana;serif" color="black" size="3">Architecture &
Interiors<br><span>(357)</span></font></center>
</div>
</a>
</td>
<td>
<div>
<img src="images/art.jpg" alt="Art" height="250px" width="250px">
</div>
<div>
<center><font face="verdana;serif" color="black"
size="3">Art<br><span>(157)</span></font></center>
</div>
</a>
</td>
<td>
<div>
<img src="images/biography.jpg" alt="Biography" height="250px" width="250px">
</div>
<div>
size="3">Biography<br><span>(157)</span></font></center>
</div>
</a>
</td>
<td>
<div>
<img src="images/colouringbooks.jpg" alt="Colouring Books" height="250px"
width="250px">
</div>
<div>
<center><font face="verdana;serif" color="black" size="3">Colouring
Books<br><span>(157)</span></font></center>
</div>
</a>
</td>
</tr>
<tr>
<td>
<div>
<img src="images/cookery.jpg" alt="Cookery" height="250px" width="250px">
</div>
<div>
size="3">Cookery<br><span>(157)</span></font></center>
</div>
</a>
</td>
<td>
<div>
<img src="images/design.jpg" alt="Design" height="250px" width="250px">
</div>
<div>
size="3">Design<br><span>(157)</span></font></center>
</div>
</a>
</td>
<td>
<div>
<img src="images/gift.jpg" alt="Gift" height="250px" width="250px">
</div>
<div>
<center><font face="verdana;serif" color="black" size="3">Gift &
Stationery<br><span>(157)</span></font></center>
</div>
</a>
</td>
<td>
<div>
<img src="images/travel.jpg" alt="Travel" height="250px" width="250px">
</div>
<div>
size="3">Travel<br><span>(157)</span></font></center>
</div>
</a>
</td>
</tr>
</table>
</center>
<br><br>
<hr>
<center>
<footer>© Copyright 2017 Roli Books. All Right Reserved</footer>
</center>
</body>
</html>
Output :
2. loginpage.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Login Page</title>
</head>
<br>
<hr>
<a href="homepage.html"><font face="verdana;serif" color="black"
size="5">Home</font></a>     <a
href="homepage.html#category_table"><font face="verdana;serif" size="5"
Profile</font></a>
Cart</font></a>
</div>
<hr>
<center>
<div>
<font size="7" face="verdana;serif">Already have an account with us? Please Log
In</font><br><br>
<form>
<font size="5" face="verdana;serif">Email Address:</font><br><br>
<input type="text" id="email"><br><br>
<font size="5" face="verdana;serif">Password:</font><br><br>
<input type="password" id="pass"><br><br>
<input type="submit" value="Login">
</form>
</div>
</center>
</body>
</html>
Output :
3. regpage.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Registration Page</title>
</head>
<br>
<hr>
Profile</font></a>
Cart</font></a>
</div>
<hr>
<center>
<div>
<font size="7" face="verdana;serif">New here? Registration is FREE and
EASY!</font><br><br>
<form>
Name:<br>
<input type="text" id="name"><br><br>
Contact:<br>
<input type="number" id="contact"><br><br>
Email Address:<br>
<input type="email" id="email"><br><br>
Password:<br>
Confirm Password:<br>
<input type="password" id="cnf_pass"><br><br>
<input type="submit" value="Register">
</form>
</div>
</center>
</body>
</html>
Output :
4. userprofile.html:
<!DOCTYPE HTML>
<html>
<head>
<title>User Profile Page</title>
</head>
<br>
<hr>
<a href="#"><font face="verdana;serif" color="black" size="5">User
Profile</font></a>
Cart</font></a>
</div>
<hr>
<hr>
<a href="#dashboard"><font face="verdana;serif" color="black"
size="5">Dashboard</font></a>
<a href="#account_info"><font face="verdana;serif" color="black" size="5">Edit Account
Info</font></a>
<a href="#address"><font face="verdana;serif" color="black" size="5">Address
Book</font></a>
</div>
<br><br><br><br>
<center>
<table border="1" id="dashboard">
<tr>
<td>
<center><font face="verdana;serif" color="black" size="5">Name :</font></center>
</td>
<td>
<center><font face="verdana;serif" color="black" size="5">Meet K
Shah</font></center>
</td>
</tr>
<tr>
<td>
<center><font face="verdana;serif" color="black" size="5">Email Address
:</font></center>
</td>
<td>
size="5">meetshah145@gmail.com</font></center>
</td>
</tr>
<tr>
<td>
<center><font face="verdana;serif" color="black" size="5">Contact :</font></center>
</td>
<td>
size="5">9619003450</font></center>
</td>
</tr>
<tr>
<td>
<center><font face="verdana;serif" color="black" size="5">Billing
Address:</font></center>
</td>
<td>
<center>
<font face="verdana;serif" color="black" size="5">
<p>4A Girikunj Patel Nagar Kandivali West Mumbai 400067</p>
</font>
</center>
</td>
</tr>
<tr>
<td>
<center><font face="verdana;serif" color="black" size="5">Shipping
Address:</font></center>
</td>
<td>
<center>
<font face="verdana;serif" color="black" size="5">
<p>4A Girikunj Patel Nagar Kandivali West Mumbai 400067</p>
</font>
</center>
</td>
</tr>
</table>
<br><br><br><br><br>
<table>
<tr>
<td>
<center>
<div id="account_info">
<font size="7" face="verdana;serif">Edit Account Information</font><br><br>
<form>
Name:<br>
<input type="text" value="Meet K Shah" id="name"><br><br>
Contact:<br>
<input type="number" value="9619003450" id="contact"><br><br>
Email Address:<br>
<input type="text" value="meetshah145@gmail.com" id="email"><br><br>
Password:<br>
<input type="submit" value="Save Changes">
</form>
</div>
</center>
</td>
<td>
<center>
<font size="7" face="verdana;serif">Adress Book</font><br><br>
<form>
<table border="1" id="address">
<tr>
<td>
<center><font face="verdana;serif" color="black" size="5">Billing
Adress</font></center>
</td>
<td>
<center><textarea id="bill_add" rows="4" cols="50">4A Girikunj Patel Nagar
Kandivali West Mumbai 400067</textarea></center>
</td>
</tr>
<tr>
<td>
<center><font face="verdana;serif" color="black" size="5">Shipping
Adress</font></center>
</td>
<td>
<center><textarea id="ship_add" rows="4" cols="50">4A Girikunj Patel
Nagar Kandivali West Mumbai 400067</textarea></center>
</td>
</tr>
</table>
<br>
<input type="submit" value="Save Changes">
</form>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>
Output :
5. payment.html
<!DOCTYPE HTML>
<html>
<head>
<title>Payment Page</title>
</head>
<br>
<hr>
Profile</font></a>
Cart</font></a>
</div>
<hr>
<center>
<table>
<h3><font face="verdana;serif" color="black" size="5">Credit Cart Info :</font></h3>
<form>
<tr>
<td><font face="verdana;serif" color="black" size="5">NAME ON CARD</font></td>
</tr>
<tr>
<td colspan="2">
<input size="50" type="text" value="" id="name">
</td>
</tr>
<tr>
<td><font face="verdana;serif" color="black" size="5">CARD NUMBER</font></td>
</tr>
<tr>
<td colspan="2">
<input size="16" id="card_num" type="text" value="0000-0000-0000-0000"
onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '0000-0000-0000-0000';}">
</td>
</tr>
<tr>
<td><font face="verdana;serif" color="black">MONTH</font></td>
<td><font face="verdana;serif" color="black" >YEAR</font></td>
<td><font face="verdana;serif" color="black" >CVV</font></td>
</tr>
<tr>
<td><input type="number" id="month" type="text" /></td>
<td><input max="9999" id="year" type="number" type="text" value="1988"
min="0000" /></td>
<td><input size="3" max="999" min="000" id="cvv" type="number"></td>
</tr>
<tr>
<td colspan="3">
<center><input type="submit" value="Pay"></center>
</td>
</tr>
</form>
</table>
</center>
</body>
</html>
Output :
6. sample_book_catalog.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Book Catalog Page</title>
</head>
<br>
<hr>
size="5">Home</font></a>     <a href="#category_table"><font
face="verdana;serif" size="5"
Profile</font></a>
Cart</font></a>
</div>
<hr>
<marquee direction = "right" behavior="alternate" hspace="50" vspace="50"
scrollamount="20">
</marquee>
<hr>
<center>
<a href="#"><font face="verdana;serif" color="black" size="5">New
Releases</font></a>
<a href="#"><font face="verdana;serif" color="black" size="5">Coming
Soon</font></a>
<a href="#"><font face="verdana;serif" color="black" size="5">Best
Sellers</font></a>
<a href="#"><font face="verdana;serif" color="black" size="5">Trending
Now</font></a>
<a href="#"><font face="verdana;serif" color="black" size="5">Promotions</font></a>
</center>
<hr>
<center>
<table width="75%">
<tr>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
</tr>
<tr>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
</tr>
<tr>
<td>
<div>
<center>
<a href="#"><img src="images/bk1.jpg" alt="book"></a>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
</tr>
<tr>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
<td>
<div>
<center>
<br>
BOOK_NAME
<br>
<br>
150/- INR
<br>
</center>
</div>
</td>
</tr>
</table>
</center>
<br><br><br>
<br><br>
<hr>
<center>
<footer>© Copyright 2017 Roli Books. All Right Reserved</footer>
</center>
</body>
</html>
Output :
7. shoppingcart.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Shopping Cart Page</title>
</head>
<br>
<hr>
Profile</font></a>
<a href="#"><font face="verdana;serif" color="black" size="5">Shopping Cart</font></a>
</div>
<hr>
<font face="verdana;serif" size="5">Shopping Cart</font>
<hr>
<center>
<table width="50%">
<tr>
<th><font face="verdana;serif" size="5">Product</font></th>
<th><font face="verdana;serif" size="5">Price</font></th>
<th><font face="verdana;serif" size="5">Qty</font></th>
<th><font face="verdana;serif" size="5">Subtotal</font></th>
</tr>
<tr>
<td>
<center>
<p>GRAPHIC DESIGN SCHOOL</p>
<br>
<img src="images/sc1.jpg" height="100px" width="100px">
</center>
</td>
<td>
<center>1299.16</center>
</td>
<td>
<center><input type="number" min="1" max="99" value="2" ></center>
</td>
<td>
</td>
<td>
<center><button>X</button></center>
</td>
</tr>
<tr>
<td>
<center>
<p>THE SHORT STORY OF ART</p>
<br>
<img src="images/sc2.jpg" height="100px" width="100px">
</center>
</td>
<td>
</td>
<td>
<center><input type="number" min="1" max="99" value="1" ></center>
</td>
<td>
</td>
<td>
<center><button>X</button></center>
</td>
</tr>
<tr>
<td colspan="2">
<center><font size="6" face="verdana;serif">Grand Total : </font></center>
</td>
<td colspan="3">
<center><font size="6">3727.15</font></center>
</td>
</tr>
<tr>
<td colspan="5">
<center><button>Empty Cart</button>
<button>Update Cart</button>
<button><a href="payment.html"><font face="verdana;serif"
color="black">Checkout</font></a></button>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>
Output:
Conclusion:
Thus we have successfully implemented and designed webpages for online bookstore using html.

Experiment 1 Aim: To Design Webpages Using HTML For An Online Book Store

Uploaded by

Document Information

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

Experiment 1 Aim: To Design Webpages Using HTML For An Online Book Store

Uploaded by

Copyright:

Available Formats

Experiment 1

Aim: To design webpages using HTML for an online book store

 HTML stands for Hyper Text Markup Language

 HTML tags normally come in pairs like <p> and </p>

The <form> Element

The <input> Element

Unordered HTML List

Ordered HTML List

You might also like