• HTML Slides
  • Layouts
  • Support for maths
  • Embedding movies
  • Embedding 3D graphics


The slides are based on S5 with some extensions regarding

  • embedding of video and 3D graphics
  • layouts
  • blocks and frames


  • There is a basic structure you have to respect
  • There is a div class "layout" where header and footer can be defined
  • The presentation is enclosed by the div class "presentation"
    <div class="layout"></div>
    <div class="presentation">
      <div class="slide">Slide 0</div>
      <div class="slide">Slide 1</div>
  • Individual slides are defined by the div class "slide"

Basics - Defining headers and footers

  • You can define headers and footers in one place
  • Just define a div class "layout" as follows:
    <div class="layout">
      <div id="controls"><!-- DO NOT EDIT --></div>
      <div id="currentSlide"><!-- DO NOT EDIT --></div>
      <div id="header">
      <div id="footer">
        <h1>Your Slide Title</h1>
        <h2>Put your name and date here</h2>

Basics - Bullet-Lists

  • Typically a slide will have a list of bullets:
    <div class="slide">
        <li>Bullet One</li>
        <li>Bullet Two</li>
  • You can also show individual bullets incrementally
  • Just add the class "incremental"


Create block to emphasize your points

  • Use the class "block" to mark your blocks in a distinct DIV environment.

Even with extra titles using h2

But you could also use blocks without a title, as you will see in the remainder of this presentation.


Two Column Layout

With extra titles

  • You might want to have a 2-column layout.
  • This is supported by the left-column and right-column CSS classes.

This is column two without title

Three Column Layout

This is column one

This is column two. Note that you can make a block just by adding the class "block"

This is column three


  • You can use MathML to typeset formulas
  • sin ( x 4 )
  • But this is quite cumbersome. Thanks to Douglas R. Woodall you can also use Latex-Style formulas between \$s
    • \$sin(x^4)\$ $\to sin(x^4)$


Adding Videos

  • Simple since HTML 5
  • But keep an eye on the codecs used, this is currently still a mess!
  • <video controls>
      <source src="movie..mp4" 
      <source src="movie.webm" 

3D Graphics

It is easy to add interactive 3D graphics with the X3DOM JavaScript library.


  • are an extended Version of S5 from Eric A. Meyer
  • are based on HTML an should run in most browsers (except for some features such as MathML or WebGL)
  • offer several features, from media support (video, images) to 3D graphics and math formulars.
  • have the additional eye candy (transitions)
  • can be easily used with versioning tools, such as SVN, CVS, etc.
  • are simple to customize, just HTML/JavaScript