Printed from TeacherJohn.com • http://www.teacherjohn.com/cabrillo/dm60a/exercises/ex04.php

Exercise 4
Hyperlinks

Resources for this exercise:

Step 1 - Create your exercise 4 page

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

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

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

1.4) This page must contain the Doctype that will enable you to use an HTML validator:

As explained in How to Use the W3C HTML and CSS Validators: At the very beginning of your document, before the <html> tag, place this line of code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

1.5) This page must contain links (either buttons or text 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 4.01 Transitional, not XHTML 1.0 Strict, as you are using an HTML, not XHTML, DocType. (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.)

1.6) 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.7) This page must contain a link with a relative path to your exercise 3 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 bottom 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 bottom to the top.)

1.10) This page must contain another within-document link that takes you from the top of the page to the middle 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 middle.)

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 name, and link to it from your exercise 4 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
name anchor (destination point) <a> name

1.13) Save this file as "exercise4.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/exercise4.html
to view your exercise 4 page.

1.16) Make sure this page validates (using the HTML 4.01 Transitional DTD) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can now easily do this by clicking on your validator button. 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/validator-uri.html. 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 60A 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) Modify your home page to include a relative link that goes to your exercise 4 page.

2.5) Make both links into list items of an unordered list. As you create more homework exercises, this list of links to your exercises will grow.

2.6) As always, your home page must contain links (either buttons or text 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 4.01 Transitional, not XHTML 1.0 Strict, as you are using an HTML, not XHTML, DocType. (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.7) 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.8) Make sure your home page validates (using the HTML 4.01 Transitional DTD) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can now easily do this by clicking on your validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

2.9) If you have used any CSS (you probably haven't, as we haven't covered style sheets yet), make sure the CSS on your home page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. 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.10) If there are any errors, fix them, re-upload the page, and validate it again.

Step 3 - Submit the feedback form

2.19) Submit the feedback form. To receive full credit for this exercise you must submit the feedback form before it expires. This exercise is due on 7/1/08. 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 07/03/08.