HTML5 is giving web designers and developers new capabilities in the world of web development. With the presence of HTML5, web application development will be more fun.
HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block) and <footer> (usually referring to bottom of web page or to last lines of html code). HTML 5 features like Canvas, local storage, and Web Workers let us do more in the browser than ever before.
Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. Today, we have compiled a list of HTML5 tutorials which maybe can help you to learn how to make HTML5 powered web application.
- HTML5 Basics & Tutorials
- HTML5 Forms
- HTML5 Canvas
- HTML5 Video
- Mobile Application Development With HTML5
- HTML5 local storage
HTML5 Basics & Tutorials
This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.
In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them.
Experiment with the HTML5 technologies. At the end of this article you’ll learn how to:
- Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
- Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.
- Use HTML5 alongside a rising technology: Microformats.
- Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.
During this series of posts we’re going to tackle building a live news blogging system. There will be multiple administrators who can add, delete and edit news. Each news can be assigned to one category only. The visitors will be able to see all news, filter them based on categories and publishing date. If one’s online and a news is published it will receive a pop-up that will let him know there’s new news in the feed — just like Twitter displays the new tweets message on top of the timeline.
This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers.
In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.
In this article, they explain how HTML5 Web Sockets interact with proxy servers, load balancing routers, and firewalls. Additionally, they explain how Kaazing WebSocket Gateway and its Web Socket emulation can add additional value.
View Source is a new series where we crack open cool web sites and applications and detail how they were made, step by step.Today we will take a look at the Webkit Sticky Notes demo that was created when Webkit first landed it’s HTML 5 SQL storage support, In this demo you can create new sticky notes that persist themselves into the local SQL storage and can be accessed while offline. When a sticky note is closed it ’swooshes’ offscreen with a nice animated effect.
This is the first of a series in which we will look at building up an easily customizable HTML5
<video> player, including packaging it as a simple jQuery plugin, choosing control types and outputting custom CSS for your own situation.
The <video> element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.
Mobile Application Development With HTML5
18. Creating mobile Web applications with HTML 5, Part 1: Combine HTML 5, geolocation APIs, and Web services to create mobile mashups
In the first part of this five part series, you will tap into one of the most popular new technologies available to mobile Web applications: geolocation. High-end smartphones all have GPS built-in to them, and now you will learn how it can be used by a Web application. In this article you will learn how to use the various aspects of the geolocation standard and how to use it with some popular Web services to create an interesting mobile mashup.
The use of Web development in mobile applications is an increasing trend. However, intermittent network availability is a big obstacle to using Web technology as part of a cloud infrastructure. A traditional Web application simply doesn’t work without a network. One solution to this problem is to use two features of the HTML5 Standard:
- Offline Web applications
- Client-side database storage
The user can use cloud functions on a mobile device, work offline with a locally deployed application on a local database, and share data with the rest of the cloud when going online again.
In this article, learn the technical details for a typical usage scenario. A prototype of a simple inventory management application demonstrates the HTML5 technology.
At the heart of every location-based application is positioning and geolocation. In this tutorial you will learn the geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 app!
HTML5 local storage
Most web developers know that the only kind of local storage we could expect from a web browser comes in the form of cookies. Well, not entirely. The desire to store data on the client machine is not a new concept and it wasn’t conceived while creating HTML5 specifications.
If you haven’t been able to find any tutorials on HTML5’s storage capability, you’re not alone. After looking around, we realized that the HTML5 spec is still at such an early revision that there are few resources out there that describe how it should be used. But with a little digging, we found this excellent little HTML5 database application over at webkit.org. We eagerly grabbed the source code, deconstructed it, and we’re proud to bring you the first webOS / HTML5 database storage tutorial!