Module 2 - Page 16 - Exercise Six: Relative URLs

Exercise Six

Relative URLs

In this exercise, you will create a simple mini-website in order to practice the use of relative URL syntax.

Download Exercise Files

Stuffit Archive (13K)
Zip Archive (13K)

Instructions

1. Create two folders, "gertrude" and "fred". Place these two folders in a folder named "harry".

2. Create two HTML pages each for "gertrude" and "fred", for a total of four HTML pages; name the pages in "gertrude" as "page1.html" and "page2.html"; name the pages in "fred" as "page3.html" and "page4.html". Place an H1 heading at the top of the BODY in each page, stating the relevant page name; this will keep you from being confused about which page you're looking at when you test the pages. Test your pages; make corrections, as needed.

3. Create a "graphics" folder in "gertrude".

4. Create a "graphics" folder in "fred".

5. Each "graphics" folder will contain two images. Put "capitalA.gif" and "capitalB.gif" in the "graphics" folder in "gertrude"; put "capitalC.gif" and "capitalD.gif" in the "graphics" folder in "fred". These four GIFs are included in the stuffed/zipped archive attached above.

6. Each HTML page must have three hyper-references, one to each of the other pages in the site.

Example code:

<p><a href="./page2.html">Link to Page 2</a></p>

7. Each HTML page must have all four images displayed. Example code:

Note: All the graphics in this exercise are the same size, 54 pixels wide by 54 pixels high.

Note: You will only need two relative URL prefixes to make this exercise work correctly, "./" and "../"

8. Test pages. Correct errors in code.

Here is an illustration to clarify the organization for this mini-website:

You may view the completed version of this exercise to see what the finished pages look like.

You may download the solution files (.sit -- 16K) after you have finished the exercise in order to check your work.

Main Menu