PRACTICAL – 1
Create a web page using –
Heading (H1 to H6)
Paragraph
All text Formatting elements like (bold, italic, underline etc.)
Insert an image
Create a link using anchor tag
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Fruits</h1>
<h2>Fruits</h2>
<h3>Fruits</h3>
<h4>Fruits</h4>
<h5>Fruits</h5>
<h6>Fruits</h6>
<p>Fruits are healthy to eat</p>
<b>Apple</b>
<em>Kiwi</em>
<i>Litchi</i>
<strong>Mango</strong>
<mark>Banana</mark>
<small>Papaya</small>
<del>Watermelon</del>
<ins>Grapes</ins>
Black<sub>berry</sub> Straw<sup>berry</sup> <br /><br />
<a href="[Link] for more</a>
</body>
</html>
PRACTICAL – 2
Create a web page having one ordered list and unordered list, in
ordered list create each list item of different color and in unordered
list make them as a hyperlink.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h3>Fruits</h3>
<ol>
<li style="color: red">Apple</li>
<li style="color: orange">Mango</li>
<li style="color: chartreuse">Pear</li>
</ol>
<ul>
<li>
<a
href="[Link]
%20watermelon%20(Citrullus%20lanatus)%20is,with%20more%20than
%201%2C000%20varieties."
>Watermelon</a
>
</li>
<li><a href="[Link]
<li><a
href="[Link]
</ul>
</body>
</html>
PRACTICAL – 3
Design a table with rowspan and colspan
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
<title>Document</title>
</head>
<body>
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td rowspan="2">43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</body>
</html>
PRACTICAL – 4
Create form same as given in the assignment
PRACTICAL – 5
Create three html documents and use all the types of CSS i.e. Internal,
External and Inline.
Internal CSS -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS –
HTML file -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS file –
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Inline CSS –
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
PRACTICAL – 6
Create four html documents and use all the type of CSS selectors i.e.
Element, id, class and Universal
Element -
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
ID –
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Class –
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Universal –
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
PRACTICAL – 7
Create an HTML document and apply margin, padding and border.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every
HTML element.</p>
<div>This text is the content of the box. We have added a 50px
padding, 20px margin and 15px border.</div>
</body>
</html>
PRACTICAL – 8
Create an HTML document and apply five CSS properties of your
choice.
PRACTICAL – 9
Write a program to connect Bootstrap with HTML and write a basic
program.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link
href="[Link]
[Link]" rel="stylesheet">
<script
src="[Link]
[Link]"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Hello World!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>This is the first line of column </p>
<p> This is the second line of column</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>This is the first line of column </p>
<p> This is the second line of column</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>This is the first line of column </p>
<p> This is the second line of column</p>
</div>
</div>
</div>
</body>
</html>
PRACTICAL – 10
Write a program to learn about grid system of 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
href="[Link]
[Link]" rel="stylesheet">
<script
src="[Link]
[Link]"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Responsive Columns</h1>
<p>Fruits I love</p>
<p>fruits are important for our health</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">Apple</div>
<div class="col-sm-3 p-3 bg-dark text-white">Mango</div>
<div class="col-sm-3 p-3 bg-primary text-white">Banana</div>
<div class="col-sm-3 p-3 bg-dark text-white">Pear</div>
</div>
</div>
</body>
</html>
PRACTICAL – 11
Write a program to design pagination and card 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
href="[Link]
[Link]" rel="stylesheet">
<script
src="[Link]
[Link]"></script>
</head>
<body>
<div class="container mt-3">
<h2>Pagination</h2>
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
<div class="container mt-3">
<h2>Card Image</h2>
<p>Image at the top (card-img-top):</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="../bootstrap4/img_avatar1.png"
alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John
Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</body>
</html>
PRACTICAL – 12
Write a program to design 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
href="[Link]
[Link]" rel="stylesheet">
<script
src="[Link]
[Link]"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text"
placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</nav>
PRACTICAL – 13
Write a program to design 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
href="[Link]
[Link]" rel="stylesheet">
<script
src="[Link]
[Link]"></script>
</head>
<body>
<div class="container mt-3">
<h2>Simple form</h2>
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd"
placeholder="Enter password" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"
name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
PRACTICAL – 14
Write a program to