CS 257: Software Design

Lab: introduction to HTML and CSS

Nothing to hand in

Goals

• Learn the structure of an HTML file, and a handful of elementary HTML tags.
• Learn how to use HTML class attributes and CSS selectors to apply styles to HTML elements so you can control the appearance of your web pages.
• Learn a handful of elementary CSS properties.
• Take a look at the View Source feature of browsers, as well as the developer tools that come in most major browsers. Both of these will help you develop your web pages.

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.

• Update your clone of my GitHub repository. You should see a new directory called html-samples.
• Open a browser, and then use its File→Open File menu item (or whatever the equivalent is on your browser) to open html-samples/index.html in the browser. You should see a "file://"-type URL in the address bar.
• Follow the instructions in html-samples/index.html. Note that this lab's instructions are actually contained in the sample pages themselves, so read carefully.

Part 2 (COMPLETELY 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.

• macOS Install via
  brew install vnu
  then check to make sure vnu is installed:
  which vnu
  and if so, run it like this:
  vnu mypage.html
• WSL As usual, there are a few more steps here. In brief, they are: install the zip and unzip commands; get the vnu zip file and unzip it; adjust your PATH environment variable to include the location of the vnu command; run vnu. Like so:
  • Install zip and unzip:
    sudo apt install zip unzip
  • Go to the V.Nu download page, right-click on the "vnu.linux.zip" and select "Copy link" or whatever similar menu item your browser offers. Then go back to your WSL terminal and run:
    wget THE_LINK_YOU_COPIED
    This will get you a file named vnu.linux.zip.
  • Unzip the file
    unzip vnu.linux.zip
    This will give you a folder named vnu-runtime-image.
  • When I install a command like this, I like to put it one of two places: either in /usr/local/bin (which is intended for exactly this sort of thing) or in a directory named "bin" in my home directory. Let's put this one in /usr/local/bin.
    sudo mv vnu-runtime-image /usr/local/bin sudo chown -R root:root /usr/local/bin/vnu-runtime-image
    The first command moves all that vnu stuff to /usr/local/bin, and the second one makes the command usable for any user on your WSL installation.
  • Add the location of the vnu command to your PATH environment variable. I walked you through this sort of thing in my Unix, part 2 video, and here's a blog entry with detailed instructions. But the short version for our case is this. Use vi or nano to edit the .bashrc file in your WSL home directory, and add this line to the bottom of .bashrc:
    export PATH="$PATH:/usr/local/bin/vnu-runtime-image/bin"
  • Either open a brand-new WSL terminal (which will cause the new .bashrc to get executed) or execute it immediately in your current terminal like so:
    source ~/.bashrc
  • Is vnu installed and available?
    which vnu
    If so, validate your HTML file like so:
    vnu mypage.html

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.