Web Design
HTML Exercise #2

Linking within a nested site structure

Focus on:

Part I:

Download ex2links from Canvas (you have already done this because you wouldn't see this file if you hadn't!), and be sure you move it to your web design exercises directory on your hard drive. NEVER work on files in your downloads directory. Ever.

To help you understand this assignment and site files structure, please read the page about site structure before you begin.

  1. Using the pets directory inside this links exercise as your root folder, create a site using nested subdirectories. You'll need to make 3 new folders with the following names:
    • dogs
    • cats
    • fish

    (A quick reminder that you can call your folders anything that is relevant, as long as it you use the file and folder naming conventions for the web: usually lowercase and never any "illegal characters" - use alpha-numerical, underscore, dash only). The "large site structure" graphic on the site structure page (link above) shows you what your site's structure will look like, although we will not make as many pages.

  2. Launch your text editor. Open the ex2links folder.
  3. Create a new file (file > new). In a new file, create the basic HTML page template, with all the necessary tags in their correct order.
  4. Save the file as index.html in the pets directory inside ex2links. Whenever you create a new file, you need to be aware of the location you CHOOSE to save it. Don't just save to the default location; it might not be where you want it.
  5. Be sure that your markup is correct by testing it in the WC3's HTML validator: http://validator.w3.org. Use "Validate by File Upload" tab - you'll be prompted to find the file on your hard drive, and select it for validation. Correct any errors that the validator identifies. Validator often does not work in Safari. Use Firefox or Chrome. If the file upload doesn't work, try the "non-DTD-based validator" link that is on the validator page. Be sure you aren't using Safari!

Part II:

  1. Once your page validates, you will save the basic page template three times. Use the "save as" option, save index.html, and give it a new file name each of the three times:
    • first as: about-dogs.html in dogs folder
    • second as: about-cats.html in cats folder
    • third as: about-fish.html in fish folder.

    This is creating the bare-bones site files for our exercise. Remember to use all lowercase for your folders and filenames. You have just saved the HTML page template into each of your folders, so you don't need to type it again from scratch. This is also helpful when coding by hand. View your pets folder as a list on the desktop, and look at your site hierarchy. Be sure you understand it.

  2. You should see all the contents of your pets site on the left side of your text editor. Select index.html in your text editor, and type <p>Welcome to the Pets site. Visit our pages about dogs, cats and fish.</p> in between the <body></body> tag (this is your page content). Give the page an appropriate title inside the <title></title> tag. Save. 
  3. Select about-dogs.html and type <p>This is the dogs page. Return to the Pets homepage.</p> in between the <body></body> tag. Save. Do the same thing for about-cats.html and about-fish.html, with the text edited appropriately for each topic. Remember to check the text in the title tag!
  4. Select index.html and create links to the dog, cat and fish pages you just made. Create "inline links." Do not re-type the words, but instead, mark up each word to create a link by surrounding each word in the text you already typed with the ANCHOR tag: <a href="path/to/file.ext">linked text here</a> tags around the appropriate text that you have already put in. Remember file structure so that your relative pathname works (hint: your target documents reside "downstream" in separate folders). Note: "path/to/file.ext" is the format of a generic pathname, and not a literal pathname that will work in your site. It uses the syntax and terminology of pathnames within the pathname itself. Yours will use the actual names of your directories and html files, with the .html file extension.
  5. Now, create links back to the Pets Homepage (index.html) on each of the department pages. Remember file hierarchy - Pets Homepage is "upstream".
  6. Launch browser (Chrome or Firefox) and open your index.html file. Click on the links to make sure they work. De-bug if they do not.
  7. Now select about-dogs.html and type or visit the pages about cats and fish. after the Pets Homepage text (it should read: "Return to the Pets Homepage, or visit the pages about cats and fish."). Link the words "cats" and "fish" to their pages. Pathnames have to link both upstream and downstream. View in browser see if links work. Then do the same thing for about-cats.html and about-fish.html with appropriately-edited text.
  8. Recheck to be sure you have accurate and relevant text between the <title></title> tag so that each page is properly identified. This is crucial for searchable and bookmarkable sites.
  9. Create a page called cat-toys.html and save it in the cats directory, and put in a sentence or two of relevant cat toy content. Make a hyperlink to this new toys page from the about cats page. Be sure the text you hyperlink is useful. For instance, "click here" is terrible hyperlinked text and should never be used. However, "learn more about surfboards" is useful text if the hyperlink is going to a surfboard page. Get my drift?
  10. On each pet page, create a link to an external site that features information about that specific animal (you can google for an appropriate site). Remember that to link to an external site, you need an "absolute" pathname, and within that pathname, you need to include the entire URL with protocol (http://). The easiest way to do this is to copy the URL from the browser address bar. Also, make each external link open in a new browser window using the target attribute in the anchor tag. Do you remember what value for target will open a new window?

You must submit this project for a score. To submit, you need to upload the entire pets directory to SOIS. Here are the steps to upload and then submit:

  1. launch your FTP client and log into your SOIS space
  2. click inside the public_html directory so you are inside it and ready to drag your pets root folder into this space
  3. drag the entire pets root folder into the remote site panel in your FTP client. Your root folder will have the site homepage, the different pet subdirectories, and the file about each pet in its appropriate subdirectory (see the large site image in site-structure.html but yours will not have the extra files about the different pets)
  4. once the site is uploaded to SOIS, launch a new browser window, and type in the URL for the site: epantherlogin.uwmsois.com/pets/ Of course, use your epanther login.
  5. if this URL does not work, check the spelling of everything and also check where you uploaded your site in the FTP client's remote site panel. Is it inside html_public? Did all the files get uploaded?
  6. check to be sure all the text is correct and all the links work. If everything works, copy the URL from the browser's address bar.
  7. go to the Canvas assignment for HTML Exercise 2, and paste the URL as your assignment submission