Java Reference
In-Depth Information
</body>
</html>
This is a standard HTML5 layout with a simple heading at the top of the page. We'll add
more to the page as the application develops in later chapters.
Now it's time to style the page. Add the following code to the styles.css file in the css
folder:
css/styles.css
*{
margin: 0;
padding: 0;
}
header {
font: bold 36px/120% Arial, Helvetica, sans-serif;
background: #333;
color: #c00;
text-transform: uppercase;
}
This resets all the margins and padding to zero and styles the heading in ninja-like red and
black colors.
And finally we'll add some interactivity using JavaScript. Place the following code inside
the scripts.js file in the js folder:
js/scripts.js
// welcome the user
alert("Welcome to Quiz Ninja!");
The first line uses the
alert
function that displays a welcome message to the player in a
dialog box in the browser.
alert
isn't actually part of the official ECMAScript specifica-
tion, but is used by all browsers as a way of showing messages.
To give this a try, open the index.htm file in your favorite browser. You should be greeted
by the welcome message alert box, such as in the screenshot shown in
Figure 1.3
.
