Question
In: Computer Science
Dear Colleague, Earlier today I built my seventh website using HTML5, CSS3, and Bootstrap4. Bootstrap seems...
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.
index.html ( TOTAL 10 ERRORS HELP FIND AND LIST ERRORS
)
<!doctype html>
<html>
<head>
<head>Try Boro Kids Race Series</title>
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Bootstrap CSS -->
<a
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet">
<!-- JQuery -->
<a type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<bootstrap>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark
bg-info">
<a class="brand" href="#">
<img src="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.faccebook.com/TryBoroKids/"
target="_blank"><img src="images/IconFacebook.png"
class="iconsocial" alt="Facebook" width="auto"
height="30"></a></li>
</ul>
</div>
</nav>
<div id="carouselIndicators" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0"
class="active"></li>
<li data-target="#carousel1" data-slide-to="1"
class="active"></li>
<li data-target="#carousel1" data-slide-to="2"
class="active"></li>
<li data-target="#carousel1" data-slide-to="3"
class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="images/Banner1_100ChallengeBlueHue.jpg" alt="First
slide">
<div class="carousel-caption d-none d-md-block">
<h5>Try Boro Kids Race Series</h5>
<p>Unique Endurance Events</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Banner2_ImageBlueHue.jpg"
alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Try Boro Kids Race Series</h5>
<p>Running Events</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="images/Banner3_TrailRunBlueHue.jpg" alt="Third
slide">
<div class="carousel-caption d-none d-md-block">
<h5>Try Boro Kids Race Series</h5>
<p>Trail Running</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="images/Banner4_MedalsBlueHue.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Try Boro Kids Race Series</h5>
<p>Events that are rewarding!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row p-5">
<div class="col-xs-12">
<h2>Try Boro Events</h2>
<p>The Try Boro Kids Races Series is a non-profit
organization that puts on unique endurance vents to help get kids
active. Founded in 2009 with one triathlon. This event was hosted
by Murfreesboro Parks and Recreation and their SportsCom facility.
That first year saw 175 kids swim, bike, and run and since then the
series has hosted 17 events. For the past 4 years, the series has
hosted a 2.5K/5K Run in May, a triathlon in August, and a trail in
October. </p>
<p>In 2016, the series is partnering with the
Better Boro Project, which is part of an initiative by the city of
Murfreesboro to promote health and fitness. As part of this
initiative, the Try Boro Kids Race Series will host the clinics in
April, 2.5K/5K Run in May, and the trail run in October. The series
will also provide support for other events such as Read to Succeed
and Murph's Fun Run.</p>
</div>
</div>
<footer class="footer bg-primary text-center
text-white">Copyright Try Boro</footer>
</div>
</body>
</html>
HELP LIST AND FIND THE 10 ERRORS
Solutions
Expert Solution
Errors :
1 . Line 4. <head> is used instead to <title>. Changed this to <title>
2. Line 5. Character encoding is needed for HTML. Added <meta charset="UTF-8"> tag at line 5
3. Line 9. <a> tag is used to include style sheet. <link> is the correct tag to include style sheet.
4. Line 11 <a> tag is used to include java script. <script> is the correct tag to include style sheet.
5. Line 11. type="text/javascript" is not needed. <script> tag indicates that the link is a java script file
6. Line 13. <a> tag is used to include java script. <script> is the correct tag to include style sheet.
7. Line 13. type="text/javascript" is not needed. <script> tag indicates that the link is a java script file
8. Line 16. <bootstrap>is not a valid HTML tag. <body> should be used to indicate start of body
9. Line 22. width=auto is invalid bootstrap specification. Use class="mw-auto"
10. Line 38. width=auto is invalid bootstrap specification. Use class="mw-auto"
Following is the modified index.html. It has no error.
<!doctype html>
<html>
<head>
<title>Try Boro Kids Race Series</title>
<meta charset="UTF-8">
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Bootstrap CSS -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet">
<!-- JQuery -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark
bg-info">
<a class="brand" href="#">
<img src="HeaderBoroRunningMan2.gif" class="mw-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>
<li class="nav-item"><a class="nav-link"
href="https://www.faccebook.com/TryBoroKids/"
target="_blank"><img src="images/IconFacebook.png"
class="iconsocial; mw-auto"
height="30"></a></li>
</ul>
</div>
</nav>
<div id="carouselIndicators" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0"
class="active"></li>
<li data-target="#carousel1" data-slide-to="1"
class="active"></li>
<li data-target="#carousel1" data-slide-to="2"
class="active"></li>
<li data-target="#carousel1" data-slide-to="3"
class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="images/Banner1_100ChallengeBlueHue.jpg" >
<div class="carousel-caption d-none d-md-block">
<h5>Try Boro Kids Race Series</h5>
<p>Unique Endurance Events</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Banner2_ImageBlueHue.jpg"
>
<div class="carousel-caption d-none d-md-block">
<h5>Try Boro Kids Race Series</h5>
<p>Running Events</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="images/Banner3_TrailRunBlueHue.jpg" >
<div class="carousel-caption d-none d-md-block">
<h5>Try Boro Kids Race Series</h5>
<p>Trail Running</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="images/Banner4_MedalsBlueHue.jpg" >
<div class="carousel-caption d-none d-md-block">
<h5>Try Boro Kids Race Series</h5>
<p>Events that are rewarding!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row p-5">
<div class="col-xs-12">
<h2>Try Boro Events</h2>
<p>The Try Boro Kids Races Series is a non-profit
organization that puts on unique endurance vents to help get kids
active. Founded in 2009 with one triathlon. This event was hosted
by Murfreesboro Parks and Recreation and their SportsCom facility.
That first year saw 175 kids swim, bike, and run and since then the
series has hosted 17 events. For the past 4 years, the series has
hosted a 2.5K/5K Run in May, a triathlon in August, and a trail in
October. </p>
<p>In 2016, the series is partnering with the Better Boro
Project, which is part of an initiative by the city of Murfreesboro
to promote health and fitness. As part of this initiative, the Try
Boro Kids Race Series will host the clinics in April, 2.5K/5K Run
in May, and the trail run in October. The series will also provide
support for other events such as Read to Succeed and Murph's Fun
Run.</p>
</div>
</div>
<footer class="footer bg-primary text-center
text-white">Copyright Try Boro</footer>
</div>
</body>
</html>
You can use the URL https://validator.w3.org/#validate_by_upload to validate HTML files.
Following is the sample screen shot. Images are missing in my sample run.
venereology answered 4 months agoRelated Solutions
Dear Colleague, Earlier today I built my seventh website using HTML5, CSS3, and Bootstrap4. Bootstrap seems...
Dear Colleague, Earlier today I built my seventh website using HTML5, CSS3, and Bootstrap4. Bootstrap seems...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript...
- IN JAVA 1.Write a class Item with these following requirements ØHas two properties: itemName (text) and...
- Vector A = (-2, 2.4) and vector B = (4, 2.3). Find the magnitude of the...
- Suppose the government increases spending: (a) Illustrate and explain the multiplier effects on aggregate demand. [5...
- Discuss in details the strategic benefits of Business Inelegance systems
- Labradors come in three colors-- black, brown and yellow. What is the genetic basis for these...
- Consider a consumer’s consumption-saving decision in a two-period model. Suppose that the real interest rate is...
- A stone is dropped at t = 0. A second stone, with 6 times the mass...