How to make slides with the W3C style

This document describes how to make slides with the W3C slide style. The process is actually very simple: just create a single HTML file where each slide starts with an H1 and link to the special style sheet "w3ctalk-proj.css".

But since that style sheet relies on the CSS "projection" mode, which not all browsers support yet, there is an alternative: a little Perl program, slidemaker, that takes this HTML file and generates slides suitable for older browsers. (Warning: as of January 2002, the slidemaker documentation is several versions out of date.)

HTML structure

If you plan to use the slidemaker, your HTML file has to be called

all.htm

Otherwise, you can call it whatever you want.

W3C team members are further requested to give this file a URL of the form http://www.w3.org/Talks/YYYY/MMDD-topic-place/all.htm, where YYYY is the current year, MM is the month, DD the date, topic is a keyword, such as "P3P," "HTML," "policy," etc., and place is the town or event where the presentation is to be given. Using this scheme ensures that the necessary icons and style sheets are in the right locations relative to the document and that all talks are in a common place. Only public presentations should go there. Those meant for restricted audiences must be put somewhere else.

The HTML must start with a HEAD part that includes the following elements:

<title>Put the title of the talk here</title>
<link href="http://www.w3.org/Talks/Tools/w3ctalk-proj.css"
  rel="stylesheet" type="text/css" media="projection"
  title="W3C Talk">

Of course, if you're not online during the talk, it is better to download the CSS file and use a relative URL.

W3C team members should use the following relative URL:

../Tools/w3ctalk-proj.css

It is also a good idea to add style sheets for normal, on-screen viewing and for printing:

<link href="http://www.w3.org/Talks/Tools/w3ctalk-all.css"
  rel="stylesheet" type="text/css" media="screen"
  title="W3C Talk">
<link href="http://www.w3.org/Talks/Tools/w3ctalk-all.css"
  rel="stylesheet" type="text/css" media="tv"
  title="W3C Talk">
<link href="http://www.w3.org/Talks/Tools/w3ctalk-print.css"
  rel="stylesheet" type="text/css" media="print"
  title="W3C Talk">

These styles, in contrast to the projection style, will also show the comments (see below) that can be inserted between the slides. Of course, you can add other styles of your own, via LINK or in a STYLE element. E.g., to add a personalized background, you could do this:

<style type="text/css">
  body {background: url(990115-St-Tropez-bg2.jpg)}
    100% 100% no-repeat fixed white}
</style>

Each slide starts with an H1 element. For the body of the slide, you can use any text or mark-up you want, but there is typically only room for about 10 lines. Often the slide will consist of a list, e.g.:

<h1>Outline of this talk</h1>
<ul>
  <li>Who we are
  <li>History
  <li>Projects
</ul>

The first slide is the title slide, and if you want the slides to have an icon in the upper left corner and/or a footer with your name, it is on this slide that you have to declare them. They must be P elements with classes of "letterhead" and "signature" respectively. They will be repeated automatically on every slide. Here is an example with the W3C icon:

<h1>Towards a foo bar project</h1>

<p class="letterhead">
  <a href="http://www.w3.org/"><img
    src="../Icons/w3c_home.png" alt="W3C "></a>

<p class="signature">
  <a href="mailto:bert@w3.org">Bert Bos</a>

The icon should be about 72 by 48 pixels. (If it is much larger, the position of the H1 has to be changed in the style sheet.)

For some examples of complete talks, see

• W3C: standaardisatie tussen idealisme en praktijk
• Same source, multiple uses

Predefined classes

There are a few classes defined for special styles:

<a class="offsite"...>

These links will get a different color. It is meant to distinguish external links from links within the site.

<span class="attribution">

Meant for the name of somebody who is quoted, as in

 To be or not to be -
<span class="attribution">Hamlet</span>

<span class="keyword">

This is meant for use inside example of computer code, to distinguish keywords. Example:

<span class="keyword">if</span> condition
<span class="keyword">then</span> action

<span class="comment">

Ditto, but for comments. Example:

read <span class="comment">;;; read it</span>

<span class="string">

Ditto, but for quoted strings.

<pre class="extensive">

This is for longish code examples. They will be shown in a slightly smaller font.

class="selector"

Can be on any element. This is specifically for code examples of CSS, to mark the selector part of a CSS rule.

class="property"

Ditto, for CSS properties.

class="value"

Ditto, for the values of CSS properties.

Adding notes or comments

You can add notes between the slides, which will not be shown in projection mode, but will be shown in normal (screen) mode and will also be printed. Such notes must be enclosed in a DIV with class "comment":

<div class="comment">... </div>

Giving the presentation

With a browser that supports projection mode, all you need is the HTML file and the style sheet, and, of course, any images that you put on the slides. Just open the file and go into full-screen mode. The usual key for that is F11.

As of January 2002, only Opera 5 & 6 can do this. Mozilla's support is still incomplete, and the full-screen modes of Konqueror and Internet Explorer currently still ignore the style sheet completely.

It depends on the browser how you go forward and backwards through the slides, but the Page-up & Page-down keys are likely to work.

If you cannot use projection mode, you'll have to present the slides that slidemaker generated.