Creating an Attractive Presentation with HTML5

  • Reading time:6 mins read
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:

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 | Dev School</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!