Creating Lists - Exercise

Contact Us or call 1-877-932-8228
Creating Lists - Exercise

Creating Lists

Duration: 15 to 25 minutes.

In this exercise you will modify index.html so that the two list items under the text "Runners Home™ is dedicated to providing you with:" will appear as a numbered list. You will also change the menu so that the items appear in an unordered list. The page should appear like this:Final Page with Ordered List and Unordered Menu List

In addition, you will modify a new page called RunningTerms.html. The page uses a definition list and should appear like this:Final Page with Definition List

  1. Open Lists/Exercises/index.html for editing.
  2. Change the list to a bulleted list as shown in the first screenshot above.
  3. Save your work and open your page in a browser to test it.
  4. Open Lists/Exercises/RunningTerms.html for editing.
  5. Modify the page so that it appears as shown in the screenshot above.
  6. Save your work and open your new page in a browser to test it.

Solution:

Lists/Solutions/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Runners Home&trade;</title>
</head>
<body>
<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="Races.html">Races</a></li>
	<li><a href="Resources.html">Resources</a></li>
	<li><a href="Calculator.html">Calculator</a></li>
	<li><a href="RunningLog.html">Running Log</a></li>
	<li><a href="MyAccount.html">My Account</a></li>
	<li><a href="Logout.html">Log out</a></li>
</ul>
<p>Hello, Stranger!</p>
<h1>Welcome to Runners Home&trade;</h1>
<p><img src="Images/RunnersHome.gif" alt="Logo"></p>
<p>Runners Home&trade; is dedicated to providing you with:</p>
<ol>
	<li><a href="Races.html">the most up-to-date information on running races</a>.</li>
	<li><a href="Resources.html">the best resources for runners</a>.</li>
</ol>
<hr>
<p>&copy; 2016 Runners Home. All rights reserved. For questions, send email to <a href="mailto:info@runnershome.com">info@runnershome.com</a>.</p>
</body>
</html>

Solution:

Lists/Solutions/RunningTerms.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Running Terms</title>
</head>
<body>
<h1>Running Terms</h1>
<!--terms taken from http://www.valleyforgestriders.com/training_corner/running_terminology.htm-->
<dl>
      <dt>10-K pace</dt>
      <dd>10-K pace, when used in a workout to describe how fast to run, is simply the pace of a runner's last 10-K race.</dd>

      <dt>5-K/8-K/10-K</dt>
      <dd>K is for kilometers, 1,000 meters. A 5-K is equal to 3.1 miles; 8-K is 4.96 miles; 10-K is equal to 6.2 miles.</dd>

      <dt>400 meters</dt>
      <dd>Equivalent to a quarter mile or 1 lap around a standard track.</dd>

      <dt>800 meters</dt>
      <dd>Equivalent to a half-mile or 2 laps around a standard track.</dd>

      <dt>aerobic</dt>
      <dd>Used to refer to running or other exercise at an intensity that's sufficiently easy for
        your respiratory and cardiovascular systems to deliver all or most of the oxygen required
        by your muscles, and slow enough that lactic acid doesn't appreciably build up in your
        muscles. Generally, you can sustain a slow aerobic pace for long periods of time, provided
        you have the endurance to go long distances.</dd>
</dl>
<hr>
<p>&copy; 2016 Runners Home. All rights reserved. For questions, send email to <a href="mailto:info@runnershome.com">info@runnershome.com</a>.</p>
</body>
</html>
Next