EXPERIMENT NO:1

AIM: Introduction to HTML, CSS, Bootstrap Java Script and applications of them.

BOOTSTRAP
Bootstrap is an open-source and free CSS framework
developed by Mark Otto and Jacob Thornton while working
at Twitter. It was developed to make interface development
and maintenance easy and consistent. Bootstrap is a
mobile-first framework that optimizes code for mobile
devices first and scales up components as necessary using
CSS media queries. It is useful to develop responsive
websites without rewriting the code for each device or
screen. Bootstrap has not only HTML/CSS components but
also JS components. It provides pre-built CSS and
JavaScript for lists, navigation bars, forms, and other web
elements. Bootstrap is a pure CSS and JavaScript
framework that can be used with any editor or server
technology.
WHAT IS BOOTSTRAP?
Bootstrap mainly includes CSS (Cascading Style Sheets) and an optional
JavaScript-supported design template (plug-ins) that deals with typography,
buttons, forms, and other user interface components. This Bootstrap
framework helps rapid web development and supports developers in
creating responsive web pages.
HISTORY OF BOOTSTRAP
Twitter Blueprint was the first name for Bootstrap and was developed on
Twitter by Mr. Mark Otto and Jacob Thornton. It was released as an open-
source product on GitHub in August 2011. The framework is primarily built
to encourage design uniformity and reliability of web pages across
applications. Before its existence, developers used various external
libraries to perform responsive web development, leading to
incompatibilities in web development and heavy maintenance burdens.
WHY SHOULD DEVELOPERS USE BOOTSTRAP
Here are some of the essential usages of Bootstrap listed:

 Browser supportive: Every browser supports this Bootstrap

Framework.
 Mobile-first approach: The Bootstrap framework has a preexisting
mobile-first style all through the library and not as separate files.
 Simple and easy to start: If you know HTML and CSS, you can
quickly start working with Bootstrap, and its documentation is
available on the official site.
 Responsive design and looks: Web pages designed using the
Bootstrap framework have responsive CSS that can adjust to the
screen size of large desktops, notebooks, tablets, and mobiles.
 Easy customization: It provides some built-in components and
functionalities that are easy to customize.
 Clean interface or Developers: The bootstrap framework provides a
new and consistent result for building user interfaces on web pages.
 It is an open-source framework with web-based customization.

BENEFITS OF BOOTSTRAP FRAMEWORK

It produces fewer cross-browser bugs.

It is a consistent framework supported by all web browsers and CSS-based

compatibility improvements.

It is a lightweight and hence widely used framework for creating responsive sites.

It's easily customizable.

It has a simple and effective grid system.

What is CSS?
presentation of Web pages, including colors, layout, and fonts, thus making our
web pages presentable to the users.

CSS is designed to make style sheets for the web. It is independent of HTML and
can be used with any XML-based markup language. Now let’s try to break the
acronym: CSS stands for Cascading Style Sheets. It is the language for describing
the

 Cascading: Falling of Styles

 Style: Adding designs/Styling our HTML tags
 Sheets: Writing our style in different documents

CSS Syntax

Selector {

Property 1: value;

Property 2: value;

Property 3: value;

For example:

h1

Color: red.

Text-align center.

#unique
 {

color: green;

JAVA SCRIPT

Introduction

This chapter introduces JavaScript and discusses some of its fundamental

concepts.

What you should already know

This guide assumes you have the following basic background:

 A general understanding of the Internet and the World Wide Web (WWW).
 Good working knowledge of Hypertext Markup Language (HTML).
 Some programming experience. If you are new to programming, try one of
the tutorials linked on the main page about JavaScript.

Where to find JavaScript information

The JavaScript documentation on MDN includes the following:

 Learn Web Development provides information for beginners and introduces

basic concepts of programming and the Internet.
 JavaScript Guide (this guide) provides an overview about the JavaScript
language and its objects.
 JavaScript Reference provides detailed reference material for JavaScript.

If you are new to JavaScript, start with the articles in the learning area and
the JavaScript Guide. Once you have a firm grasp of the fundamentals, you can use
the JavaScript Reference to get more details on individual objects and statements.

What is JavaScript?
JavaScript is a cross-platform, object-oriented scripting language used to make
webpages interactive (e.g., having complex animations, clickable buttons, popup
menus, etc.). There are also more advanced server-side versions of JavaScript such
as Node.js, which allow you to add more functionality to a website than
downloading files (such as real time collaboration between multiple computers).
Inside a host environment (for example, a web browser), JavaScript can be
connected to the objects of its environment to provide programmatic control over
them.

JavaScript contains a standard library of objects, such as Array, Date, and Math,
and a core set of language elements such as operators, control structures, and
statements. Core JavaScript can be extended for a variety of purposes by
supplementing it with additional objects, for example:

 Client-side JavaScript extends the core language by supplying objects to

control a browser and its Document Object Model (DOM). For example,
client-side extensions allow an application to place elements on an HTML
form and respond to user events such as mouse clicks, form input, and page
navigation.
 Server-side JavaScript extends the core language by supplying objects
relevant to running JavaScript on a server. For example, server-side
extensions allow an application to communicate with a database, provide
continuity of information from one invocation to another of the application,
or perform file manipulations on a server.

This means that in the browser, JavaScript can change the way the webpage
(DOM) looks. And, likewise, Node.js JavaScript on the server can respond to
custom requests sent by code executed in the browser.

JavaScript and Java

JavaScript and Java are similar in some ways but fundamentally different in some
others. The JavaScript language resembles Java but does not have Java's static
typing and strong type checking. JavaScript follows most Java expression syntax,
naming conventions and basic control-flow constructs which was the reason why it
was renamed from Live Script to JavaScript.

In contrast to Java's compile-time system of classes built by declarations,

JavaScript supports a runtime system based on a small number of data types
representing numeric, Boolean, and string values. JavaScript has a prototype-based
object model instead of the more common class-based object model. The
prototype-based model provides dynamic inheritance; that is, what is inherited can
vary for individual objects. JavaScript also supports functions without any special
declarative requirements. Functions can be properties of objects, executing as
loosely typed methods.

JavaScript is a very free-form language compared to Java. You do not have to

declare all variables, classes, and methods. You do not have to be concerned with
whether methods are public, private, or protected, and you do not have to
implement interfaces. Variables, parameters, and function return types are not
explicitly typed.

Java is a class-based programming language designed for fast execution and type
safety. Type safety means, for instance, that you can't cast a Java integer into an
object reference or access private memory by corrupting the Java bytecode. Java's
class-based model means that programs consist exclusively of classes and their
methods. Java's class inheritance and strong typing generally require tightly
coupled object hierarchies. These requirements make Java programming more
complex than JavaScript programming.

In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed

languages such as Hyper Talk and dBase. These scripting languages offer
programming tools to a much wider audience because of their easier syntax,
specialized built-in functionality, and minimal requirements for object creation.

HTML (HYPER TEXT MARKUP LANGUAGE)

The hypertext Markup Language or HTML is the standard markup

language for documents designed to be displayed in a web browser. It
defines the meaning and structure of web content. It is often assisted by
technologies such as Cascading Style Sheets (CSS) and scripting
languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local
storage and render the documents into multimedia web pages. HTML
describes the structure of a web page semantically and originally included
cues for its appearance.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be
embedded into the rendered page. HTML provides a means to
create structured documents by denoting structural semantics for text such
as headings, paragraphs, lists, links, quotes, and other items. HTML
elements are delineated by tags, written using angle brackets. Tags such
as <imp> and <input> directly introduce content into the page. Other tags
such as <p> and </p> surround and provide information about document
text and may include sub-element tags. Browsers do not display the HTML
tags but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such
as JavaScript, which affects the behavior and content of web pages. The
inclusion of CSS defines the look and layout of content. The World Wide
Web Consortium (W3C), former maintainer of the HTML and current
maintainer of the CSS standards, has encouraged the use of CSS over
explicit presentational HTML since 1997.[2] A form of HTML, known
as HTML5, is used to display video and audio, primarily using
the <canvas> element, together with JavaScript.
Applications:

With Bootstrap’s popularity comes a wealth of helpful resources: articles, tutorials, third-party
plug-ins and extensions, templates, theme builders, and so on. So, whether you’re looking for
inspiration or code snippets, you’ll have everything you need to accelerate your progress.

You would think that having so many resources available, everyone would take advantage of it
and use it through their projects but believe it or not - that is not the case. Some developers waste
their time and slow project progress by skipping some great code snippets or resources. Although
you should not just blindly copy and paste, you must understand the good parts and adopt them
to your coding style and technical needs. The ability to find and sort out good resources and be
able effectively utilize it is also a skill and requires years of experience and knowledge.
 EXPERIMENT NO 2
Aim: Design the static web pages required for an online bookstore website. As it
must contain three frames Home page, Login page and catalogue page.
Description:

1. Home Page (index.html):

 <title>: Sets the title of the web page, which appears in the browser
tab.
 <link reel="stylesheet">: Links an external CSS file (styles.css) for
styling.
 <header>: Defines the header section of the web page, which typically
contains the website's title/logo and navigation menu.
 <h1>: The main heading of the Home Page, welcoming visitors to the
online bookstore.
 <nav>: The navigation menu containing links to the Home Page,
Login Page, and Catalog Page.
 <main>: The main content section of the web page.
 <section class="intro">: A section for introducing the website, with a
heading and a brief description.
 <section class="featured books">: A section where you can feature
popular or recommended books. In the comment, it suggests adding
book images and descriptions.

2. Login Page (login.html):

 This page is similar in structure to the Home Page but with a different
title.
 <section class="login-form">: A section dedicated to the login form.
 <form>: Defines an HTML form where users can enter their
credentials. The action attribute specifies where the form data should
 be sent (e.g., to a server-side script like "login_process.php" for
processing).
 <label>: Labels for the username and password input fields.
 <input type="text"> and <input type="password>: These are text
input fields for the username and password, respectively. The
required attribute ensures that users must fill them out.
 <input type="submit">: The submit button for the login form.

3. Catalog Page (catalog.html):

 Similar structure to the Home Page and Login Page with a different
title.
 <section class="book-list">: A section for displaying the book catalog.
 Inside this section, you would typically list the books available in your
online store. You can include details such as book titles, authors,
descriptions, and images.

Please note that this is static HTML, and for a functional online book store,
you would need to integrate server-side scripting (e.g., PHP, Node.js) to
handle user authentication and retrieve data from a database for the
catalog. Additionally, you would implement the necessary security
measures and create actual pages for book details, user profiles, and
shopping cart functionality.

The <link rel="stylesheet"> references a CSS file (not shown in the code)
that would contain the styles for your web pages, including fonts, colors,
layout, and other visual elements. The styling is essential to make your web
pages look appealing and user-friendly.
Is this conversation helpful so far?Co
C
CODE:
Home page (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Online Book Store</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to Our Online Book Store</h1>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="catalog.html">Catalog</a>
</nav>
</header>
<main>
<section class="intro">
<h2>Discover a World of Books</h2>
<p>Welcome to our online bookstore, where you can find a vast
collection of books on various topics.</p>
</section>
<section class="featured-books">
<h2>Featured Books</h2>
 <!-- Add featured book images and descriptions here -->
</section>
</main>
</body>
</html>
Login page: (Login.html)
<!DOCTYPE html>
<html>
<head>
<title>Login - Online Book Store</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Login to Online Book Store</h1>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="catalog.html">Catalog</a>
</nav>
</header>
<main>
 <section class="login-form">
<h2>Login</h2>
<form action="login_process.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
<br>
<input type="submit" value="Login">
</form>
</section>
</main>
</body>
</html>

Catalogue page (Catalogue.html)

<!DOCTYPE html>
<html>
<head>
 <title>Login - Online Book Store</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Login to Online Book Store</h1>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="catalog.html">Catalog</a>
</nav>
</header>
<main>
<section class="login-form">
<h2>Login</h2>
<form action="login_process.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
 <br>
<input type="submit" value="Login">
</form>
</section>
</main>
</body>
</html>

OUTPUT
HOME PAGE
OUTPUT LOGIN PAGE

OUTPUT CATALOGUE PAGE

 EXPERIMENT NO 3
AIM: A Login page for the online bookstore website. Containing Username and password.
Description :

HTML Structure:

<!DOCTYPE html>: This declaration specifies the document type and

version of HTML being used.
<html>: The root element of the HTML document.
<head>: Contains metadata about the document, such as the page title
and links to external resources (stylesheets, scripts).
<title>: Sets the title of the web page, which appears in the browser's
title bar or tab.
<style>: Embedded CSS for styling the page.
<body>: The main content of the web page.

CSS Styles:

The CSS rules define the appearance and layout of the login form.
It sets the background color, font, container size, margins, padding, and
styles for input fields and the submit button.

Container:

The .container div defines a box that contains the login form. It's
centered on the page and has a white background with a subtle
shadow.
Form Elements:

<h2>: Displays the heading "Book Store Login" at the top of the form.

<form>: Defines the login form. The action attribute specifies where the
form data is sent when submitted. In this example, it's set to
login_process.php, which is a hypothetical server-side script for
processing the login.

<input>: These are form input fields.

type="text": A text input field for the username.

type="password": A password input field for the password.
name: Attribute assigns names to these input fields. These names will
be used when processing the form data on the server.
placeholder: Provides a hint to the user about what to enter in the
fields.
required: Ensures that both fields must be filled out before the form can
be submitted.
<input type="submit">: This is a submit button. It triggers the form
submission when clicked. The value attribute sets the text on the
button, which is "Login" in this case.

Styling:

The CSS styles make the form visually appealing and user-friendly by
setting the input fields and button's appearance and positioning.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif.
background-color: #f2f2f2;
text-align: center;
}

.login-container {
margin: 150px auto.
padding: 20px.
width: 300px.
background-color: #fff.
border-radius: 5px.
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"], input[type="password"] {
width: 100%.
padding: 10px.
 margin: 8px 0.
border: 1px solid #ccc.
border-radius: 3px.
}

input[type="submit"] {
background-color: #007BFF.
color: #fff.
border: none.
padding: 10px 20px.
border-radius: 3px.
cursor: pointer.
}

input[type="submit"]:hover {
background-color: #0056b3.
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
 <form action="login_process.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
<br>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
OUTPUT login page:
 EXPERIMENT NO 4:
AIM: Catalogue Page: The catalogue page should contain the details of all the books available in the
website in a table

Description:

 The <title> sets the title of the catalog page.

 The <style> section within the <head> contains the CSS for styling the catalog
page. It defines the background, font, and layout styles.
 The content of the page is wrapped in a <body> tag.
 The .catalog-container <div> element creates a container for the catalog and applies
styling.
 Each book is represented by a <div> with the class .book. You can add more book
entries by duplicating these sections as needed.
 Inside each book <div, there is an <img> for the book cover image, <h3> for the
book title, and <p> elements for author and price information.
 A button with the text "Add to Cart" is included as a placeholder for adding
books to a shopping cart.

You would need to replace the example book images, titles, authors, and prices with
your actual book data. Additionally, in a real-world scenario, you might need to
implement dynamic functionality for adding items to a cart, handling user interactions,
and integrating with a backend system.

Code for catalogue page:

<!DOCTYPE html>
<html>
<head>
<title>Book Catalog - Online Book Store</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif.
background-color: #f2f2f2.
text-align center.
}
.catalog-container {
width: 80%.
margin: 0 auto.
background-color: #fff.
padding: 20px.
border-radius: 5px.
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1).
}
.book {
display: inline-block.
width: 30%.
 margin: 1%.
padding: 10px.
background-color: #fff.
border: 1px solid #ccc.
border-radius: 3px.
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1).
}
.book img {
width: 100%.
max-height: 200px.
object-fit: cover.
}
h3, p {
margin: 10px 0.
}
</style>
</head>
<body>
<div class="catalog-container">
<h1>Book Catalog</h1>

<div class="book">
<img src="book1.jpg" alt="Book 1">
<h3>Book Title 1</h3>
 <p>Author: Author Name 1</p>
<p>Price: $10.99</p>
<button>Add to Cart</button>
</div>

<div class="book">
<img src="book2.jpg" alt="Book 2">
<h3>Book Title 2</h3>
<p>Author: Author Name 2</p>
<p>Price: $12.99</p>
<button>Add to Cart</button>
</div>

<!-- Add more book entries as needed -->

</div>
</body>
</html>
OUTPUT OF CATALOGUE PAGE: