Creating HTML-based presentations
Show and Tell in HTML

You can whip up great-looking HTML-based presentations that run in a regular browser using just a text editor.
When you need to create a presentation or slides for your talk, LibreOffice Impress may seem like an obvious choice. Indeed, it's a powerful tool that lets you build rather advanced presentations. In certain situations, however, the Impress functionality is overkill, and something more lightweight and straightforward might be a much better tool for the job. Enter the wonderful world of tools for creating HTML-based presentations that run in a regular browser.
These tools have several advantages compared with a full-blown presentation application like LibreOffice Impress. For starters, you can create slick presentations using nothing but your favorite text editor then run your presentation in any modern browser, so you are not tied to a specific application. Basic HTML and CSS skills are all you need to create swanky presentations, and you don't have to fiddle with myriad features and options to achieve the desired result. Of course, HTML-based presentations have their limitations, but in most cases, they are perfectly adequate for illustrating points or conveying a message. Quite a few lightweight tools are available for creating HTML-based presentations, and in this article, I will help you to choose the one that meets your specific needs.
Big
The Big presentation tool [1] is actually pretty small, and it consists of only three files: the big.css
stylesheet that controls presentation style properties, the big.js
core JavaScript file, and an HTML presentation file. Designed for "busy messy hackers" (Figure 1), Big is not overloaded with features, which makes it suitable for whipping up quick presentations when you are in a rush. Big's main attraction is the ability to scale the text automatically to make it fit the screen.
Creating presentations with Big couldn't be easier, and you can use the bundled demo.html
file as a starting point. To create a slide, add <div></div>
tags. Any text between these tags is treated as the slide's content. Big gives you only three formatting options to work with. The <em></em>
tags can be used to color text fragments (green by default), and the <a href=''></a>
tags let you create hyperlinks. Using the <img src='' />
tag, you can add a background image to a slide. Also, the text in the slide can be centered using the class="center"
property. The Left and Right arrow keys let you navigate between slides. Additionally, the time-to-next
property can be used to advance to the next slide automatically in the presentation after a specified period of time.
The overall appearance and styling of the presentation is controlled by the big.css
file, which you can tweak to your heart's content. For example, you can easily change the default font and text styling by modifying the body **{ }
properties. If tweaking the default stylesheet is not your cup of tea, you can opt for one of the ready-made themes [2] (Figure 2).
Big is a pretty bare-bones tool: It doesn't allow you to specify slide transitions, add code snippets, embed images, or jump to specific slides. In certain situations, however, Big's limited functionality can be an advantage rather than a drawback. If you need a tool for creating a presentation that provides key points for a fast-paced talk, Big can be just the ticket.
By the way, if you need a tool for creating Takahashi-style presentations [3], take a look at weenote [4], a simple tool inspired by Big.
HTML Slideshow
Big is a nifty little tool, but it's suited only for a certain type of presentation. If you need to create a more conventional, no-frills, HTML-based presentation, HTML Slideshow [5] might be right up your alley. Similar to Big, HTML Slideshow consists of a few JavaScript and CSS files, and the tool comes with an example presentation you can study and tweak.
Creating slides with HTML Slideshow is as easy as it gets. Each slide sits inside the <section>
element:
<section> <hgroup> <h1>Lorem Ipsum</h1> <h2>Lorem ipsum dolor sit amet</h2> </hgroup> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </section>
You can add as many slides as you want, and you can spice them up with lists and images. If you know your way around JavaScript, you can bind JavaScript scripts to specific slides using the newSlide
event.
The example presentation supplied with HTML Slideshow uses web fonts in the EOT and WOFF formats. If you don't have EOT and WOFF fonts handy, you can tweak the presentation to use fonts from the Google Fonts service [6]. To do this, open the example/styles.css
file in a text editor and remove the @font-face
block. Then, modify the font-family
properties to use the desired font; for example, font-family: 'Open Sans', sans-serif;
. Save the changes, open the example/slideshow.html
file, and add the link to the specified font:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
Also, install the font locally, so you can use it in the presentation without an Internet connection.
HTML Slideshow hasn't been updated for a while, and it's decidedly light on features. Still, it can come in handy when you need to create a simple presentation without too much fuss.
DZSlides
Similar to Big, DZSlides [7] lets you create presentations by editing the supplied HTML file. But, whereas Big relies on the external big.js
and big.css
files, DZSlides consists of a single, self-contained HTML file that incorporates styles, the required JavaScript code, and the HTML presentation itself. Similar to HTML Slideshow, DZSlides emulates a more traditional presentation look, and the tool provides several useful features.
Creating a presentation with DZSlides is a matter of defining slides using the <section></section>
tags and then adding content to each slide. DZSlides supports several formatting options, including headings (H1, H2, and H3), basic text styles (bold, italic, and underlined), lists, block quotes, and footers (Figure 3). Using the incremental
class, you can turn a regular list into an incremental one, in which items are displayed one-by-one using the Right arrow key. DZSlides allows you to embed images and videos into slides, too.
DZSlides' default functionality can be extended using so-called shells. A shell is a special HTML file that embeds a DZSlides-based presentation and adds extra features to it. DZSlides comes with two shells: embedder.html
and onstage.html
. The former adds navigation controls and a slide count. These features can be useful for viewing DZSlides presentations embedded into web pages.
The onstage.html
shell (Figure 4) adds a presenter screen with the current and next slide side-by-side, the total slide count, and a clock. The shell makes it possible to open the presentation in a separate window and control the slides from the presenter screen. But, that's not all. You can add presenter notes to slides using the <div role="note"></div>
tags. The onstage.html
shell displays these notes in the bottom pane of the presenter screen.
DZSlides has a lot going for it. The entire solution consists of a single HTML file, the default feature set covers all the basics, and the shells add useful functionality. The onstage.html
shell, in particular, can prove to be a useful helper during talks and presentations.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Direct Download
Read full article as PDF:
Price $2.95
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
News
-
An All-Snap Version of Ubuntu is In The Works
Along with the standard deb version of the open-source operating system, Canonical will release an-all snap version.
-
Mageia 9 Beta 2 Ready for Testing
The latest beta of the popular Mageia distribution now includes the latest kernel and plenty of updated applications.
-
KDE Plasma 6 Looks to Bring Basic HDR Support
The KWin piece of KDE Plasma now has HDR support and color management geared for the 6.0 release.
-
Bodhi Linux 7.0 Beta Ready for Testing
The latest iteration of the Bohdi Linux distribution is now available for those who want to experience what's in store and for testing purposes.
-
Changes Coming to Ubuntu PPA Usage
The way you manage Personal Package Archives will be changing with the release of Ubuntu 23.10.
-
AlmaLinux 9.2 Now Available for Download
AlmaLinux has been released and provides a free alternative to upstream Red Hat Enterprise Linux.
-
An Immutable Version of Fedora Is Under Consideration
For anyone who's a fan of using immutable versions of Linux, the Fedora team is currently considering adding a new spin called Fedora Onyx.
-
New Release of Br OS Includes ChatGPT Integration
Br OS 23.04 is now available and is geared specifically toward web content creation.
-
Command-Line Only Peropesis 2.1 Available Now
The latest iteration of Peropesis has been released with plenty of updates and introduces new software development tools.
-
TUXEDO Computers Announces InfinityBook Pro 14
With the new generation of their popular InfinityBook Pro 14, TUXEDO upgrades its ultra-mobile, powerful business laptop with some impressive specs.