University of Washington, CSE 190 M

Lab 1: Basic HTML and CSS

Except where otherwise noted, the contents of this document are Copyright 2010 Marty Stepp and Jessica Miller.

original lab idea and code by Victoria Kirst and Jeff Prouty; revised by Brian Le and Marty Stepp

Valid XHTML 1.1 Valid CSS!

Basic lab instructions

Today's lab exercises

Today you will create a basic "About Me" HTML page and style it with a bit of CSS.

  1. About Me Page
  2. Style Your Page with CSS
  3. Validate Your Page
  4. Upload Your Page to the Web
  5. Advanced Style Techniques
  6. Favorite Movie
  7. Decrementing ol

Exercise : About Me Page (~20-25 min)

(The next 3 slides describe this exercise. Please read them all, then start.)

Create a page aboutme.html that describes you. Include information such as:

Exercise , example

This example page describes former TA and textbook coauthor, Victoria Kirst:

expected output

Exercise , how to view the page

To see your page in the web browser, in TextPad click View, In Web Browser.
Or in Firefox, click File, Open File... and browse to your page file to open it.

view in web browser OR firefox open file firefox open file 2

Exercise : CSS Styles (~15 min)

(See example screenshot on next slide.)

Create a stylesheet named styleme.css to improve the appearance of your About Me page.

Exercise , example

This example is Victoria's styled version of her page:

expected output

Exercise : Validate Your Page (~10 min)

Next, validate the syntax of your XHTML and CSS code:

  1. Open (XHTML) or (CSS)
  2. Either click Validate by File Upload and then Browse to your aboutme.html file,
    or click Validate by Direct Input and then copy/paste your code into the text box.
  3. If there are any errors, fix the first one, then repeat the previous steps.
    • Try to get the green bar for 0 errors. Yellow "tentatively valid" warnings are okay.
    • (The error messages can be hard to understand. Feel free to ask a TA or neighbor for help.)

Exercise : Put Page on Web (~10 min)

Ask a TA if you have any problems logging in to Webster or uploading your files!

Exercise : validation links

Add a link on your page to the XHTML Validator, using this image and link target:

The next task will be to write a stylesheet for your page, so also include a link to the CSS Validator:

(These links work only if you view your page on webster, not on your computer's hard drive.)

Exercise : Advanced Styles (~10 min)

(See example screenshot on next slide.)

If you complete the previous exercises, great job! You can add any extra content to your page that you like. Or if you want a challenge, try to figure out how to add the following styles:

These are tricks not covered yet in class. Use Google or a CSS reference such as W3Schools.

Exercise , example

These are snippets of TA Victoria's updated page, showing links and drop-caps:

Links: (hover is not shown)
expected output

expected output

Exercise : Favorite Movie

(See example screenshot on next slide.)

Look up one of the favorite movies/shows from your About Me page on

Exercise , example

These are snippets of TA Victoria's updated page, showing a favorite movie:

expected output

Exercise : (h4x0rz only): Decrementing ol

(See example screenshot on next slide.)

Modify your page's Top 3 movies/shows list to be in decreasing order, from 3 down to 1.

The list must look the same as the default ordered list format, but in reverse order.

The only change you may make to your HTML is to switch the order of your list items, but otherwise all work should be done by CSS. We aren't going to give any hints; you must figure it out on your own by searching the web.

Note: This is very tricky! It is not something that students will be expected to do in this course.

Exercise , example

These are snippets of TA Victoria's updated page with a decrementing ol:

expected output

If you finish them all...

If you finish all the exercises, you can add any other content or styles you like to your page.

If the lab is over or almost over, check with a TA and you may be able to be dismissed.

Great work!