1
In this presentation we'll look at a few aspects of HTML that relate to JavaScript web applications.


2
We'll refer to the game Rigel Station: Security Alert (abbreviated RSSA) as a sample web application. We'll look at how the HTML for this game is written to make it work well with styles and JavaScript.

You can find the game at universe dot tc dot uvu dot edu slash Game slash RSSA slash index.html. You might find it helpful to look at the page source for this page in your browser after viewing this presentation.


3
Most HTML elements go into one of three different categories: block, inline, and list items.

Block elements can contain other block elements, inline elements, and text. A block element usually begins on a new line.

Inline elements can only contain text and other inline elements. Inline elements are sometimes referred to as text-level elements.

In this presentation we will look at two elements in particular:
=>
div, which is a block element, and
=>
span, which is an inline element.
These two elements are often used with styles, which we will look at in the next lesson, and with JavaScript, which we will start after we look at styles.


4
Divs are block elements that are often used to organize web pages. A div can contain other block elements such as paragraphs, headings lists, and nested divs. A div can be used to easily apply the same formatting to multiple elements.


5
Five divs are used to organize the HTML page in the RSSA game.
=>
A div element on the left contains the map image.


6
A nested div on the left side of the page holds two lines of text below the map.
=>
Those two lines of text are the score (which is called a security rating) and the time.


7
On the right-hand side of the page is another div that contains a message area and some buttons.


7a
Nested inside the right-hand div are two other divs:
=>
one for the message area at the top, [PAUSE]
=>
and another beneath it which contains some buttons. [PAUSE]
=>
Note that the screen capture in the lower left and the HTML source in the upper right show different contents for the message area.
=>
According to the HTML source the message area says "Scanning for security reports",
=>
but according to the screen capture the message area says "The intruder is not in the Bot Hanger."
=>
The reason why the source does not show the same thing as the screen capture is that JavaScript code changes the contents of the div as the game progresses. We'll talk a little more about that in a few minutes, and we'll look at it in detail later in the term.


8
Using a table instead of divs would make it more difficult to achieve the desired layout for this page. Tables are less flexible than divs and should only be used when a grid layout is appropriate.


9
Span elements are inline elements that are often used to apply a style to part of a text element. They are also used to make part of an HTML text element easily accessible to JavaScript code.


10
Here is an example of how spans are used in the RSSA game. The security rating and the game clock are displayed in span elements in the lower left part of the page.


11
When the game starts, the score, or security rating, is zero and the time is also zero.


12
As the game progresses, JavaScript code modifies the values of the score and the time. It is easier to modify the contents of an HTML elemement from JavaScript if the element has an id attribute.


13
ID attributes are used to identify elements for use in HTML form processing and for use with styles. ID attributes are particularly useful for accessing HTML elements from JavaScript code.


14
Note the ID attributes in the spans for the score and the time in the RSSA game.


15
Those id attributes allow JavaScript code to easily access these span elements. In this lesson we are just looking at HTML, but later in the term we'll learn how to use JavaScript to modify HTML elements.


16
In summary, we've seen that
=>
divs are block elements used to organize a page and allow easy formatting of multiple elements.
=>
Spans are inline elements.
=>
And, adding ID attributes makes it easier to access divs, spans, and other HTML elements from JavaScript.