slanted W3C logo
Cover page images (keys)

HTML Slidy: Slide Shows in HTML and XHTML

Dave Raggett

Hit the space bar or swipe right for next slide

Slide Shows in HTML and XHTML

What you need to do


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" lang="en" xml:lang="en">
  <title>Slide Shows in XHTML</title>
  <meta name="copyright"
   content="Copyright &#169; 2005 your copyright notice" />
  <link rel="stylesheet" type="text/css" media="screen, projection, print"
   href="" />
  <script src=""
   charset="utf-8" type="text/javascript"></script>
  <style type="text/css">
    <!-- your custom style rules -->

Timing Your Presentation

Generate a Title Page

If you want a separate title page with the W3C blue style, the first slide should be as follows:

<div class="slide cover">
 <img src=""
  alt="Cover page images (keys)" class="cover" />
 <br clear="all" />
 <h1>HTML Slidy: Slide Shows in XHTML</h1>
 <p><a href="">Dave Raggett,</a>
 <a href=""></a></p>

The w3c-blue.css style sheet looks for the classes “slide” and “cover” on div and img elements using the CSS selector div.slide.cover

This technique can be used to assign your slides to different classes with a different appearence for each such class.

Slidy also allows you to use different background markup for different slides, based upon shared class names, as in “foo” below. Backgrounds without additional class names are always shown except when the slide isn’t transparent. You may need to tweak your custom style sheet.

<div class="background foo">
   ... background content ...


<div class="slide foo">
   ... slide content ...


To be done