Scribd
Upload
12 views28 pages

exp5

The document outlines practical exercises for designing a website using HTML and CSS, focusing on creating an institute's webpage and a student registration form. It includes theoretical explanations of HTML and CSS, source code examples for both the institute's website and the registration form, and emphasizes responsive design principles. The content also highlights the importance of user experience and accessibility in web development.

Uploaded by

devansh kumar
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
12 views28 pages

exp5

The document outlines practical exercises for designing a website using HTML and CSS, focusing on creating an institute's webpage and a student registration form. It includes theoretical explanations of HTML and CSS, source code examples for both the institute's website and the registration form, and emphasizes responsive design principles. The content also highlights the importance of user experience and accessibility in web development.

Uploaded by

devansh kumar
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/ 28

PRACTICAL: 1

AIM: Write HTML program for designing your institute website. Display departmental information
of your institute on the website.

THEORY: HTML (HyperText Markup Language) is the standard language used to create and
structure content on the web. It uses tags to define elements like headings, paragraphs, images, and
links. Each HTML document follows a basic structure, including the <!DOCTYPE html>, <html>,
<head>, and <body> tags. HTML elements can have attributes that provide additional information,
such as links or image sources. Modern HTML, known as HTML5, introduces semantic tags, media
support, and APIs for responsive web design. HTML forms the foundation of web development,
alongside CSS for styling and JavaScript for interactivity.

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of
HTML elements on a web page. It allows developers to apply styles such as colors, fonts, spacing,
and positioning to create visually appealing designs. CSS uses selectors to target HTML elements
and apply specific styles, which can be organized in external stylesheets, embedded in the HTML
document, or included inline. Key concepts include the box model, responsive design with media
queries, and the cascade principle, which determines how styles are applied. CSS enhances user
experience and improves the accessibility of web content.

SOURCE CODE:

HTML Source Code:

<!DOCTYPE html>
<html>
<head>
<title>G.L. BAJAJ INSTITUTE OF TECHNOLOGY AND MANAGEMENT</title>

<style>
h1 {
text-align: center;
}
.department {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.column {
background-color: lightgray;
padding: 20px;
text-align: center;
border: 1px solid black;
}

</style>

1
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Header Section -->
<div class="header">
<div class="logo">
<a
href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/G.L._Bajaj_Institute_of_Techn
ology_and_Management%2C_Greater_Noida.jpg/2560px-
G.L._Bajaj_Institute_of_Technology_and_Management%2C_Greater_Noida.jpg">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/G.L._Bajaj_Institute_of_Techno
logy_and_Management%2C_Greater_Noida.jpg/2560px-
G.L._Bajaj_Institute_of_Technology_and_Management%2C_Greater_Noida.jpg" alt="G.L. BAJAJ
INSTITUTE OF TECHNOLOGY AND MANAGEMENT Logo" width="100%" height="200">
</a>

</div>
<h1>G.L. BAJAJ INSTITUTE OF TECHNOLOGY AND MANAGEMENT</h1>
<h1>(Greater Noida, U.P.)</h1>
</div>

<!-- Navigation Section -->


<div class="nav">
<ul>
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>About Us </b></a></li>
<li><a href="#"><b>Departments</b></a></li>
<li><a href="#"><b>Events </b></a></li>
<li><a href="#"><b>Gallery </b></a></li>
<li><a href="#"><b>Contact Us </b></a></li>
</ul>
</div>

<!-- Departmental Information Section -->


<h1><b>DEPARTMENT</b></h1>
<div class="department">
<div class="dept-box">
<h3><b>Computer Science and Engineering</b></h3>
<h4><b>HOD: Dr. Sansar Singh Chauhan</b></h4>
<p>The Department of Computer Science and Engineering offers undergraduate and
postgraduate programs in Computer Science and Engineering.</p>
</div>
<div class="dept-box">
<h3><b>Information Technology</b></h3>
<h4><b>HOD: Dr. Prem Chand</b></h4>
<p>The Department of Information Technology offers undergraduate and postgraduate
programs in Information Technology.</p>
</div>

2
<div class="dept-box">
<h3><b>Electronics and Communication Engineering</b></h3>
<h4><b>HOD: Dr. Satyendra Sharma</b></h4>
<p>The Department of Electronics and Communication Engineering offers undergraduate
and postgraduate programs in Electronics and Communication Engineering.</p>
</div>
<div class="dept-box">
<h3><b>Mechanical Engineering</b></h3>
<h4><b>HOD: Dr. V.R. Mishra</b></h4>
<p>The Department of Mechanical Engineering offers undergraduate and postgraduate
programs in Mechanical Engineering.</p>
</div>
</div>

<!-- Footer Section -->

<footer>
<div class="container">
<img src="glbajaj1.png" alt="Image Description">
<p>PLOT NO.2 , APJ ABDUL KALAM ROAD, KNOWLEDGE PARK 3, GREATER
NOIDA, UTTAR PRADESH, INDIA, 201306</p>
<p>Call: +91-120-2323800</p>
<p>Email: [[email protected]](mailto:[email protected])</p>
</div>
</footer>

</div>
</body>
</html>

CSS Source Code:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}

.header {
background-color: #e7ebe6;
padding: 20px;
text-align: center;
width: 100%;
flex: 1;
}

3
.logo {
width: 100%;
height: 300px;
margin: 20px;
}

.logo img {
width: 100%;
height: 100%;
}

.username {
font-size: 18px;
font-weight: bold;
color: #333;
text-align: right;
margin: 10px;
}

.nav {
background-color: #333;
padding: 10px;
text-align: center;
width: 100%;
flex: 1;
}

.nav ul {
list-style: none;
margin: 0;
padding: 0;
}

.nav li {
display: inline-block;
margin-right: 150px;
}

.nav a {
color: #e5e1e1;
text-decoration: none;
}

.department {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;

4
box-shadow: 0 0 10px rgba(47, 47, 46, 0.1);
width: 100%;
flex: 3;
}

.dept-box {
background-color: #f7f7f7;
padding: 20px;
margin: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.dept-box h3 {
margin-top: 0;
}

.dept-box h4 {
color: #c61919;
margin-bottom: 10px;
}

.footer {
background-color: #f0f0f0;
padding: 20px;
clear: both;
width: 100%;
flex: 1;
}

.footer-address {
text-align: center;
margin: 20px;
}

footer{
text-align: center;
}

5
OUTPUT:

6
PRACTICAL: 2

AIM: Write HTML and CSS program to design an entry form for student details/employee
information/faculty details.

THEORY: A student registration page using HTML and CSS collects student information through
a structured form. HTML provides the layout, including input fields such as name, email, phone,
address, and more. A prefix dropdown allows for title selection. CSS styles the form, enhancing
usability and appearance. It aligns elements like the student photo, heading, and submit button for a
visually appealing layout. Flexbox or text alignment centers the form’s content, while input fields
and labels are sized appropriately for readability on PC screens. Background images and custom
buttons improve user experience, creating a responsive and functional registration interface.

SOURCE CODE:

HTML Source Code:

<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
<style>

</style>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<div class="student-photo">
<img height="150" src="image.png" alt="Student Photo" class="circle">
<h1 class="heading"> <b> <u>Student Registration Form </u></b> </h1>
</div>
</div>
<form>
<div class="form-group">
<label for="prefix">Prefix:</label>
<select id="prefix" name="prefix" required>
<option value="">Select</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select>
</div>

7
<br>
<div class="form-group">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name" required>
</div>
<br>
<div class="form-group">
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last-name" required>
</div>
<br>
<div class="form-group">
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<br>
<div class="form-group">
<label for="university-roll-no">University Roll No:</label>
<input type="text" id="university-roll-no" name="university-roll-no" required>
</div>
<br>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<br>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
</div>
<br>
<div class="form-group">
<label for="course">Course:</label>
<ul>
<li><input type="checkbox" id="B.tech" name="B.tech" value="B.tech"> B.tech</li>
<li><input type="checkbox" id="M.tech" name="M.tech" value="M.tech">
M.tech</li>
<li><input type="checkbox" id="BBA" name="BBA" value="BBA"> BBA</li>
<li><input type="checkbox" id="MBA" name="MBA" value="MBA"> MBA</li>
</ul>
</div>
<br>
<div class="form-group">
<label for="year">Year:</label>

8
<select id="year" name="year" required>
<option value="">Select</option>
<option value="1st Year">1st Year</option>
<option value="2nd Year">2nd Year</option>
<option value="3rd Year">3rd Year</option>
</select>
</div>
<br>
<div class="form-group">
<label for="section">Section:</label>
<select id="section" name="section" required>
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="C">D</option>
<option value="C">E</option>
<option value="C">F</option>
</select>
</div>
<br>
<div class="form-group">
<label for="phone-no">Phone No:</label>
<input type="tel" id="phone-no" name="phone-no" required>
</div>
<br>
<div class="form-group">
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
</div>
<br>
<div class="declaration">
<input type="checkbox" id="declaration" name="declaration" required>
<label for="declaration">I hereby declare that the information provided is true and
accurate.</label>
</div>
<br>
<div class="form-footer">
<button type="submit" class="submit-btn">Submit</button>
</div>
</form>
</div>
</body>
</html>

9
HTML Source Code:

body {
background-color: rgb(211, 179, 250);
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.container {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba()

.form-footer {
display: flex;
justify-content: center; /* Centers the button horizontally */
margin-top: 20px; /* Optional: Add space above the button */
}

.submit-btn {
padding: 15px 30px;
font-size: 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

.submit-btn:hover {
background-color: #0056b3;
}

10
OUTPUT:

11
PRACTICAL: 3

AIM: Develop a responsive website using CSS and HTML. Website may be for
tutorial/blogs/commercial website.

THEORY: A tutorial website is an online platform designed to provide instructional content on


various topics. It typically features step-by-step guides, videos, articles, and interactive elements to
help users learn new skills or concepts. Topics can range from coding, graphic design, and cooking,
to languages, business, and more. These websites cater to different learning styles, offering both text-
based and multimedia content. Popular tutorial websites include platforms like Codecademy for
coding, Coursera for academic courses, and YouTube for diverse topics. Many tutorial sites offer
both free and paid content, making education more accessible to a global audience.

SOURCE CODE:

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Tutorial Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="logo">
<img src="image.jpg" alt="G.L. BAJAJ INSTITUTE OF TECHNOLOGY AND
MANAGEMENT Logo" width="100%" height="250">
</a>
</div>
<section id="home" class="hero-section">
<div class="container">
<h1>Welcome to Our Tutorials</h1>
<p>Learn something new today!</p>
</div>
</section>
<div class="nav">
<ul>
<li><a href="#"><b>Home </b></a></li>
<li><a href="#"><b>About Us </b></a></li>
<li><a href="#"><b>Departments</b></a></li>
<li><a href="#"><b>Events </b></a></li>
<li><a href="#"><b>Gallery </b></a></li>

12
<li><a href="#"><b>Contact Us </b></a></li>
</ul>
</div>

<section id="tutorials" class="tutorial-section">


<div class="container">
<h2>Latest Tutorials</h2>
<div class="tutorials-grid">
<div class="tutorial-card">
<h3>HTML Basics</h3>
<p>Learn the basics of HTML, the building block of the web.</p>
<a href="#">Start Learning</a>
</div>
<div class="tutorial-card">
<h3>CSS Fundamentals</h3>
<p>Style your website with CSS. Learn the fundamentals here.</p>
<a href="#">Start Learning</a>
</div>
<div class="tutorial-card">
<h3>JavaScript for Beginners</h3>
<p>Add interactivity to your website using JavaScript.</p>
<a href="#">Start Learning</a>
</div>
</div>
</div>
</section>

<section id="about" class="about-section">


<div class="container">
<h2><u>About Us</u></h2>
<h3>We provide the best tutorials to help you build a strong foundation in web
development.</h3></p>
<h3>Contact no.-123456789</h3></p>
<h3>Email- [email protected]</h3></p>
</div>
</section>

<footer>
<div class="container">
<p><h4>&copy;2024 Tutorial Website. All rights reserved.</h4></p>
</div>
</footer>
</body>
</html>

13
CSS CODE:

/* Global Styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
line-height: 1.6;
background-color: #f4f4f4;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.hero-section {
background-color: #2980b9;
}

header h1 {
text-align: center;
}

header nav ul {
display: flex;
justify-content: center;
list-style: none;
}

header nav ul li {
margin: 0 10px;
}

header nav ul li a {
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
transition: background-color 0.3s ease;
}

header nav ul li a:hover {


background-color: #444;

14
}

.hero-section {
color: #0b0d0e;
text-align: center;
}

.nav {
background-color: #333;
padding: 10px;
text-align: center;
width: 100%;
flex: 1;
}

.nav ul {
list-style: none;
margin: 0;
padding: 0;
}

.nav li {
display: inline-block;
margin-right: 150px;
}

.nav a {
color: #e5e1e1;
text-decoration: none;
}

h2 {
text-align: center;
margin-bottom: 2rem;
}

.tutorials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.tutorial-card {
background-color: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

15
.tutorial-card h3 {
margin-bottom: 1rem;
}

.tutorial-card a {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #2980b9;
color: #fff;
border-radius: 5px;
text-decoration: none;
margin-top: 1rem;
transition: background-color 0.3s ease;
}

.tutorial-card a:hover {
background-color: #3498db;
}

.about-section {
text-align: center;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1.5% 0;
margin-top: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
header nav ul {
flex-direction: column;
}

.tutorials-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 480px) {


.hero-section {
padding: 3rem 0;
}
}

16
OUTPUT:

17
PRACTICAL: 4

AIM: Write programs using HTML,CSS and Java Script for validation of input data.

THEORY: Input data validation ensures that user-entered data is correct, safe, and meets required
criteria before being processed. It can be done on the client side using JavaScript for quick feedback
and on the server side for security. Common checks include ensuring required fields are filled, data
types (like numbers or email formats) are correct, passwords match, and data is within allowed ranges
(e.g., age or date limits).

SOURCE CODE:

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Validation Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2><u>Input Validation Form</u></h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username"><br>

<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Enter your email"><br>

<label for="email">Mobile No.:</label>


<input type="text" id="Mobile No." name="Mobile No." placeholder="Enter your Mobile
No."><br>

<label for="email">Date Of Birth:</label>


<input type="text" id="Date Of Birth" name="Date Of Birth" placeholder="Enter your Date Of
Birth"><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your
password"><br>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword" name="confirmPassword"
placeholder="Confirm your password"><br>

18
<input type="submit" value="Register">
</form>

<p id="errorMessages" class="error"></p>


</div>

<script src="script.js"></script>
</body>
</html>

CSS CODE:

/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}

.container {
width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
text-align: center;
color: #333;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 8px;
font-weight: bold;
color: #555;
}

input[type="text"],
input[type="password"] {
padding: 10px;
margin-bottom: 15px;

19
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

input[type="submit"] {
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

input[type="submit"]:hover {
background-color: #218838;
}

.error {
color: red;
margin-top: 10px;
font-size: 14px;
}

Javascript CODE:

// script.js
function validateForm() {
let username = document.getElementById('username').value;
let email = document.getElementById('email').value;
let mobile = document.getElementById('mobile').value;
let dob = document.getElementById('dob').value;
let password = document.getElementById('password').value;
let confirmPassword = document.getElementById('confirmPassword').value;
let errorMessages = document.getElementById('errorMessages');

let errors = [];

// Username validation
if (username === "") {
errors.push("Username is required.");
} else if (username.length < 3) {
errors.push("Username must be at least 3 characters.");
}

// Email validation
let emailPattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
if (email === "") {

20
errors.push("Email is required.");
} else if (!emailPattern.test(email)) {
errors.push("Invalid email format.");
}

// Mobile number validation


let mobilePattern = /^[0-9]{10}$/; // Only 10 digits allowed
if (mobile === "") {
errors.push("Mobile number is required.");
} else if (!mobilePattern.test(mobile)) {
errors.push("Mobile number must be exactly 10 digits.");
}

// Date of Birth validation


if (dob === "") {
errors.push("Date of Birth is required.");
} else if (!isValidAge(dob)) {
errors.push("You must be at least 18 years old.");
}

// Password validation
if (password === "") {
errors.push("Password is required.");
} else if (password.length < 6) {
errors.push("Password must be at least 6 characters long.");
}

// Confirm Password validation


if (confirmPassword !== password) {
errors.push("Passwords do not match.");
}

// Display errors
if (errors.length > 0) {
errorMessages.innerHTML = errors.join("<br>");
return false; // Prevent form submission
}

// If no errors, show success confirmation


alert("Registered successfully!");
return true; // Form is valid and will be submitted
}

21
OUTPUT:

22
PRACTICAL: 5

Aim: Write a program in XML for creation of DTD, which specifies set of rules. Create a style
sheet in CSS/ XSL & display the document in internet explorer.

Theory:

XML (Extensible Markup Language): XML (Extensible Markup Language) is a flexible, text-
based format for storing and transporting data. It is both human-readable and machine-readable,
making it widely used for data exchange between systems. XML uses a tree-like structure of nested
elements, each enclosed by tags, to define data in a hierarchical way. While it doesn't specify how the
data should be displayed (unlike HTML), it allows users to define their own custom tags to represent
complex information. XML is platform-independent and often used in web services, configuration
files, and document formats such as Microsoft Office and RSS feeds.

DTD (Document Type Definition): DTD (Document Type Definition) is a set of rules that defines
the structure and allowed elements in an XML document. It specifies which elements, attributes, and
data types can appear, ensuring that the XML follows a consistent format. DTDs can be internal
(embedded in the XML file) or external (referenced from an outside file). By defining the permissible
structure, DTDs help validate XML documents, ensuring they conform to a particular standard.
However, DTDs have some limitations, like lack of support for namespaces, leading to the
development of more flexible alternatives like XML Schema (XSD).

XSL (Extensible Stylesheet Language): XSL (Extensible Stylesheet Language) is a family of


languages used to transform and render XML documents. It primarily consists of XSLT (XSL
Transformations), which defines how to transform XML data into other formats such as HTML, plain
text, or another XML structure. XSL also includes XSL-FO (Formatting Objects), used for formatting
XML documents for output, such as generating PDFs. By applying XSL stylesheets to an XML
document, users can control its presentation and structure. XSL is widely used for separating data
from its display, allowing dynamic content generation and platform-independent transformations of
XML data.

XSLT (Extensible Stylesheet Language Transformations): XSLT (Extensible Stylesheet Language


Transformations) is a language used to transform XML documents into different formats, such as
HTML, plain text, or other XML structures. XSLT works by defining rules in a stylesheet that dictate
how the elements in an XML document should be processed and rearranged. It operates on the XML
document’s tree structure and can filter, sort, or modify data. XSLT enables the separation of
content from presentation, making it easier to manage large datasets and present them in multiple
formats. It is often used in web development and data processing for dynamic content generation.

23
Source CODE:

XML CODE:

<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE bookstore [
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ATTLIST book category CDATA #REQUIRED>
]>

<bookstore>
<book category="fiction">
<title>"The Night Circus"</title>
<author>Erin Morgenstern</author>
<p>A magical and romantic story set in a mysterious, circus-like world.</p>
<price> $13.99</price>
</book>
<book category="non-fiction">
<title>"Atomic Habits"</title>
<author>James Clear</author>
<p>A practical guide to forming good habits and breaking bad ones for personal and professional
success.</p>
<price>$11.98</price>
</book>
<book category="Mystery/Thriller">
<title>"The Silent Patient"</title>
<author>Alex Michaelides</author>
<p>A psychological thriller about a woman who shoots her husband and then refuses to speak.</p>
<price>$14.99 </price>
</book>
</bookstore>

XSLT CODE:

<?xml version="1.0" encoding="UTF-8"?>


<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
<title>Bookstore</title>
<style>
body {

24
font-family: Arial, sans-serif;
}
.book {
margin: 10px 0;
padding: 10px;
border: 1px solid #333;
background-color: #f9f9f9;
}
.title {
font-size: 1.5em;
font-weight: bold;
color: darkblue;
}
.author {
font-style: italic;
color: darkgreen;
}
.price {
color: darkred;
font-weight: bold;
}
</style>
</head>
<body>
<h2><center><u>Bookstore Collection</u></center></h2>
<xsl:for-each select="bookstore/book">
<div class="book">
<div class="title">
<xsl:value-of select="title"/>
</div>
<div class="author">
<xsl:value-of select="author"/>
</div>
<div class="price">
$<xsl:value-of select="price"/>
</div>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

25
OUTPUT:

26
27
28

You might also like