Page 2: HTML Basics

CS559 Spring 2022 Sample Solution

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 (<h1>, <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> - this is used for when we put source code (like HTML or JavaScript) onto a web page for someone to read. We do not use <code> elements for code the computer is supposed to run! It doesn’t run the code - it just prints it differently than normal text.
<script> - these are the elements that contain the code that the browser is actually supposed to run (usually JavaScript).

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 for_students/ folder. 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 id and class attributes associated with them. You should know what these are: they become important when we start programming for the web.

The 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 class.

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.

We won’t do much with CSS in class, but you should be able to use the basic idea. You can experiment with 01-02-03.html and 01-02-03.css to make sure you know how to do these 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

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.

By themselves, buttons don’t do much. We need to connect them to JavaScript programs to make them more exciting. But make sure that you looked at the html for 01-02-06.html

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.

Your Turn: Make Your Own Button

In the box 01-02-08.html below, make your own button that is red and has your name in it. It can be whatever style you like.

Box 01-02-08 Rubric (2 points total)

Points (2):

Box 01-02-08

2 pt

make a red button with your name in it

Moving on…

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.

Next: HTML and JavaScript

Page 2 Rubric (2 points total)