Inserting Links

Instructions: In this exercise, you will use your HTML editor to enter the needed tags and

content to create several different types of links. The completed page is shown in Figure 3–68.

The starting file contains comments to note the location of links you will add to the page. You will

also use professional web development best practices to indent, space, validate, and check the

spelling of your work.

 Perform the following tasks:
1. Open the ski03.html file from the Data Files for Students and then modify the comment
    at the top of the page to include your name and today’s date.
2. After the <!--Insert an image with a link--> comment, insert an <img> tag as follows:
   <img src="ski.jpg" alt="happy skiers" height="343" width="514">
3. Make the image a link to http://www.breckenridge.com
4. Make each word in the <nav> section a link to another page on the website. Put each
     link on itsown line for readability as follows:
      <a href="events.html">Events</a> |
      <a href="lessons.html">Lessons</a> |
     <a href="snowreports.html">Snow Reports</a> |
     <a href="employment.html">Employment</a>
5. In the <div id="content"> section, make the phone number, 1-800-555-4SKI, a telephone
     link to that number. (Hint: The letters SKI translate to the numbers 754 on a phone keypad.)

6. Make the text "Write to Kent" an email link to kent@ilovesnow.com
7. In the footer, make the text “snow.com” a link to http://www.snow.com
8. To make it easier for users to navigate the home page, add two links in the footer section that
     will quickly take the user back to the top and main areas of the webpage.

In the footer section, make Lessons link to the id="content" location on same page.
When a link goes to a location on the same page, the href attribute value starts with
a # (pound sign or hash tag) followed by the id value of the target location as follows:
<a href="#content">Lessons</a>

9. In the footer, make Top link to the top of the page. Because the location for this link is not
yet identified, you need to insert an appropriate attribute value pair to the opening <header>
tag as follows to mark this location: <header id="top">
With the location identified, go back to the footer and mark up the Top text with a link as
follows: <a href="#top">Top</a>

Navigational links at the bottom of the webpage are especially useful to those who are viewing
the page on a small device because they help minimize excessive scrolling.

10. In the footer section, make Rental Agreement link to a document named legal.pdf as
follows: <a href="legal.pdf">Rental Agreement</a>
11. Save and view your work in a browser. Tap or click each of the 11 links you inserted starting
with the image link to make sure they work as desired. Note that the links in the nav section
currently point to pages you have not created yet. Also, depending on the device you are using
to check your work, the telephone and email links may not work.
12. Check the spelling of the content on the page.
13. Validate your webpage using the W3C validator found at validator.w3.org and fix any errors
that are identified. Validation is complete when the validator returns the message “This
document was successfully checked as HTML5!” in a green bar near the top of the webpage.
14. Submit the ski03.html file in a format specified by your instructor.

15. The html validator at http://validator.w3.org allows you to validate a webpage by entering
a URL, uploading a fille, or directly inputting the code into the validation window. Which
method(s) does the link checker at http://validator.w3.org/checklink use? (Hint: A URL is
created by software on the web server when you publish a webpage. See your instructor to
determine if a web server is available for student use at your school.)