Linux, Open Source, Free Software, Bicycles, and other topics of interest.
Slidy : How to create an HTML Slideshow
It is possible to create a slide show / PowerPoint like presentation using just HTML, CSS and JavaScript. This article explains how you can create an HTML slideshow and display it in your web browser using Slidy.
What is Slidy ?
Slidy is a XHTML framework developed by World Wide Web Consortium (W3C), which helps you to create beautiful slideshows in HTML and present them using your web browser. Finally with Slidy as your companion, you can bid goodbye to Microsoft Powerpoint and other presentation tools.
What you will need to use Slidy
- Basic HTML and CSS coding skills
- A Text editor of your choice to create the presentation. I use Notepad++ in Windows and Scribes in Linux.
- A Web browser to view the slide show. Opera has a slide show mode which comes in handy here. However you can use any web browser of your choice including Firefox, Internet Explorer, and Safari.
Steps to create your slide show
Each presentation is a single XHTML file. Follow the steps.
Step 1: Add the skeleton code
Open a blank file in a text editor and save it as presentation.html (or any other name).
Now add the following skeleton code in it.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head><title>My Slide Show</title></head> <meta name="copyright" content="Copyright © 2005 your copyright notice" /> <!-- Add a copyright notice which will be seen in the footer of your presentation --> <link rel="stylesheet" type="text/css" media="screen, projection, print" href="http://www.w3.org/Talks/Tools/Slidy/slidy.css" /> <link rel="stylesheet" type="text/css" media="screen, projection, print" href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue2.css" /> <script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js" charset="utf-8" type="text/javascript"></script> <style type="text/css"> <!-- your custom style rules --> </style> </head> <body> <!-- Your presentation data is entered here --> </body> </html>
Step 2: Add the logo and background image to your presentation.
Here you can add either the stock logo and background that is provided by W3C or you can include your own images.
The following code is to be inserted the first thing within the <body> tag.
<div class="background"> <img id="head-icon" alt="icon of the presentation" src="icon-50x50.png" /> <object id="head-logo" title="Logo of your Company" type="image/svg+xml" data="logo-89x36.svg"><img src="logo-89x36.gif" alt="W3C logo" id="head-logo-fallback" /></object> </div>
Note: This icon and logo are visible through out all the slides of your presentation. The <object> tag embeds the logo in SVG and will fallback to a GIF file if your web browser doesn’t support rendering SVG.
Step 3: Add the slide show cover page
This is shown only in the beginning of the presentation. It can contain a background image and title of your presentation with author information.
<div class="slide cover"> <img src="background-cover-image.jpg" alt="Cover page images" class="cover" /> <br clear="all" /> <h1>Title of your presentation</h1> <p><a href="authors website">Author</a> <a href="mailto:[email protected]">[email protected]</a></p> </div>
Step 4: Start adding slides
Each slide is enclosed within a <div class="slide"> </div>.
You can add any HTML element like headings, blockquotes, lists etc within the <div class="slide"> tag.
CSS classes you can use in Slidy
| CSS Class | What it does ... | HTML elements that can use this class |
|---|---|---|
| incremental | For incremental display of elements. | p,ul,ol,div,pre,blockquote,... |
| outline | Show a folded list. | ul, ol |
| expand | Start a list in an expanded state. To be used in conjunction with the "outline" class. | li |
| vbox | Create a vertical box. | div |
| hbox | Create a horizontal box. | div |
I have put together a demo presentation which you can view here.
References
W3C HTML Slidy
Update (December 24, 2010) : Dov Grobgeld has developed an Emacs org-mode export module for HTML Slidy which allows you to create presentation slides right from your Emacs editor. If you are an Emacs user, then using this module will help you save time in creating presentations using Slidy. Visit the project’s home page for more details.