Scribd
Upload
0 views4 pages

Lab 1

experiment o lab 1 of web d

Uploaded by

sunnyanuragi946
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
0 views4 pages

Lab 1

experiment o lab 1 of web d

Uploaded by

sunnyanuragi946
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/ 4

EXPERIMENT 1

Design the following static web pages required for an online bookstore website
HOME PAGE:
 The static home page must contain three frames.
 Top frame: Logo and the college name and links to Homepage, Login page,
Registrationpage, 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
displayedinthe Right frame. Right frame: The pages to the links in the left frame must be loaded
here. Initiallythis page contains description of the web site.

THEORY
One HTML file index.html provides the structure of the whole website and the CSS file style.cssgives
designs to each element of the website.

To embed an image in an HTML page, <img> tag is used. This tag is empty and contains only attributes,
with no closing tag. The two required attribute for the <img> tag are src, which specifies the path to the
image, and alt, which provides alternate text for the image if it cannot be displayed.

In HTML, headings are used to define titles or subtitles on a webpage, which are important for
both the page structure and for search engine indexing. They range from <h1> to <h6>, with
<h1> being the most important and largest, and <h6> being the least important and smallest.

HTML & CSS CODES


index.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</title>
<link rel="stylesheet" href="index.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="">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>
<h3>Welcome to Book Store</h3>
<p>
Our bookstore offers a vast collection of books across various
disciplines, including Computer Science, Electronics, Electrical and
Civil Engineering.
</p>
</main>
</div>
</body>
</html>
style.css
header {
display: flex;
align-items: center;
}
header h1 {
text-align: center;
}
header img {
height: 100px;
width: 100px;
}
.navbar ul {
list-style: none;
background-color: grey;
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 {
position: relative;
height: 100%;
left: 0;
width: 300px;
background: rgb(105, 103, 103);
}
.sidebar h3 {
color: white;
text-align: center;
background: rgb(51, 50, 50);
}
.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: 10px;
}

OUTPUT

You might also like