In most business applications, you create a common look and feel, data entry pages, and a method for navigating through the application. As you begin to work with HTML5, you will want to build these features and take advantage of the features of HTML5 that can make your applications stand out from the crowd. In this article, you will be presented with several common business Web pages that give you an idea of the power of HTML5 and CSS 3.

Creating HTML Web pages and using CSS did not change drastically in HTML5, but there are now more options and some new elements that will make your job as a developer easier. You should note that this article is not going to explain how to put data or code behind the business Web pages you create; that process has not changed for most Web applications. This article covers how to use CSS3 to make your pages look better and how to use new HTML5 elements and attributes.

Often, one of the first things you do when building a new Web application is to create a home page and define how the user will navigate through the application. Figure1 shows an example of a home page and a navigation system. While this is only a single line of menus items, you could make each of these menus have a drop-down list associated with it using a little jQuery code.

One of the things you notice right away about the home page in Figure1 is the drop shadows around each navigation button. You also notice that each button has a rounded corner. All of the buttons together sit atop a background that also has a drop shadow and also has a rounded corner. Furthermore, each of these elements also has a gradient color of light gray to gray.

Although there were ways to accomplish drop shadows, rounded corners and gradients prior to CSS 3 and HTML5, it was not always easy for developers to create them. You often needed help from a graphic artist to create these effects. But now these graphical elements are a part of CSS 3 and can be created by a developer with a little help from some online tools such as ColorZilla, which I will talk about in the next section.

Design tools available for HTML5 are proliferating at a rapid rate; this means a developer can make Web applications look better without the assistance of a graphic artist.

Listing1 shows the complete HTML for the navigation page shown in Figure 1. As you can see, the markup is fairly simple. The new items in this HTML are the box-shadow, and the border-radius rules in the .mainMenu style selector, and the <nav> and <footer> elements in the main body of the HTML.

Figure 1: A navigation system in HTML5 can be surrounded with <nav> tags.

The <nav> element is nothing more than semantic markup used to group links together to compose your main navigation area. Having a separate element allows you to use an element selector in CSS to style the <nav> element. In addition, <nav> allows search engines to determine that this is your main navigation area.

The CSS rules “box-shadow” and “border-radius” used in the .mainMenu style provide the rounded corners of your main navigation and footer areas. Three versions of box-shadow and border-radius help account for the syntax differences between browsers. You can test these styles with Opera 11.61, Google Chrome 17.0, Safari 5.12, FireFox 9.01, and IE 9, and although the pages in this article may look slightly different on each one, they all work with HTML5 and CSS 3. If a particular browser does not support some specific feature of HTML5 or CSS 3, it simply downgrades to something that is similar in HTML4. You may also provide your own downgrade process by using some JavaScript or a tool such as Modernizr, available at (www.modernizr.com).

The other thing you may notice from the navigation page in Figure 1 is that the navigation background and the hyperlinks have a slight gradient color. In other words, they are not just one color of gray; they start with a light gray at the top and gradually become a darker gray at the bottom. To accomplish this, add a class attribute to the <nav> button called “backColor.” This style class is defined in the style sheet named “Styles.css.” Listing 2 shows the complete definition of this “backColor” style. Don’t let the size of this listing scare you! This was code generated from a great website called ColorZilla (http://www.colorzilla.com/). This free on-line utility generates the correct CSS styles needed to create gradients for multiple browsers.

The last new item on the home page is the <footer> element. Again, this is just a new semantic markup element. You can style the <footer> element exactly as you would style the <nav> element. You use the same class attribute, backColor, on this <footer> element. This adds the background color to the footer. Also, in the Styles.css, you will find the footer selector defined as follows:

footer
{
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin: 0.5em 0.5em 0.5em 0.5em;
  position: absolute;
  bottom: 0.2em;
  left: 0em;
  width: 95%;
  text-align: left;
  border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  -moz-border-radius: 0.75em;
}

The rules above are applied to the <footer> element and the backColor class is also applied with the background color. Keeping your background color separate from your other style rules allows you to change the background color in one place without affecting any other style rules. You can also see this type of styling on the <a href> elements used for the main navigation.

<a href="Login.htm" class="mainMenu
backColor">Login</a>

In the class attribute on each of the <a href> elements, you apply two styles. The mainMenu selector controls foreground color, margin, padding, and other rules while the backColor selector applies the background color.

Login Page

Most applications require a user to authenticate by typing in a login ID and a password. The login page, shown in Figure 2, introduces a few more HTML5 elements and attributes. The new elements are <header> and <figure>, and the new attributes are autofocus, required, and placeholder. For these new attributes, your mileage will vary on the different browsers. Opera 11.61 is the only browser that seems to render HTML5 consistently with all of these new attributes. I recommend you download this browser in order to try out the samples in this article.

Figure 2: HTML5 contains new attributes, such as placeholder, to help you tell the user what they should enter in each field.

The <header> element is used to identify an area of the page that contains description information about this particular Web page. Just like any other normal HTML element, you can then apply a style to the <header>. In the login page, the words at the top “Please Login to Access this Application” are the header area. The <header> element in this Web page looks like the following.

<header class="backColor">
  Please Login to Access this Application
</header>

Again, notice the use of the backColor class attribute to apply the background gradient to the header. In the <head> tag of the login page you will find the style shown in Listing 3 for the <header> element to give it the look you see in Figure 2.

Another new element in HTML5 is called <figure>. This element is used as a wrapper around any image you display on your page. There is an optional <figcaption> element that can be used to display a caption for your figure. You won’t use a figcaption on this figure because it isn’t necessary for this particular page. The “key” image at the top-right of the login page is defined in the HTML as the following.

<figure>
  <img src="Images/KeyComputer.png"
       width="60" height="60" alt="Login" />
</figure>

In the <head> tag of the login page you will find a style for this figure that will make it look as shown in Figure 2.

figure
{
  float: left;
  vertical-align: top;
  text-align: center;
  margin: 2.2em 2em 0em 3em;
}

When you run this login Web page, you’ll notice that your cursor is automatically placed on the Login ID text box. There is no JavaScript code required to make this happen, which is a great improvement that you can take advantage of for all data-entry pages. Instead, you use the new “autofocus” attribute on the <input> element. You will also find that there are two other new attributes on the Login ID text box: “required” and “placeholder.”

<input type="text" name="txtLogin"
       class="textInput"
       autofocus
       required
       placeholder="Enter Your Login ID" />

The “required” attribute stops a page from posting the data unless something is entered into the Login ID text box. You may receive a pop-up balloon informing you that the particular field is required, depending on the browser you are using to run the page.

The “placeholder” attribute is used to display watermark text within the input control. This text, such as “Enter Your Login ID,” appears within the text box until the user moves into the control. Then it disappears. If the user leaves the text box without filling any text into the box, the placeholder text re-appears.

Personal Information

The Personal Information Web page shown in Figure 3 contains many of the same elements and attributes as the Login page and the navigation page. However, there are a couple of new HTML5 features used in this page. A <datalist> element is used in combination with the “list” attribute to create the Salutation drop down. The new input type, “range,” creates the slider used for Your Age. Next to the slider is an <output> element used to display the value from the “range” slider. In order to make this work, you do have to write a little bit of JavaScript.

Figure 3: The “range” input type renders as a slider on some browsers.
Let’s first take a look at the Salutation drop down. Instead of using a <select> and <option> elements, the new <datalist> element can be used. This makes the input look more like the auto-complete lists users are used to on search engines and many other websites. Once a user starts typing into this text box, the list automatically drops down and is filtered by the characters the user types. The user may choose a value from the list, or enter a new value. Below is the HTML5 code needed to create the Salutation element.<input type="text" name="salutation" class="textInput" autofocus list="salutationList" /><datalist id="salutationList"> <option value="Dr">Dr</option> <option value="Mr">Mr</option> <option value="Mrs">Mrs</option> <option value="Miss">Miss</option></datalist> Notice that the <input> type is text, but adds the “list” attribute. The list attribute must be the ID of a valid <datalist> element. In the code above, the <datalist> is positioned right under the <input> element, but it can be anywhere on the Web page. Normal <option> elements are used to populate the data list. The HTML5 specification also says that you can attach a “data” attribute to the input type with a URI pointing to a valid XML file that can be used to fill the list. The <input type=“range”> displays a numeric slider in Opera, Chrome, and Safari. There are new attributes on the range called min, max and step. These attributes control the minimum value allowed, the maximum value allowed and by how much to increment the “value” property when the user moves the slider. In the Personal Information page, I added two images around the range input: a minus and a plus sign. To these images, I added some JavaScript to the onClick events to decrement and increment the <output> elements respectively. Below is the HTML code used to create the slider and the <output> element.<img src="images/Minus.png" class="plusminus" onclick="age.value = age.value - 1; ageOutput.value = age.value;" /> <input type="range" min="21" max="110" step="1" id="age" value="30" onchange="ageOutput.value = age.value;" /> <img src="images/Plus.png" class="plusminus" onclick="age.value = age.value + 1; ageOutput.value = age.value;" /> <output id="ageOutput" /> In addition to the JavaScript in the two image controls, you might want to write a little JavaScript code when the page loads to pre-populate the <output> element with the “value” in the range control.<script type="text/javascript"> window.addEventListener('load', function () { // Get the age output control var out = document.getElementById( 'ageOutput'); // Get the age control var age = document.getElementById('age'); out.value = age.value; }, false);</script> The <output> element is another new semantic element that you can style in any manner you see fit. Its purpose is to allow you to place some output data in a specific location on your page without having to use a <p> or <span> tag. Other Pages In the sample that you download for this article, you will find three other business Web pages that you might find useful. These pages use the same HTML5 elements, attributes and CSS 3 styles as the other pages that have been discussed in this article. Contact Us Having a Contact Us page in your Web application allows a user to give you feedback about the application, report a bug, or ask you for more information about your product. Figure 4 shows an example of a Contact Us page that uses place holders, auto focus, drop shadows, linear gradients and many of the other techniques you have previously seen. Figure 4: Having a Contact Us page is a great way to get feedback from a user.

US Address Page

If you wish to gather address information from your user for processing an order, an Address page like the one shown in Figure 5 can come in handy. This page was created for addresses in the United States, but I’m sure you can modify it for your locale. Notice that the size of the Save button on this page is larger than the Cancel button. Making your “default” button larger than the other buttons is a great way to inform your user that this is the button that will be executed when they press the Enter key.

Figure 5: This US Address page could be used in many Web applications where you must gather information from your users.

User Profile

When asking a user to fill out his or her profile for your site, it’s a good idea to ask for a security question and answer. If the user ever forgets a password, you can prompt for login ID and a security question selected on the User Profile page shown in Figure 6. When the user supplies the correct answer, you can email the new password to the user. When choosing a security question, be sure to make it something personal in nature that only the user would know. Look at the questions in the data list in Figure 6. These questions are things that only that user is likely to know.

Figure 6: A Create User Profile page is needed in a Web application where you have users that sign in.

Summary

In this article, you learned to use HTML5 and CSS 3 to create a variety of business application Web pages. Using rounded borders and drop shadows makes your pages look more modern. Employing linear gradients in your background colors helps your applications look more natural to new users. Taking advantage of autofocus, required and placeholder attributes greatly simplifies your Web pages and allows you to get rid of a lot of JavaScript. Of course, all of this assumes that HTML5 can be rendered on all browsers that your users use. Right now, this is just not the case. So, you will still need to use some fallback mechanisms such as Modernizr (www.modernizr.com) to ensure that your HTML5 applications will work with older browsers.