HTML Exercises and Answers

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>
</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">
bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
bootstrap.bundle.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>
bootstrap.min.css">
</head>
<body>
<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>
<link rel="stylesheet" href="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0- dist\css\
bootstrap.min.css">
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-
icons.css">
</head>
<body>
<div class="container " >
<div class="page-header" >
<h1> <i class="bi bi-house-door-fill"></i>
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®Simple App</a>
</div>
<div class="text-muted pull-right">©
<a href="">Snig Bhaumik</a> 2015
</div>
</div>
</div>
</body>
</html>
2.
(10 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
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>
</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>
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="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>
<label for="yourEmail" class="control-label">Email address </label>
<input type="email" class="form-control" id="yourEmail" placeholder="Your Email
Id" required="">
</div>
<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>
bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.10.5/font/bootstrap-icons.css">
<script type="text/javascript" src="E:\WYO\WYO_HTML_Lessons\bootstrap-5.3.0- dist\js\
<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>
<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> Home</a>
<a href="" class="nav-item nav-link"><i class="bi bi-briefcase"></i> Browse
Products</a>
<a href="" class="nav-item nav-link"><i class="bi bi-telephone"></i> 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">
<a href="" class="nav-item nav-link"><i class="bi bi-cart"></i> My Cart</a>
<a href="" class="nav-item nav-link"><i class="bi
bi-box-arrow-right"></i> Sign In</a>
</div>
</div>
</div>
</form>
</nav>
</div>
</body>
</html>
I.
(20 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
bootstrap.min.css">
</head>
<body>
<div class="page-header">
<h1><i class="bi bi-phone"></i> 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">
<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>
<label for="yourEmail" class="col-sm-2 control-label" style="text-align: right;">Email
Address</label>
<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>
<label for="yourComments" class="col-sm-2 control-label" style="text-align: right;">Tell
Us</label>
<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"> </div>
<div class="col-sm-12 text-center">
<button type="submit" class="btn btn-primary btn-lg"><i class="bi
bi-envelope"></i> Post It</button>
</div>
</form>
</div>
</body> </html>
II.
(20 Marks)
<!DOCTYPE html>
<html lang="en">
<head>
bootstrap.min.css">
</head>
<body>
<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" >
bi-house-door"></i> Home</a>
<a href="" class="nav-item nav-link"><i class="bi bi-briefcase"></i> Browse
Products</a>
bi-telephone"></i> Contact Us</a>
</div>
</div>
<form action="">
<input type="text" class="form-control " placeholder="Enter Search keyword" >
<div class="input-group-append">
<a href="" class="nav-item nav-link"><i class="bi bi-cart"></i> My
Cart</a>
bi-box-arrow-right"></i> 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>
<h6> The Megastore </h6>
<address> Street <br>
City <br>
P:(000)000-0000 <br>
<a href="">a.b@c.com </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®Simple App</a>
</div>
<div class="text-muted pull-right">©
<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>
bootstrap.min.css">
</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">
<label for="yourName" class="control-label"></label>
<input type="text" class="form-control" id="yourName" placeholder="Your
Full Name">
</div>
<label for="yourName" class="control-label"></label>
<input type="text" class="form-control" id="yourName"
placeholder="Desired Your Name">
</div>
<label for="yourEmail" class="control-label"></label>
<input type="text" class="form-control" id="yourEmail"
placeholder="Your Email Id">
</div>
<label for="yourPwd" class="control-label"></label>
<input type="password" class="form-control" id="yourPwd"
placeholder="Password">
</div>
<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>
bootstrap.min.css">
</head>
<body>
<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>
3"></button>
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>
<img src="E:/WYO/WYO_HTML_Lessons/images/orange.jpg" class="d-block w-50"
alt="..." >
</div>
<img src="E:/WYO/WYO_HTML_Lessons/images/watermelon.jpg" class="d-block
w-50" alt="..." >
</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>

HTML Exercises and Answers

Uploaded by

Copyright:

Available Formats

HTML Exercises and Answers

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Exercises and Answers

Uploaded by

Copyright:

Available Formats

1)

You might also like