Information Technology Reference
In-Depth Information
web development is the use of the
meta
element with the name
“viewport”
. This element
is extremely important when it comes to mobile design and development, and we'll talk
more about it in Chapter 10. With it, you can control whether or not a user can zoom the
content on your page or even how much the user can zoom into your page. Here we
have the zoom of our viewport set to the default value and have turned off the option to
let the user zoom in and out of the page so we do not have to worry about an end user
accidentally double tapping the display causing your soon-to-be web application to
zoom in or out while frustrating your user.
Once inside the
body
element, you might notice that we are using several of the “new”
HTML5 elements such as
header
and
section
. The
header
element is a newer tag that is
used to semantically structure your code to indicate the introduction to a page or article
on the web. In our
header
area, we are using it to house the current score of the player,
which we will update after each round with JavaScript, as well as the player's name.
Keeping simplicity in mind for the sake of this demo, we will leave the player named
Player 1
.
Next up we have the
section
element, which is used to house the main content of our
demo. Like
header
, the
section
element is a new HTML5 tag that is used to semantically
mark the section of a document or a page. Back in the old xHTML days, we would
usually designate sections of a page with a tidal wave of endless
div
tags, which could
be extremely confusing to search engines and screen readers for the visually impaired.
Now, with the proper use of the
section
tag, it should be fairly trivial for search engines
and screen readers to better guess at what information on the page is the important
information that should be read aloud or searched.
Inside the main content section of the page, we have a
div
container with the ID of
tweet,
which will be used to house the random tweet that we pull from the array of
verified users, as well as an empty
ul
(unordered list) element that will be used to
contain the four random verified Twitter users that we will display to the end user.
Inside of the
#tweets
container, we see two
div
containers-
.avatar
and
.content
. For
those who are unfamiliar with CSS, anytime you see the hash tag (#) when referring to
code in this topic, it means that we are referring to the ID of an element. If we are
referring to a tag by its class attribute, it will have a period sign in front of it as, such as
.avatar
above.
Now that we have the basic structure setup, it is time for one of my favorite parts of the
whole process-styling the page with CSS!
The CSS
In the last chapter, we discussed CSS. Here, you'll learn more about it by seeing it in
action. However, don't get discouraged if you don't follow everything that's going on.
We'll talk more about it throughout this chapter and in the future.