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.
- Clone my GitHub repository
onto your machine, or if you already have it, cd to it and "git pull".
You should see a new directory called html-samples.
- Open a browser, and then use its File→Open menu to open html-samples/index.html
in the browser.
- 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 (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.