St.
Francis Institute of Technology
(Engineering College)
An Autonomous Institute, Affiliated to University of Mumbai
NAAC A+ Accredited | CMPN, EXTC, INFT NBA Accredited | ISO 9001:2015 Certified
Experiment No – 2
Title: To design webpages using web technologies using HTML, CSS,
JavaScript, Bootstrap and XML
1. Aim: The aim of this practical is to design and develop responsive, interactive, and well-
structured webpages using various web technologies, including HTML, CSS, JavaScript,
Bootstrap, and XML.
2. Software used:
• Code Editor: Visual Studio Code, Sublime Text, Notepad++, or
any other text editor.
• Web Browser: Google Chrome, Mozilla Firefox, Microsoft
Edge, or any other modern web browser for testing and
debugging.
• Bootstrap Framework: Latest version of Bootstrap.
• Web Server: Local server setup like XAMPP, WAMP, or a live
server extension for testing JavaScript and XML
functionality.
3. Theory:
Web technologies enable the creation of structured, styled, and interactive webpages. Each
technology plays a distinct role in webpage development:
i. HTML (Hypertext Markup Language):
• HTML is the backbone of any webpage, defining the basic structure and layout of
content. It uses a series of elements (tags) to delineate parts of the webpage such as
headings (<h1> to <h6>), paragraphs (<p>), images (<img>), links (<a>), and forms
(<form>).
• HTML5, the latest version, introduces new semantic elements (<header>, <footer>,
<article>, <section>) that enhance accessibility and SEO by giving a clear
meaning to the page structure.
• HTML also supports multimedia elements such as <audio> and <video>, making it
easier to integrate media directly without third-party plugins.
ii. CSS (Cascading Style Sheets):
• CSS is responsible for the visual presentation of a webpage, allowing developers to
control layout, design, and aesthetics separately from the HTML structure. This
separation of structure (HTML) and style (CSS) is fundamental to clean,
maintainable code.
• CSS stylesheets can be linked externally, embedded internally within the HTML
document, or applied inline. External stylesheets are preferred for maintainability
and reusability.
• CSS includes advanced features like Flexbox and Grid for complex layouts, media
queries for responsive design, and animations for enhancing user experience.
• CSS frameworks, such as Bootstrap, simplify styling by providing pre-built classes and
styles, allowing developers to implement complex designs with minimal custom
code.
iii. JavaScript:
• JavaScript isa versatile scripting language that runs on the client side (in the web
browser), enabling interactive elements on webpages. It allows developers to
manipulate the Document Object Model (DOM), respond to user inputs, and perform
asynchronous operations (e.g., data fetching with APIs).
• JavaScript enhances user experience by allowing real-time updates to content without
reloading the page, validating form inputs instantly, and creating engaging
animations and effects.
• Modern JavaScript frameworks and libraries, such as React, Angular, and Vue.js,
extend JavaScript’s capabilities, allowing for the development of complex single-
page applications (SPAs).
iv. Bootstrap:
• Bootstrap is an open-source front-end framework that speeds up the development of
responsive, mobile-first webpages by offering a rich set of pre-designed components,
styles, and utilities.
• It is
based on a 12-column grid system, which allows developers to create flexible and
responsive layouts that automatically adjust to different screen sizes.
• Bootstrap includes ready-to-use components such as navigation bars, buttons, modals,
carousels, and cards, making it easy to add sophisticated UI elements without coding
them from scratch.
• The framework also provides JavaScript plugins for common web functionalities like
dropdowns, sliders, tooltips, and pop-ups, enhancing interactivity with minimal
effort.
v. XML (eXtensible Markup Language):
• XML is a markup language used to define and store structured data in a human-
readable format. It is often used for data interchange between systems, storing
configuration settings, and transmitting data between client and server in web
applications.
• Unlike HTML, which is predefined and used to display data, XML is extensible,
meaning developers can define their own tags to describe data in a meaningful way.
• XML data can be read and manipulated using JavaScript, allowing dynamic content
generation on webpages. For instance, data stored in an XML file can be loaded into
a webpage and displayed as a list, table, or other formats.
4. Algorithm:
• Design the HTML Structure:
• Start bycreating a basic HTML structure with <!DOCTYPE html>, <html>, <head>,
and <body> tags.
• Add essential elements like headers, footers, sections, and containers.
• Apply CSS for Styling:
• Link an external CSS file or add internal styles within the <head> section.
• Define styles for fonts, colors, layouts, and responsive design.
• Add JavaScript for Interactivity:
• Include JavaScript files or scripts to handle events, manipulate DOM elements, and
add interactive features like form validation, animations, or API calls.
• Integrate Bootstrap Components:
• Link Bootstrap CSS and JavaScript files from the CDN or download them locally.
• Use Bootstrapclasses for layout grids, navigation bars, buttons, modals, and other
components.
• Use XML for Data Handling (Optional):
• Create an XML file to store data (e.g., menu items, user settings) and use JavaScript to
read and display this data on the webpage.
• Test the Webpage:
• Open the webpage in a web browser to test the layout, responsiveness, and interactive
elements.
• Check for cross-browser compatibility and ensure that all scripts and styles are
working as expected.
• Debug and Optimize:
• Use browser developer tools to inspect elements, debug JavaScript, and refine CSS.
• Optimize the code for performance by minifying CSS and JavaScript files if necessary.
5. Code:
.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Portfolio</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/b
ootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<header class="bg-dark text-white p-3">
<div class="container">
<h1 class="text-center">My Portfolio</h1>
<nav class="navbar navbar-expand-lg navbar-dark">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link"
href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link"
href="#about">About</a></li>
<li class="nav-item"><a class="nav-link"
href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<main>
<section id="home" class="container mt-5">
<h2>Welcome to My Portfolio</h2>
<p>This is a simple portfolio webpage.</p>
</section>
<section id="about" class="container mt-5">
<h2>About Me</h2>
<p>Hello, I am a web developer with experience in
various technologies.</p>
</section>
<section id="contact" class="container mt-5">
<h2>Contact Me</h2>
<form id="contactForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control"
id="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control"
id="email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message"
rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-
primary">Submit</button>
</form>
</section>
<section id="projects" class="container mt-5">
<h2>Projects</h2>
<div id="project-list"></div>
</section>
</main>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
<p>© 2024 My Portfolio</p>
</footer>
<!-- Bootstrap JS and dependencies -->
<!-- Custom JS -->
<script src="script.js"></script>
</body>
</html>
-------------Style------------------
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
}
main {
padding: 20px 0;
}
.card {
margin-bottom: 20px;
}
-----------Script--------------
document.addEventListener('DOMContentLoaded',
function() {
const contactForm =
document.querySelector('#contactForm');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
alert('Form submitted!');
});
function loadXML() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.xml', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const parser = new DOMParser();
const xmlDoc =
parser.parseFromString(xhr.responseText, "text/xml");
const projects =
xmlDoc.getElementsByTagName("project");
let output = '';
for (let i = 0; i < projects.length; i++) {
output += `
<div class="card">
<div class="card-body">
<h5 class="card-
title">${projects[i].getElementsByTagName('name')
[0].textContent}</h5>
<p class="card-
text">${projects[i].getElementsByTagName('description')
[0].textContent}</p>
</div>
</div>
`;
}
document.querySelector('#project-list').innerHTML
= output;
}
};
xhr.send();
}
loadXML();
});
-------------XML-------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<projects>
<project>
<name>Project One</name>
<description>Description of project one.</description>
</project>
<project>
<name>Project Two</name>
<description>Description of project two.</description>
</project>
</projects>
6. Output:
7. Conclusion: Designing webpages using HTML, CSS, JavaScript, Bootstrap, and XML
provides a comprehensive approach to web development. Each technology contributes to
creating structured, visually appealing, responsive, and interactive webpages, enhancing the
overall user experience. Understanding and implementing these technologies prepares
students to develop modern web applications effectively.
8. Post experiment exercise:
• What are the main differences between HTML and XML, and when would you use each?
• How does Bootstrap help in creating responsive webpages?
• Describe how JavaScript can manipulate the DOM to change webpage content
dynamically.
• What are the advantages of using external CSS files over inline styles?
• Explain how Bootstrap’s grid system works and how it helps in designing layouts.
