Presenting with HTML

Today's Best Tech Deals

Picked by Macworld's Editors

Top Deals On Great Products

Picked by Techconnect's Editors

About to participate in a dog-and-pony show? Besides washing your dog and brushing your pony, you're no doubt also planning to create an on-screen presentation to accompany your rant. In fact, you were probably about to open PowerPoint 98 when I interrupted you. Good thing. Microsoft PowerPoint 98 is a great program, but in today's Web-centric world, it might not always be the best choice for creating a presentation. A better choice may be an HTML editor such as Macromedia's Dreamweaver 2 or Adobe's GoLive CyberStudio–or even Apple's SimpleText.

Even if you aren't the type who dreams in HTML, you'll find that creating presentations using HTML isn't too difficult. To make it even more painless, I've created a set of template pages to get you started (see "A Simple HTML Presentation"). And if you just can't bear to tear yourself away from PowerPoint 98, you can use its HTML-export features to turn your PowerPoint presentation into HTML (see "Convert PowerPoint Presentations to HTML").

With PowerPoint 98 able to do everything except wash dogs and brush ponies, why would you want to descend into the depths of HTML to create a presentation? Several reasons.

Easy Distribution

You can quickly post the presentation on your company's Web site after the event. If you build the presentation using relative links (as I describe shortly), you can also distribute it on floppy disks or CD-ROMs.

More Depth

Chances are that the Web is teeming with sites that relate to your topic. In an HTML-based presentation, it's a cinch to include links to those sites. Your presentation then evolves from a simple series of bullet points into a deeper information resource–a pint-size, portable Web site unto itself.

Playback Versatility

The nightmare: five minutes until show time and you realize you've forgotten the PowerPoint player–or for some reason you can't install it on the presentation computer. But virtually every personal computer on the planet has a Web browser, making HTML a broadly supported foundation on which to build your pitch.

Multimedia Support

Thanks to browser plug-ins and Dynamic HTML, you don't have to strip QuickTime movies, animations, audio, and other glitz from your presentation. You will sacrifice some of its playback versatility, since in order to take advantage of these flashier goodies you'll need to bring and install necessary plug-ins on the presentation machine. But if you're willing to make the effort (and risk the glitches that can accompany using plug-ins), you can do almost anything with HTML that you can in PowerPoint.

Whether or not you use the templates I created, employ these tips for building your HTML presentation. Many of these also apply to conventional Web sites.

Watch Your Screen Size

PowerPoint and other presentation programs automatically resize slides to accommodate the screen resolution of the computer you're using. Web browsers reflow text but won't resize graphics and other elements. So, keep your destination screen size in mind when creating the presentation–a good rule of thumb is to design for a screen resolution of 640 by 480 pixels.

Name Files Carefully

To ensure that your presentation will run properly on any Web-aware platform, name your HTML pages and their support files using all lowercase letters, and in the boring 8.3 style (up to eight characters, a period, and a three-character file extension): for example, dogshow.htm instead of Westminster.html.

Keep Your Links Relative

When linking to graphics or to other pages in the presentation, use relative links rather than absolute ones. A relative link describes a location relative to the location of the page with the link–for example, /images/graphic.gif. An absolute link spells out a complete location–for example, hard_drive/presentation/images/graphic.gif.

Relative links make it easier to move the presentation (or site) from one disk drive or server to another. Absolute links tie your project to a specific disk or Web address and won't function when your project is moved.

Most current Web authoring tools create relative links automatically, but it's possible sometimes to wind up with an absolute link. That's why it's always a good idea to . . .

Test It before Show Time

After creating your presentation, move it to another machine and test it to make sure all your links work properly. If you don't have a second computer, move the entire presentation folder to a different location on your hard drive and test it from there. This will at least let you sniff out any link problems.

Carry It on a PC Disk

The best medium for transporting your presentation is a PC-formatted disk or removable-media cartridge. Because all PowerPC Macs can read PC-formatted media, you'll be able to copy your presentation onto either a Mac or a Windows computer with no worries.

Your pitch doesn't have to end when the presentation is over. As already mentioned, using relative links throughout makes it easy to post your presentation on a Web site or distribute it on floppies. But to really make an impression, consider distributing it on business card-size CD-ROMs, such as McI Technologies' Digital Cards (781/431-7030, ).

Digital Cards have dimensions identical to those of dead-tree-based business cards, but they can be used in any standard CD-ROM drive. A Digital Card holds only 18MB, a fraction of the 600MB capacity of a normal CD-ROM but more than enough to hold an ambitious presentation containing QuickTime movies.

Digital Cards are a bit pricey–as much as $4.50 each, depending on how many you order. But their unique capabilities and high-tech appeal make them a striking finish to big-budget presentations. Anyone who receives one is likely to try it out just to see if it really works. It's a great way to guarantee that someone will take another look at your ideas–all of which are crisply showcased in a snazzy and accessible HTML-based presentation.


April 1999 page: 93

To give you a head start in building HTML-based presentations, I created a set of simple template pages, which you can download. There's one template for a title slide, one for a bullet-point slide, one for images, and so on. The templates have a simple design that works across different browsers and platforms–they're not built for adding flashy animated effects common to PowerPoint presentations.

You can open and modify the template pages with a text editor such as SimpleText or Bare Bones Software's BBEdit (781/687-0700, ), or with a WYSIWYG HTML editor such as Macromedia's Dreamweaver 2 (415/252-2000, ) or Adobe's GoLive CyberStudio or PageMill (408/536-6000, ). If using a WYSIWYG editor, switch to HTML view in order to see the comments I've planted in the HTML. Here's how to work with the templates.

1 Adapt the title slide.   I called the title slide index.htm, the name most commonly used by Web servers to denote a directory's default home page. It simplifies posting your presentation on the Web: simply stash the presentation in its own directory, and refer to it with a nice clean URL such as If you're using a Mac-based server such as StarNine's WebStar (510/649-4949, ), you might need to change this file's name to default.html. If you're willing to spell out a full URL–like–for theonline version of the presentation, you can change its name to anything you like. But keep in mind the file-naming recommendations I mentioned in the main text.

You'll also need to replace the text between the template's <title> tags (which appears in the browser window's title bar) and any other text in the template that reads "Insert...Here."

2 Stash the images.   If your presentation contains graphics, tuck them in the folder named Images and use relative URLs to refer to them.

3 Duplicate and modify.   If your presentation is like most, many of your slides will contain several bullet points–base these on the template file slide1.htm. For slides that have a single idea, statistic, or quote, use slide2.htm. Using the Duplicate command (command-D) in the Finder, make as many duplicates of these two files as you need and modify each duplicate accordingly. Remember to edit the HTML for each slide's navigation buttons so the next and previous buttons work properly.

4 Install the right fonts.   I used Microsoft's Verdana font, which is designed to be legible on low-resolution monitors and is included with the Mac OS and with Windows 98. If your presentation machine doesn't contain Verdana, the browser will fall back to Geneva, Helvetica, or Arial (a Helvetica look-alike in Windows). You can download Verdana and other screen-optimized fonts from

You can't imagine standing at a podium

without PowerPoint 98, but you still want the distribution flexibility that HTML provides. The answer: PowerPoint's Internet Assistant, which swings into action when you choose Save As HTML from PowerPoint's File menu.

The Internet Assistant's six dialog boxes provide a broad array of options for converting your presentation. You can, for instance, have the presentation's slides displayed within a frame set, with one frame providing one-click access to each slide. You can even make the original presentation file available for downloading.

The Save As HTML feature converts each slide into a graphic, which enables PowerPoint to retain the slide's formatting–all the way down to its color scheme and template design. On the downside, this means that each slide is much bigger than an equivalent screen created in HTML. PowerPoint also creates text-only versions of the slides, but they're bland and bare as bones.

PowerPoint's Internet Assistant does a good job of bridging the gulf between PowerPoint and HTML; there's no better way to quickly convert a PowerPoint pitch for display in a browser. But if your primary goal is to create a truly HTML-based presentation, you're better off using an HTML editor.

The Internet Assistant

A   Choose between standard and framed layout. (Framed layout provides faster access to each slide.)

B   Convert each slide into a GIF or a JPEG file. (Opt for GIF unless slides contain photographs.)

C   Determine how large you want each graphic to be. (The default setting, 640 by 480 pixels, creates the smallest and most portable files.)

D   Enter your e-mail address, home-page URL, and other descriptive information that you want to appear on the presentation's opening page.

E   Choose between standard browser colors (the default, which I recommend) or custom colors for the background, text, links, and visited links.

F   Specify placement of the slide-navigation buttons, and whether to include slide notes on each page.

G   Click to carry out the conversion.

1 2 Page 1
Page 1 of 2
Shop Tech Products at Amazon