Design and Development of Static Website

Building an online book selling website provides an alternative means of ecommerce for

selling school books and vulnerable books for the students and remaining people. The

uploading and purchasing book with a single click on the button. The objective is to develop a

fully functional online book selling website using html,css and javascript.

1.Introduction
A website is a collection of web pages and digital content that are accessible over the internet.
These web pages are typically linked together and are designed to be viewed in web browsers.
Websites are hosted on web servers and are identified by a unique domain name (e.g.,
www.example.com).

Websites can serve various purposes, including:

1. Informational: Many websites are created to provide information on a particular topic,

organization, or subject. These can include personal blogs, news websites, educational
resources, and more.
2. E-commerce: E-commerce websites are designed to facilitate online buying and selling
of products and services. They often include features like online catalogue, shopping
carts, and secure payment processing.
3. Social Media: Social media platforms are a type of website that allows users to create
profiles, connect with others, and share content such as text, images, and videos.
4. Government and Nonprofit: Government websites provide information and services
related to government agencies and services, while nonprofit websites aim to raise
awareness, support causes, and collect donations.

Websites are built using various web technologies, including HTML (Hypertext Markup
Language), CSS (Cascading Style Sheets), JavaScript, and server-side scripting languages like
PHP, Python, or Ruby. They can range from simple static web pages to complex, dynamic sites
with databases, user registration, and interactive features.

Websites have become an integral part of modern communication, commerce, and information
sharing, providing a platform for individuals and organizations to reach a global audience on
the internet.
1.1.Webpage:

A web page is a single, individual document or page of content on the World Wide Web that
can be accessed through a web browser. Web pages are the fundamental building blocks of
websites and serve as the primary means for presenting information, media, and interactive
elements on the internet.

Key characteristics of web pages include:

1. Content: Web pages contain text, images, multimedia elements (such as videos or
audio), and links to other web pages or external resources. They can be used to provide
information, share articles, display images, offer product listings, and more.
2. HTML Markup: Web pages are typically written in HTML (Hypertext Markup
Language), which defines the structure and presentation of the content. HTML tags are
used to format text, create headings, insert images, and include other elements.
3. Hyperlinks: Web pages often contain hyperlinks, also known as links, which allow users
to navigate to other web pages or external websites. Links are a fundamental aspect of
the interconnected nature of the World Wide Web.
4. URL (Uniform Resource Locator): Each web page is identified by a unique URL, which
is a specific web address. The URL includes the protocol (e.g., "http" or "https"), the
domain name (e.g., "www.example.com"), and the path to the specific web page (e.g.,
"/page1.html").
5. Styles and Formatting: Web pages may use Cascading Style Sheets (CSS) to control the
visual presentation, including layout, colors, fonts, and other design elements. CSS
helps ensure consistency and a visually appealing appearance.
6. Interactivity: Web pages can incorporate interactivity through JavaScript, allowing for
features like forms, animations, and responsive behavior to user input.
7. Structured Content: Many web pages use structured data formats, such as JSON-LD or
microdata, to provide additional information that search engines and other software can
understand and use.
These web pages are typically hosted on web servers and are delivered to users' web browsers
upon request. When you enter a URL into your web browser or click on a link, you are
requesting a specific web page to be displayed in your browser window.

1.2.Static website:

A static website is a type of website that consists of web pages with fixed, unchanging content.
The content on a static website remains the same for all visitors and does not change in response
to user interactions or external data. Static websites are typically built using HTML and CSS,
and the content is pre-defined and doesn't involve dynamic elements or databases. They are
well-suited for presenting information that doesn't require frequent updates or interactive
features. Static websites are relatively simple to create and are often used for purposes like
online brochures, portfolios, or personal blogs where the content remains largely constant.

1.3.Dynamic Website:

A dynamic website is a type of website that displays content that can change in real-time, in
response to user interactions, data from databases, or other external factors. Unlike static
websites, where the content remains fixed, dynamic websites are designed to provide a more
interactive and personalized user experience. They use various technologies, including server-
side scripting languages (such as PHP, Python, or Ruby) and databases, to generate and serve
web pages on the fly, allowing for content to be updated and customized based on user input
or changing data.

Key characteristics of dynamic websites include:

1. Database Integration: Dynamic websites often store content, such as text, images, user
profiles, and product listings, in databases. This content can be retrieved and displayed
dynamically based on user requests.
2. User Interactivity: They allow users to interact with the site through forms, search
features, and other dynamic elements. User-generated content and actions can influence
the content displayed.
3. Customization: Dynamic websites can personalize content for individual users. For
example, e-commerce sites may recommend products based on a user's browsing
history.
4. Real-time Updates: Content can change in real-time without requiring manual updates.
This is valuable for news websites, social media platforms, and online marketplaces.
 5. User Accounts: Users can create accounts and profiles, with the ability to log in, access
personalized content, and participate in discussions or transactions.
6. Content Management Systems (CMS): Many dynamic websites use CMS platforms
that allow site owners to easily update and manage content without extensive technical
knowledge.
7. E-commerce Functionality: Dynamic e-commerce websites have features like shopping
carts, product inventory management, and secure payment processing.
8. Interactive Web Applications: Dynamic websites can function as web applications,
providing complex features like online banking, collaborative tools, and more.

Examples of dynamic websites include social media platforms (e.g., Facebook, Twitter), e-
commerce sites (e.g., Amazon), content management systems (e.g., WordPress), and various
web applications like online email services and project management tools.

The use of server-side scripting and databases enables dynamic websites to deliver more
engaging, up-to-date, and interactive content, making them suitable for a wide range of online
applications.

2.Problem Statement:

Building an online book selling website provides an alternative means of ecommerce for

selling school books and vulnerable books for the students and remaining people. The

uploading and purchasing book with a single click on the button. The objective is to develop a

fully functional online book selling website to allow student to buy books and obtain

the full utilisation of the books.

3.Methodology: HTML, CSS and JavaScript are the basic languages to build any website.

1. Create the structure with HTML. The first thing you have to learn, is HTML,
which is the standard markup language for creating web pages.
2. Style with CSS. The next step is to learn CSS, to set the layout of your web page
with beautiful colors, fonts, and much more
3. Make it interactive with JavaScript. After studying HTML and CSS, you should
learn JavaScript to create dynamic and interactive web pages for your users
4.Designing and Development:

5.Sample Code:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-

DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-
B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>

<style>
.book-store-home-page {

background-color: #1b1b1b;

padding: 24px;

.home-page-heading {

color: #ffffff;

font-family: "Bree Serif";

font-size: 28px;

.popular-book-container {

background-color: #e6f6ff;

border-radius: 8px;

.popular-book-image {

width: 126px;

height: 180px;

.button {

font-family: "Roboto";

font-weight: 500;

font-size: 12px;
}

.recommended-books-heading {

color: #ffffff;

font-family: "Bree Serif";

font-size: 20px;

margin-top: 10px;

.recommended-book-container {

margin-bottom: 10px;

.recommended-book-short-details-container {

margin-left: 10px;

.book-details-page {

background-color: #1b1b1b;

padding: 24px;

text-align: center;

</style>

</head>

<body>
<div id="sectionBookStoreHome">

<div class="book-store-home-page">

<h1 class="home-page-heading">Popular Book</h1>

<div class="popular-book-container d-flex flex-row">

<img

src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/book-apj-img.png"

class="popular-book-image"

/>

<div class="popular-book-short-details-container">

<h1 class="popular-book-heading">Wings of Fire</h1>

<p class="popular-book-text">

An Autobiography of<br />Abdul Kalam

</p>

<p class="popular-book-author">by Arun Tiwari</p>

<button

class="button btn btn-primary"

onclick="display('sectionWingsOfFireBookDetails')"

>

Read Now

</button>

</div>

</div>

<h1 class="recommended-books-heading">Recommended Books</h1>

<div class="recommended-book-container d-flex flex-row">

 <img

src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/book-chetan-bhagat-
img.png"

class="recommended-book-image"

/>

<div class="recommended-book-short-details-container">

<h1 class="recommended-book-name">The 3 mistakes of my life</h1>

<p class="recommended-book-description">

Indian author<br />by Chetan Bhagat

</p>

<button

class="button btn btn-primary"

onclick="display('sectionTheThreeMistakesOfMyLifeBookDetails')"

>

Read Now

</button>

</div>

</div>

</div>

</div>

<div id="sectionWingsOfFireBookDetails">

<div class="book-details-page">

<img

src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/book-apj-img.png"

class="book-details-page-image"
 />

<h1 class="book-name">Wings of Fire</h1>

<p class="author">by Arun Tiwari</p>

<p class="book-description">

Every common man who by his sheer grit and hard work achieves success

should share his story with the rest for they may find inspiration and

strength to go on, in his story. The 'Wings of Fire' is one such

autobiography by visionary scientist Dr. APJ Abdul Kalam, who from

very humble beginnings rose to be the President of India. The book is

full of insights, personal moments and life experiences of Dr. Kalam.

It gives us an understanding on his journey of success.

</p>

<button

class="button btn btn-warning"

onclick="display('sectionBookStoreHome')"

>

Back

</button>

<button class="button btn btn-primary">Buy Now</button>

</div>

</div>

<script type="text/javascript" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-

website/js/ccbp-ui-kit.js"></script>

</body>

</html>
6.Testing:

HTML is the foundation of any website, but writing it can be tricky and error-prone. How do
you make sure your HTML code is correct, follows the standards, and works well across
different browsers and devices?

How to test HTML code for errors?

One of the easiest ways to test your HTML code for errors is to use an online validator tool,
such as the W3C Markup Validation Service. This tool checks your code against the HTML
standards and reports any errors or warnings. You can either enter your URL, upload your file,
or paste your code directly into the tool. The tool will highlight the errors and suggest how to
fix them. You can also choose which HTML version or doctype to validate against, and
customize some options and filters.

How to test HTML code for compatibility?

Another way to test your HTML code is to use a cross-browser testing tool, such as
BrowserStack or LambdaTest. These tools allow you to simulate how your site looks and works
on different browsers, operating systems, and devices. You can either enter your URL or upload
your file, and then select the combinations of browsers and devices you want to test. The tools
will generate screenshots or live sessions of your site, and let you compare and debug any
issues.

How to test HTML code for performance?

the way to test your HTML code is to use a performance testing tool, such as Google PageSpeed
Insights or GTmetrix. These tools measure how fast your site loads and how well it performs
on various metrics, such as speed, usability, and optimization. You can enter your URL into the
tool, and it will generate a score and a report of your site's performance. The tools will also
provide recommendations and tips on how to optimize your code and reduce your loading time.
7.Output Screenshots:

7.1.Books Homepage:

7.2.Popular Book View:

7.3.Recommended Books View:

8.Conclusion:

In conclusion, websites are playing an important part in improvement of business. 70% of the
population is using dynamic and interactive websites because of their eye capturing visual
effects. Static websites also have their own place for the platform where there is specific
information required. Static websites require less investment as compare to dynamic websites.

A static website is known for its simplicity and ease with which it's potential customers view
different pages on the screen easily. HTML and CSS are essential tools for creating and
designing websites. HTML provides the structure and content of a webpage while CSS allows
you to style and layout the page. By mastering these two technologies, you can create beautiful
and functional websites that are accessible to users on a wide range of devices.

In general, a good page layout has to satisfy the basic elements of a good page design. This
includes color contrast, text organization, font selection, style of a page, page size, graphics
used, and consistency. In order to create a well-designed page for a specific audience. The
developer needs to organized and analyze the users statistics and the background of the users.
Although it can be hard to come up with a design that is well suited to all of the users, there
will be a design that is appropriate for most of the audience. The better the page design, the
more hits a page will get. That implies an increase in accessibility and a possible increase in
business.

Bibliography

1. Google [2]Byjus [3]W3S

2. IEEEjournals [5]TutorialsPoint [6]Stackoverflow

3.https://www.slideshare.net/SaloniBajaj3/book-selling-website-report

4. Geeks for Geeks and soon.

5. International Journal of Trend in Research and Development, Volume 3(6),

ISSN:2394-9333

[10]IJIRMPS | Volume 6, Issue 5, 2018 (SOIT - ADYPU)

6. International Journal of Computer Science Trends and Technology (IJCST)

Volume 4 Issue 2, Mar - Apr2016