Creating WebPages Using HTML5

HTML stands for Hyper Text Markup Language is a programming language which is basically used to build web pages for the websites. Here we are discussing about the presentation with HTML 5 so before start with the topic, first of all we will see the basic features of HTML5 as given below:

Offline-This feature can also be used to improve an application’s performance by storing data in the cache or to make data persistent between user sessions and when reloading and restoring pages.

Audio/Video-With this feature, you can access, control and manipulate timeline data and network and you will be able to read and write raw data to audio files or manipulate captions in videos.

Storage-This feature allows the application to save data on the client device.

3D Graphics- There is many new features available now which deal with graphics on the web: 2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL.

Connectivity this feature states that more efficient connectivity means more real-time chats, faster games, and better communication between the concerned.

Presentation- With the introduction of CSS3 it is easier to create rich and beautiful web sites and applications in HTML. There are many new technologies and extensions to CSS3 are available including: 2D Transformations, Transitions, 3D Transforms and WebFonts.

File access- This feature allows the web applications to do things like read files, create arbitrary Blobs, write files to a temporary location, recursively read a file directory, perform file drag and drop from the desktop to the browser, and upload binary data usingXMLHttpRequest2.

Performance-Developers are in a great need to use a variety of techniques and technologies to get the most out of the browser. Performance is a critical part of user experience; it's a constant theme across all aspects of your development and product.

Semantics- Semantics is one of the most distinctive features of the Web Platform if compared with other application platforms. Developers usually ignore such feature but the mastery of it can bring many benefits to our projects.

Nuts and bolts-It is used to describe the amazing improvements coming to the web platform. Most people have heard of the rich APIs but there's also some lesser-known features “nuts & bolts” of building modern web applications.

Here I will tell you how to create a basic HTML5 presentation using reveal.js.

Getting ready

Before we start, we need to download the reveal.js script .

How to do it…

To create our initial presentation, perform the following steps:

The first step is to create an HTML file and save it as index.html. Then copy the reveal.js files to the same directory of our HTML file,

Now we need to write our initial HTML5 markup

With our initial markup ready we include the reveal.js base style sheet and script file plus the default theme style sheet. We will also need to include the HeadJS JavaScript loader in order to managereveal.js plugins.

The style sheets will go directly below the title tag, while the script files must be included before the closing body tag.

The fourth step is to create the elements for our slides

After that, we initialize the reveal.js JavaScript object, right after the reveal.js script tag.

For the last step, open index.html using the browser of your choice and check out how our initial HTML5 presentation looks.

To create a dynamic or responsive presentation with HTML 5, that responds to mobile and desktop layouts and which display artwork, photography, and other kinds of content, which also discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures and use CSS to customize the slide display for different screens and animated transitions, we will use open technologies (HTML5, query, and CSS).

Creating an Advanced Responsive Presentation to enhance the web presentation slides includes the topics: