EContent 2 2023 07 27 10 06 31 RWD Manual 3DCEpdf 2023 07 26 08 30 30
EContent 2 2023 07 27 10 06 31 RWD Manual 3DCEpdf 2023 07 26 08 30 30
EContent 2 2023 07 27 10 06 31 RWD Manual 3DCEpdf 2023 07 26 08 30 30
Student Name:
__________________________
Enrollment No.:
_________________________
Year - 2023-24
School of Engineering & Technology
Certificate
Enrollment No.:___________________________________________________
This is to certify that Mr./Ms. ____________________________________
student of Diploma Branch Computer Engineering and
Semester 3rd of Dr. Subhash Univesity, Junagadh has
satisfactory carried out practical work in the subject
Responsive Webpage Design [1DECO305] during academic
year 2023-2024.
_______________________________ ___________________________________
INDEX
PRACTICAL 1
Aim: Install Bootstrap framework
There are two ways to start using Bootstrap on your own web site.
You can:
Downloading Bootstrap
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the
instructions there.
https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-dist.zip
Bootstrap CDN
If you don't want to download and host Bootstrap yourself, you can include it from a CDN
(Content Delivery Network).
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include
jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.
min.css">
1
Responsive Webpage Design [1DECO305]
PRACTICAL 2
Aim: Display student information content on responsive web page by using
container and container-fluid classes.
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute
and the correct character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 is mobile-first
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the
core framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside
the <head> element:
The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
3. Containers
2
Responsive Webpage Design [1DECO305]
<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.4/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>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
<div class="container-fluid">
<h1>Students Details</h1>
<h2>Name:</h2>
<h2>Enrollment no</h>
<p>Informtation about student:.</p>
</div>
</body>
</html>
3
Responsive Webpage Design [1DECO305]
PRACTICAL 3
Aim: Create responsive web page of your class time table by using bootstrap
grid system
span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 1
span 4 span 8
span 6 span 6
span 12
Bootstrap's grid system allows up to 12 columns across the page.If you do not want to use all
12 columns individually, you can group the columns together to create wider columns:
Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending
on the screen size.
Grid Classes
The classes above can be combined to create more dynamic and flexible layouts.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
4
Responsive Webpage Design [1DECO305]
<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.4/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>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;">I</div>
<div class="col-sm-4" style="background-color:lavenderblush;">Love</div>
<div class="col-sm-4" style="background-color:lavender;">India</div>
</div>
</div>
</body>
</html>
Output
5
Responsive Webpage Design [1DECO305]
PRACTICAL 4
6
Responsive Webpage Design [1DECO305]
Output
7
Responsive Webpage Design [1DECO305]
PRACTICAL 5
8
Responsive Webpage Design [1DECO305]
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>12/7/2001</td>
<td>254236256</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
<td>1/1/2002</td>
<td>64614654</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
<td>3/7/2001</td>
<td>51351576</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
9
Responsive Webpage Design [1DECO305]
PRACTICAL 6
Aim:Add image on webpage using Bootstrap.
<!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.4/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>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element
(resize the browser window to see the effect):</p>
<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460"
height="345">
</div>
</body>
</html>
10
Responsive Webpage Design [1DECO305]
PRACTICAL 7
Aim: Making thumbnails, rounded corner and circular images with Bootstrap
Example:
<!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.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
11
Responsive Webpage Design [1DECO305]
<div class="container">
<h2>Circle</h2>
<p>The .img-circle class shapes the image to a circle (not available in IE8):</p>
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304"
height="236">
</div>
</body>
</html>
Output
12
Responsive Webpage Design [1DECO305]
PRACTICAL 8
Aim: Create alert message page using bootstrap.
<!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.4/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>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or
action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need
attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially
negative action.
</div>
13
Responsive Webpage Design [1DECO305]
</div>
</body>
</html>
Output
14
Responsive Webpage Design [1DECO305]
PRACTICAL 9
Aim: Create Button on web page using bootstrap.
<!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.4/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>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
Output
15
Responsive Webpage Design [1DECO305]
PRACTICAL 10
Aim: Create horizontal registration form using bootstrap
<!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.4/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>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password"
name="pwd">
</div>
16
Responsive Webpage Design [1DECO305]
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
Output
17
Responsive Webpage Design [1DECO305]
PRACTICAL 11
Aim: Create Registration form using bootstrap.
18
Responsive Webpage Design [1DECO305]
}
.title {
margin-top: 2rem;
margin-bottom: 1rem;
}
.form-content
{
padding: 5%;
border: 1px solid #ced4da;
margin-bottom: 2%;
}
.form-control {
border-radius: 1.5rem;
}
.btnSubmit
{
border: none;
border-radius: 1.5rem;
padding: 1%;
width: 20%;
cursor: pointer;
background: #0062cc;
color: #fff;
}
h1 {
font-family: sans-serif;
display: block;
font-size: 1rem;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
color: hotpink;
text-transform: uppercase;
padding-top: 20px;
}
a{
text-decoration: none;
19
Responsive Webpage Design [1DECO305]
color: #fff;
}
a:hover {
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<div class="container register-form">
<div class="form">
<div class="note">
<h1> Bootstrap 4 Registration Form Example. </h1>
</div>
<div class="form-content">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-
control" placeholder="Your Name *" value=""/>
</div>
<div class="form-group">
<input type="text" class="form-
control" placeholder="Phone Number *" value=""/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-
control" placeholder="Your Password *" value=""/>
</div>
<div class="form-group">
<input type="text" class="form-
control" placeholder="Confirm Password *" value=""/>
</div>
</div>
20
Responsive Webpage Design [1DECO305]
</div>
<div class="row align-items-center mt-4">
<div class="col">
<input type="text" class="form-control" placeholder=" Enter Email Address">
</div>
</div> <div class="row align-items-center mt-4">
<div class="col">
<input type="text" class="form-control" placeholder=" Address">
</div>
</div>
<div class="row justify-content-start mt-4">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
I hereby agree to the <a href="/"> Terms and Conditions. </a>
</label>
</div>
<button type="button" class="btnSubmit"> Submit </button>
</div>
</div>
</div>
</body>
</html>
Output
21
Responsive Webpage Design [1DECO305]
PRACTICAL 12
Aim: Create Navbar using bootstrap
<!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.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Basic Navbar Example</h3>
22
Responsive Webpage Design [1DECO305]
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
Output
23
Responsive Webpage Design [1DECO305]
PRACTICAL 13
Aim: JavaScript Program to Print Hello World
<html>
<body>
<script type="text/javascript">
alert("Hello World");
</script>
</body>
</html>
Output
24
Responsive Webpage Design [1DECO305]
PRACTICAL 14
Aim: JavaScript Program to Find the Factorial of a Number
<!DOCTYPE html>
<html>
<head>
</head>
<br><br>
<p id = "res"></p>
<script>
function fact(){
var i, num, f;
f = 1;
num = document.getElementById("num").value;
f = f * i;
i = i - 1;
25
Responsive Webpage Design [1DECO305]
</script>
</body>
</html>
Output
26
Responsive Webpage Design [1DECO305]
PRACTICAL 15
Aim: JS Form Program Example
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
return false;
}
</script>
</head>
<body>
27
Responsive Webpage Design [1DECO305]
PRACTICAL 16
Aim: JS Form Program Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<button onclick="myFunction()">Please Try it</button>
<p id="Test Confirm Box"></p>
<script>
function myFunction() {
var txt;
if (confirm("Please Press a button!")) {
txt = "You pressed Button!";
} else {
txt = "You pressed Cancel Button!";
}
document.getElementById("Test Confirm Box").innerHTML = txt;
}
</script>
</body>
</html>
Output
28
Responsive Webpage Design [1DECO305]
PRACTICAL 17
Aim: Write a JavaScript program to redirect to another URL on button click.
<html>
<head>
<script type="text/javascript">
function Redirect() {
location.href="https://www.tutorix.com";
}
</script>
</head>
<body>
<p>Click the following button to redirect to tutorix.com.</p>
<form>
<input type="button" value="Redirect Me" onclick="Redirect();" />
</form>
</body>
</html>
Output
29
Responsive Webpage Design [1DECO305]
PRACTICAL 18
Aim: Write a JavaScript program to set the background color of a page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change the Background Color with JavaScript</title>
<script>
// Function to change webpage background color
function changeBodyBg(color){
document.body.style.background = color;
}
30
Responsive Webpage Design [1DECO305]
<div>
<label>Change Heading Background To:</label>
<button type="button" onclick="changeHeadingBg('red');">Red</button>
<button type="button" onclick="changeHeadingBg('green');">Green</button>
<button type="button" onclick="changeHeadingBg('blue');">Blue</button>
</div>
</body>
</html>
Output
31
Responsive Webpage Design [1DECO305]
PRACTICAL 19
Aim: Write a JavaScript function to add rows to a table
<!DOCTYPE html>
<html>
<head>
<title>Add Rows to Table</title>
<script>
function addRow() {
// Get a reference to the table
var table = document.getElementById("myTable");
32
Responsive Webpage Design [1DECO305]
<th>Header 3</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
</table>
</body>
</html>
Output
33
Responsive Webpage Design [1DECO305]
PRACTICAL 20
Aim: Write a JavaScript program for form validation
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
// Get form input values
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var password = document.forms["myForm"]["password"].value;
// Validate name
if (name === "") {
alert("Name must be filled out");
return false;
}
// Validate email
if (email === "") {
alert("Email must be filled out");
return false;
}
// Validate password
if (password === "") {
alert("Password must be filled out");
return false;
}
// Form is valid
alert("Form submitted successfully");
return true;
}
</script>
</head>
<body>
<h1>Form Validation</h1>
<form name="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
34
Responsive Webpage Design [1DECO305]
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
Output
35
Responsive Webpage Design [1DECO305]
PRACTICAL 21
Aim: Write a jQuery program for turn on/off light.
<!DOCTYPE html>
<html>
<head>
<title>Light Switch</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Add click event handler to the light switch
$('#lightSwitch').click(function() {
// Toggle the light's status
$('#lightBulb').toggleClass('on');
36
Responsive Webpage Design [1DECO305]
<h1>Light Switch</h1>
<div id="lightBulb"></div>
<button id="lightSwitch">Turn On</button>
</body>
</html>
Output
37
Responsive Webpage Design [1DECO305]
PRACTICAL 22
Aim: Write a jQuery program for change face image as per value selected from
dropdown
<!DOCTYPE html>
<html>
<head>
<title>Face Changer</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Add change event handler to the dropdown
$('#faceSelector').change(function() {
// Get the selected value
var selectedFace = $(this).val();
38
Responsive Webpage Design [1DECO305]
39
Responsive Webpage Design [1DECO305]
PRACTICAL 23
Aim: . Write a jQuery for change the color of any div that is animated
<!DOCTYPE html>
<html>
<head>
<title>Animated Div Color Change</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Add click event handler to start animation button
$('#startAnimation').click(function() {
// Animate the div
$('#animatedDiv').animate({ width: '300px' }, 2000, function() {
// Animation complete, change the color of the div
$(this).css('background-color', 'red');
});
});
});
</script>
<style>
#animatedDiv {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<h1>Animated Div Color Change</h1>
<button id="startAnimation">Start Animation</button>
40
Responsive Webpage Design [1DECO305]
<div id="animatedDiv"></div>
</body>
</html>
Output
Signature____________
Date:________________
Remarks___________________________________________________________________
41