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.
 
Search WWH ::




Custom Search