CS559 Spring 2021 Sample Solution - Workbook 1
Written by CS559 course staff
You can try out the example solutions here. The interesting code is on page 6.
This page is a quick review of how HTML and web pages work. Hopefully, it’s a review for you.
If anything on this page isn’t a review for you, you should look at the resources on the previous page (or any HTML tutorial).
The Basic Elements of HTML you should know
A key idea is that a document (a web page) is a tree of parts. The overall document is the root of the tree. For example, the document may contain paragraphs, which contain sentences, which contain words, etc. Each part is known as an element. The tree of elements is known as the Document Object Model (or DOM).
The basic idea of an HTML document is that we represent a tree of parts (elements) in a text file. In the text file, we use “tags” as special markings to tell the browser how to make elements from the text. Most tags come in matching pairs - you have a first tag to “start” the element, and a second tag to “end” it.
Some important elements that you will need to know about for class:
- comments - things between
-->are ignored by the browser (so you should read them)
<html>- this is the “root” of the tree, representing the whole document
<body>- this represents the container where the content of the document goes
- Headers (
<h2>etc.) - these are heading lines
<div>- these are “divisions” of the document - boxes that contain things. They are useful for creating hierarchy.
<span>- contain a “run” of text (or other objects). They are useful for creating hierarchy and grouping things together so that you can work with them.
<p>- paragraphs (a bunch of text)
<ul>- unordered lists and
<ol>ordered (numbered) lists. Lists should contain
<li>list item elements.
<code>elements for code the computer is supposed to run! It doesn’t run the code - it just prints it differently than normal text.
You may also notice that some special characters show up in a weird way. If a character might be interpreted by the web browser as being part of HTML, we need to encode it as an entity. So, for example, if I want to write the left angle bracket
< I need to put
< into the HTML.
Usually in workbooks, separate examples will be in boxes like you will see below. These are stored as separated HTML files in the
You should read each box in the workbook page in the web browser to see how it looks.
You should also read the “source” (html file and css files) for each box, to see how they work.
Part of the idea of this page is to get you used to looking inside of HTML files when you read (and work on) workbooks. So, even if you know HTML well, please have a look at these examples.
Box 1: Identifying Elements
In this box, we are showing 01-02-01.html (the 1st box on page 2). Make sure you can find the html file. You should look at it in the text editor.
In that example, some of the text elements have
class attributes associated with them. You should know what these are: they become important when we start programming for the web.
id of an element is a unique identifier. Each element can have exactly one
id, and every page should have only one element with a given
id. In contrast, an element can have many
class attributes, and a page can have many elements with a given
Box 2: Styling
As you might guess, this is 01-02-02.html, a simple example that uses styling to change the appearance (in this case the colors of text).
Experiment with changing the styles of the text in this box. We won’t do too much with styling text in class, but we will want to style other things.
Box 3: Style Sheets
In this example, we combine those two ideas: naming things (with id and class), and using a style sheet. Style sheets allow us to apply the same style to different things.
Box 4: Color
As you might guess, color is important for doing computer graphics. We’ll learn a lot more about color later in the class. But for now, we need some basics to give things colors.
Read the CS559 Color Tutorial which will give you the basic ideas we need for now. In HTML, we can specify colors by name (e.g. “red”, “blue”, “darkred”, “blueviolet”). This is convenient in a web page, but isn’t always available when programming. This box will let you practice with using Hex strings for colors.
By now, you should know that the code for that box is 01-02-04.html.
Box 5: Layout
Box 6: Buttons
Box 7: Sliders
One last HTML element before we move on to programming: sliders. Sliders are mainly useful when we have programs to read them.
Sliders are pretty boring without programs that use them. We’ll make use of sliders soon enough. But be sure to look at 01-02-07.html to see how we make them on web pages.
Make sure that you understand how those simple html files work, since we will use those basic aspects of web pages to make things for our graphics programs. Then move on to the Next Page.
This page (2) has no points.