Advanced Internet Programming Lab Manual

PSG POLYTECHNIC COLLEGE
DEPARTMENT OF COMPUTER NETWORKING
NAME : ……………………………………………………………
ROLL NO : ……………………………………………………………
CLASS : ……………………………………………………………
2021 REGULATIONS
(4th) EVEN SEMESTER
DIPLOMA IN COMPUTER NETWORKING
PSG POLYTECHNIC COLLEGE
DEPARTMENT OF COMPUTER NETWORKING
ADVANCED INTERNET PROGRAMMING LABORATORY

OBSERVATION
REGISTER NUMBER
CERTIFIED BONAFIDE LAB WORK DONE BY
Mr. / Miss. ……………………………….. from the period of …………..
to ……………
DATE: ………… STAFF IN-CHARGE

____________________________________________________________
INTERNAL EXAMINER EXTERNAL EXAMINER

INDEX
EX. NO DATE NAME OF THE EXPERIMENT MARKS SIGNATURE

EX NO: 01 DEVELOP A STATIC WEBPAGE OF AN ONLINE
DATE: BOOKSTORE RESEMBLING AMAZON USING HTML
AIM:
To develop a static webpage of an online bookstore, the webpages should resemble

www.amazon.com using HTML.
CODE:
<html>
<head>
<title>Online Bookstore - Catalogue</title>
</head>
<body>
<header>
<h1>Online Bookstore</h1>
<nav>
<p>
<a href="home.html"><button>Home</button></a><br>
<br><a href="cart.html"><button>Shopping Cart</button></a>
</p>
</nav>
</header>
<section>
<form>
Enter the book to search <input type=""> <button>search</button>
</form>
<h2>Featured Books</h2>
<ul>
<li>
<h3>Book Title</h3>
<img src="book1.jpg" alt="Book Cover">
<p>Book Description</p>
OUTPUT:
<button>Add to Cart</button>
</li>
<li>
<h3>Book Title</h3>
</li>
<li>
<h3>Book Title</h3>
</li>
</ul>
</section>
<footer>
<p>Sample web page of a online bookstore</p>
</footer>
</body>
</html>
EXPLANATION:
1. The <!DOCTYPE> declaration defines the document type as HTML.

2. The <html> element is the container for all other HTML elements on the page.
3. The <head> element contains meta information about the document, such as the title
of the webpage (which will be displayed in the browser's title bar or tab).
4. The <body> element contains the visible content of the webpage.
5. The <header> element contains the site title and main navigation.
6. The <nav> element contains the site's main navigation links.
7. The <section> element is used to group related content together and give it a semantic
meaning. In this case, it is used to group the featured books together.
8. The <ul> element is used to create an unordered list, in this case to list ft. books.
9. The <li> element is used to create a list item, in this case each item represents a book.
10. The <img> element is used to add images to the webpage, in this case, it's used to add
the cover of the book.
11. The <button> element is used to create a clickable button.
12. The <footer> element contains the site's footer content.
RESULT:
Thus we have successfully developed a static webpage of an online bookstore

resembling www.amazon.com and executed.
EX NO: 02 DEVELOP A BOOKSTORE WEBSITE CONSISTING
HOMEPAGE, REGISTRATION AND USER LOGIN, USER
DATE: PROFILE PAGE, BOOK CATALOG, SHOPPING CART,

PAYMENT, ORDER CONFIRMATION
AIM:
To develop a Bookstore Website consisting of Homepage, Registration and User

login, User profile page, Book Catalogue, Shopping cart, Payment, Order confirmation using
html.
CODE:
Homepage: (home.html)
<html>
<head>
<title>Online Bookstore - Home</title>
</head>
<body>
<header>
<nav>
<p>
<a href="Login.html"><button>Login or Register</button></a><br>
<br><a href="book catalogue.html"><button>Book Catalogue</button></a>
</p>
</nav>
</header>
</body>
</html>
User Login: (Login.html)
<html>
<head>
OUTPUT (HOMEPAGE):
<title> Online Bookstore - Login </title>
</head>
<body>
<header>
<nav>
<p>
<br><a href="book catalogue.html"><button>Browse as guest</button></a>
</p>
</nav>
</header>
<section>
<form>
<p>
Username: <input type="text"><br>
<br>Password: <input type="password">
</p>
</form>
<nav>
<p>
<a href="profile.html"><button>Submit</button></a><br>
<br><a href="register.html"><button>Sign up</button></a>
</p>
</nav>
</section>
</body>
</html>
Registration: (register.html)
<html>
<head>
<title> Online Bookstore - Register </title>
OUTPUT (REGISTRATION):
</head>
<body>
<header>
<nav>
<p>
<br><a href="Login.html"><button>Sign in</button></a>
</p>
</nav>
</header>
<section>
<form>
<p>
First Name: <input type="text"><br>
<br>Last Name : <input type="text"><br>
<br>Username : <input type="text"><br>
<br>Password : <input type="password"><br>
<br>Re-Enter : <input type="password">
</p>
</form>
<a href="Login.html"><button>Submit</button></a>
</section>
</body>
</html>
User Profile: (profile.html)
<html>
<head>
<title>Online Bookstore - Profile page</title>
</head>
<body>
<header>
OUTPUT (USER PROFILE):
<nav>
<p>
</p>
</nav>
</header>
<section>
<h3>Username</h3>
<img src="profile pic.jpg" alt="Profile pic">
<p>
First Name: First Name<br>
<br>Last Name: Last Name<br>
<br>DOB: DOB<br>
</p>
</section>
</body>
</html>
Book Catalogue: (book catalogue.html)
<html>
<head>
<title>Online Bookstore - Catalogue</title>
</head>
<body>
<header>
<nav>
<p>
<br><a href="cart.html"><button>Shopping Cart</button></a>
</p>
OUTPUT (BOOK CATALOGUE):
</nav>
</header>
<section>
<form>
Enter the book to search <input type=""> <button>search</button>
</form>
<h2>Featured Books</h2>
<ul>
<li>
<h3>Book Title</h3>
</li>
<li>
<h3>Book Title</h3>
</li>
</ul>
</section>
</body>
</html>
Shopping Cart: (cart.html)
<html>
<head>
<title>Online Bookstore - Cart</title>
</head>
<body>
<header>
OUTPUT (SHOPPING CART):
<nav>
<p>
</p>
</nav>
</header>
<section>
<h2>Shopping Cart</h2>
<ul>
<li>
<h3>Book Title</h3>
</li>
<li>
<h3>Book Title</h3>
</li>
</ul>
<a href="payment.html"><button>Proceed to buy</button></a>
</section>
</body>
</html>
Payment: (payment.html)
<html>
<head>
<title>Online Bookstore - Payment</title>
</head>
<body>
<header>
OUTPUT (PAYMENT):
<nav>
<p>
<br><a href="cart.html"><button>Return</button></a>
</p>
</nav>
</header>
<section>
<form>
<p>
<input type="checkbox">Credit / Debit card
Card details (if card)<br>
<br>Card number : <input type="text"><br>
<br>Phone number: <input type="text"><br>
<br>CVV : <input type="text"><br>
<br><input type="checkbox">UPI<br>
<br><input type="checkbox">COD
</p>
</form>
<a href="confirm.html"><button>Confirm Order</button></a>
</section>
</body>
</html>
Order Confirmation: (confirm.html)
<html>
<head>
<title>Online Bookstore - Order</title>
</head>
<body>
<header>
OUTPUT (ORDER CONFIRMATION):
<nav>
<p>
<br><a href="cart.html"><button>Return</button></a>
</p>
</nav>
</header>
<section>
<h3>Your oder is been confirmed</h3>
<h4>If you want to cancel contact customer care</h2>
<h5>Thank you</h5>
</section>
</body>
</html>
RESULT:
Thus we have successfully developed a Bookstore Website consisting of Homepage,

Registration and User login, User profile page, Book Catalogue, Shopping cart, Payment,
Order confirmation using html and executed.

Advanced Internet Programming Lab Manual

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

Advanced Internet Programming Lab Manual

Uploaded by

Copyright:

Available Formats

PSG POLYTECHNIC COLLEGE

DEPARTMENT OF COMPUTER NETWORKING

ADVANCED INTERNET PROGRAMMING LABORATORY

CERTIFIED BONAFIDE LAB WORK DONE BY

Mr. / Miss. ……………………………….. from the period of …………..

DATE: ………… STAFF IN-CHARGE

INTERNAL EXAMINER EXTERNAL EXAMINER

EX. NO DATE NAME OF THE EXPERIMENT MARKS SIGNATURE

DATE: BOOKSTORE RESEMBLING AMAZON USING HTML

To develop a static webpage of an online bookstore, the webpages should resemble

1. The <!DOCTYPE> declaration defines the document type as HTML.

Thus we have successfully developed a static webpage of an online bookstore

DATE: PROFILE PAGE, BOOK CATALOG, SHOPPING CART,

To develop a Bookstore Website consisting of Homepage, Registration and User

User Login: (Login.html)

User Profile: (profile.html)

Book Catalogue: (book catalogue.html)

Shopping Cart: (cart.html)

Order Confirmation: (confirm.html)

Thus we have successfully developed a Bookstore Website consisting of Homepage,

You might also like