BHARATIYA VIDYA BHAVAN’S COLLEGE

(Affiliated to Guru Gobind Singh Indraprastha University Dwarka

New Delhi)

BACHELOR OF COMPUTER APPLICATIONS (BCA)

YEAR: 2024-2028
SEMESTER 1
PRACTICAL FILE
WEB TECHNOLOGY LAB
Subject Code: BCA 105P
SUBMITTED TO: MS. NIDHI SHARMA
(Assistant Professor)
SUBMITTED BY: Utpal kumar singh
Enrollment Number:___________________
 Acknowledgement
I wish to express my heartfelt gratitude for the Successful
completion of my WEB TECHNOLOGY Practical file. This
achievement was only possible Due to the unwavering
support and guidance Provided by my teacher MS. Nidhi
sharma .Her Clear explanations and valuable insights
Significantly enriched my understanding.

Additionally, I want to thank my friends for their

Collaborative efforts, enhancing the quality of the
Project. Their input and encouragement were Invaluable
throughout this journey. Lastly, my Family’s constant
support and motivation played a Pivotal role in achieving
excellence in this Challenging endeavor.
 CERTIFICATE

This is to certify that Utpal Kumar Singh of first

year, having ENROLLMENT NUMBER –
__________________has submitted WEB
TECHNOLOGY LAB PRACTICAL in Partial
fulfilment for The award of Bachelors of
Computer applications (BCA) for the session
2024-2028. It has been found to be satisfactory
and hereby Approved for the submission.
 INDEX
S.NO. NAME OF PAGE DATE SIGNATURE
PROGRAM NO.
01. What is Web 5-6 15-11-24
Design?
02. What is CSS? 7-9 15-11-24

03. Types Of CSS 10-11 15-11-24

03. What Is 12-13 15-11-24
JavaScript?
04. What is XML 14-18 15-11-24
05. List of programs 19-20 15-11-24
06. Create a table to 21-22 15-11-24
implement with
rowspan and
columnspan
07. Implement all 23-24 15-11-24
types of list.
08 Create a college 25-2 15-11-24
registration form.
09. Create 4 frames 28-29 15-11-24
in a
page & display 4
images in those
frames.
10. Create login page 30-35 15-11-24
with validation.
12 Implement 36-39 16-11-24
onload event in
an html page.
14 Implement a 40-65 16-11-24
JAVASCRIPT to
file with regular
expression.
11 Implement and 66-67 16-11-24
load image in an
html page.
13 Insert a node & 68-71 16-11-24
attribute in html
page to DOM.
 What is Web Design?
Web Design is a field related to designing
websites on the Internet. Without a good
design, a website fails to perform well and
cannot produce a good impact on the user.
Design is a creative process that affects the
ranking of the brand. A good website design
helps to create an engaging online presence
that captivates the audience.

Before beginning to design a website a user

has to be clear about what web designing is. It
is the art of making websites look and feel
good to the user and providing easy access to
the website features to the client. It focuses on
improving the user experience rather than
development.
 Types of Web design
The following are the types in which you can do
Web Design:

Static Website: This type of design is used

when little or no interaction is required from
the user.
Dynamic Website: When user interaction is
required and information is to be displayed
according to the request then a dynamic
design pattern is followed.
E-commerce Website: This type of website
design is required when a business wants to
sell their products to the consumer.
Flat Design: Minimalist approach
characterized by clean, simple elements,
 vibrant colors, and absence of textures or
gradients.
Neuromorphic Design: Mimics physical
interactions and textures, creating interfaces
that blend realism with digital functionality.

Minimalism Design: Focuses on stripping away

unnecessary elements, favoring simplicity,
clean lines, and ample white space for an
uncluttered user experience.

What is CSS?
CSS stands for Cascading style sheets. It
describes to the user how to display HTML
elements on the screen in a proper format.
CSS is the language that is used to style HTML
documents. In simple words, cascading style
sheets are a language used to simplify the
process of making a webpage.
 CSS is used to handle some parts of the
webpage. With the help of CSS, we can control
the colour of text and style of fonts, and we
can control the spacing between the paragraph
and many more things. CSS is easy to
understand but provides strong control on the
Html documents.CSS is combined with HTML.

Here are the following advantages of CSS,

such as:

Faster page speed: It has a faster page speed

than other code’s page speeds. With the help
of the CSS rule, we can apply it to all
occurrences of certain tags in HTML
documents.
Better user experience: CSS makes a webpage
very attractive to the eyes. Also, CSS makes it
user-friendly. When the button or text is in a
proper format, it improves the user
experience.
Quicker Development time: With the help of
CSS, we can specify the format and style the
multiple pages into one code string. In
cascading style sheet, we can make a
duplicate copy of several website pages.
If we make a webpage, it has the same
formatting, looks, and feel, so with the help of
the CSS rule for one page, and it is sufficient
for all the pages.
Easy Formatting changes: In CSS, if we need to
make changes in the format, it is very easy; we
only need to change the one-page format it will
automatically apply to the other pages of CSS.
There is no need to correct individual pages in
a CSS style sheet. If we fix a CSS style sheet, it
will automatically update the other CSS style
sheet.
Compatibility: Compatibility is very important
in today’s age. If we create any webpage, it
should be very responsive and user-friendly.
CSS is used with Html to make webpage
design responsive.

Types of CSS
There are three types of CSS:

1. Inline CSS
Inline CSS is used to style the elements of
HTML documents. It is used in HTML to style
the attributes without using the selectors. It is
 challenging to manage the inline function in
websites compared to other types. It is very
helpful in Html in some situations.
2. Internal CSS :Internal CSS is used to design
the style single page effectively. It is more
time-consuming because we can only work on
one page or we need to style each web page. In
internal CSS, we style a single webpage
uniquely.
3. External CSS
External CSS is used to link all webpage with
an external file. CSS, which can be created in a
text file. It is more efficient for styling an
extensive webpage. It also increases the
readability of the CSS files.

What Is JavaScript?
JavaScript is a lightweight programming
language commonly used by web developers
 to add dynamic interactions to web pages,
applications, servers, and even games.

It works seamlessly alongside HTML and CSS,

complementing CSS in formatting HTML
elements while providing user interaction, a
capability that CSS alone lacks.

JavaScript’s widespread applications in web,

mobile app, and game development make it a
valuable language to learn.JavaScript uses
other coding languages as the basis for a web
page’s structure and content and builds off
that structure to create dynamic page
elements. One of the reasons for JavaScript’s
popularity is its ability to create complex and
secure web features using the simplest forms
of code. JavaScript, HTML and CSS all work
seamlessly together to create both simple and
 complex web page features.JavaScript and
HTML
Programmers use HTML, the most basic
programming language, as the outline for a
page’s content. JavaScript directly influences
and updates the HTML based on user
commands, such as the click of a mouse or
entering information into a web form.
JavaScript controls how the web page interacts
with or changes HTML content through these
commands.
JavaScript and CSS
CSS outlines the visual elements on a web
page. CSS interacts with JavaScript providing
guidelines for how JavaScript can influence the
web page. While HTML provides the content for
a web page, CSS modifies the visual display
through shape, colour, size and style.
JavaScript can only operate within the
boundaries set by the CSS code.
 What is XML (Extensible Markup
Language)?
XML (Extensible Markup Language) is used to
describe data. The XML standard is a flexible
way to create information formats and
electronically share structured data via the
public internet, as well as via corporate
networks.
XML is a markup language based on Standard
Generalized Markup Language (SGML) used for
defining markup languages.
XML’s primary function is to create formats for
data that is used to encode information for
documentation, database records,
transactions and many other types of data.
XML data may be used for creating different
content types that are generated by building
dissimilar types of content – includinweb,print
and mobile content – that are based on the
XML data.
Like Hypertext Markup Language (HTML),
which is also based on the SGML standard,
XML documents are stored as American
Standard Code for Information Interchange
(ASCII) files and can be edited using any text
editor.XML works by providing a predictable
data format. XML is strict on formatting; if the
formatting is off, programs that process or
display the encoded data will return an error.

For an XML document to be considered well-

formed – that is, conforming to XML syntax and
able to be read and understood by an XML
parser – it must be valid XML code. All XML
documents consist of elements; an element
acts as a container for data. The beginning and
end of an element are identified by opening
and closing tags, with other elements or plain
data within.
XML works by providing properly formatted
data that can be reliably processed by
programs designed to handle XML inputs.XML
entities
XML elements can also contain predefined
entities, which are used for special reserved
XML characters. Custom entities can be
defined to insert a predefined string of
characters for inclusion in an XML file.

The five standard predefined XML entities are

the following:

&lt; -- The less than symbol (<), also known as

the open angle bracket, is normally used in
XML to indicate the start of an XML tag. This
entity is used when the open angle bracket is
part of the content of the XML file.
&gt; -- The greater than symbol (>), also known
as the close angle bracket, is normally used in
XML to indicate the end of an XML tag. This
entity is used when the close angle bracket is
part of the content of the XML file.
&amp; -- The ASCII ampersand symbol (&) is
reserved in XML for indicating the start of an
XML entity. This entity is used when an
ampersand occurs within an XML element.
&quot; -- The ASCII double quote character (“)
is used in XML element tags to identify
optional attribute values of the element. For
example, an <emphasis> tag might include
options for emphasizing some text, such as
bold, italic or underline. This entity is used
when a double quote character appears in the
contents of an XML element.
&apos; -- The ASCII single quote character (‘),
also known as an apostrophe, is used in XML
element tags to identify option attributes of
the element. For example, an <emphasis> tag
might include options for emphasizing some
text, such as bold, italic or underline. This
entity is used when a single quote or
apostrophe appears in the contents of an XML
element.
LIST OF PROGRAMS

S.No. Name of the Experiment Pg.No. Date Signature

Design the following static web pages required for an online book store
web site.
10
1) HOME PAGE: The static home page must contain three
frames.
2) LOGIN PAGE
3) CATOLOGUE PAGE: The catalogue page should contain
the details of all the books available in the web site in a table.
4) REGISTRATION PAGE

Write JavaScript to validate the following fields of the Registration page.

11 1. First Name (Name should contains alphabets and the length
should not be less than 6 characters).
2. Password (Password should not be less than 6 characters
length).
3. E-mail id (should not contain any invalid and must follow the
standard pattern [email protected])
4. Mobile Number (Phone number should contain 10 digits only).
5. Last Name and Address (should not be Empty).

Develop and demonstrate the usage of inline, internal and external style sheet
using CSS
12

Develop and demonstrate JavaScript with POP-UP boxes and functions for
the following problems:
13
a) Input: Click on Display Date button using onclick( ) function Output:
Display date in the textbox
b) Input: A number n obtained using prompt
Output: Factorial of n number using alert
c) Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using alert
d) Input: A number n obtained using prompt and add another number
using confirm
Output: Sum of the entire n numbers using alert
 Write an HTML page that contains a selection box with a list of 5 countries.
When the user selects a country, its capital should be printed next in the list.
14
Add CSS to customize the properties of the font of the capital (color,bold and
font size).
PROGRAM: 1
Create a table to implement with Rowspan and Colspan.
HTML Table - Colspan
To make a cell span over multiple columns, use
the colspan attribute:

OUTPUT:
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:

OUTPUT:
PROGRAM: 2

Implement all types of list.

OUTPUT:
Ordered Lists

The Ordered lists have an order which is either numerical or alphabetical.

The <ol> tag is used to create ordered lists in HTML and just like
unordered list, we use <li> tag to define or show lists inside <ol> tag.

OUTPUT:
PROGRAM: 3
Create a college registration form.
HTML Registration Form is a web-based form designed to collect user
information such as name, email, password, and other details. It
typically includes input fields, validation, and a submit button to register
users on a website.
OUTPUT:
PROGRAM: 4
Create 4 frames in a page & display 4 images in those frames.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Image Frames</title>

<style>

/* Style for the container that holds the frames */

.frame-container {

display: flex; flex-

wrap: wrap; gap:

20px; justify-

content: center;

margin: 20px;

/* Style for each frame */

.frame { width:

200px; height: 200px;

border: 5px solid #333;

padding: 10px; box-

sizing: border-box;

overflow: hidden;

display: flex; justify-

content: center; align-

items: center;

background-color: #f4f4f4;

/* Style for images inside the frames */

.frame img {

width: 100%; height: 100%; object-fit: cover; /* Ensures the

image covers the frame without distortion */

}
 </style>

</head>

<body>

<div class="frame-container">

<div class="frame">

<img
src="file:///C:/Users/satvi/OneDrive/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83
%88/imag e1.jpg "alt="image1">

</div>

<div class="frame">

<imgsrc="
file:///C:/Users/satvi/OneDrive/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88/i
mage2.jp g"alt="image2">

</div>

<div class="frame">

<img
src="file:///C:/Users/satvi/OneDrive/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83
%88/imag e3.jpg "alt="image3">

</div>

<div class="frame">

<img
src="file:///C:/Users/satvi/OneDrive/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83
%88/imag e4.jpg "alt="image4">

</div>

</div>

</body>

</html>

OUTPUT:
PROGRAM: 5
Create a login page with validation.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style all input fields
*/ input { width:
100%; padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
}
/* Style the container for inputs */
.container {
background-color: #f1f1f1;
padding: 20px;
}
/* The message box is shown when the user clicks on the password field */
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
/* Add a green text color and a checkmark when the requirements are right
*/
.valid {
color: green;
}

.valid:before {
position: relative;
left: -35px;

content: "✔";
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "✖";
}
</style>
</head>
<body>
<h3>Password Validation</h3>
<p>Try to submit the form.</p>
<div class="container">
<form action="/action_page.php">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" required>
<label for="psw">Password</label>
<input type="password" id="psw" name="psw"
pattern="(?=.*\d)(?=.*[az])(?=.*[A-Z]).{8,}" title="Must contain at least
one number and one uppercase and lowercase letter, and at least 8 or more
characters" required>
<input type="submit" value="Submit">
</form>
</div>
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital =
document.getElementById("capital"); var number
= document.getElementById("number"); var
length = document.getElementById("length");
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
// When the user starts to type something inside the password
field myInput.onkeyup = function() { // Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid"); letter.classList.add("valid");

} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
// Validate capital letters var
upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters))
{ capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
// Validate numbers var numbers
= /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid"); }
// Validate length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
}
else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
</script>
</body>
</html>
OUTPUT:
PROGRAM: 6
Implement and load image in an html page.

OUTPUT:
PROGRAM: 7
Implement onload event in an html page.

OUTPUT:
PROGRAM: 8
Insert a node & attribute in html page to DOM.

OUTPUT:
PROGRAM: 9
Implement a JAVASCRIPT to file with regular
expression.

OUTPUT:
PROGRAM: 10
Design the following static web pages required for an online
book store website.
• HOME PAGE: The static homepage must contain three
frames.
• LOGIN PAGE:
• CATALOGUE PAGE: The catalogue page should contain the
details of all the books available in the website in a table.
• REGISTRATION PAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Books4MU</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<!-- font awesome cdn link -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.4/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-
icon.png">
<link rel="icon" type="image/png" sizes="32x32"
href="favicon_io/favicon32x32.png">
<link rel="icon" type="image/png" sizes="16x16"
href="favicon_io/favicon16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
</head>
<body>
 <!-- header section starts -->
<header class="header">
<div class="header-1">
<a href="#" class="logo"> <i class="fas fa-book"></i> Books4MU </a>
<form action="" class="search-form">
<input type="search" name="" placeholder="search here..." id="search-box">
<label for="search-box" class="fas fa-search"></label>
</form>
<div class="icons">
<div id="search-btn" class="fas fa-search"></div>
<a href="./cart.html" class="fas fa-shopping-cart"></a>
<div id="login-btn" class="fas fa-user"></div>
</div>
</div>
<div class="header-2">
<nav class="navbar">
<a href="./index.html">home</a>
<a href="#featured">featured</a>
<a href="#">category</a>
<a href="#reviews">reviews</a>
<a href="./feedback.html">feedback</a>
</nav>
</div>
</header>
<!-- header section ends -->
<!-- bottom navbar -->
<nav class="bottom-navbar">
<a href="#home" class="fas fa-home"></a>
<a href="#featured" class="fas fa-list"></a>
<a href="#arrivals" class="fas fa-tags"></a>
 <a href="#reviews" class="fas fa-comments"></a>
<a href="#feedback" class="fas fa-feedback"></a>
</nav>
<!-- login form -->
<div class="login-form-container">
<div id="close-login-btn" class="fas fa-times"></div>
<form action="">
<h3>sign in</h3>
<span>username</span>
<input type="email" name="" class="box" placeholder="enter your email"
id="">
<span>password</span>
<input type="password" name="" class="box" placeholder="enter your
password" id="">
<div class="checkbox">
<input type="checkbox" name="" id="remember-me">
<label for="remember-me"> remember me</label>
</div>
<input type="submit" value="sign in" class="btn">
<p>forget password ? <a href="#">click here</a></p>
<p>don't have an account ? <a href="#">create one</a></p>
</form>
</div>
<!-- home section starts -->
<section class="home" id="home">
<div class="row">
<div class="content">
<h3>upto 75% off</h3>
<p>If you’re an Engineering student and need a books, Books4MU has great
deals on a wide range of books. Shop for these books from top authors and avail
hugely discounted prices</p>
<a href="#" class="btn">shop now</a>
</div>
<div class="swiper books-slider”>
<div class="swiper-wrapper">
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-1.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-2.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-3.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-4.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-5.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-6.png" alt=""></a>
</div>
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website-/main/image/stand.png" class="stand" alt= ""></div>
</div>
</section>
<!-- home section ense -->
<!-- icons section starts -->
<section class="icons-container">
<div class="icons">
<i class="fas fa-shipping-fast"></i>
<div class="content">
<h3>free shipping</h3>
<p>order over $100</p>
</div>
 </div>
<div class="icons">
<i class="fas fa-lock"></i>
<div class="content">
<h3>secure payment</h3>
<p>100 secure payment</p>
</div>
</div>
<div class="icons">
<i class="fas fa-redo-alt"></i>
<div class="content">
<h3>easy returns</h3>
<p>10 days returns</p>
</div>
</div>
<div class="icons">
<i class="fas fa-headset"></i>
<div class="content”>
<h3>24/7 support</h3>
<p>call us anytime</p>
</div>
</div>
</section>
<!-- icons section ends -->
<!-- featured section starts -->
<section class="featured" id="featured">
<h1 class="heading"> <span>featured books</span> </h1>
<div class="swiper featured-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<a href="./product.html"> <img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-1.png" alt=""> </a>
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a>
</div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a> </div>
<div class="image">
<a href="./product.html"> <img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-2.png" alt=""> </a>
</div>
<div class="content”>
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>

<div class="image">
<a href="product.html"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-3.png" alt=""> </a> </div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icon”>
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-4.png" alt=""></div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a>
</div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a></div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-5.png" alt="">
</div>
<div class="content”>
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-6.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide book”>
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-7.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a></div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a></div>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-8.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-9.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-10.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<!-- featured section ends -->
<!-- newsletter section starts -->
<section class="newsletter">
<form action="">
<h3>subscribe for latest updates</h3>
<input type="email" name="" placeholder="enter your email" id="" class="box">
<input type="submit" value="subscribe" class="btn">
</form>
</section>
<!-- newsletter section ends -->
<!-- category section starts -->
<section class="arrivals" id="arrivals">
<h1 class="heading"> <span>Category</span> </h1>
<div class="swiper arrivals-slider">
<div class="swiper-wrapper">
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-1.png" alt=""></div>
<div class="content">
<h3>Semester 1</h3>
</div>
</a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website-/main/image/book-4.png" alt="">
</div>
<div class="content">
<h3>Semester 2</h3>
</div>
</a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-6.png" alt=””>
</div>
<div class="content">
<h3>Semester 3</h3>
</div> </a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-7.png" alt="">
</div>
<div class="content">
<h3>Semester 4</h3>
</div>
</a>
</div>
</div>
<div class="swiper arrivals-slider">
<div class="swiper-wrapper">
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-8.png" alt=""> </div>
<div class="content">
<h3>Semester 5</h3>
</div> </a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-9.png" alt=""></div>
<div class="content">
<h3>Semester 6</h3>
</div> </a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website-/main/image/book-10.png" alt=""> </div>
<div class="content">
<h3>Semester 7</h3>
</div> </a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website-/main/image/book3.png" alt=""> </div>
<div class="content">
<h3>Semester 8</h3>
</div></a>
</div>
</div>
</section>
<!-- category section ends -->
<!-- deal section starts -->
<section class="deal">
<div class="content">
<h3>deal of the day</h3>
<h1>upto 50% off</h1>
<p>Checkout before this deal expires at midnight.</p>
<a href="#" class="btn">shop now</a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/deal-img.jpg" alt="">
</div>
</section>
<!-- deal section ends -->
<!-- reviews section starts -->
<section class="reviews" id="reviews">
<h1 class="heading"> <span>client's reviews</span> </h1>
<div class="swiper reviews-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box”>
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-1.png" alt="">
<h3>ujjwal </h3>
<p>First of all it customer service is excellent. We get all author book for Mumbai
University. People should try here affordable and best price.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div> <div
class="swiper-
slide box">

<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-2.png" alt="">
<h3>marry </h3>
<p>Best book store almost all books are available for prepartion of exam related or
other books are available on reaonable price also.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-3.png" alt="">
<h3>Raghu </h3>
<p>Customer Service is good. Greetings to customer and making the required Books
available to Customers is very good.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-4.png" alt="">
<h3>Pooja </h3>
<p>This book centre have large amount of a books. The engineering study material all
semester books are available.then the peacefull and nice book centre.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-5.png" alt="">
<h3>Abhinav </h3>
<p>I migrated to the online platform on Just books because I was finding it difficult to
go to their libraries before closing time. </p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-6.png" alt="">
<h3>Sidddhi </h3>
<p>I love the product because it is very easy to find. The book are in really organized
manner you can easily find the book you want.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</section>
<!-- reviews section ends -->
<!-- feedback section starts -->
<section class="blogs" id="blogs">
<h1 class="heading"> <span>feedback</span> </h1>
<section class="newsletter">
<form action="">
<h3>give your feedback here..</h3>
<a href="./feedback.html" class="btn">Feedback</a>
<!-- <a href="./feedback.html"><input type="submit" value="feedback"> -->
</a> </form>
</section>
</section>
<!-- feedback section ends -->
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>our locations</h3>
<a href="#"> <i class="fas fa-map-marker-alt"></i> india </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> USA </a>
</div>
<div class="box">
<h3>quick links</h3>
<a href="./index.html"> <i class="fas fa-arrow-right"></i> home </a>
<a href="#"> <i class="fas fa-arrow-right"></i> featured </a>
<a href="#"> <i class="fas fa-arrow-right"></i> Category </a>
<a href="#"> <i class="fas fa-arrow-right"></i> reviews </a>
<a href="./feedback.html"> <i class="fas fa-arrow-right"></i> feedback </a>
</div>
<div class="box">
<h3>extra links</h3>
<a href="#"> <i class="fas fa-arrow-right"></i> account info </a>
<a href="#"> <i class="fas fa-arrow-right"></i> ordered items </a>
<a href="#"> <i class="fas fa-arrow-right"></i> privacy policy </a>
 <a href="#"> <i class="fas fa-arrow-right"></i> payment method </a>
<a href="#"> <i class="fas fa-arrow-right"></i> our serivces </a>
</div>

<div class="box">
<h3>contact info</h3>
<a href="#"> <i class="fas fa-phone"></i> 9167064054 </a>
<a href="#"> <i class="fas fa-phone"></i> 77388 44717 </a>
<a href="#"> <i class="fas fa-envelope"></i>
[email protected] </a>
<a href="#"> <i class="fas fa-envelope"></i>
[email protected] </a>
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
Store-
Website-/main/image/worldmap.png" class="map" alt=""> </div>
</div>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="https://twitter.com/priyankakorde" class="fab fa-twitter"></a>
<a href="https://www.instagram.com/im_priyankak_/" class="fab
fainstagram"></a>
<a href="https://www.linkedin.com/in/priyanka-korde-2029521a1/" class="fab
falinkedin"></a>
<a href="https://www.linkedin.com/in/rohit-m-3494521a2/" class="fab
falinkedin"></a>
</div>
<div class="credit"> created by <span>Priyanka Korde & Rohit Mishra
</span>copyright ©2022 all rights reserved! </div>
</section>
<!-- footer section ends -->
<!-- loader -->
<div class="loader-container">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/loader-img.gif" alt=""></div>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<!-- custom js file link -->
<script src="script.js"></script>
</body>
</html>

OUTPUT:
PROGRAM: 12

Develop and demonstrate the usage of inline, internal and

external style sheet using CSS.

INLINE STYLE SHEET USING CSS

OUTPUT:
INTERNAL STYLE SHEET USING CSS

OUTPUT:
EXTERNAL STYLE SHEET USING CSS

OUTPUT:
PROGRAM: 14
Write an HTML page that contains a selection box with a
list of 5 countries. When the user selects a country, its
capital should be printed next in the list. Add CSS to
customize the properties of the font of the capital( color,
bold and font size).
OUTPUT:
PROGRAM: 11
Write JavaScript to validate the following fields of the Registration
page.
1. First Name (Name should contains alphabets and the length
should not be less than 6 characters).
2. Password (Password should not be less than 6 characters
length).
3. E-mail Id (should not contain any invalid and must follow the
standard pattern name @domain.com).
4. Mobile Number (Phone number should contain 10 digits only).
5. Last Name and Address (should not be Empty).
OUTPUT:
PROGRAM: 13
Develop and demonstrate JavaScript with POP-UP boxes and functions for the
following problems:
a) Input: Click on Display Date button using onclick ( ) function.
Output: Display date in the textbox.
b) Input: A number n obtained using prompt.
Output: Factorial of n number using alert.

c) Input: A number n obtained using prompt.

Output: A multiplication table of numbers from 1 to 10 of n using alert.
d) Input: A number n obtained using prompt and add another number using
confirm.
Output: Sum of the entire n numbers using alert.

OUTPUT:
OUTPUT:

OUTPUT:
OUTPUT: