1. HTML for JavaScript Web Applications
CS3550
Dr. Brian Durney

2. Example web app
This presentation refers to the game Rigel Station: Security Alert as a sample web application.
You can find the game at:

3. Kinds of HTML elements Block Inline List items div, p, h1, ul, ol
span, a, b
List items li

4. div elements Block elements Often used to organize a web page
Can contain other block elements: paragraphs, headings, lists, and nested divs
Can be used to easily apply formatting to multiple elements

5. <div id="mapDiv">
<img id="mapImg" src="sectorMap450.png">
<br>
<div style="font-size: 140%">
Security rating:
<span id="scoreSpan"> 0 </span> <br>
Time: <span id="timeSpan"> 0:00 </span>
</div>
A div element is used to hold the map image and the two lines of text beneath it.

6. A nested div holds two lines of text.
<div id="mapDiv">
<img id="mapImg" src="sectorMap450.png">
<br>
<div style="font-size: 140%">
Security rating:
<span id="scoreSpan"> 0 </span> <br>
Time: <span id="timeSpan"> 0:00 </span>
</div>
A nested div holds two lines of text.

7. Another div contains the message area and the sector buttons.
<div id="controlDiv">
<div id=“msgDiv">
Scanning for security reports...
</div>
<div>
<span style="...">
SECTOR I
</span>
...
Another div contains the message area and the sector buttons.

8. Two other divs are nested inside the right-hand side div.
<div id="controlDiv">
<div id=“msgDiv">
Scanning for security reports...
</div>
<div>
<span style="...">
SECTOR I
</span>
...
Two other divs are nested inside the right-hand side div.

9. Page organization
Using a table instead of divs would make it much more difficult to achieve the desired layout.
Tables are less flexible than divs and should only be used when a grid layout is appropriate.

10. span elements Inline elements
Used to apply a style to part of a text element
Also used to make part of an HTML text element accessible to JavaScript

11. These two span elements are used to display the score and the time.
<div id="mapDiv">
<img id="mapImg" src="sectorMap450.png">
<br>
<div style="font-size: 140%">
Security rating:
<span id="scoreSpan"> 0 </span> <br>
Time: <span id="timeSpan"> 0:00 </span>
</div>
These two span elements are used to display the score and the time.

12. <div id="mapDiv">
<img id="mapImg" src="sectorMap450.png">
<br>
<div style="font-size: 140%">
Security rating:
<span id="scoreSpan"> 0 </span> <br>
Time: <span id="timeSpan"> 0:00 </span>
</div>
When the game starts, the score (“security rating”) is 0 and the time is 0:00.

13. <div id="mapDiv">
<img id="mapImg" src="sectorMap450.png">
<br>
<div style="font-size: 140%">
Security rating:
<span id="scoreSpan"> 0 </span> <br>
Time: <span id="timeSpan"> 0:00 </span>
</div>
As the game progresses, JavaScript code updates the values of the score and the time.

14. id attributes
Used to identify elements for use in HTML forms, CSS (styles), and JavaScript

15. Note the id attributes in the spans for the score and the time.
<div id="mapDiv">
<img id="mapImg" src="sectorMap450.png">
<br>
<div style="font-size: 140%">
Security rating:
<span id="scoreSpan"> 0 </span> <br>
Time: <span id="timeSpan"> 0:00 </span>
</div>
Note the id attributes in the spans for the score and the time.

16. <div id="mapDiv">
<img id="mapImg" src="sectorMap450.png">
<br>
<div style="font-size: 140%">
Security rating:
<span id="scoreSpan"> 0 </span> <br>
Time: <span id="timeSpan"> 0:00 </span>
</div>
These id attributes allow JavaScript code to easily access these span elements.

17. Summary
Divs are block elements used to organize a page and allow easy formatting of multiple elements.
Spans are inline elements.
Adding id attributes makes it easier to access divs, spans, and other HTML elements from JavaScript.