CIT 040 Index > Assignment 5

Assignment 5

The object of this assignment is to use images and 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 should have a title and heading of:

CIT 040 - your name

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

Assignment 2 - Text
Assignment 3 - Lists
Assignment 4 - Color and Size
Assignment 5 - Evergreen Valley College Campus Tour

The first three should link to the appropriate pages. The 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. Note: these files will not be in the same directory as template.html. At the bottom of each page, you will insert code 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 this:

Campus Tour | Registration | Classroom Buildings | Miscellaneous

Finding the Images

The images that you will use for this assignment are indexed at http://205.155.157.53/html150/cit040/evc_pics/. You will copy them from that site into your public_html/images directory.

Here is a list of the images you will need and their dimensions (where necessary). The ones marked ??? are ones you have to find out for yourself.

Unless specified otherwise, images should have no border.

Text should flow around images unless stated otherwise, and it should break at the proper places. For example, a left-aligned image followed by a right-aligned image should not look like this:

Misaligned text and images

Rather, it should look like this:

Properly aligned text and images

Leave room around the images with vspace and hspace as appropriate.

The register.html File

Put the following text in the register.html file. Text in square brackets [like this] is instructions that tell you what your file must look like.

[Title of page is "EVC Registration"]

[ level 1 heading ] Registering at Evergreen Valley College 

[insert image adm_records_th.jpg at right side of screen] The
Admissions and Records Building is the place where you can register
for classes online or in person. This is also
the place where you: [this should be a bulleted list]

   * pay your fees
   * get transcripts
   * check course availability

[insert image lrc_th.jpg at left side of screen] If you're not
sure which courses you should take, or need to find out a course's
prerequisites, visit the counseling center on the lower level of the
Learning Resource Center.

[insert image bookstore_th.jpg at right side of screen] After you
have registered, you need to go to the
bookstore on the upper level of the Gullo Student Center
to pick up the books for your courses.

[horizontal rule, 75% of width of window]

[insert cafeteria_th.jpg at left side of screen] When you need
a break, go to cafeteria on the lower level of the Gullo
Student Center.

The buildings.html File

Put the following text in the buildings.html file. Text in square brackets [like this] is instructions that tell you what your file must look like. All the pictures on this page must have a one-pixel border.

All the pictures on this page will be clickable.

When you click...You will see
acacia_th.jpgacacia.jpg
cedro_th.jpgcedro.jpg
roble_th.jpgroble.jpg
sequoia_th.jpgsequoia.jpg
[Title of page is "Evergreen Classroom Buildings"]

[ level 1 heading ] Evergreen Classroom Buildings


Click any picture on this page to see a larger version of it.

[insert images acacia_th.jpg and sequoia_th.jpg side by
side, centered horizontally in the window. The words
"Acacia and Sequoia" should appear in small type (80% of normal
size), centered beneath the two pictures.]

The Acacia and Sequoia buildings are on the northeast side of
the campus. The Sequoia building is the newest of the campus
classrooms, with the most modern facilities in its lecture rooms.

[insert images roble_th.jpg and cedro_th.jpg side by
side, centered horizontally in the window. The words
"Roble and Cedro" should appear in small type (80% of normal
size), centered beneath the two pictures.]

The Roble and Cedro buildings are located on the northwest
side of the campus.

The miscellaneous.html File

Put the following text in the miscellaneous.html file. Text in square brackets [like this] is instructions that tell you what your file must look like. All the pictures on this page must have a one-pixel border.

[Title of page is "Evergreen College Miscellanea"]

[ level 1 heading ] Evergreen College Miscellanea

[ level 2 heading ] Computing Facilities

[insert image rg240_th.jpg aligned at right side of screen]
Evergreen Valley College has several computer labs where
students can do their work for their Business Information Systems
or Computer Information Technology courses. At the right you see
the Windows computer lab in room RG-240.

[insert image sunstations_th.jpg aligned at right side of screen]
Evergreen also has a room of Sun Microsystems workstations. This is
the room where the college has an eight-week "boot camp" to train
people to become UNIX system administrators.

[horizontal rule; 75% of width of screen]

[insert image chavez_grove_th.jpg at left side of screen] One of
the places that you can go to relax and enjoy the weather is Cesar E.
Chavez Grove, near the lower level of the Learning Resource Center.

[horizontal rule; 75% of width of screen]

[image future_library_th.jpg should be at the left side of the screen]
This may look like an empty patch of dirt.  [The word "is" in
the next sentence must be emphasized.] In fact, it
is an empty patch of dirt. It will be the future site of the
Learning Resource Center.

You must validate your documents before you submit them. They must be valid XHTML 1.0 transitional.

Print your HTML files and hand them in.