Scribd
Upload
71 views

HTML Exercises and Answers

The document contains HTML code for a web page using Bootstrap framework. It includes code for page layout using grid system, dropdown menus, forms, and other common page elements. Styling is applied using Bootstrap classes. Required Bootstrap and jQuery library files are linked.

Uploaded by

padaukzun
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
71 views

HTML Exercises and Answers

The document contains HTML code for a web page using Bootstrap framework. It includes code for page layout using grid system, dropdown menus, forms, and other common page elements. Styling is applied using Bootstrap classes. Required Bootstrap and jQuery library files are linked.

Uploaded by

padaukzun
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

1)

(5 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\
bootstrap.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\
jquery-3.7.0\jquery-3.7.0.min.js"></script>
<style>
.container
{ border: solid 5px black ; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
Column 1: col-xs-4 col-sm-4 col-md-4 col-lg-4
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
Column 2: col-xs-4 col-sm-4 col-md-4 col-lg-4
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
Column 3: col-xs-4 col-sm-4 col-md-4 col-lg-4
</div>
</div>
</div>
</body>
</html>
2)

(5 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\
bootstrap.bundle.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\
jquery-3.7.0\jquery-3.7.0.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-
toggle="dropdown">See all</button>
<div class="dropdown-menu">
<a href="" class="dropdown-item">See next 20 items></a>
<a href="" class="dropdown-item">See next 20 items></a>
<hr>
<a href="" class="dropdown-item">Open all items></a>
</div>
</div>
</div>
</body>
</html>
3)

(5 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\
bootstrap.bundle.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\
jquery-3.7.0\jquery-3.7.0.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown"><i
class="bi bi-person-fill"></i>Welcome Back</button>
<div class="dropdown-menu">
<a href="" class="dropdown-item"><i class="bi bi-cart-fill"></i>My Cart</a>
<hr>
<a href="" class="dropdown-item"><i class="bi bi-person-square"></i>My
Profile</a>
<a href="" class="dropdown-item"><i class="bi bi-gift"></i> Order History</a>
<a href="" class="dropdown-item"><i class="bi bi-envelope"></i>
Notification
</a>
</div>
</div>
</div>
</body>
</html>
1.

(10 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0- dist\css\
bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-
icons.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\
bootstrap.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\
jquery-3.7.0\jquery-3.7.0.min.js"></script>
</head>
<body>
<div class="container " >
<div class="page-header" >
<h1> <i class="bi bi-house-door-fill"></i>&nbsp;
Welcome to the Online Megastore</h1>
</div>
<div class="row ">
<div class="col-mid-4 col-lg-4">
<div class="panel panel-info">
<div class="panel-heading" style="background-color: rgb(5, 199, 253);">Lastest
Additions</div>
<div class="panel-body">....</div>
</div>
</div>
<div class="col-mid-8 col-lg-8">
<div class="panel panel-warning">
<div class="panel-heading" style="background-color:rgb(228, 213, 153);">Most
Popular Products</div>
<div class="panel-body">....</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container d-flex justify-content-between">
<div class="text-muted pull-left">
<a href="">Bootstrap&reg;Simple App</a>
</div>
<div class="text-muted pull-right">&copy;
<a href="">Snig Bhaumik</a> 2015
</div>
</div>
</div>
</body>
</html>

2.

(10 Marks)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<script src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\bootstrap.min.js"></
script>
<script src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\jquery-3.7.0\jquery-
3.7.0.min.js"></script>
<style>
.row{ border: solid 2px black; }
</style>
</head>
<body>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
Column 1: col-xs-6 col-sm-4 col-md-4 col-lg-4
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
Column 2: col-xs-6 col-sm-4 col-md-4 col-lg-4
</div>
<div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
Column 3: hidden-xs col-sm-4 col-md-4 col-lg-4
</div>
</div>
</body>
</html>
3.

(10 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<script src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\jquery-3.7.0\jquery-
3.7.0.min.js"></script>
<script src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\bootstrap.min.js"></
script>
<style>
.body { border: 20px solid black: }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row col-lg-12">
<form>
<div class="form-group">
<label for="yourName" class="control-label">Name</label>
<input type="text" class="form-control" id="yourName" placeholder="Your Name
please" required="">
</div>
<div class="form-group">
<label for="yourEmail" class="control-label">Email address </label>
<input type="email" class="form-control" id="yourEmail" placeholder="Your Email
Id" required="">
</div>
<div class="form-group">
<label for="yourComments" class="control-label">Tell us </label>
<textarea class="form-control" id="yourComments" placeholder="Your comments"
rows="3"></textarea>
</div>
<div class="checkbox">
<label><input type="checkbox">Subscribe Me !!!</label>
</div>
<button type="submit" class="btn btn-primary">Post It</button>
</form>
</div>
</div>
</body>
</html>
4.

(10 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
[email protected]/font/bootstrap-icons.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0- dist\js\
bootstrap.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\jquery-
3.7.0\jquery-3.7.0.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-link bg-light">
<a class="navbar-brand " href="">Megastore</a>
<div class="collapse navbar-collapse justify-content-between" >
<div class="navbar-nav">
<a href="" class="nav-item nav-link"><i class="bi bi-house-a
door"></i>&nbsp;Home</a>
<a href="" class="nav-item nav-link"><i class="bi bi-briefcase"></i>&nbsp;Browse
Products</a>
<a href="" class="nav-item nav-link"><i class="bi bi-telephone"></i>&nbsp;Contact
Us</a>
</div>
</div>
<form action="">
<div class="input-group">
<input type="text" class="form-control " placeholder="Enter Search keyword" >
<div class="input-group-append">
<div class="navbar-nav">
<a href="" class="nav-item nav-link"><i class="bi bi-cart"></i>&nbsp;My Cart</a>
<a href="" class="nav-item nav-link"><i class="bi
bi-box-arrow-right"></i>&nbsp;Sign In</a>
</div>
</div>
</div>
</form>
</nav>
</div>
</body>
</html>

I.

(20 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\
bootstrap.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\jquery-
3.7.0\jquery-3.7.0.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1><i class="bi bi-phone"></i>&nbsp;We would like to hear from you !!!</h1>
</div>
</div>
<div class="container">
<form class="form-horizontal">
<div class="form-group row">
<label for="yourName" class="col-sm-2 control-label" style="text-align: right;">Name
</label>
<div class="col-lg-9">
<div class="input-group">
<i class=" bi bi-person-fill input-group-text"></i>
<input type="text" class="form-control" id="yourName" placeholder="Your name
please">
</div>
<br>
</div>
</div>
<div class="form-group row">
<label for="yourEmail" class="col-sm-2 control-label" style="text-align: right;">Email
Address</label>
<div class="col-lg-9">
<div class="input-group">
<i class=" bi bi-at input-group-text"></i>
<input type="email" class="form-control" id="yourEmail" placeholder="Your Email
Id">
</div> <br>
</div>
</div>
<div class="form-group row">
<label for="yourComments" class="col-sm-2 control-label" style="text-align: right;">Tell
Us</label>
<div class="col-lg-9">
<div class="input-group">
<i class=" bi bi-chat-left-fill input-group-text"></i>
<textarea class="form-control" id="yourcomments" placeholder="Your comments"
rows="3"></textarea>
</div> <br>
</div>
</div>
<div class="col-lg-5 text-center">
<div class="checkbox ">
<label ><input type="checkbox">Subscribe Me !!!</label>
</div>
</div>
<div class="clearfix">&nbsp;</div>
<div class="col-sm-12 text-center">
<button type="submit" class="btn btn-primary btn-lg"><i class="bi
bi-envelope"></i>&nbsp;Post It</button>
</div>
</form>
</div>
</body> </html>
II.

(20 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\
bootstrap.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\
jquery-3.7.0\jquery-3.7.0.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-link bg-light">
<a class="navbar-brand " href="">Megastore</a>
<div class="collapse navbar-collapse justify-content-between" >
<div class="navbar-nav">
<a href="" class="nav-item nav-link"><i class="bi
bi-house-door"></i>&nbsp;Home</a>
<a href="" class="nav-item nav-link"><i class="bi bi-briefcase"></i>&nbsp;Browse
Products</a>
<a href="" class="nav-item nav-link"><i class="bi
bi-telephone"></i>&nbsp;Contact Us</a>
</div>
</div>
<form action="">
<div class="input-group">
<input type="text" class="form-control " placeholder="Enter Search keyword" >
<div class="input-group-append">
<div class="navbar-nav">
<a href="" class="nav-item nav-link"><i class="bi bi-cart"></i>&nbsp;My
Cart</a>
<a href="" class="nav-item nav-link"><i class="bi
bi-box-arrow-right"></i>&nbsp;Sign In</a>
</div>
</div>
</div>
</form>
</nav>
</div>
<div class="jambotron">
<div class="container-fluid text-center" style="background-color: lightgray;">
<div class="page-header">
<h1 style="padding-bottom: 50px; padding-top: 20px; text-center">Oooops, we
cannot find this page.</h1>
<a href="" class="btn btn-warning btn-lg btn-block text-center">Go
to Home Page</a>
</div>
</div>
<div class="container-fluid">
<h6> The Megastore </h6>
<address> Street <br>
City <br>
P:(000)000-0000 <br>
<a href="">[email protected] </a><br>
</address>
</div>
<div id="footer">
<div class="container-fluid d-flex justify-content-between">
<div class="text-muted pull-left">
<a href="">Bootstrap&reg;Simple App</a>
</div>
<div class="text-muted pull-right">&copy;
<a href="">Snig Bhaumik</a> 2015
</div>
</div>
</div>
</div>
</div> </body> </html>
III.

(20 Marks)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\
bootstrap.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\
bootstrap.bundle.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\
jquery-3.7.0\jquery-3.7.0.min.js"></script>
</head>
<body>
<div class="modal" tabindex="-1" id="modal">
<div class="modal-dialog">
<div class="modal-content border border-dark border-5">
<div class="modal-header">
<h5 class="modal-title">Sign Up</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
<button class="btn btn-outline-info" type="button"><a href="#signin">Sign
In</a></button>
<button class="btn btn-outline-info" type="button"><a href="#signup">Sign
Up</a></button>
<div class="">
<div class="row">
<div class="col-md-12">
<form action="" class="pb-3 ps-0">
<div class="form-group">
<label for="yourName" class="control-label"></label>
<input type="text" class="form-control" id="yourName" placeholder="Your
Full Name">
</div>
<div class="form-group">
<label for="yourName" class="control-label"></label>
<input type="text" class="form-control" id="yourName"
placeholder="Desired Your Name">
</div>
<div class="form-group">
<label for="yourEmail" class="control-label"></label>
<input type="text" class="form-control" id="yourEmail"
placeholder="Your Email Id">
</div>
<div class="form-group">
<label for="yourPwd" class="control-label"></label>
<input type="password" class="form-control" id="yourPwd"
placeholder="Password">
</div>
<div class="form-group">
<label for="yourConPwd" class="control-label"></label>
<input type="password" class="form-control" id="yourConPwd"
placeholder="Confirm Password">
</div>
</form>
</div>
</div>
</div>
<div class="d-grid"><button type="button" class="btn btn-secondary">Sign
Up</button></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-bs-
dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class=""><button type="button" class="btn btn-success" data-bs-toggle="modal" data-
bs-target="#modal">Sign Up</button></div>
</body>
</html>
IV.

(20 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\css\
bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\js\
bootstrap.bundle.min.js"> </script>
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0-dist\jquery-
3.7.0\jquery-3.7.0.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="aa" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#aa" data-bs-slide-to="0" class="active" aria-
current="true" aria-label="slide 1"></button>
<button type="button" data-bs-target="#aa" data-bs-slide-to="1" aria-label="slide
2"></button>
<button type="button" data-bs-target="#aa" data-bs-slide-to="2" aria-label="slide
3"></button>
<button type="button" data-bs-target="#aa" data-bs-slide-to="3" aria-label="slide
4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="E:/WYO/WYO_HTML_Lessons/images/apple.jpg" class="d-block w-50"
alt="..." >
<div class="carousel-caption"> <a href="">Product 1 </a> </div>
</div>
<div class="carousel-item ">
<img src="E:/WYO/WYO_HTML_Lessons/images/cherry.jpg" class="d-block w-50"
alt="..." >
<div class="carousel-caption"> <a href="">Product 2 </a> </div>
</div>
<div class="carousel-item ">
<img src="E:/WYO/WYO_HTML_Lessons/images/orange.jpg" class="d-block w-50"
alt="..." >
<div class="carousel-caption"> <a href="">Product 3 </a> </div>
</div>
<div class="carousel-item ">
<img src="E:/WYO/WYO_HTML_Lessons/images/watermelon.jpg" class="d-block
w-50" alt="..." >
<div class="carousel-caption"> <a href="">Product 4 </a> </div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#aa" data-bs-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden ">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#aa" data-bs-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden ">Next</span>
</button>
</div>
</div>
</div>
</body>
</html>

You might also like