University of Washington, CSE 190 M, Spring 2007
Lab 1: HTML (Thursday, Mar 29, 2007)

The purpose of this lab is to practice writing basic XHTML pages and uploading them onto the Web. You probably won't have enough time to finish all of the exercises; just finish as much as you can within the allotted time.

Exercise 1: "About Me" Page

Create a file named aboutme.html that describes you. On your page, include some or all of the following information:

• Your name
• Your email address
• The classes you are taking right now at UW (Optional: add links to their home pages)
• Your 5 favorite movies or TV shows, in order (Optional: add links to their IMDB pages)
• 3 words that describe you
• Images that represent you in the following 3 moods: happy, sad, and right now, in the IPL
  (These can be any images you like, even if they are not actually images of you. Consider searching for images on Google Image Search)
• One of your favorite quotes (You can use either of the blockquote or q tags).
• Something interesting about one or more of your neighbors (people sitting at computers next to you) (optional)

Write your page using valid XHTML 1.0 Strict. Include a link from your page to the W3C XHTML Validator, using the following image and linking to the following site:

• image: http://www.w3.org/Icons/valid-xhtml10
• site: http://validator.w3.org/check/referer

For example, the following About Me page describes our TA, Jeff Prouty (between, but not including, the thick black lines):

Exercise 2: Upload Your Page to the Web

After you have an About Me page, upload it to your UW web space on the Dante (student) server. To do this, follow these steps:

1. Visit https://uwnetid.washington.edu/manage/?service and make sure Student Web Publishing and Dante Account are turned on. If not, check the turn on boxes next to them and then press the continue button.
2. Double click Save to your Account on the desktop and enter in the password you use with your UWNetID (if you want to do this from home, you can download the Tectia SSH client from https://www.washington.edu/uware/uwick/tectia/ and connect to dante.u.washington.edu with your UWNetID).
3. The right side of the split screen has your remote files. Double click on the public_html folder to open it. If this folder does not exist, make sure you enabled the correct services in Step 1. If you just did this, you may need to wait a couple of minutes before settings propagate.
4. Drag aboutme.html (or any other file) from your local computer into the public_html directory. You can create directories to organize your web space by right clicking and selecting New Folder. You may, for example, want to create a CSE190M folder.
5. View your new page at http://students.washington.edu/YOUR_UWNetID/aboutme.html (or http://students.washington.edu/YOUR_UWNetID/CSE190M/aboutme.html)

NOTE: Please do not upload homework assignment solutions to the public web without password-protecting them. Directions for password-protecting files will be discussed in class and will be linked on the course web site.

Exercise 3: Validate Your Page

For the most part, every page you create should link to the W3C XHTML validator. Clicking this link will validate your page by use of a referer. The catch is the page has to be accessible by the general public to use this link. Clicking this link from a local file will result in a No Referer header found! error. This link will work after you upload to Dante.

However, in the case you want to validate a local HTML document (a file not yet uploaded to a public server):

1. Open http://validator.w3.org/
2. Click Browse in the Validate by File Upload section
3. Locate the local HTML file and click Open
4. Click Check

Exercise 4: Favorite Movie

If you manage to complete the first three exercises, choose one of the favorite movies or TV shows you listed and look it up on imdb.com. Create your own web page called movie.html that reproduces some or all of the content of the IMDB page as best you can. You may ignore the header, navigation, and advertisements, and instead focus only on the information unique to that page. Recreate what you feel is a logical structure for that information using the HTML tags you have learned so far.

For example, if you were to choose the movie Borat, the page you create could look something like this:

In order to accomplish this, you may find it helpful to use a style of HTML list that we haven't learned yet, called the Definition List. Its syntax is as follows:

<dl>
   <dt>doodad</dt>
      <dd>a type of <em>gizmo</em></dd>
   <dt>fandangle</dt>
      <dd>similar to a <em>whatchamacallit</em></dd>
      <dd>see also: <em>whoseywhatsit</em></dd>
   <dt>thingamajigger</dt>
      <dd>see <em>whoseywhatsit</em></dd>
</dl>

doodad

a type of gizmo

fandangle

similar to a whatchamacallit

see also: whoseywhatsit

thingamajigger

synonym for contraption

As the name suggests, it is ideal for "dictionary-style" lists, where a word or phrase is associated with some information. Make your aboutme.html page link to your movie.html page, and upload it to your UW web space.