Professional Documents
Culture Documents
RWPD Theory Practical Seprate
RWPD Theory Practical Seprate
[Document subtitle]
Rwpd theory practical
Enr.No : - 216170307186
Class : - 3rd C
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls
and DOM manipulation.
● HTML/DOM manipulation
● CSS manipulation
● HTML event methods
● Effects and animations
● AJAX
● Utilities
From the above example, you can notice that the JavaScript code is lengthier
and complicated than the jQuery code. Both the code are performing the same work of
changing the background color but jQuery takes less code. You can work around other
examples, which indicates that jQuery minimizes the code and is less complicated to use.
● Easily Integrated with other IDE: Most .Net developers use Visual Studio and are
acquainted with NuGet. This is a part of the purpose why jQuery’s recognition keeps
developing with .Net developers. With the addition of the jQuery cell difficulty for
Windows, you currently have all the development benefits of the jQuery library for
the Windows Phone platform.
● Animation becomes easy: jQuery makes use of CSS, HTML, JavaScript, and AJAX.
In this method, you could practice an optimization approach on your website online
while not having to make unique changes for technologies like Flash. You can attain
great-searching outcomes as a way to maintain your audience engaged.
● Faster: Many search engines are considering page load time as one of the main factors
because it affects SEO. For this reason, every developer in today’s world wants to make
codes as concise as possible. The best way to make your website faster is by writing
less code and it is possible by using the simplest JavaScript library called jQuery.
● SEO friendly: SEO stand for search engine optimization and it is the process of
improving the quality and quantity of website traffic to a website or a web page from
search engines. So many popular search engines like google, bing and yahoo use SEO.
jQuery may be optimized for search engines, and there are a lot of plug-ins for
developers.
● Run in all major browsers: The team behind the jQuery library knows what are the
main issues that normally occurs in all major browsers. So they have developed this
library to ease the developer’s work.
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is: $(selector).action()
● A $ sign to define/access jQuery
● A (selector) to "query (or find)" HTML elements
● A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id,
classes, types, attributes, values of attributes and much more. It's based on the existing CSS
Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:
Examples:
● moving a mouse over an element
● selecting a radio button
● clicking on an element
The term "fires/fired" is often used with events. Example: "The keypress event is fired, the
moment you press a key".
$("p").click();
The next step is to define what should happen when the event fires. You must pass a
function to the event:
$("p").click(function(){
// action goes here!!
});
● Bootstrap is the most popular and powerful front-end (HTML, CSS, and JavaScript)
framework for faster and easier responsive web development.
● Bootstrap is a powerful front-end framework for faster and easier web development. It
includes HTML and CSS based design templates for creating common user interface
components like forms, buttons, navigation, drop downs, alerts, modals, tabs, accordions,
carousels, tool-tips, and so on.
● Bootstrap gives you ability to create flexible and responsive web layouts with much less
efforts.
● Bootstrap was originally created by a designer and a developer at Twitter in mid-
2010. Before being an open-sourced framework, Bootstrap was known as Twitter
Blueprint.
Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an
open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months
into
development, Twitter held its first Hack Week and the project exploded as developers of all
skill levels jumped in without any external guidance. It served as the style guide for internal
tools development at the company for over a year before its public release, and continues to
do so today.
Originally released on August 19, 2011, we’ve since had over twenty releases, including two
major rewrites with v2 and v3.
Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by
default with a mobile first approach.
Bootstrap 5 (released 2021) is the newest version of Bootstrap; It supports the latest, stable
releases of all major browsers and platforms. However, Internet Explorer 11 and down is
not supported.
The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5
has switched to JavaScript instead of jQuery.
Advantages of Using Bootstrap
Non-responsive Bootstrap
Disable the responsiveness of Bootstrap by fixing the width of the container and using the
first grid system tier.
What changes
Note the lack of the <meta name="viewport" content="width=device-width,
initial-scale=1">, which disables the zooming aspect of sites in mobile devices. In addition,
we reset our container's width and changed the navbar to prevent collapsing, and are basically
good to go.
Steps to disable responsive views
To disable responsive features, follow these steps. See it in action in the modified
template below.
1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs in
<head> tag.
2. Remove the max-width on the .container for all grid tiers with max-width: none
!important; and set a regular width like width: 970px;. Be sure that this comes after
the default Bootstrap CSS. You can optionally avoid the !important with media
queries or some selector-fu.
3. If using navbars, undo all the navbar collapsing and expanding behavior (this is too
much to show here, so peep the example).
4. For grid layouts, make use of .col-xs-* classes in addition to or in place of the
medium/large ones. Don't worry, the extra-small device grid scales up to all
resolutions, so you're set there.
What Is a Mobile-First Strategy?
● A mobile-first strategy is one whereby the mobile version of a website is
given priority over its desktop version.
● This practice was relatively rare in the past, but has become increasingly common.
● Going forward, mobile-first strategies will likely become the norm, due in part to the
decision of major search engines to prioritize the mobile versions of websites.
❖ Bootstrap Example:
➔ Fluid Container:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire
width of the viewport.</p>
</div>
</body>
</html>
Output:
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less
than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
Output:
<div class="container">
<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
</div>
</body>
</html>
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
</body>
</html>
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
</div>
</body>
</html>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote>
<p>For 50 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by
1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
</div>
</body>
</html>
Output:
→ Reversed Blockquote:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<h1>Blockquotes</h1>
<p>To show the quote on the right use the class .blockquote-reverse:</p>
<blockquote class="blockquote-reverse">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by
1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
</div>
</body>
</html>
Output:
→ Bordered table:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
→Condensed table:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<h2>Condensed Table</h2>
<p>The .table-condensed class makes a table more compact by cutting cell padding
in half:</p>
<table class="table table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
→Contextual classes:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color table rows or table cells. The classes that can be
used are: .active, .success, .info, .warning, and .danger.</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
→ Responsive tables:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally
on small devices (under 768px). When viewing on anything larger than 768px wide, there
is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Practical - 2
AIM: Install Bootstrap framework and understand various tags, attributes of HTML
and other necessary files to make responsive web page.
OBJECTIVES: To install Bootstrap framework and learn how to make Web Page
using Bootstrap.
THEORY:
Getting Started with Bootstrap
There are two ways to start using Bootstrap on your own web site.
You can:
What is CDN?
A content delivery network (CDN) refers to a geographically distributed group of servers that
work together to provide fast delivery of Internet content.
2. Download Bootstrap
Alternatively, you can also download the Bootstrap's CSS and JS files from their official
website and include in your project. There are two versions available for download,
compiled Bootstrap and Bootstrap source files. You can download Bootstrap 5 files from
here.
Site: https://getbootstrap.com/docs/5.0/getting-started/download/
QR Code :
Compiled download contains compiled and minified version of CSS and JavaScript files for
faster and easier web development. The compiled version also includes optional JavaScript
dependencies such as Popper bundled with Bootstrap JS (bootstrap.bundle.*). Whereas, the
source download contains original source files for all CSS and JavaScript, along with a local
copy of the docs.
Download and unzip the compiled Bootstrap. Now if you look inside the folders you'll find it
contains the compiled CSS and JS files (bootstrap.*), as well as the compiled and minified
CSS and JS (bootstrap.min.*). Use the bootstrap.min.css and bootstrap.bundle.min.js files.
Using the minified version of CSS and JS files will improve the performance of your website
and saves the precious bandwidth because of lesser HTTP request and download size.
Steps to download bootstrap framework.
Step 1: Open the Bootstrap website in your internet browser. Type
https://getbootstrap.com into the address bar, and press ↵ Enter or 𝖰 Return on your
keyboard.
Step 2: Click the Download button. This will open the "Download" page.
Step 3: Click the Download button below "Compiled CSS and JS." This will download
the complete Bootstrap files to your computer as a ZIP archive. If you're prompted, select
a
saving location for the Bootstrap ZIP.
Step 4: Extract the files from the ZIP archive. Find the ZIP file you just downloaded, and
double-click on it to extract all the files in it to the same folder.This will extract two folders
named "css" and "js." If your unzipper app does not automatically extract the files, check out
this article to see all the ways you can export a ZIP archive.
Step 5: Move the extracted folders to the same folder as your website HTML files. Open the
folder that contains all your website's HTML files, and drag the "css" and "js" folders here to
move them to the same folder as your website documents. You can now link the files to your
HTML files, and start using Bootstrap in your code.
Step 6: Right-click the HTML file you want to use with Bootstrap. You can use Bootstrap
in only one of your HTML files, or all of them.
Step 7: Hover over Open with on the right-click menu. A sub-menu will pop up with
compatible apps.
Step 8: Select your text editor program. This will open the selected HTML file in your text
editor. You can use a simple text editor like Notepad or TextEdit as well as a dedicated
code editor like Atom (https://atom.io) or Coda (https://panic.com/coda).
Step 9: Add the Bootstrap links to your HTML file's header. Before using Bootstrap code in
your HTML, you'll have to type or paste the lines below to the header of your code:
<link rel="stylesheet" a href="css/bootstrap.css"/>
<script src="js/bootstrap.js/>
If you want to link and use some of the other files from the css and js folders, just add new
lines into the header, and replace the css/bootstrap.css and js/bootstrap.js parts with the
names of the files you want to link.
Step 10: Check the placement of your Bootstrap links in the code. In the HTML's header,
both lines should be located between the <meta> lines and the <title> line.
Once you add these lines to the header, you can start using Bootstrap elements in this HTML
file. You can find a full list of all Bootstrap elements at
https://getbootstrap.com/docs/4.3/getting-started/introduction. Just click any category like
Layout or Components on the left-menu. Once you install Bootstrap, you can insert or
copy/paste any piece of code from here to your own code.
So here now bootstrap framework is installed successfully.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML File</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Step 2: Making this HTML File a Bootstrap Template
In order to make this plain HTML file a Bootstrap template, just include the Bootstrap CSS
and JS files using their CDN links. Also, you should include JavaScript files at the bottom of
the page, right before the closing </body> tag to improve the performance of your web pages.
<!DOCTYPE html>
<html lang="en">
</head>
<body>
<h1>Hello, world!</h1>
</script>
</body>
</html>
And we're all set! After adding the Bootstrap's CSS and JS files to our HTML page, we
can begin to develop any responsive site or application with the Bootstrap framework.
The attributes integrity and cross origin have been added to CDN links to implement Sub
resource Integrity (SRI). It is a security feature that enables you to mitigate the risk of attacks
originating from compromised CDNs, by ensuring that the files your website fetches (from a
CDN or anywhere) have been delivered without unexpected or malicious modifications. It
works by allowing you to provide a cryptographic hash that a fetched file must match.
Step 3: Saving and Viewing the File
Now save the file on your desktop as "bootstrap-template.html".
To open this file in a web browser, navigate to it, then right click on it, and select your
favourite web browser. Alternatively, you can open your browser and drag this file to it
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Practical 3
AIM:Design web page that shows department name, college name at center of web page
by using bootstrap framework and without using bootstrap framework.
Code(without bootstrap):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Computer Engineering Department</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body
{
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Government polytechnic Ahmedabad</h1>
<h2>Computer Engineering</h2>
</div>
</body>
</html>
Output:
Code (using Bootstrap):
<!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>Computer Engineering Department</title>
<!-- CSS only -->
<link href="bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="d-flex align-items-center justify-content-center" style="height:100vh">
<div class="text-center">
<h1>Government polytechnic Ahmedabad </h1>
<h2>Computer Engineering</h2>
</div>
</div>
</body>
</html>
Output:
EVALUATION:
Understanding / Problem solving Timely Completion
Involvement (4) Total (10)
(3) (3)
Faculty Signature
Theoy concept:
Theory behind centering content
When you want to center content on a web page, there are several ways to do it. One way is
to use CSS to set the left and right margins of an element to auto. This works for block-level
elements such as divs, headings, and paragraphs.
Another way is to use flexbox, which is a CSS layout model that allows you to align and
distribute elements along a container's main axis and cross-axis. By using the justify-content and
align-items properties, you can center content both horizontally and vertically.
With Bootstrap, you can use the text-center class to center content horizontally. This class sets
the text-align property of an element to center , which centers the text or other content inside
the element.
1. Create a new HTML file and add the necessary Bootstrap CSS and JavaScript files to your
document. You can do this by adding the following code to the head section of your
Practical 4
AIM:Display student information content on responsive web page by using container
and container-fluid classes.
<!-- Bootstrap container class -->
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Container Example</title>
<!-- Add Bootstrap Links -->
<link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css">
<script src="bootstrap-4.3.1-dist/js/jquery.min.js">
</script>
<script src="bootstrap-4.3.1-dist/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Since we are using the class container, the
below div will not take complete width of its parent.
-->
<div class="container" style="background: lightgray;">
<h1>Student Information</h1>
<p>Name: Gaurav Darji</p>
<p>Enrollment No: 216170307156</p>
<p>Semester and Division: 3rd C</p>
<p>Department: Computer Engineering</p>
<p>College: Government Polytechnic Ahmedabad</p>
<p>Subject Name(Subject Code): Responsive Web Page
Development (4330705)</p>
</div>
</body>
</html>
Output:
<!-- Bootstrap container-fluid class -->
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Container-fluid Example</title>
<!-- Add Bootstrap Links -->
<link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css">
<script src="bootstrap-4.3.1-dist/js/jquery.min.js">
</script>
<script src="bootstrap-4.3.1-dist/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Since we are using the class container-fluid, the
below div will expand whenever the viewport is resized. -->
<div class="container-fluid" style="background: blue;">
<h1>Student Information</h1>
<p>Name: Gaurav Darji</p>
<p>Enrollment No: 216170307156</p>
<p>Semester and Division: 3rd C</p>
<p>Department: Computer Engineering</p>
<p>College: Government Polytechnic Ahmedabad</p>
<p>Subject Name(Subject Code): Responsive Web Page
Development (4330705)</p>
</div>
</body>
</html>
Output:
EVALUATION:
Understanding / Problem solving Timely Completion
Involvement (4) Total (10)
(3) (3)
Faculty Signature
Theoy concept:
Theory behind responsive web design
Responsive web design is a technique used to create web pages that adapt to different screen
sizes and devices. This ensures that the content of the web page is readable and accessible on
any device, whether it's a desktop computer, tablet, or smartphone.
One way to achieve responsive web design is by using CSS media queries. Media queries allow
you to set different styles for different screen sizes, enabling you to create a layout that adapts
to the screen size of the device.
With Bootstrap, you can use the container and container-fluid classes to create responsive
layouts. The container class creates a fixed-width container that adjusts its size based on the
screen size, while the container-fluid class creates a full-width container that expands to fill the
entire screen.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practical 4</title>
</head>
<body>
<div class="container">
aquamarine;"> aquamarine
</div>
blueviolet
</div>
bisque;"> bisque
</div>
</div>
<div class="row">
</div>
pink
</div>
deepskyblue
</div>
gold
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
EVALUATION:
Understanding / Problem solving Timely Completion
Involvement (4) Total (10)
(3) (3)
Faculty Signature
Theoy concept:
Theory behind offset columns
Bootstrap's offset classes allow you to add empty space to the left or right of a column. This is
useful when you want to create a gap between two columns or when you want to center a
column horizontally.
To use offset columns, you can use the .offset-* classes. The * indicates the number of columns
to offset. For example, .offset-2 will offset a column by 2 columns.
To use reordering columns, you can use the .order-* classes. The * indicates the order of the
column. For example, .order-1 will set the order of the column to 1.
Creating a responsive web page using offset columns, reordering columns, and nesting
columns
To create a responsive web page using offset columns, reordering columns, and nesting
columns, you can follow these steps:
1. Create a new HTML file and add the necessary Bootstrap CSS and JavaScript files to your
document. You can do this by adding the following code to the head section of your
2. Create a row div element and add two column div elements inside it. Use the col class
to create two equal columns.
3. Use the .offset-* classes to add a gap between the two columns. For example, you can add an
offset of 2 columns to the second
4. Use the .order-* classes to change the order of the columns for different screen sizes.
For example, you can set the first column to appear first on mobile devices and last on
desktop devices:
5.
Practical 6
AIM:Create responsive web page of your class time table by usingbootstrap grid
system CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.mi
n.css">
</head>
<body>
</div>
<center>
<div>
<thead>
<tr>
<th scope="col">10:30-11:30</th>
<th scope="col">11:30-12:30</th>
<th scope="col">12:30-1:30</th>
<th scope="col">2:00-3:00</th>
<th scope="col">3:00-4:00</th>
<th scope="col">4:00-5:00</th>
<th scope="col">5:00-6:00</th>
</tr>
</thead>
<tr>
<td>OS</td>
<td>PYTHON</td>
<td colspan="2">DS</td>
</tr>
<tr>
<td>DS</td>
<td>RDBMS</td>
<td>OS</td>
<td colspan="2">PYTHON</td>
<td colspan="2">RDBMS</td>
</tr>
<tr>
<td colspan="2">OS</td>
<td>DS</td>
<td colspan="2">RDBMS</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>LIBRARY</td>
<td>RDBMS</td>
<td>DS</td>
<td colspan="2">RDBMS</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>PYTHON</td>
<td colspan="2">PYTHON</td>
<td>OS</td>
<td>RDBMS</td>
<td colspan="2">DS</td>
</tr>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</center>
</body>
</html>
Output:
Mobile View:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept:
You can also use additional classes to control the layout of columns, such as the .offset-*
classes to add empty space to the left or right of a column, the .order-* classes to change the
order of columns, and the .text-* classes to align text within a column.
Creating a responsive web page for a class timetable using the Bootstrap grid system
To create a responsive web page for a class timetable using the Bootstrap grid system, you
can follow these steps:
1. Create a new HTML file and add the necessary Bootstrap CSS and JavaScript files to your
document. You can do this by adding the following code to the head section of your
2. Create a container div element to hold the rows and columns for the timetable:
3.
Practical 7
AIM:Shows at least five to six co-curricular/Extra activities of student that includes
multiple images and short description of each activity on responsive web page using
responsive images with different styles and responsive tables with 3 to 4 different styles
such as hover state when mouse over, different color of each row, table with striped row
etc.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Co-curricular Activities</title>
>
</head>
<body>
<tr>
<td><h4>ART</h4>
Children are naturally creative. Ekam Early Learning Centre includes art in everyday
classroom activities to make exploration not just exciting, but also educational. Our
environment enables free art exploration to strengthen motor skills, cognitive development,
focus capabilities and to tickle both sides of the brain for accelerated brain development. Our
Art Atelier is one of the most favourite places for children at school. It is where they
thoroughly enjoy using a variety of tools like rollers, brushes, stamps, sponges, leaves, stems,
forks and a lot of other types of natural and synthetic materials for art.</td>
</tr>
<tr>
<td><h4>MUSIC</h4>
Music ignites all areas of child development and skills for school readiness, including
intellectual, social-emotional, motor, language, and overall literacy. It helps the body and
mind work together. Many surveys on Brain Development conducted around the world
conclude that including music in early learning makes children quicker learners & easily
adaptable. At Ekam Early Learning Centre, vocal & instrumental music is an integral part of
the curriculum and starts at the earliest stage. We have a well-equipped Music studio, and our
unique music program immerses our little ones in the language and joy of music at
school.</td>
</tr>
<tr>
<td><h4>DANCE</h4>
The ability to start dancing develops in children before they can even form words!
Through Dance, children learn a vast range of motion, body awareness, balance, muscle
strength, coordination, and endurance. It is not only entertaining but also develops social
skills and the ability to express and emote. Ekam Early Learning Centre seamlessly includes
Dance into the curriculum to enable kinesthetic learning.</td>
</tr>
<tr>
<td><h4>GARDENING</h4>
Gardening engages all of the senses! Squish your hands in the dirt. How does it feel?
Let’s add some water. What does it look like now? How does that flower smell? We grew
this vegetable let’s eat it and see how it tastes! Hear that crunch when we bite into it?</td>
</tr>
<td><h4>MINDFULNESS</h4>
</tr>
</table>
<script src="js/bootstrap.bundle.js"
"></script>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept:
1. Debate Club The debate club is a great platform for students to improve their critical
thinking and communication skills. Students participate in weekly debates and public
speaking competitions to develop their confidence and persuasive skills.
2. Robotics Club The robotics club is perfect for students who are interested in STEM
subjects. In this club, students design, build and program robots to compete in regional
and national robotics competitions.
3. Music Band The music band is a popular extra-curricular activity for students who are
passionate about music. Students learn to play different instruments, sing and perform
in front of live audiences.
4. Community Service Club The community service club is an excellent way for students to
give back to society. In this club, students participate in different social activities like
organizing charity events, cleaning public spaces and helping the elderly.
5. Sports Teams Sports teams are a great way for students to stay physically active and
develop teamwork skills. Students participate in different sports like basketball, football,
volleyball, and track and field events.
6. Drama Club The drama club is a fantastic platform for students who have a passion for
acting and performing arts. Students learn different acting techniques, stage
production, and perform in different plays and theatre productions.
These are just a few examples of co-curricular and extra activities that students can participate
in. These activities help students develop their skills, explore their passions, and create lasting
memories.
Practical 8
AIM:Use bootstrap typography to create responsive web page on given blog
topic. Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
</h3>
</br></br><h2>Display headings</h2><p>
Traditional heading elements are designed to work best in the meat of your page content.
When you need a heading to stand out, consider using a display heading—a larger,
slightly more opinionated heading style.</p>
<p class="lead">When you're first approaching the question of how to start a blog, check
out Zion Adventure Photog. The blog has a dual purpose: owner Arika’s photography
portfolio and establishing her expertise of the Zion area. With these, she’s able to make
money blogging.</p>
<p>The blog’s ruggedly playful green and yellow color scheme evokes nature and sunshine.
The blog’s homepage features visual testimonials of happy clients enjoying their adventures.
She embeds her Instagram Feed directly onto her site, spreading the word about her service
and drawing people deeper into her brand.
The blog design mirrors its content in depth and expertise. Detailed posts provide detailed
guidance on activities such as canyoneering and hiking. From the written content, it’s clear
that Arika is an expert in her field, and the visuals confirm her photography skills.
</p>
<blockquote class="blockquote">
</blockquote>
<p>The blog’s ruggedly playful green and yellow color scheme evokes nature and sunshine.
The blog’s homepage features visual testimonials of happy clients enjoying their
adventures. She embeds her Instagram Feed directly onto her site, spreading the word about
her service and drawing people deeper into her brand.
The blog design mirrors its content in depth and expertise. Detailed posts provide detailed
guidance on activities such as canyoneering and hiking. From the written content, it’s clear
that Arika is an expert in her field, and the visuals confirm her photography skills.
</p>
<dl class="row">
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside
your definition list.</dd>
</dl>
</dd>
</dl>
</div>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept: Blog topic: "The Importance of Time Management in Student Life"
The importance of time management cannot be overstated, especially for students who are
constantly juggling multiple tasks and responsibilities. Here's how Bootstrap typography can
be used to create a responsive web page on this topic:
1. Header Section In the header section, we can use Bootstrap's jumbotron class to create a
full-width header with a large title and subtitle that highlights the importance of time
management.
2. Main Content Section In the main content section, we can use Bootstrap's container class
to create a centered content area with a row and two columns. The first column can
contain the main article text, while the second column can have a list of tips for
effective time management.
3. Main Content Section In the main content section, we can use Bootstrap's container class
to create a centered content area with a row and two columns. The first column can
contain the main article text, while the second column can have a list of tips for
effective time management.
4. Overall, by using Bootstrap typography, we can create a responsive web page that is visually
appealing and easy to read on different devices. The page is designed with the user in mind,
making it easy to navigate and understand the importance of time management in student life.
Practical 9
AIM:Design responsive web page for student registration form using bootstrap
form layout, form control, bootstrap buttons.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="/action_page.php">
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<label for="email">Email:</label>
</div>
<div class="form-group">
<label for="password">Password:</label>
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<label for="enroll">Gender:</label>
<div class="form-group">
<label for="address">Address:</label>
</div>
</form>
</div>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept:
Step 1: Set up your HTML file To get started, create a new HTML file and add the necessary Bootstrap
and jQuery libraries. You can download them from the Bootstrap website or link to them directly from
a CDN.
Step 2: Add form controls Next, we'll add form controls for the student's name, email address, phone
number, and date of birth. We'll also add a dropdown menu for the student's program of study, and a
checkbox for agreeing to the terms and conditions.
Step 3: Add form buttons Now we'll add two buttons to the form: a "Submit" button and a "Reset"
button. We'll use the btn and btn-primary classes for the "Submit" button, and the btn and btn-secondary
classes for the "Reset" button.
html
Practical 10
AIM:Create various types of menus using bootstrap menu components such as right
aligned dropdown menu, drop up menu, adding headers of each item etc. and glyph
icons components.
Code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cs
s/bootstrap.min.css">
<style></style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Minella's</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Menu <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
aria-expanded="false">
More
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></
script>
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></s
cript>
</body>
</html>
Output :
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.mi
n.css">
<style>
.dropdown-submenu {
position: relative;
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
</style>
</head>
<body>
<span class="navbar-toggler-icon"></span>
</button>
</li>
ODD SEM
</a>
<li>
<div class="btn-group">
</div>
</li>
</ul>
</li>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
</div>
</li>
</ul>
</li>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
</div>
</li>
</ul>
</li>
</ul>
</li>
EVEN SEM
</a>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
</div>
</li>
</ul>
</li>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
</div>
</li>
</ul>
</li>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>< script>
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
$subMenu.toggleClass('show');
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
</script>
</body>
</html>
Output :
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept: a responsive web page that displays odd and even semesters as a menu,
and courses of each semester as submenus using button groups and button toolbar
Practical 12
AIM:Use different bootstrap input groups components to create responsive webpage
for job application or any other kind of application.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="container">
<form action="/action_page.php">
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<label for="email">Email:</label>
</div>
<div class="form-group">
</div>
<div class="form-group">
<label for="phn">Phone Number:</label>
</div>
<div class="form-group">
<label for="sm">LinkedIn:</label>
</div>
<div class="form-group">
<label for="resume">Resume:</label>
</div>
</form>
</div>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia magna id sapien
fermentum, a convallis mi semper. Praesent ultricies orci eget nunc convallis, eu
vulputate est semper. Fusce bibendum hendrerit turpis, non placerat mauris bibendum et.
Nam quis arcu enim. Ut maximus est quis metus pretium, sit amet consequat orci
vestibulum. Pellentesque ac justo a elit ornare ultrices. Aenean tempor nunc vitae
mauris bibendum congue
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
</ul>
<div class="tab-content">
<h3>HOME</h3>
<p>A home page (or homepage) is the main web page of a website. The term may also
refer to the start page shown in a web browser when the application first opens. Usually,
the
home page is located at the root of the website's domain or subdomain. For example, if the
domain is example.com, the home page is likely located at www.example.com/.</p>
</div>
<h3>Art</h3>
<p>Art is a diverse range of human activity, and resulting product, that involves
creative or imaginative talent expressive of technical proficiency, beauty, emotional power,
or conceptual ideas.
There is no generally agreed definition of what constitutes art,and its interpretation has
varied greatly throughout history and across cultures. In the Western tradition, the three
classical branches of visual art are painting, sculpture, and architecture. Theatre, dance, and
other performing arts, as well as literature, music, film and other media such as interactive
media, are included in a broader definition of the arts. Until the 17th century, art referred to
any skill or mastery and was not differentiated from crafts or sciences. In modern usage after
the 17th century, where aesthetic considerations are paramount, the fine arts are separated
and distinguished from acquired skills in general, such as the decorative or applied arts.
The nature of art and related concepts, such as creativity and interpretation, are explored
in a branch of philosophy known as aesthetics.The resulting artworks are studied in the
professional fields of art criticism and the history of art</p>
</div>
<h3>Music</h3>
<p>Music is generally defined as the art of arranging sound to create some combination
of form, harmony, melody, rhythm or otherwise expressive content. Exact definitions of
music vary considerably around the world, though it is an aspect of all human societies, a
cultural universal. While scholars agree that music is defined by a few specific elements,
there is no consensus on their precise definitions. The creation of music is commonly divided
into musical composition, musical improvisation, and musical performance, though the topic
itself extends into academic disciplines, criticism, philosophy, and psychology. Music may
be performed or improvised using a vast range of instruments, including the human
voice.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam lacinia magna id sapien fermentum, a convallis mi semper. Praesent
ultricies orci eget nunc convallis, eu vulputate est semper. Fusce bibendum
hendrerit turpis, non placerat mauris bibendum et.
Nam quis arcu enim. Ut maximus est quis metus pretium, sit amet consequat
orci vestibulum. Pellentesque ac justo a elit ornare ultrices. Aenean tempor nunc
vitae mauris bibendum congue
Practical 14
AIM:Use Nav bar component to create responsive fixed to top menu design
includes logo, menu, drop down menu, form input elements such as sign-up button,
search mechanism etc. And fixed to bottom menu design contains footer
information.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhl
ZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<img src="logo.jpg"
Paradice
</a>
<span class="navbar-toggler-icon"></span>
</button>
<li class="nav-item">
</li>
aria-expanded="false">
More
</a>
<ul class="dropdown-menu">
<li>
<hr class="dropdown-divider">
</li>
</ul>
</li>
</ul>
</form>
</div>
</div>
</nav>
A home page (or homepage) is the main web page of a website. The term may also
refer to the start page shown in a web browser when the application first opens. Usually, the
home page is located at the root of the website's domain or subdomain. For example, if the
domain is example.com, the home page is likely located at www.example.com/.</p>
Art is a diverse range of human activity, and resulting product, that involves creative or
imaginative talent expressive of technical proficiency, beauty, emotional power, or
conceptual ideas.
There is no generally agreed definition of what constitutes art,and its interpretation has
varied greatly throughout history and across cultures. In the Western tradition, the three
classical branches of visual art are painting, sculpture, and architecture. Theatre, dance, and
other performing arts, as well as literature, music, film and other media such as interactive
media, are included in a broader definition of the arts. Until the 17th century, art referred to
any skill or mastery and was not differentiated from crafts or sciences. In modern usage after
the 17th century, where aesthetic considerations are paramount, the fine arts are separated
and distinguished from acquired skills in general, such as the decorative or applied arts.
The nature of art and related concepts, such as creativity and interpretation, are explored
in a branch of philosophy known as aesthetics.The resulting artworks are studied in the
professional fields of art criticism and the history of art</p>
>Music is generally defined as the art of arranging sound to create some combination of
form, harmony, melody, rhythm or otherwise expressive content. Exact definitions of music
vary considerably around the world, though it is an aspect of all human societies, a cultural
universal. While scholars agree that music is defined by a few specific elements, there is no
consensus on their precise definitions. The creation of music is commonly divided into
musical composition, musical improvisation, and musical performance, though the topic itself
extends into academic disciplines, criticism, philosophy, and psychology. Music may be
performed or improvised using a vast range of instruments, including the human voice.
</p>
<div class="container-fluid">
<span class="navbar-toggler-icon"></span>
</button>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<span class="navbar-text">
</span>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTP
OOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept:
how to use the Nav bar component to create a responsive fixed-to-top menu design that
includes a logo, menu, dropdown menu, form input elements such as sign-up button, search
mechanism, and a fixed-to-bottom menu design that contains footer information:
1. Start with creating the basic structure of the page using HTML5
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhl
ZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<img src="image.png"
Icon
</a>
</div>
</nav>
</ol>
</nav>
<h2>Example of Jumbotron</h2>
<h1>Jumbotron Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip
ex ea commodo consequat..</p>
</div>
</div>
Inbox
99+
</span>
</button>
<nav class="mx-4">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
</li>
<li class="page-item">
</li>
</ul>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTP
OOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Practical 16
Following tasks to be performed using bootstrap progress bars component. A) Creating
progress bars B) Adding label to progress bars C) Creating multi-color, stripped and
animated progress bars D) Changing value of progress bar dynamically using
JavaScript
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhl
ZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="col">
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress my-2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
<div class="progress my-2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
<div class="col">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTP
OOmMi466C8"
crossorigin="anonymous"></script>
<script>
var val=0;
function increment()
val+=10;
document.getElementById("myProgressBar").style.width=val+"%";
</script>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept:
A) Creating Progress Bars: To create a progress bar, you can use the following HTML code:
The progress class creates a container for the progress bar, and the progress-bar class creates
the progress bar itself. You can customize the width of the progress bar using the style
attribute, which should be set to the percentage of completion you want to display.
B) Adding Label to Progress Bars: To add a label to a progress bar, you can use the progress-bar
class with the progress-bar-striped and progress-bar-animated classes, like this:
In this example, the label "75%" is displayed inside the progress bar.
C) Creating Multi-Color, Stripped, and Animated Progress Bars: To create a multi-color,
stripped, or animated progress bar, you can add additional classes to the progress-bar class. For
example, to create a striped progress bar, you can add the progress-bar-striped class:
To create a multi-color progress bar, you can use the bg-* classes to set the background color
of the progress bar. For example:
In this example, four progress bars are displayed side by side, each with a different
background color.
To create an animated progress bar, you can add the progress-bar-animated class:
D) Changing the Value of Progress Bar Dynamically using JavaScript: You can change the value
of a progress bar dynamically using JavaScript by updating the style attribute of the progress-bar
element. Here's an example:
Practical 17
Use media, rounded media, Nested media object to create responsive web page for
all family members in hierarchical order.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD
69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="media">
<div class="media-body">
<h5 class="mt-0">GrandFather</h5>
<p>Will you do the same for me? It's time to face the music I'm no longer your
muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix
inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take
me to utopia.</p>
<div class="media">
<img src="f.jpg"mr-3" alt="..." width="250" height="99">
<div class="media-body">
<h5 class="mt-0">Father</h5>
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of
our love, angels are crying from up above. Can't replace you with a million rings. Boy,
when you're with me I'll give you a taste. There’s no going back. Before you met me I was
alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
</a>
<div class="media-body">
<h5 class="mt-0">Son</h5>
<p>Greetings loved ones let's take a journey. Yes, we make angels cry, raining
down on earth from up above. Give you something good to celebrate. I used to bite my
tongue and hold my breath. I'm ma get your heart racing in my skin-tight jeans. As I march
alone to a different beat. Summer after high school when we first met. You're so
hypnotizing, could you be the devil? Could you be an angel? It's time to bring out the big
balloons.
Thought that I was the exception. Bikinis, zucchinis, Martinis, no weenies.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="media">
<img src="https://media.istockphoto.com/vectors/mother-holding-baby-son-in-arms-vector-id
<p>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned
my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We
can dance, until we die, you and I, will be young forever. We're living the life. We're doing
it right. Word on the street, you got somethin' to show me, me.</p>
<p class="mb-0">Wanna see the show in 3D, a movie. They say, be afraid you're
not like the others, futuristic lover. Open up your heart. So I sat quietly, agreed politely. Last
Friday night. Yeah, you're lucky if you're on her plane. I'll be your gift, give you something
good to celebrate.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+
OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9
dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept:
We have three main sections: Grandparents, Parents, and Children. Each section contains an unordered
list of family members represented by a media object.
Now, let's add some CSS styles to make our web page responsive using media queries, rounded media,
and nested media objects:
css
To create a responsive web page for all family members in hierarchical order, we can use a
combination of media queries, rounded media, and nested media objects. The following is an example
of how we can achieve this
Practical 18
Create responsive webpage of various service provider information using
bootstrap panel component, List group component, various alert messages and
show message after bootstrap alert has been closed.
Code:
<!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>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhl
ZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="container py-3">
<h2 class="text-center mb-2">Service Providers</h2>
<div id="liveAlertPlaceholder"></div>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active"
aria-current="true"
onclick="show(event)">
Application service provider
</button>
<button type="button" class="list-group-item list-group-item-action"
onclick="show(event)">Cloud service
provider</button>
<button type="button" class="list-group-item list-group-item-action"
onclick="show(event)">Network service
provider</button>
<button type="button" class="list-group-item list-group-item-action"
onclick="show(event)">Internet service
provider</button>
<button type="button" class="list-group-item list-group-item-action" disabled
onclick="show(event)">Online
service provider item (disabled)</button>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTP
OOmMi466C8"
crossorigin="anonymous"></script>
<script>
const alertPlaceholder = document.getElementById('liveAlertPlaceholder');
function show(e) {
alertPlaceholder.innerHTML = alertPlaceholder.getInnerHTML() + `<div
class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Hey! </strong> You just clicked on ${e.target.innerText}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
onClick="console.log('Alert was closed!!')"></button>
</div>`;
}
</script>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept: To create a responsive web page for various service providers using
Bootstrap components, we can use the Panel component and List group component along with
various Alert messages.
Practical 19
Design a smooth page transition between homepage, about and contact us page using
bootstrap transition plugin.
<html>
<head>
<style>
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,900);
html, body {
width: 100%;
height: 100%;
margin: 0;
body {
.container-fluid {
#myPageContent, section {
height:100% !important;
width:100% !important;
}
#home { background-color: lightslategray; }
footer {
background-color: lightpink;
color: #FFF;
text-align: right;
padding: 30px;
.myLogo {
max-height: 20px;
height: 100%;
width: 300px;
color: #FFF;
.navbar {
opacity: 0.9;
.navbar ul li {
color:#F05557 !important;
/* Menu - Animação */
{ display: inline-block;
opacity: 0;
.navbar-nav a::before
{ margin-right:
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
.navbar-nav a::after
{ margin-left:
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
color:#F05557 !important;
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
</style>
</head>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<li><a href="#about">About</a></li>
<li><a href="#details">Details</a></li>
</ul>
</div>
</div>
</nav>
The lion inhabits grasslands, savannas and shrublands. It is usually more diurnal than other
wild cats, but when persecuted, it adapts to being active at night and at
twilight.</h1></div></section>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept:
We will create the transition.js file to define the page transitions using the Bootstrap
Transition plugin.
$( document ). ready ( function ()
{
2. We will create the style.css file to define the styles for the sections and hide all sections
except the homepage.
The lion is a large, carnivorous feline species that is native to Africa and some parts of Asia. It
is known for its majestic appearance, with its distinctive mane, powerful build, and impressive
roar. Lions are social animals that live in groups known as prides, which typically consist of
several females, their offspring, and a few males.
Lions are apex predators and play a critical role in the ecosystems where they live. They
primarily feed on large mammals such as antelopes, zebras, and buffalo, and their hunting
techniques involve coordinated attacks that require strength, speed, and stealth.
The lion has been an important symbol in many cultures throughout history, representing
strength, courage, and royalty. In some African cultures, the lion is considered a sacred animal
and is associated with powerful deities.
Practical 20
Design a webpage with different modal dialog for “Save record confirmation”,
“Delete record confirmation” using model dialog plugin of bootstrap.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbz
Kgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI
5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
// we put this code inside document.ready so that it won't try and find the 'name-buttons'
until the page has fully loaded
$(".name-button").click(function(event) {
$('.modal-header h5.modal-title').html($(this).attr('data-name'));
$('.modal-body').html($(this).attr('data-body'));
$('.modal-footer button.btn-primary').html($(this).attr('data-name'));
});
})
</script>
<title>Modals, Popovers, & Tootips</title>
</head>
<body>
<button type="button" class="name-button btn btn-primary btn-lg"
data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Save
Record" data-body="Some details missing are you sure want to Save Record.">Save
Confirmation</button>
<button type="button" class="name-button btn btn-primary btn-lg"
data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Delete
Record" data-body="Are you sure want to Delete Record.">Delete
Confirmation</button>
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept: To design a webpage with different modal dialogs for "Save record
confirmation" and "Delete record confirmation" using the modal dialog plugin of Bootstrap,
we can follow the below steps:
1. We will create a base HTML structure for our web page with the required components.
Practical 21
Design news story page to demonstrate usage of Scrollspy for multiple section,
Tooltip for different photos, Collapsible and popover plugins of bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></
script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
ul.nav-pills {
top: 20px;
position: fixed;
div.col-8 div {
height: 500px;
</style>
</head>
<div class="container-fluid">
<div class="row">
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</nav>
<h1>Animal</h1>
Most living animal species are in Bilateria, a clade whose members have a bilaterally
symmetric body plan. The Bilateria include the protostomes, containing animals such as
nematodes, arthropods, flatworms, annelids and molluscs, and the deuterostomes, containing
the echinoderms and the chordates, the latter including the vertebrates. Life forms interpreted
as early animals were present in the Ediacaran biota of the late Precambrian. Many modern
animal phyla became clearly established in the fossil record as marine species during the
Cambrian explosion, which began around 539 million years ago. 6,331 groups of genes
common to all living animals have been identified; these may have arisen from a single
common ancestor that lived 650 million years ago.
Historically, Aristotle divided animals into those with blood and those without. Carl
Linnaeus created the first hierarchical biological classification for animals in 1758 with his
Systema Naturae, which Jean-Baptiste Lamarck expanded into 14 phyla by 1809. In 1874,
Ernst Haeckel divided the animal kingdom into the multicellular Metazoa (now synonymous
for Animalia) and the Protozoa, single-celled organisms no longer considered animals. In
modern times, the biological classification of animals relies on advanced techniques, such as
molecular phylogenetics, which are effective at demonstrating the evolutionary relationships
between taxa.
</p>
</div>
<h1>Domestic</h1>
<p>This page gives a list of domesticated animals,[1] also including a list of animals
which are or may be currently undergoing the process of domestication and animals that have
an extensive relationship with humans beyond simple predation. This includes species which
are semi-domesticated, undomesticated but captive-bred on a commercial scale, or commonly
wild-caught, at least occasionally captive-bred, and tameable. In order to be considered fully
domesticated, most species have undergone significant genetic, behavioural and
morphological changes from their wild ancestors, while others have changed very little from
their wild ancestors despite hundreds or thousands of years of potential selective breeding. A
number of factors determine how quickly any changes may occur in a species, but there is not
always a desire to improve a species from its wild form. Domestication is a gradual process,
so there is no precise moment in the history of a given species when it can be considered to
have become fully domesticated.
</div>
<h1>Wild</h1>
<p>Wildlife refers to undomesticated animal species, but has come to include all
organisms that grow or live wild in an area without being introduced by humans.[1] Wildlife
was also synonymous to game: those birds and mammals that were hunted for sport. Wildlife
can be found in all ecosystems. Deserts, plains, grasslands, woodlands, forests, and other
areas, including the most developed urban areas, all have distinct forms of wildlife. While the
term in popular culture usually refers to animals that are untouched by human factors, most
scientists agree that much wildlife is affected by human activities.[2] Some wildlife threaten
human safety, health, property, and quality of life. However, many wild animals, even the
dangerous ones, have value to human beings. This value might be economic, educational, or
emotional in nature.
</div>
<h1>Fruit</h1>
<p>In botany, a fruit is the seed-bearing structure in flowering plants that is formed
from the ovary after flowering.
Fruits are the means by which flowering plants (also known as angiosperms)
disseminate their seeds. Edible fruits in particular have long propagated using the movements
of humans and animals in a symbiotic relationship that is the means for seed dispersal for the
one group and nutrition for the other; in fact, humans and many animals have become
dependent on fruits as a source of food.[1] Consequently, fruits account for a substantial
fraction of the world's agricultural output, and some (such as the apple and the pomegranate)
have acquired extensive cultural and symbolic meanings.
</div>
<h1>Vegetable</h1>
<p>Vegetables are parts of plants that are consumed by humans or other animals as
food. The original meaning is still commonly used and is applied to plants collectively to
refer to all edible plant matter, including the flowers, fruits, stems, leaves, roots, and seeds.
An alternative definition of the term is applied somewhat arbitrarily, often by culinary and
cultural tradition. It may exclude foods derived from some plants that are fruits, flowers, nuts,
and cereal grains, but include savoury fruits such as tomatoes and courgettes, flowers such as
broccoli, and seeds such as pulses.
Originally, vegetables were collected from the wild by hunter-gatherers and entered
cultivation in several parts of the world, probably during the period 10,000 BC to 7,000 BC,
when a new agricultural way of life developed. At first, plants which grew locally would
have been cultivated, but as time went on, trade brought exotic crops from elsewhere to add
to domestic types. Nowadays, most vegetables are grown all over the world as climate
permits, and crops may be cultivated in protected environments in less suitable locations.
China is the largest producer of vegetables, and global trade in agricultural products allows
consumers to purchase vegetables grown in faraway countries. The scale of production varies
from subsistence farmers supplying the needs of their family for food, to agribusinesses with
vast acreages of single-product crops. Depending on the type of vegetable concerned,
harvesting the crop is followed by grading, storing, processing, and marketing.</p>
</div>
<h1>Tree</h1>
<p>In botany, a tree is a perennial plant with an elongated stem, or trunk, usually
supporting branches and leaves. In some usages, the definition of a tree may be narrower,
including only woody plants with secondary growth, plants that are usable as lumber or
plants above a specified height. In wider definitions, the taller palms, tree ferns, bananas, and
bamboos are also trees. Trees are not a taxonomic group but include a variety of plant
species that have independently evolved a trunk and branches as a way to tower above other
plants to compete for sunlight. The majority of tree species are angiosperms or hardwoods;
of the rest, many are gymnosperms or softwoods. Trees tend to be long-lived, some reaching
several thousand years old. Trees have been in existence for 370 million years. It is estimated
that there are around three trillion mature trees in the world.
A tree typically has many secondary branches supported clear of the ground by the
trunk. This trunk typically contains woody tissue for strength, and vascular tissue to carry
materials from one part of the tree to another. For most trees it is surrounded by a layer of
bark which serves as a protective barrier. Below the ground, the roots branch and spread out
widely; they serve to anchor the tree and extract moisture and nutrients from the soil. Above
ground, the branches divide into smaller branches and shoots. The shoots typically bear
leaves, which capture light energy and convert it into sugars by photosynthesis, providing the
food for the tree's growth and development.
Trees usually reproduce using seeds. Flowers and fruit may be present, but some
trees, such as conifers, instead have pollen cones and seed cones. Palms, bananas, and
bamboos also produce seeds, but tree ferns produce spores instead.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
Theoy concept: To design a news story page to demonstrate the usage of Scrollspy
for multiple sections, Tooltip for different photos, Collapsible and Popover plugins of
Bootstrap, we can follow the below steps:
1. We will create a base HTML structure for our web page with the required components.
ootstrap provides several useful components that can be used to enhance the functionality
and user experience of web pages. In this design, we will use Scrollspy for multiple sections,
Tooltip for different photos, Collapsible and Popover plugins of Bootstrap to create an
interactive news story page.
1. Scrollspy:
Scrollspy is a Bootstrap plugin that updates the navigation bar to show the current position of
the user on the page. We have added data-spy="scroll" and data-target="#navbar" attributes to
the body and nav elements, respectively, to enable scrollspy on our web page.
2. Tooltip:
Tooltips are small pop-ups that appear when the user hovers over an element. We can use the
data-toggle="tooltip" and title attributes to add tooltips to any element. We will add tooltips to
the images on our news story page to provide additional information.
3. Collapsible:
Collapsible panels allow the user to expand and collapse content as needed. We can use the
data-toggle="collapse" attribute to create collapsible panels. We will use collapsible panels to
display related news articles.
4. Popover:
Popover is a Bootstrap plugin that provides a small pop-up with additional content when the
user clicks on an element. We can use the data-toggle="popover" attribute to create a popover.
We will add popovers to the images on our news story page to provide additional
information.
Practical 22
Design animated photo gallery page using Carousel bootstrap plugin with
minimum seven photos.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></
script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.carousel-inner img {
width: 100%;
height: 100%;
</style>
</head>
<body>
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
</ul>
<div class="carousel-inner">
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
<span class="carousel-control-prev-icon"></span>
</a>
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
Output:
EVALUATION:
Involvement (4) Understanding / Problem solving (3) Timely Completion (3) Total (10)
Faculty Signature
1. Theoy concept: Create a new HTML file and add the necessary CSS and JS files
for Bootstrap and the Carousel plugin. Ensure that you add the correct paths to these
files.
2. Create a new section in the HTML file and add a div element with a class of carousel and
an ID of myCarousel.
3. Inside the div element, add an unordered list ( ul) with a class of carousel-indicators and
add li elements for each photo in the gallery. Add an attribute of data-
target="#myCarousel" to each li element.
4. Add a div element with a class of carousel-inner inside the div with class carousel.
5. Inside the carousel-inner element, add a div element with a class of item and an active
class. This will be the first photo in the gallery.
6. Add an img element inside the div with the source attribute pointing to the image file
for the first photo.
7. Repeat steps 5-6 for each of the remaining photos in the gallery, creating a new div
element with a class of item for each photo.
8. Add previous and next buttons to the carousel by adding two a elements with the
classes of left carousel-control and right carousel-control . Add the attributes of
href="#myCarousel" and `data