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.
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.
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.
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.
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.
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.