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: 317209 views
Comments:

Resources

Learn

"HTML V5 and XHTML V2" (Adriaan de Jonge, developerWorks, November 2007): While the intention of both HTML V5 and XHTML V2 is to improve on the existing versions, the approaches the developers chose to make those improvements is very different. And with differing philosophies come distinct results. For the first time in many years, the direction of upcoming browser versions is uncertain. Uncover the bigger picture behind the details of these two standards.
"New elements in HTML5" (Elliotte Rusty Harold, developerWorks, August 2007): Get an overview of some of the new elements in HTML 5.
"An Introduction to MathML" (David Carlisle, developerWorks, December 2009): MathML is a W3C Recommendation defining an XML vocabulary for marking up mathematical expressions. With HTML 5, it will hopefully be possible to place MathML directly on the Web without needing to worry about mime types and server configurations.
"Android and iPhone browser wars, Part 1: WebKit to the rescue" (Frank Ableson, developerWorks, December 2009): This article is the first in a two-part series on developing browser-based applications for iPhone and Android.
"The future of HTML, Part 1: WHATWG" (Ed Dumbill, developerWorks, December 2005): In this two-part series, Edd Dumbill examines the various ways forward for HTML that Web authors, browser developers, and standards bodies propose.
This HTML tutorial from w3schools.com teaches you everything about HTML.
This CSS tutorial teaches you how to use CSS to control the style and layout of multiple Web pages all at once.
JavaScript tutorial: Learn how to use the scripting language of the Web.
HTML5: A vocabulary and associated APIs for HTML and XHTML: Editor's Draft 13 January 2010: Read the most recent Editor's Draft for the HTML5 specification.
Read excerpts from the upcoming Dive Into HTML5 by Mark Pilgrim from O'Reilly Media.
HTML5 gallery is a showcase of sites using HTML5 markup.
HTML5 Tag Reference: See an alphabetically-ordered reference for HTML5 tags.
HTML5 doctor Web site is loaded with information to help you implement HTML 5 today.
The HTML 5 Cheat Sheet lists all currently supported tags, their descriptions, their attributes, and their support in HTML 4.
CSS 3 Cheat Sheet: Here are the main features of CSS 3 in a handy, printable reference card.
HTML5 demos Web site has links to various HTML 5 experiments and demos.
This demo demonstrates the potential of rendering 3D graphics in the browser, using O3D, an open-source web API for creating rich, interactive 3D applications in the browser.
Read How HTML5 Will Change the Way You Use the Web from lifehacker.com.
Yes, You Can Use HTML5 Today!: Another excellent introductory article to the world of HTML5.
css3.info.com: Everything you need to know about CSS3.
Introduction to CSS3: Read the W3C Working Draft of this upcoming specification.
Introducing the CSS3 Multi-Column Module looks at the W3C multi-column module. The module's intent is to allow content to flow into multiple columns inside an element.
Learn about CSS3 Columns from Mozilla.org.
CSS3 transitions and 2D transforms: This article teaches you about CSS3 transitions and transforms in Opera. See the SVG and SMIL corollaries to them, too.
This Canvas tutorial from Mozilla.org describes how to implement the <canvas> element in your own HTML pages.
Using the Canvas from Apple Developer Central looks at Safari, Dashboard, and WebKit-based applications support for the JavaScript canvas object, which allows you to easily draw arbitrary content within your HTML content.

Get products and technologies

Theora is a free and open video compression format from the Xiph.org Foundation.
O3D AP: O3D is an open-source Web API for creating rich, interactive 3D applications in the browser.
Download IBM product evaluation versions, and get your hands on application development tools and middleware products from DB2, Lotus, Rational, Tivoli, and WebSphere
Innovate your next open source development project with IBM trial software, available for download or on DVD.

Discuss

Discuss anything and everything on developerWorks on the developerWorks blog collection.

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

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.