Page 1: HTML and CS559

This semester, we will be doing graphics programming on the web. The graphics ideas work anywhere, but the web turns out to be a convenient place to learn it.

This does mean that we need to know a bit about the web in order to do the assignments. Hopefully, you already know the basics of how web pages work, and this will be a review. But, we’ll also explain how the workbooks are organized (since we’ll have 12 of them this semester).

Workbook Organization and Web Pages

The web page you are reading (page 1 of the workbook) probably appears in your browser (the URL at the top) as something like http://127.0.0.1:5050/docs/1/ or http://localhost:1313/docs/1/. The 5050 or 1313 may be a different number. Also, sometimes the browser doesn’t show the http:// part.

The actual web page you are looking at is the file index.html in the 1 directory inside of the docs directory in the workbook. You might want to try to find the file to see where it is. The reason for the funny naming is that this page was automatically generated using a static web site generator (it’s Hugo if you’re curious). After this page, it won’t matter since you will rarely have to look in the docs directory.

The docs directory has the workbook pages that you read. When you actually need to look at the html all of the text gets in the way - you want to get rid to a simple web page that you can work on. For this reason, we make super-simple web pages for the actual things you will work on and then “embed” them within these more complex pages. Here is an example:

What you see is a box with some very simple HTML in it. It says “This is Page 01-01-01!”. The name isn’t incorrect - because it actually is a different page - it’s a small web page we’ve made and then placed on this bigger web page (1/index.html). You can open it by itself directly with this link: 01-01-01.html.

We call these little web pages that are inside boxes on bigger web pages “boxes” on workbooks. Boxes are where you do your work. All boxes are named with 3 numbers: the workbook, the page, and the box on the page. So this first box is “01-01-01.html” - the first workbook, the first page, the first box.

The boxes, and other files that you will want to look at are in the for_students directory. If you look in the workbook, you’ll see that directory. If you look in that directory you see the file 01-01-01.html.

Note that you can’t see the HTML for the contents of the box if you use the “view source” command in your web browser (it’s CTRL-U for Firefox and Chrome on windows) while viewing the web page with the instructional text. Viewing the source will show you this web page (what you are reading outside the box). What you’ll see on this web page is an iframe (which is the web element that embeds another web page). If you look you’ll also see some funny looking JavaScript code that resizes the iframe (so that Firefox and Chrome behave the same way). This is another reason why we don’t recommend looking at the sources to the docs pages. You can open that web page directly, in which case view source looks just fine. This will be important later for when you want to debug your work - since you want to look at one box at a time.

Your turn…

Speaking of work, now we actually try to have you do something. To confirm that you are able to find the right file to edit, change the line that says “The student should change this line” to “NAME has changed this line” (where NAME is your name). Also change the NetID line to have your actual University NetID rather than “Change This”. This isn’t rocket science, but it’s the thing you do with workbooks: edit the files in the for_students directory.

After you change 01-01-01.html, you may need to reload the page in order to see your changes. If you are using the Visual Studio Code Live Server (which we strongly recommend, see Visual Studio Code (VSCode) for CS559), this should be automatically reloaded for you.

Congratulations, you’ve actually done your first workbook task. If you looked at the rubric on the first page of the workbook, you would have seen that you get points for changing box “01-01-01”. We can repeat the relevant bit here:

This will be the first of many boxes you will change over the course of the semester. Doing this trivial first assignment makes sure you can find the files that you should edit, and understand the architecture of boxes.

Some thoughts on HTML in CS559

For CS559, we will assume that you know the basics of how to make web pages so that you can make pages to put your graphics programs on. We will only need some basic HTML and CSS stuff.

We won’t use any fancy HTML stuff for class - we will only make basic pages that we will put graphics on. However, you will need to know the basics so that you can read and write the workbooks.

To make things easier, we are trying to keep the HTML simple, the pages for this class might look a bit ugly. You can make nice looking things with HTML, but it takes effort, and leads to HTML that is harder to read.

Typically, we would use tools to help us write HTML, rather than just typing it in an editor or IDE. In fact, the HTML for these workbooks and the class website is built with Hugo, which converts markdown into HTML for us, and does other nice things. You don’t need to worry about Hugo. For class, what we need to do within the boxes is so simple, we’re better off just writing raw HTML and using the same IDE that we use for programming.

Enough about class, let’s move on… Next: HTML Basics