Adding Links - Exercise

Contact Us or call 1-877-932-8228
Adding Links - Exercise

Adding Links

Duration: 15 to 25 minutes.

In this exercise you will add links to index.html. The completed page should look like this:

  1. Open Links/Exercises/index.html for editing.
  2. Add the following links:
    • Home: index.html
    • Races: Races.html
    • Resources: Resources.html
    • Calculator: Calculator.html (should target "newwin")
    • Running Log: RunningLog.html
    • My Account: MyAccount.html
    • Log out: Logout.html
    • the most up-to-date information on running races: Races.html
    • the best resources for runners: Resources.html
  3. Add an email link to "info@runnershome.com" after the copyright.
  4. Save your work and open your new page in a browser to test it.

Challenge: Add links in Resources.html to external resources.

  1. Open Links/Exercises/Resources.html for editing.
  2. Add links to any useful resources for runners you can find on the web.

Solution:

Links/Solutions/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Runners Home&trade;</title>
</head>
<body>
<div>
	<a href="index.html">Home</a> |
	<a href="Races.html">Races</a> |
	<a href="Resources.html">Resources</a> |
	<a href="Calculator.html" target="newwin">Calculator</a> |
	<a href="RunningLog.html">Running Log</a> |
	<a href="MyAccount.html">My Account</a> |
	<a href="Logout.html">Log out</a>
</div>
<p>Hello, Stranger!</p>
<h1>Welcome to Runners Home&trade;</h1>
<p>
	Runners Home&trade; is dedicated to providing you with:<br>
	&#8226; <a href="Races.html">the most up-to-date information on running races</a><br>
	&#8226; <a href="Resources.html">the best resources for runners</a>
</p>
<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 to Challenge:

Links/Solutions/Resources.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Resources</title>
</head>

<body>
<h1>Resources</h1>
<div>
	<a href="http://www.mapmyrun.com">Map My Run</a><br>
	<a href="http://www.runnersworld.com">Runners World</a><br>
	<a href="http://www.coolrunning.com/index.shtml">Cool Running</a>
</div>
</body>
</html>
Next