Web Programming Step by Step
Lab 1: Basic HTML and CSS

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

The purpose of this lab is to practice writing basic web pages with HTML and CSS and uploading them to the Web.

Lab 1 Resources

Exercises for Today:

  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 1: About Me Page (roughly 20-25 minutes)

Create a page named aboutme.html that describes you. (If you are using a lab computer, you can do this using the installed TextPad editor.) On your page, include some or all of the following information:

(You may be tempted to spend all 50 of your minutes on this part of the lab. But try to keep the page somewhat short so that you can attempt some of the other exercises.)

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

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

The next task will be to write a stylesheet for your page, so also include a link to the W3C CSS Validator, using the following image and linking to the following site:

For example, the following About Me page describes textbook coauthor, Victoria Kirst (between, but not including, the thick black lines):


expected output


Exercise 2: Style Your Page with CSS (roughly 15 minutes)

Create a stylesheet named aboutme-style.css to improve the appearance of your About Me page. Your stylesheet should do the following without any modification to your HTML code:

For example, this is Victoria's styled version of her page in Exercise 1 (between, but not including, the thick black lines):


expected output


Exercise 3: Validate Your Page and CSS (roughly 10 minutes)

Next, validate your HTML and CSS code to make sure they match the strict XHTML 1.1 specifications. To run the validators, do the following:

  1. Open http://validator.w3.org/ (for XHTML) or http://jigsaw.w3.org/css-validator/ (for CSS)
  2. Click Browse in the Validate by File Upload section
  3. Locate the local file and click Open
  4. Click Check
  5. If there are any errors, fix the first one, then repeat steps 1 through 4.

The key thing is to get the green bar saying that your page is valid XHTML. If you see any yellow warnings about being tentatively valid, this is okay. Red errors are not okay.

Exercise 4: Upload Your Page to the Web (roughly 10 minutes)

Follow your instructor's directions for how to upload your page to your student web server. Verify that you did this successfully by viewing your page in the web browser.

Exercise 5 (advanced): Advanced Style Techniques

If you manage to complete the first four exercises before lab time is up, edit your stylesheet to also do the following:

These are techniques that we have not covered in class, so you will need to use Google or a CSS reference such as W3Schools to figure out how to get this done. Once again, you should be able to make these stylistic changes without modifying your HTML.

For example, these are snippets of TA Victoria's updated page, showing links and drop-caps (between, but not including, the thick black lines):


Links: (hover is not shown)
expected output

Drop-caps:
expected output


Exercise 6 (advanced): Favorite Movie

Choose one of the favorite movies or TV shows you listed and look it up on imdb.com. In your aboutme.html, reproduce some of the content of the IMDB page in a nested list under the chosen movie's bullet.

For example, this is Victoria's new Favorite Movies list (between, but not including, the thick black lines):


expected output


Exercise 7 (for uber-1337 h4x0rz only): Decrementing ol

Modify your About Me page to have your Top 3 movies or tv shows list in decreasing order, starting at 3 and counting downward to 1. The format of the list must look exactly the same as the default format of an ordered list, simply 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 must be done by CSS. We aren't going to give you any hints at all; you must figure it out on your own, using the web.

Note: This is very tricky! Exercise 7 is only meant for those who are already proficient in CSS, and it is in no way something that majors or non-majors will be expected to do in this course.

For example, this is Victoria's decrementing Favorite Movies list (between, but not including, the thick black lines):


expected output


Valid XHTML 1.1 Valid CSS!