CS 337 - Web Programming - Homework Assignment 01

This assignment is worth a total of 100 points.

Text is a major part of web programming. Reading text, writing text, parsing text, regular expressions, text transformations, it goes on and on.

This assignment will focus on text and HTML. Be sure to read all the problems so that you don't get hung up on the first problem. The other problems are shorter and you might want to finish them first and get them out of the way.

Instructions for all problems

  1. There will be additional instructions numbered like this for the individual problems. Be sure to follow all the instructions!
  2. All HTML documents submitted should pass a validation check from http://validator.w3.org. If your document does not validate, you must include a text document (validation.txt) explaining why it does not validate, and convince me that it should still be accepted.
  3. All HTML documents should be HTML5 unless otherwise specified.

Resource Files

The files you will need to complete this assignment are located in this files folder.

Problem 1, Play HTML: 50 points

You are to take the text from a portion of Shakespeare's "A Midsummer Night's Dream", and add links to a Character Glossary page. There should be two HTML files, one named "index.html" and one named "characters.html". The index.html file will contain the text of the play, and will contain links to the Character descriptions in the glossary page, characters.html.

The Character's Glossary

First take the text from characters.txt and build an HTML page. Build an HTML table containing the characters, with columns for name, description, and an image. Images are provided for Theseus and Oberon/Titania. You should try and find other images for the other characters.

  1. The glossary file should be named characters.html
  2. Images should be about 200px high, so that they're all about the same size on the page.
  3. Images must be attributed to their proper source. If its your image, say its yours!
  4. Accessibility considerations will be checked.
  5. We have not discussed CSS styles yet, so a sample style sheet - style.css - is provided for you, so that tables and things don't look too terrible. This style sheet should be linked to both index.html and character.html. We may not have covered linking style sheets in class yet, so look up the <link> element syntax for referencing an external stylesheet.

The final characters page should look similar to the following:

Image of characters.html document

The Play

Here is a sample of the text of the play:

Sample text from the play, from file dream.txt

Each word in all capitals is a character in the play. Each of these words should become a link to the correct character in the glossary page. These character links must use targeted page fragments to target exactly the row in the character's table in characters.html.

Parsing Text Files

There is a short section of a play in the files folder. Take this text, and create a well formed HTML document containing the text of the play, along with links to the characters.html file. Your input file will be dream.txt and your output file will be index.html

  1. Character names in all capitals starting a block of text, such as THESEUS, must be turned into clickable links that link to that character's row in characters.html.
  2. The block of text following a character's name should be slightly indented. Remember, we don't have CSS yet, so do this only with HTML elements.
  3. The title of the play should be a large heading at the top of the page.
  4. The scene and act should be a lesser heading.

The final index.html page should look similar to this:

Image of index.html file

Bonus - Write a program to do this

There's a lot of text, even for this very short section of the play. Rather than doing a ton of copy & pasting, write a program to read in the text of dream.txt, and output index_program.html from your program.

Problem 2, DOM: 15 points

In the files folder for this assignment is an HTML file named dom.html. Draw the DOM tree for this HTML document, similar to the one shown during class

  1. Your DOM tree image should be saved to a file named dom.png and turned in with the rest of your files.
  2. Scans of hand drawn images will not be accepted. Figure out some way to draw the tree in a graphics program.

Problem 3, Character References: 10 points

Character References

Select 3 HTML Character References, and display them in a table. Create a new HTML file called char_refs.html for this problem. The resulting HTML file should look similar to the following:

Image of char_refs.html file
  1. Note: pick different character references than mine!

Problem 4, Mimic: 15 points

Create a new HTML file called mimic.html for this problem. Look at the image called mimic.gif in the files folder. Create an HTML document that matches this PDF.

  1. There is a pagebreak in the PDF file, but there will not be a page break in your HTML document.
  2. Remember, your document should contain NO CSS. This can all be done with HTML elements and their attributes.

Problem 5, HTTP: 10 points

What HTTP request might have been sent to get the following response? Create a new text file called http.txt that contains your answer for this question. 

HTTP/1.1 404 Not Found
Server: nginx
Content-Type: text/html; charset=utf-8
Keep-Alive: timeout=10
Etag: "1409594856-1"
X-Content-Type-Options: nosniff
X-Frame-Options: SameOrigin
Content-Language: en
X-UA-Compatible: IE=Edge,chrome=1
Link: <http://www.arizona.edu/>; rel="canonical",<http://www.arizona.edu/>; rel="shortlink"
Cache-Control: public, max-age=21600
Last-Modified: Mon, 01 Sep 2014 18:07:36 +0000
Expires: Sun, 19 Nov 1978 05:00:00 GMT
Date: Mon, 01 Sep 2014 18:07:37 GMT
X-Varnish: 1864218493
Age: 0
Via: 1.1 varnish
Connection: keep-alive
Vary: Cookie, Accept-Encoding
X-Cache: MISS
X-Node: appstack-prod-231.dubstep.arizona.edu
Set-Cookie: BIGipServerArizona.edu_Site.app~Arizona.edu_Site_pool=3880750090.20480.0000; path=/
Set-Cookie: bbbbbbbbbbbbbbb=OLBAFEHKEPPGCCJMMAMOFAFKKCBIDAOBOGOMHHGKJFIDIOIGLLCBOLDCMFLAKCONNFKENIDIOJOKKMGHJLAGNOCLBMAKDKBIPDFJIDDLFPBJJOJNLMMCAGFIABOINDJK; HttpOnly
Set-Cookie: f5_cspm=1234;
Transfer-Encoding: chunked

Homework Submission

You should create a folder holding your files, and zip it up for submission. Name your folder and zip file something descriptive like Your-Name-HW1.zip or something.

File List

Test Your Submissions!!

I've had many past submissions where its obvious that things worked correctly on your computer, but the links, paths, etc did NOT work in the version that was submitted. We will do our best to determine if errors were simple ones, but we'll still mark off for solutions that do not work from the submitted files.

After preparing your .ZIP file, copy it to a new location, better yet a new computer, and make sure that when you un-zip it, everything still works!

Homeworks Zip files will be submitted to D2L, in the "Homework 1" dropbox.