CS 257: Software Design

Lab: introduction to HTML and CSS

Nothing to hand in

Goals

Part 1: learn a little HTML and CSS

This lab exercise will require you to read a bunch of HTML and CSS code samples, compare what the code says to how the corresponding web page appears in a browser, and play with the HTML and CSS to make sure you understand how all the code elements work.

Part 2 (optional, but useful): install an HTML validator

The W3C Markup Validation Service is a web-based service for checking the syntax of your web pages to make sure your code is correct. Often, you can have mistakes in your HTML or CSS, but the browsers will make deal with the errors silently and your page will be OK. But then you might look at the page in a different browser or you might add an innocuous bit of code and everything will go kablooey because of some previously hidden error. Checking your work with a validator can help prevent this kind of problem.

If your web pages are published on the internet, then it's really easy to use the W3C validator. Just got to the validator page, select "by URI", paste your page's address into the "Address" blank, and click the "Check" button. The validator will check the syntax of your HTML and of any associated CSS. For example, at this writing, if I enter the address of this course's home page, I get this response:

But if you're developing your pages on your own machine and they're not visible on the public internet, the W3C validator can't reach into your computer to get your files. You can use the "By file upload" tab on the validator page to test the syntax of your HTML, but that technique doesn't check your CSS, and if you try to do "By file upload" on your CSS file directly, the validator says it can't check that type of file.

One alternative is to install a command-line version of the W3C validator (sometimes known as V.Nu or vnu or just Nu) on your computer.

Have fun, and ask lots of questions!

Want some extra fun? Try running a validator on your professors' web pages and feel smug when they're full of errors.