Let’s start with a little history and a basic assumption. You are a programmer and web site designer. As a web designer, you are quite familiar with HTML and the changes through HTML4. You are familiar with the “markup” approach used in creating the code used to display standard web pages. Of course, you begin with a tag and then use opening and closing and tags. Using these basic tags you can create a properly formatted web page for display in any modern bowser.
Now let’s get into the fun stuff – HTML5. This is the latest version of the HTML markup language and it adds many features not included in earlier versions. The new functionality includes tags such as , and . These are used to better incorporate elements we have come to expect in most functional applications whether targeted to the desktop or mobile format. Other elements such as , , , and provide functionality and flexibility that desktop programmers have become accustomed to. Before we move into some really useful information, let’s consider one other aspect of HTML5, and HTML in general, which provides more functionality that we have come to expect. That would be the concept called “inclusion.” As a Visual Basic, C#, or even F# programmer, you will be quite familiar with the “#include” or “using” statements which will allow reuse of code that is stored in another program instead of rewriting it. This supports the “code less, do more” approach which is popular with today’s programmers. This functionality is enabled by using links and scripts to include relevant resources in your HTML applications. This article details some of the aspects of creating a mobile-friendly, HTML5, quiz game app.
What to include? When you are starting an app, or any program, you want to decide what external functionality may be needed. As previously indicated, you have this option with HTML and HTML5. This app included the three following external “libraries.”
As you may have gathered from reading these lines, this is making JQuery and JQuery Mobile functions available for use in your app. Notice the versions used since that may affect the coding style and command formats that are available.
DOM/HTML5 Functionality Since this app was designed using HTML5 and JQuery Mobile, it will work on most mobile devices in additional to desktop format. Although this app could have been written using only JQuery functionality, it also utilizes the HTML DOM. The Document Object Model uses a format such as
document.getElementById(“corrhdr”).innerHTML = “Try again”;