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 will have a "file://"-type URL in your browser's 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: try the official 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 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.
- Go to the validator, choose the "Validate by URI" tab, and enter our course web page. How does it look?
- Try the same thing, but with an URL of your choice, like https://cs.carleton.edu/ or https://google.com/ or something.
- Try the "Validate by Direct Input" tab, and try just pasting one of
the sample HTML files from my repo's
html-samples. - It's fun running a validator on your professors' web pages. You get to feel smug when they're full of errors. (That smugness lasts approximately as long as it takes you to get around to putting your own pages into the validator.)