Hypermedia Proficiency Exam
Spring, 2007
Connect to iat.ubalt.edu using an FTP client, or the FTP function of your Web browser
if you are using Internet Explorer on Windows. Login as testee with the password
ez4u2. You should see a directory with your last name on it. In that directory you should
find the source file exam_text.txt. Notify the examiner if these details are not correct.
You will be developing Web pages in your directory on the server. To access these pages
via the Internet using your browser, use this address:
http://iat.ubalt.edu/profExam/students/[yourlastname]/[pagename]
--------------------------------I. File structure and page setup
--------------------------------1. Within your directory create a subdirectory named exam. Within exam create two
additional subdirectories:
 style
 feedback
2. Open the page exam_text.txt in your text processor and save it within your main
directory as dictionary.htm.
3. Within the subdirectory style create a stylesheet called examStyle.css.
4. Within the subdirectory feedback create a blank Web page called form.htm.
----------------------------------------------------II. Specifications for the stylesheet EXAMSTYLE.CSS
----------------------------------------------------1. Define style attributes for three XHTML elements:
2. h1: bold, red, 14-point Times; if that isn’t available, Courier; if that isn’t
available, generic serif.
3. dt: black, 12-point Courier New; if that isn’t available, Courier; if that isn’t
available, generic monospace. Use a line height of 15 pixels and a left margin of
15 pixels.
4. on the dictionary page, specify that the information about the part of speech is
displayed in red.
5. dd: blue, 10-point Verdana italic; if that isn’t available, Arial; if that isn’t
available, generic sans-serif.
6. Define unvisited links in bold, green 10-point Verdana, Arial, or generic sansserif;
7. Define visited links in bold, gray 10 point Verdana, Arial, or generic sans-serif;
8. Specify that when the user’s cursor is held over any lint (hovering), the link will
have a yellow background.
9. Style unordered lists in an inline fashion.
10. Create an id entitled container that is centered on the page, has text aligned to the
left, and is 600 pixels wide.
5.15.07
-----------------------------------------------III. General specifications for the page DICTIONARY.HTML
-----------------------------------------------The page must:
1. have a DOCTYPE of XHTML 1.0 strict (provided) and declare a character set
(provided)
2. have a title tag that includes your first name, last name and the word "exam";
3. access the stylesheet examStyle.css;
4. specify colors in hexadecimal form;
5. have a white background;
6. contain an h1 heading consisting of the words "Dictionary Page";
7. contain an h2 element consisting of the words "University of Baltimore";
8. contain no line wider than 600 pixels;
9. use the appropriate html list structure for any entry that includes multiple,
numbered elements.
10. have an unordered list element at the bottom of the page containing the list items
“home” and “feedback”, with the word “feedback” being a link to form.htm at
the location specified in the source file exam_text.txt;
11. include the image egret.jpg to the right of the first entry, using a buffer between
text and image of 15 pixels. Further details about the image are given in the next
section.
Here is a link to an image of what the pages should generally look like:
http://iat.ubalt.edu/profexam/views/views.htm
-----------------------------------------------------------IV. Specifications for the image included in DICTIONARY.HTML
-----------------------------------------------------------The image called egret.jpg is 100 pixels wide and 86 pixels high.
The image file is located on the student-iat server in a directory called exam_images
which is parallel to the directory that contains your personal directory. Here are the file
locations in outline form:
[students]
[myDirectory]
[exam]
dictionary.html
[style]
examstyle.css
[feedback]
form.html
[exam_images]
egret.jpg
You must include the egret image using a relative file path that does not point back to the
5.15.07
root. That is, the file path in your image tag must not begin either with "http://" or with
"/". Do not copy the image file from its present location into your main directory.
---------------------------------------V. Specifications for the page FORM.HTML
---------------------------------------There is no source file for this page. Create the page from scratch following the
instructions given here.
1. The form page must access the stylesheet examStyle.css.
2. Use the POST method and set form action to "../../cgi/exam.cgi".
3. This page must contain an HTML form structured by means of an HTML table.
Do not use stylesheet effects to position elements of your form. Write a stylesheet
rule to set the width of the table to 400 pixels.
4. Like dictonary.htm, this form page should be 600 pixels wide and centered on the
screen.
5. The form page must use a correct DOCTYPE for XHTML strict and also declare
a character set.
6. The page must have a title tag that includes your first and last name and the word
“form”.
Here is a link to an image of what the pages should generally look like:
http://iat.ubalt.edu/profexam/views/views.htm
As shown in the image, the page contains the H1 heading "Feedback Form" and a series
of form elements:
1. Two text inputs, each preceded at left by a label: "First Name" then "Last Name";
2. Below the text, "Please tell us whether you are:" come two radio buttons; each is
preceded at left by the label "A Student" and "A Teacher";
3. Below the radio buttons are two button elements, one to "Submit" and one to
"Reset".
Finally, outside the form is a line of text reading "Return to Dictionary." Create a link
from the word "Dictionary" to the page dictionary.htm.
5.15.07