Assignment 01-01: Getting Started (Page One)

Workbook 1, Page 1

You should have already looked at the index page.

You should read this page in the web browser to see how it looks. You should also read the "source" (html file and css files) for this page 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 this file.

Note that for this workbook page, you don't have to do anything other than read. We encourage you to make changes (so you can see the effects), but we are simply going to assume that you've done the "work". Throughout the page, there are suggestions for things to try to make sure that you understand how things work.

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.

If you aren't already familiar with HTML, please find a resource on the web and learn about the basics. Here are some suggestions:

Some thoughts on HTML in CS559

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.

Because we are trying to keep the HTML simple, the pages for this class will be very ugly. You can make nice looking things with HTML, but it takes effort.

Normally, we would use stylesheets or web frameworks to provide fancier page features and to make things look nice. However, to keep things simple for class, we are just making very simple web pages.

Similarly, we would probably use tools to help us write HTML, rather than just typing it in an editor or IDE. But for class, what we need to do is so simple, we're better off just using the same IDE that we use for programming.

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 (the parts are called) 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:

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 &lt; into the HTML.

Identifying Elements

Most (if not all) elements can be given unique names (called ids) so that we can refer to them. For example, this sentence is in a <span> element with the id "this-span". Look at the HTML file and make sure you can find it! Each element can only have one ID, and every document should only have one element with any particular ID. For example, there can only be one "this-span" in this document.

IDs are useful so that you can find things in an HTML file (you could search for "this-span"). We will also use it so programs we write can find things.

Elements can also have "classes" associated with them. These are names that can be assigned to multiple elements, and each element can have multiple classes. Classes are useful when we want to refer to multiple elements. In this sentence, three of the words have a class associated with them. I could find those three words by looking for elements that have "this-class" as one of their classes. An element can have an ID, and any number of classes.

Usually in workbooks, I will put separate examples into boxes like you will see below. These will be created as <div> elements, with the examplebox class (although, that might change). Each box will have an ID. I wanted to tell you that because we're about to have the first one.

Box 1: Styling (id="one01")

Make sure you can find this "example box".

Just about any element can have styling information associated with it. For example, This is a span with a blue color style. There are lots of different styles - I always need to look up what all the options are. (although, if you use a good IDE, like Visual Studio Code, it can tell you)

Styles "cascade" - that is if we style one element, the elements inside of it also get that style. Unless they override it. For example, this is one span with another span inside of it.

In this, the paragraph has a style. So if I put a span inside of it I can override it.

Experiment with changing the styles of the text in this paragraph (or this box more generally). We won't do too much with styling text in class, but we will want to style other things.

Box 2: Style Sheets

We can associate styles with particular IDs or classes. This styling information can be placed right into the HTML file. If you look inside this "box" in the HTML file (look for id="one02"), you will see a <style> tag, as well as things that use it.

The style information (look in the HTML file!) says that anything with a "redText" class should be dark red. Like this span. Styles allow us to make a lot of things that share properties, like these words and this word as well.

If you're looking at this HTML in Visual Studio Code (or some other IDEs), when you read it you will see colors and other information shown with the styles.

The styles are written in a language called CSS. Usually, we do not put CSS right into our HTML, we put them into separate files (.CSS files) and we link to those style sheets using an html "link" tag. At the top of this file, there is a link to the CS559 style sheet that is used for all pages in this workbook. In this example box, I am linking to a special style sheet just for this page.

See if you can figure out why this text has one color, but, this text has another color! You should be able to change the colors by editing the style sheet file.

We will use style sheets to change the appearance of things besides text. In the "one.css" style sheet, there's a definition for the box below. Try to experiment with it to change how it looks.

This is a first box.
This is a second box.

Box 3: Color

As you might guess, color is important for doing computer graphics. We used to spend at least a week discussing it - I'm not sure how much we'll do this semester.

You should read the CS559 Color Tutorial. This is an

For now, we should focus on what we'll use for HTML. When you read the HTML for this page, you'll see that many of the colors are specified by name (e.g. "red", "blue", "darkred", "blueviolet"). This is convenient in a web page, but isn't always available when programming.

You should get used to specifying colors as hex strings like #FF8AC5. This works for HTML, and for a lot of the other web programming we will do. See the CS559 Color Tutorial] for a discussion. But basically read #FF8AC5 as 3 hexidecimal numbers (FF,8A,C5) that are the amount of red, green and blue. Each number is a binary fraction, so that FF means FF/FF (or 255/255) or 100% (of red in this case).

Here are some boxes for you to color:

Although, this is a very verbose way to make boxes. Try experimenting with changing their colors.

Box 4: Layout

If you noticed in the previous box, I put a set of 4 boxes (div tags) next to each other. Being able to arrange elements is important. HTML gives some very flexible ways to do it. But this flexibility can make it complicated. In general, HTML specifies the basic idea of how the different elements should be arranged, and the browser lays out the elements to best fit them on the screen according to some complicated rules.

one
two

You won't need to do too much of this for class, but get used to seeing HTML that does things to create desired layouts.

Box 5: Button Elements

HTML has input elements, like buttons and sliders and type-in boxes. They can be used with straight HTML for making forms. We will use them with JavaScript programs.

Input elements are just like any other elements - they are tags. Here, I've made a button, right in the middle of my paragraph. It probably looks silly in the middle of a paragraph.

There are multiple ways to make buttons, but using the <button> tag is preferred. See the button documentation.

Just like anything else in HTML, you can style buttons to make them look any way you like. If you don't do anything, they may be ugly. Of course, if you do something, it might still be ugly. There are lots of style sheets around the web that make nice looking buttons. See this page for ideas.

Like other HTML elements, buttons can have classes and IDs. The latter will be really important for finding particular buttons when we start programming. Here are a few buttons with their appearance styled with CSS that is in the "one.css" file:

Look at the CSS and HTML for those buttons and understand why they look and behave the ways that they do. Experiment with changing the CSS to make them look different.

By themselves, buttons don't do much. We need to connect them to JavaScript programs to make them more exciting.

Box 6: Slider Elements

One last HTML element before we move on to programming: sliders. Sliders are mainly useful when we have programs to read them.

Just like buttons, sliders are elements that could be put anywhere like right in this paragraph. Note that a slider is called a "range" input (since it's useful for making a number range).

In practice, we'll try to put sliders in more useful places.

Just like buttons (and most HTML elements), sliders can be styled. They can also have their minimum, maximum, and step sizes set. Here are a few sliders to try.

Unfortunately, handling of slider styling seems inconsistent across browsers. The above looks very different in Chrome and Firefox. There are all kinds of workarounds on the web - but for class, we won't worry about it - we understand that sliders may be ugly.

Sliders are pretty boring without programs that use them. We'll make use of sliders soon enough..

Summary

Hopefully, the experience of trying to read (and maybe modify) this web page will give you a sense of what it's like to work with a workbook and to read HTML (so you can put some things around your programs as you start to write them).

Now you're ready to go on to two.html where we'll start to do some JavaScript programming.