In: Computer Science
Dear Colleague, Earlier today I built my seventh website using
HTML5, CSS3, and Bootstrap4. Bootstrap seems amazing, but it never
did what it should do – make my website look better. Also, my page
should have a blue theme that was provided in the CSS folder. This
also didn’t work. My website is supposed to look like what is shown
in Figure 1 (see below). Someone told me that there are exactly 10
errors on index.html, 10 errors on contact.html, and 10 errors on
events.html. Yes, 30 errors total! Can you help me find all of the
errors? Hint: You should not add ANY LINES to the code. There will
never be more than one error per line number.
contact.html ( HELP FIND the 10 ERRORS IN THIS CODE )
<!doctype html>
<html>
<body>
<title>Try Boro Kids Race Series</title>
<!-- Font Awesome -->
<rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Bootstrap CSS -->
<href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet">
<!-- JQuery -->
<type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<head>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark
bg-primary">
<a class="navbar-brand" href="#">
<img src="images/HeaderBoroRunningMan2.gif" width="auto"
height="30" alt="Running Man Logo">
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="events.html">Events <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link"
href="contact.html">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link"
href="http://www.tryborokidstri.org/" target="_blank">Try
Boro</a></li>
<li class="nav-item"><a class="nav-link"
href="https://www.facebook. com/TryBoroKids/"
target="_blank"><img src="images/IconFacebook.png"
class="iconsocial" alt="Facebook" width="auto"
height="30"></a></li>
</ul>
</div>
</nav>
<div class="row p-5">
<div class="row">
<h2>Want to register?</h2>
<h3>Try Boro Kids 2.5K/5K Run</h3>
<p>May 13, 2020</p>
<p><a href="http://www.tryborokidstri.org"
target="_blank">Click here more
information</a></p>
<p> <a href="docs/2016TryBoroRunRegistrationForm.pdf"
target="_blank">Download a registration
form</a></p>
<h3>Try Boro Kids Trail Run</h3>
<p>October 17, 2020</p>
<p><a href="http://www.tryborokidstri.org"
target="_blank">Click here more
information</a></p>
<p> <a
href="mailto:[email protected]">Interested? Click here to
email us</a></p>
<!-- Modal Button -->
<button type="button" class="btn btn-info" data-toggle="modal"
data-target="#myModal">Register Today</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Try Boro
Registration</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="images/Modal_TryBoroLogo.gif" class="img-fluid"
alt="Placeholder image">
<p>Great job! Through the magic of make-believe, you are now
registered.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<img src="images/Swap1_kidstri_CuteLook.jpg" alt="Kid athlete
with a cute look." class="img-fluid" id="cute">
</div>
</div> <!--end of row-->
<footer class="footer bg-primary text-center
text-black">Copyright Try Boro</footer>
</div>
</body>
</html>
before/after i have commented the error in lines
<!doctype html>
<html>
<body> <!-- Error 1 body tag must not start here over here
there must be head tag open -->
<title>Try Boro Kids Race Series</title>
<!-- Font Awesome -->
<!-- Error 2 link must be their before rel -->
<rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Bootstrap CSS -->
<!-- Error 3 link must be their before href -->
<href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet">
<!-- JQuery -->
<!-- Error 4 script must be there before type -->
<type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<!-- Error 5 script must be there before type -->
<type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<head><!-- Error 6 head tag must not start here over here
there must be body tag open -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark
bg-primary">
<a class="navbar-brand" href="#">
<img src="images/HeaderBoroRunningMan2.gif" width="auto"
height="30" >
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="events.html">Events <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link"
href="contact.html">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link"
href="http://www.tryborokidstri.org/" target="_blank">Try
Boro</a></li>
<!-- Error 7 Please check the url no space must be there in
facebook.com -->
<li class="nav-item"><a class="nav-link"
href="https://www.facebook. com/TryBoroKids/"
target="_blank"><img src="images/IconFacebook.png"
class="iconsocial" width="auto"
height="30"></a></li>
</ul>
</div>
</nav>
<div class="row p-5">
<div class="row"><!-- Error 8 instead of class row col
must be there -->
<h2>Want to register?</h2>
<h3>Try Boro Kids 2.5K/5K Run</h3>
<p>May 13, 2020</p>
<p><a href="http://www.tryborokidstri.org"
target="_blank">Click here more
information</a></p>
<p> <a href="docs/2016TryBoroRunRegistrationForm.pdf"
target="_blank">Download a registration
form</a></p>
<h3>Try Boro Kids Trail Run</h3>
<p>October 17, 2020</p>
<p><a href="http://www.tryborokidstri.org"
target="_blank">Click here more
information</a></p>
<p> <a
href="mailto:[email protected]">Interested? Click here to
email us</a></p>
<!-- Modal Button -->
<button type="button" class="btn btn-info" data-toggle="modal"
data-target="#myModal">Register Today</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Try Boro
Registration</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="images/Modal_TryBoroLogo.gif" class="img-fluid"
>
<p>Great job! Through the magic of make-believe, you are now
registered.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row"><!--error 9 there must be class col
instead of row-->
<img src="images/Swap1_kidstri_CuteLook.jpg" class="img-fluid" id="cute">
</div>
</div> <!--end of row-->
<footer class="footer bg-primary text-center
text-black">Copyright Try Boro</footer>
</div>
</body>
</html>