The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Create modern Web sites using HTML5 and CSS3

Implementing the canvas and video elements in HTML5

Joe Lennon, Software developer, Freelance

Joe Lennon is a 24-year-old software developer from Cork, Ireland. Joe is author of the forthcoming Apress book Beginning CouchDB, and has contributed several technical articles and tutorials to IBM developerWorks. In his spare time, Joe likes to play football (soccer), tinker with gadgets, and work on his Xbox 360 gamerscore. He can be contacted via his Web site at www.joelennon.ie.

Summary: Since the World Wide Web emerged in the early 1990s, HTML has evolved to become a relatively powerful markup language, which, when backed up by its close partners JavaScript and CSS, can be used to create visually stunning and interactive Web sites and applications. This tutorial serves as a hands-on introduction to HTML5 and CSS3. It provides information about the functionality and syntax for many of the new elements and APIs that HTML5 has to offer, as well as the new selectors, effects, and features that CSS3 brings to the table. Finally, it will show you how to develop a sample Web page that harnesses many of these new features. By the time you have finished this tutorial, you will be ready to build Web sites or applications of your own that are powered by HTML5 and CSS3.

Date: 02 Mar 2010
Level: Intermediate
PDF: A4 and Letter (342 KB | 33 pages)Get Adobe® Reader®

Activity: 317440 views
Comments:

Before you start

This tutorial assumes some basic experience with HTML, CSS, and JavaScript. It assumes that you are aware of what an HTML element or tag is, what an attribute means, the basic syntax of HTML markup, the general structure of a Web page, and so on. In terms of CSS, you are expected to be familiar with element, class, and ID-based selectors, the syntax of a CSS property, and how to include CSS in your Web pages using inline or external stylesheets. Finally, it is assumed that you have some working knowledge of JavaScript, such as what a variable, function, if statement, and for loop is, as well as how to include JavaScript code in your Web pages. If you feel that you need to brush up on any of these technologies before you begin, skip ahead to the Resources section for some useful tutorials and articles that will bring you up to speed on the basics of HTML, CSS, and JavaScript development.

About this tutorial

Over the past ten years or so, concepts such as Web 2.0, Rich Internet Applications (RIAs), and the Semantic Web have all pushed HTML, CSS, and JavaScript to and beyond their limits, often relying on plug-ins such as Adobe® Flash to power components such as video and audio, as well as highly graphical and interactive applications. The Adobe Flex development framework, Microsoft®'s Silverlight platform, and JavaFX have all looked to provide support where HTML's weaknesses made developers' lives difficult. With HTML5, however, the markup language is striking back, with full multimedia support, local storage and offline application support, a native 2D drawing API, and a host of new application development APIs, all provided with the intent of proving that HTML, CSS, and JavaScript can provide a rich front end to your Web sites and applications.

HTML5 is widely regarded as one of the most important new technologies scheduled to emerge in 2010, and there are already several books being written on the subject, some of which are due to be published as early as March of this year. For many years, the Web has relied on external plug-ins to deliver features that cannot be natively supported by the Web browser, particularly in terms of 2D drawing, animation, and multimedia. The latest versions of the HTML and CSS specification aim to remove the need for these additional browser components to facilitate such features, as well as reduce the amount of JavaScript required (or removing the need for JavaScript entirely, in some cases) for such trivial things as row drag and drop, row striping, and more. Follow along in this tutorial to learn how to take advantage of HTML5.

Prerequisites

HTML5 is a relatively young specification, and as a result, browser support is quite limited (at the time of writing). The code presented in this tutorial is built to be as cross-browser compatible as possible, but some features will not work in all browsers. Any features that are currently browser-specific will be clearly identified in the tutorial. To ensure that you can experience all of these new features, it is recommended that you install the latest versions of the following Web browsers on your system when developing HTML5 and CSS3 applications:

You do not need any specific software to write HTML and CSS code; any basic text editor will do (such as Notepad, vi, emacs, and so on.) In this tutorial, it is assumed that the source code is stored in a directory on your local computer—you do not need to use a Web server or upload the files to a Web hosting service.

Comments

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=1

Zone=Web development

ArticleID=470908

TutorialTitle=Create modern Web sites using HTML5 and CSS3

publish-date=03022010

author1-email=joe@joelennon.ie

author1-email-cc=bwetmore@us.ibm.com

Before you start
New features in HTML5
New features in CSS3
Putting it all together: The sample HTML5/CSS3 page
Summary
Download
Resources
About the author

Next steps from IBM

Identify system and application bottlenecks with Rational Performance Tester. With Rational Functional Tester get enhanced support for Adobe Flex 3.0, Java 1.6, and the Dojo Toolkit.