In this presentation we'll look at a few aspects of HTML that
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
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.
Most HTML elements go into one of three different categories:
block, inline, and list items.
Block elements can contain other block elements, inline elements,
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
we look at styles.
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
Five divs are used to organize the HTML page in the RSSA game.
A div element on the left contains the map image.
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.
On the right-hand side of the page is another div that contains
a message area and some buttons.
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
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
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.
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.
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
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.
When the game starts, the score, or security rating, is zero and
the time is also zero.
score and the time.
if the element has an id attribute.
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
Note the ID attributes in the spans for the score and the time
in the RSSA game.
In this lesson we are just looking at HTML, but later in the term
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