Exercise 3: Hyperlinks

Resources for this exercise:

Step 1 - Create your exercise 3 page

1.1) Using a basic text editor create an HTML document. This page will become your exercise 3 page.

1.2) This page must display your name and "Exercise 3".

1.3) This page's <title> must indicate that this is your exercise 3, so it should say something like "John Sky's DM60 Exercise 3".

1.4) This page must contain the HTML 5 DocType that will enable you to use an HTML validator, as explained in How to Use the W3C HTML and CSS Validators.

1.5) This page must contain the character encoding meta tag (as explained in Character Encoding for Web Pages). Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:

<meta charset="utf-8">

1.6) This page must contain links to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

Make sure you use the correct links (for HTML 5).

1.7) This page must contain a link with a relative path to your home ("index.html") page (this path will not start with "http://", as it is a relative path).

1.8) This page must contain five links to pages of your choice on the Web that are not on our server (these paths will start with "http://", as they are full URLs).

1.9) This page must contain a within-document link that takes you from the middle of the page to the top of the page. (If your page is not long enough, you will need to add enough text to the page so that you can see the page scroll when going from the middle to the top.)

1.10) This page must contain another within-document link that takes you from the top of the page to the bottom of the page. (If your page is not long enough, you will need to add enough text to the page so that you can see the page scroll when going from the top to the bottom.)

1.11) This page must contain a link to a specific section (not the top) of this page:
http://teacherjohn.com/resources/webdesignresources.php.
(This means you will need to view the source code of this page, find an anchor ID, and link to it from your exercise 3 page.)

1.12) In summary, this page must correctly use the following tags:

Description Element Attribute
HTML document <html>  
head section <head>  
body section <body>  
title <title>  
heading 1 <h1>  
href anchor (link) <a> href
ID anchor (destination point) <a> id

1.13) Save this file as "exercise3.html".

1.14) Upload this page to your folder on the webhawks.org server.

See the How to Upload to Webhawks.org with Fetch (Macintosh) and How to Upload to Webhawks.org with CoreFTP Lite (Windows) for information on uploading.

1.15) View your page (the page on the server, not the page on your local disk) in a Web browser:

Go to:
http://www.webhawks.org/~yourusername/exercise3.html
to view your exercise 3 page.

1.16) Make sure the HTML on this page validates (using the HTML 5 Doctype) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator link. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

1.17) If you have used any CSS (you probably haven't, as we haven't covered style sheets yet), make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

1.18) If there are any errors, fix them, re-upload the page, and validate it again.

Step 2 - Modify your home page

Now that you understand how to link pages, you can transform your "index.html" file into a real home page, with links to your exercises. From now on, as part of each exercise, you will add a link to your home page that will go to the new exercise. Make sure your name, and the links to your exercises, are on your home page.

2.1) If you have not done so already, modify the <title> of your home page to be appropriate for a real home page. For example, change the <title> to something like "John Sky's DM 60 Home Page".

2.2) Optional: Modify your home page to include a mailto link that will send e-mail to your email address. (If you don't have an email address, you can create a free one for yourself using Yahoo mail, Gmail, or Hotmail.)

2.3) Modify your home page to include a relative link that goes to your exercise 3 page.

2.4) As always, your home page must contain links to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

2.5) View your home page (the page on the server, not the page on your local disk) in a Web browser to make sure your links work.

2.6) Make sure the HTML on this page validates (using the HTML 5 Doctype) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator link. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

2.7) If you have used any CSS (you probably haven't, as we haven't covered style sheets yet), make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

2.8) If there are any errors, fix them, re-upload the page, and validate it again.

Step 3 - Submit the feedback form

3.1) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on . Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on //.