Scribd
Upload
67 views8 pages

Lab Journal 4 14032023 104921am

The document describes a lab assignment to design a static website for an online bookstore with two web pages: a home page displaying a list of books and an information page displaying details of a selected book like title, author, published year, and description. The student created the website using HTML5 and CSS with two pages - a home page listing four books and an information page to display book details. Styling was added using CSS for elements like header, navigation, main content, footer, and aside section. The output was a basic two-page website for an online bookstore with styled layout and content.

Uploaded by

Hammad Mashwani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
67 views8 pages

Lab Journal 4 14032023 104921am

The document describes a lab assignment to design a static website for an online bookstore with two web pages: a home page displaying a list of books and an information page displaying details of a selected book like title, author, published year, and description. The student created the website using HTML5 and CSS with two pages - a home page listing four books and an information page to display book details. Styling was added using CSS for elements like header, navigation, main content, footer, and aside section. The output was a basic two-page website for an online bookstore with styled layout and content.

Uploaded by

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

Web Systems & Technologies

ITL-226

Lab Journal 4

HAMMAD UR REHMAN
01-135211-031
BS(IT)5-B

Department of Computer Science


BAHRIA UNIVERSITY, ISLAMABAD
Lab # 4: HTML5 and CSS

Objectives:

Learn about HTML5 layout, CSS

Tools Used:

Visual Studio

Submission Date:

Evaluation: Signatures of Lab Engineer:


Task:

Design a static website for an online bookstore, your website must have the following web pages:
 HOME PAGE: Shows the list of books.
 INFORMATION PAGE: This page displays the information of the selected book. Information
includes:
o Book title
o Book author
o Published Year
o Detail of the book

Procedure/Program:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<!doctype html>
<html>
<head>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
header{
background-color:#00a9ff;
Color:#000000;
padding:28px;
}
header h1{
text-align:center;
}
nav{
padding-bottom:0px;
}
nav ul{
list-style:none;
margin:0;
padding:10px;
overflow:hidden;
background-color:#1694aa;

}
nav ul li{
display:inline-block;
margin-right:200px;
float:left;
}
nav ul li a{
color:#000000;
text-decoration:blink;
display: block;
text-align: center;
}
li a:hover {
background-color: #00ff92;
}
main{
padding:20px;
}
section.books{
margin-bottom:30px;
border-block:5px ridge;
}
section.books h2{
font-size:24px;
margin-bottom:10px;
}
section.books ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
section.books li {
width: 33%;
margin-bottom: 30px;
padding: 10px;
box-sizing: border-box;
}
section.books li a {
display: block;
text-align: center;
color: #333;
text-decoration: none;
}
section.books li h3 {
font-size: 18px;
margin-bottom: 5px;
}

section.books li p {
font-size: 14px;
margin-bottom: 5px;
}

footer {
background-color: #169f32;
color: #fff;
padding: 5px;
text-align:justify;
}
aside{
height:100%;
width: 20%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color:#00ff92;
display:block;
}
aside p{
color:#000000;
display:flex;

}
</style>
</head>
<body>
<header>
<h1>MY BOOK STORE</h1>
<nav>
<ul>
<li><a href="#">poetry</a></li>
<li><a href="#">programming</a></li>
<li><a href="#">urdu</a></li>
<li><a href="#">kids</a></li>
</ul>
</nav>
</header>
<aside>
<h2>About Books</h2>
<p>A book is a medium for recording information in the form of writing or
images, typically composed of many pages (made of papyrus, parchment, vellum, or paper) bound
together and protected by a cover.[1] The technical term for this physical arrangement is codex
(plural, codices). In the history of hand-held physical supports for extended written
compositions or records, the codex replaces its predecessor, the scroll. A single sheet in a
codex is a leaf and each side of a leaf is a page.</p>
</aside>
<main>
<section class="books">
<h2>Books</h2>
<ul>
<li>
<a href="welcome.aspx">
<h3>BOOK 1</h3>
<p>Author name</p>
<p>Published Year:2022</p>
</a>
</li>
<li>
<a href="welcome.aspx">
<h3>BOOK 2</h3>
<p>Author name</p>
<p>Published Year:2021</p>
</a>
</li>
<li>
<a href="welcome.aspx">
<h3>BOOK 3</h3>
<p>Author name</p>
<p>Published Year:2020</p>
</a>
</li>
<li>
<a href="welcome.aspx">
<h3>BOOK 4</h3>
<p>Author name</p>
<p>Published Year:2019</p>
</a>
</li>
</ul>
</section>
</main>
<footer>
<p>&copy; 2023 Online Bookstore. All Right Reserved.</p>
</footer>
</body>
</html>

</asp:Content>

Result/Output:
Analysis/Conclusion:

Design a web form of 2 pages and display content successfully using a HTML tags and style the web
form for attractive look.

You might also like