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
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
TUXEDO Computers Unveils Linux Laptop Featuring AMD Ryzen CPU
This latest release is the first laptop to include the new CPU from Ryzen and Linux preinstalled.
-
XZ Gets the All-Clear
The back door xz vulnerability has been officially reverted for Fedora 40 and versions 38 and 39 were never affected.
-
Canonical Collaborates with Qualcomm on New Venture
This new joint effort is geared toward bringing Ubuntu and Ubuntu Core to Qualcomm-powered devices.
-
Kodi 21.0 Open-Source Entertainment Hub Released
After a year of development, the award-winning Kodi cross-platform, media center software is now available with many new additions and improvements.
-
Linux Usage Increases in Two Key Areas
If market share is your thing, you'll be happy to know that Linux is on the rise in two areas that, if they keep climbing, could have serious meaning for Linux's future.
-
Vulnerability Discovered in xz Libraries
An urgent alert for Fedora 40 has been posted and users should pay attention.
-
Canonical Bumps LTS Support to 12 years
If you're worried that your Ubuntu LTS release won't be supported long enough to last, Canonical has a surprise for you in the form of 12 years of security coverage.
-
Fedora 40 Beta Released Soon
With the official release of Fedora 40 coming in April, it's almost time to download the beta and see what's new.
-
New Pentesting Distribution to Compete with Kali Linux
SnoopGod is now available for your testing needs
-
Juno Computers Launches Another Linux Laptop
If you're looking for a powerhouse laptop that runs Ubuntu, the Juno Computers Neptune 17 v6 should be on your radar.