Overview

Absolute addressing is when we put the complete URL of a Website into a link or image tag; relative addressing is when we refer to a file on the same site with the name of the file and its location relative to the file we're coding.

In this assignment, you will be creating a directory structure and putting files in it with relative links to one another and to images.

Create a file structure to which you will be referring.

In the following section, you'll be making references to files in near-by directories. First, you'll have to create the directory structure in which to place files. Do this on your own disk or storage medium. Use Windows' "My Computer" or "Windows Explorer" File > New command to create the structure in your public_html\inp150 directory. The structure is portrayed in three ways to make it as clear as possible - as a diagram, in outline form, and using verbal directions.

Verbal directions:

1. Create a folder called pet_info
2. Inside pet_info, create three folders:
   1. create a folder called images
   2. create a folder called dogs
   3. create a folder called cats
3. In the dogs folder, create two folders:
   1. create a folder called chihuahua
   2. create a folder called doberman
4. In the cats folder, create two folders:
   1. create a folder called siamese
   2. create a folder called persian

Create files in the directories

1. Create a modification of your template.htm file with these features:
1. Color the body of the page light yellow: #FFFFCC
2. Color the text dark brown: #666600
3. At the top, put an H1 heading: "Sarah Strong Pet Service" (changing Sarah's name to your own, of course).
4. An H2 heading: "Topic", which you will change in each of the files you create.
5. A relative link to your inp150/home.htm file.
6. Center everying on the page. (Hint: include this as a style of the body tag.)
7. Save the file as w23m-template.htm, and use it to create all the other files for this task.

When you create links in these files, put each on a separate line, either by putting <br /> between each, or by making each a separate paragraph.

2. In the pet_info folder, create a file called index.htm:
1. Change "Topic" to "Our Most Popular Pets"
2. Create an H3 "Dogs" with a relative link to the index.htm file in the dogs subdirectory.
3. Create an H3 "Cats" with a relative link to the index.htm file in the cats subdirectory.
4. Make sure the relative links to inp150/home.htm are correct for a file at this level.
3. In the dogs folder, create index.htm, with:
1. "Topic" changed to "Two Popular Dogs"
2. an H3 heading "The Chihuahua" and link it to index.htm in the chihuahua subdirectory
3. another H3 heading "The Doberman" and link it to index.htm in the doberman subdirectory
4. a relative link "To Cats" to the index.htm in the cats folder
5. Make sure the relative link to inp150/home.htm is correct for a file at this level.
4. In the doberman folder create three files:
1. index.htm with:
1. "Topic" changed to "The Doberman"
2. an H3 heading "Long-eared" with a link to long-ear.htm
3. a second H3 heading "Short-eared" with a link to short-ear.htm
4. a relative link "Back to Dogs" to the index of the dogs folder
5. a relative link "To Cats" to the index of the cats folder
6. Make sure the relative link to inp150/home.htm is correct for a file at this level.
2. long-ear.htm with:
1. The "Topic" changed to "Long-Eared Doberman"
2. a relative link "Other Dobermans" to the index of the doberman folder
3. a relative link "Back to Dogs" to the index of the dogs folder
4. Make sure the relative link to inp150/home.htm is correct for a file at this level.
3. short-ear.htm with:
1. The "Topic" changed to "Short-Eared Doberman"
2. a relative link "Other Dobermans" to the index of the doberman folder
3. a relative link "Back to Dogs" to the index of the dogs folder
4. Make sure the relative link to inp150/home.htm is correct for a file at this level.
5. In the chihuahua folder create three files:
1. index.htm with:
1. "Topic" changed to "The Chihuahua"
2. an H3 heading "Long-haired" with a link to long-hair.htm
3. a second H3 heading "Short-haired" with a link to short-hair.htm
4. a relative link "Back to Dogs" to the index of the dogs folder
5. a relative link "To Cats" to the index of the cats folder
6. Make sure the relative link to inp150/home.htm is correct for a file at this level.
2. long-hair.htm with:
1. The "Topic" changed to "Long-haired Chihuahua"
2. a relative link "Other Chihuahuas" to the index of the chihuahua folder
3. a relative link "Back to Dogs" to the index of the dogs folder
4. Make sure the relative link to inp150/home.htm is correct for a file at this level.
3. short-hair.htm with:
1. The "Topic" changed to "Short-haired Chihuahua"
2. a relative link "Other Chihuahuas" to the index of the chihuahua folder
3. a relative link "Back to Dogs" to the index of the dogs folder
4. Make sure the relative link to inp150/home.htm is correct for a file at this level.
6. In the cats folder, create index.htm, with:
1. "Topic" changed to "Two Popular Cats"
2. an H3 heading "The Siamese" and link it to index.htm in the siamese subdirectory
3. another H3 heading "The Persian" and link it to index.htm in the persian subdirectory
4. a relative link "To Dogs" to the index.htm in the dogs folder
5. Make sure the relative link to inp150/home.htm is correct for a file at this level.
7. In the persian folder create three files:
1. index.htm with:
1. "Topic" changed to "The Persian"
2. an H3 heading "Kittens" with a link to kitten.htm
3. a second H3 heading "Adult" with a link to adult.htm
4. a relative link "Back to Cats" to the index of the cats folder
5. a relative link "To Dogs" to the index of the dogs folder
6. Make sure the relative link to inp150/home.htm is correct for a file at this level.
2. kitten.htm with:
1. The "Topic" changed to "Persian Kittens"
2. a relative link "Other Persians" to the index of the persian folder
3. a relative link "Back to Cats" to the index of the cats folder
4. Make sure the relative link to inp150/home.htm is correct for a file at this level.
3. adult.htm with:
1. The "Topic" changed to "Adult Persians"
2. a relative link "Other Persians" to the index of the persian folder
3. a relative link "Back to Cats" to the index of the cats folder
4. Make sure the relative link to inp150/home.htm is correct for a file at this level.
8. In the siamese folder create three files:
1. index.htm with:
1. "Topic" changed to "The Siamese"
2. an H3 heading "Traditional Siamese" with a link to traditional.htm
3. a second H3 heading "Gimson Simese" with a link to gimson.htm
4. a relative link "Back to cats" to the index of the cats folder
5. a relative link "To Dogs" to the index of the dogs folder
6. Make sure the relative link to inp150/home.htm is correct for a file at this level.
2. traditional.htm with:
1. The "Topic" changed to "Traditional Siamese"
2. a relative link "Other Siamese" to the index of the siamese folder
3. a relative link "Back to Cats" to the index of the cats folder
4. Make sure the relative link to inp150/home.htm is correct for a file at this level.
3. gimson.htm with:
1. The "Topic" changed to "Gimson Siamese"
2. a relative link "Other Siamese" to the index of the siamese folder
3. a relative link "Back to Cats" to the index of the cats folder
4. Make sure the relative link to inp150/home.htm is correct for a file at this level.

With your browser, check each of the links, repairing broken ones as necessary.

Put pictures in the files

Go to the files in folder w23m on this server: http://courses.wccnet.edu/computer/mod/w23m_images/
and save each of the image files on your disk under public_html/inp150/pet-info/images

Using a relative link, put images in each of these files. Include alternate text, height, and width in each image tag.

1. In folder chihuahua:
   1. In file short-hair.htm, put chihuahua-short.jpg
   2. In file long-hair.htm, put chihuahua-long.jpg
2. In folder doberman:
   1. In file short-ear.htm, put doberman-short.jpg
   2. In file long-ear.htm, put doberman-long.jpg
3. In folder persian:
   1. In file kitten.htm, put persian-kitten.jpg
   2. In file adult.htm, put persian-adult.jpg
4. In folder siamese:
   1. In file traditional.htm, put siamese-traditional.gif
   2. In file gimson.htm, put siamese-gimson.jpg
5. View each of these files in your browser, and make sure the pictures show.

Put the file structure on your Web site

Upload pet-info together with all its sub-folders and files, to your inp150 Web directory.

Check each of the links and images again, to make sure everything got to the server and is correctly linked.

Here is an outline of the file structure as a whole:

When you're done, double-check that the assignment meets the specifications above, and that all links are functional.

Send email to the instructor with the URI. Be sure your email meets the formal requirements: name, class, section and exercise (W23m), and that it follows standard business-email practice.