Creating an Attractive Presentation with HTML5

Attractive Presentation with HTML5. Today we will prepare something new – presentation. And we will using all interesting what can give us HTML5. Presentation itself will contain 5 easy slides. We will able to use navigation arrow keys for sliding, spacebar, display notes, sidebar with some custom content. Here are new html5 tags which we going to use: nav, menu, section, aside, header and hgroup. Sure, that now is time to check our demo.

Here are links to demo and downloadable package:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/style.css
Step 3. JS
js/script.js
Conclusion

Live Demo

[sociallocker]

download in package

[/sociallocker]

So, download the example files and lets start coding !

Step 1. HTML

index.html

All layout consist of 4 main sections: header, floating help navigation, main slides area and sidebar. Here are code for header area:

<!DOCTYPE html> 
  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
  
<head> 
  
    <meta charset="utf-8" /> 
  
    <title>HTML5 Presentation demo | Script tutorials</title> 
  
    <!-- Linking styles --> 
  
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> 
  
</head>

Next – floating help navigation (in document body)

<nav id="helpers"><!-- Defining the floating helpers of the page --> 
  
  <button title="Previous" id="nav-prev" class="nav-prev">&lt;-</button> 
  
  <button title="Jump to slide" id="slide-no">3</button> 
  
  <button title="Next" id="nav-next" class="nav-next">-&gt;</button> 
  
  <menu> 
  
    <button type="checkbox" data-command="notes" title="View Notes">Notes</button> 
  
    <button type="checkbox" data-command="help" title="View Help">Help</button> 
  
    <button type="checkbox" data-command="back" title="Back to tutorial">Back</button> 
  
  </menu> 
  
</nav>

Here, we predefined several action buttons for future. Now, here are code for presentation slides:

<div class="presentation"><!-- Defining the main presentation --> 
  
  <div id="presentation-counter">Loading...</div> 
  
  <div class="slides"><!-- Defining slides --> 
  
    <div class="slide" id="slide1"><!-- Defining single slide --> 
  
      <section class="middle"> 
  
        <p>HTML5 Presentation demo</p> 
  
        <p>Press <span id="left-init-key" class="key">&rarr;</span> key to continue.</p> 
  
      </section> 
  
      <aside class="note"><!-- hidden notes of slide --> 
  
        <section> 
  
          Notes for first slide 
  
        </section> 
  
      </aside> 
  
    </div> 
  
    <div class="slide" id="slide2"> 
  
      <header>Slides controls</header> 
  
      <section> 
  
        <ul> 
  
          <li><span class="key">&larr;</span> and <span class="key">&rarr;</span> to move forward/back.</li> 
  
          <li><span class="key">spacebar</span> to move forward.</li> 
  
          <li><span class="key">N</span> to toggle hidden notes.</li> 
  
          <li><span class="key">H</span> to toggle help.</li> 
  
        </ul> 
  
      </section> 
  
      <aside class="note"> 
  
        <section> 
  
          Notes for second slide 
  
        </section> 
  
      </aside> 
  
    </div> 
  
    <div class="slide" id="slide3"> 
  
      <section class="middle"> 
  
        <hgroup> 
  
          <h1> 
  
            Slide3 
  
          </h1> 
  
          <h2> 
  
            Slide Title #3 
  
          </h2> 
  
        </hgroup> 
  
        <p>text of slide, text of slide, text of slide, text of slide</p> 
  
      </section> 
  
    </div> 
  
    <div class="slide" id="slide4"> 
  
      ... code for slide 4 .. 
  
    </div> 
  
    <div class="slide" id="slide5"> 
  
      ... code for slide 5 .. 
  
    </div> 
  
  </div>

You can add more and more slides in end by same rules. And now – code for sidebar:

<div id="hidden-note" class="invisible" style="display: none;"> 
  
</div> <!-- hidden note --> 
  
<aside id="help" class="sidebar invisible" style="display: hidden;"><!-- Defining sidebar help --> 
  
  <table> 
  
    <caption>Help</caption> 
  
      <tr> 
  
        <th>Move forward/back</th> 
  
        <td>&larr;&nbsp;&rarr;</td> 
  
      </tr> 
  
      <tr> 
  
        <th>Move forward</th> 
  
        <td>spacebar</td> 
  
      </tr> 
  
      <tr> 
  
        <th>Hidden Notes</th> 
  
        <td>N</td> 
  
      </tr> 
  
      <tr> 
  
        <th>Help</th> 
  
        <td>H</td> 
  
      </tr> 
  
  </table> 
  
</aside>

Thats all

Step 2. CSS

css/style.css

Resulting file of our demo is pretty big. So I decided not publish all this code here. But you always can download this in our package.

Step 3. JS

js/script.js

This file big enough too (330 lines). Hope that this is ok if it will available in package too.

Live Demo

Conclusion

I hope that today you were impressed and you like presentation. As you can see – all pretty customizable. I wish you luck in creating own presentations!