HTML and CSS Reference
In-Depth Information
Using header and footer element types
HTML5 added some new built-in element types including
header
and
footer
. The rationale behind these
and other new elements (for example,
article
and
nav
) was to provide elements that serve standard
purposes so that search engines and other programs would know how to treat the material, though it still is
necessary to specify the formatting. These are the styles we will use in this example:
footer {
display:block;
font-family:Tahoma, Geneva, sans-serif;
text-align: center;
font-style:oblique;
}
header {
width:100%;
display:block;
}
The
display
setting can be
block
or
inline
. Setting these to
block
forces a line break. Note that forcing
the line break may not be necessary for certain browsers, but using it does not hurt. The
font-family
attribute is a way to specify choices of fonts. If
Tahoma
is available on the user's computer, it will be used.
The next font to try will be
Geneva
. If neither one is present, the browser will use the
sans-serif
font set
up as the default. The
text-align
and
font-style
settings are what they appear to be. The
width
setting sets this element to be the whole width of the containing element, in this case the
body
. Feel free
to experiment!
Note that you cannot assume the footer is at the bottom of the screen or surrounding element, nor the
header at the top. I made that happen by using positioning in the HTML document.
I used the footer to display the sources for the card images and the shuffle algorithm. Providing credit,
showing copyright, and displaying contact information are all typical uses of footer elements, but there are
no restrictions on how you use any of these new elements or on where you put them in the HTML document
and how you format them.
Building the application and making it your own
The functions used in this game are described in Table 10-1.
Table 10-1.
The Blackjack Functions
Function
Invoked / Called by
Calls
init
Invoked by the
onLoad
function in the
<body>
tag
builddeck
,
shuffle
, and
dealstart
Invoked by the
windowaddEventListener
call in
init
deal
,
playerdone
, and
newgame
getkey
dealstart
init
