Assignment: Links

This is the first part of an assignment that will use images and links when complete. We will start with links.

Read everything before doing anything. This is not a trivial assignment. No individual part of the assignment is difficult, but there are a lot of parts. The pages that you create will work together only if you do these parts correctly.

Creating Files

Instead of creating a file named assignment5.html, you will open the template.html file in your assignments folder and save it with the name index.html. It must have a <title> and level one heading of:

CIT 040 - your name

Beneath the heading should be a bulleted list with this text:

Assignment: Formatting Text
Assignment: Lists
Evergreen Valley College Campus Tour

The first two should link to the appropriate pages (assignment2.html and lists.html). last should link to a file named index.html in a subdirectory named evc, which will be located in the public_html directory. That subdirectory does not exist, so you must create it. Important—you must also create the same subdirectory, in the same relative position, on the UNIX server.

Now open the template.html file once again, and this time, save it as index.html in the evc directory. Your file structure should look like what you see in the following diagram.

Starting Point File Structure

The evc/index.html file

The index.html file in the new evc directory should have the <title> of Evergreen Valley College Campus Tour and should contain this HTML. You may reformat in any way that pleases you.

<h1>Evergreen Valley College Campus Tour</h1>

<p>Welcome to Evergreen Valley College. Our beautiful campus and
excellent staff make Evergreen the ideal place for you to
continue your learning experiences.</p>

<p>Please take a look at the following pages, which
introduce you to Evergreen. We look forward to seeing you
in a class soon!</p>

<p>Please click the item you want to see.</p>

<ul>
  <li>Registration</li>
  <li>Classroom Buildings</li>
  <li>Miscellaneous</li>
</ul>

<p>
<a href="../assignments/index.html">Back to Assignments Index</a>
</p>

The list items will become links to files named register.html, buildings.html, and miscellaneous.html. All three of those files will also be in the evc directory. Create those files now, by saving the template.html file three different times. You may first want to copy the template.html file to the evc directory to make this part of the assignment easier.

I strongly suggest that, in the <body> of each file, you place an <h1> that gives the name of the file. Thus, register.html file will contain the markup <h1>Register</h1>, the file buildings.html will contain the markup <h1>Buildings</h1>, and the file miscellaneous.html will contain the markup <h1>Miscellaneous</h1>. This will help you to see which page you are on when you test your links.

At the bottom of each of the three pages, (register.html, buildings.html, and miscellaneous.html) you will insert markup that produces a “multi-link” to all the other pages. No page will include a link back to itself. For example, the links on the register.html page will look like the following, where the link for “Campus Tour” links back to the index.html file in the evc folder. (The border is just there to highlight the area. You do not put the border in your HTML.)

Campus Tour | Registration | Classroom Buildings | Miscellaneous

Use the wording for these links exactly as shown, and make sure they are in the same order as shown here. [[ Added on 4 Oct 2015: You do not have to center the links; that requires knowing styles, which haven't been covered in the book yet. ]]

Do not put this set of links into the index.html page.

See this site for information about creating a “multi-link”.

Here is a diagram showing the file hierarchy (on the right) and the navigation (on the left) that you should have when you finish.

IMPORTANT!

All links in this assignment must use relative pathnames. You may not use absolute pathnames for this assignment.

Additional Information

From the external site that talks about links, please read these sections:

I also recommend that you go to http://www.youtube.com/user/jdeisenberg and click Playlists. One of the playlists is titled “Web Design 1 (CIT040),” and it discusses how to use path names in links.

When You Finish

You must validate your documents before you submit them.

Upload all your files to the correct places on the server.