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
-
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.
-
ZorinOS 17.1 Released, Includes Improved Windows App Support
If you need or desire to run Windows applications on Linux, there's one distribution intent on making that easier for you and its new release further improves that feature.
-
Linux Market Share Surpasses 4% for the First Time
Look out Windows and macOS, Linux is on the rise and has even topped ChromeOS to become the fourth most widely used OS around the globe.
-
KDE’s Plasma 6 Officially Available
KDE’s Plasma 6.0 "Megarelease" has happened, and it's brimming with new features, polish, and performance.
-
Latest Version of Tails Unleashed
Tails 6.0 is based on Debian 12 and includes GNOME 43.
-
KDE Announces New Slimbook V with Plenty of Power and KDE’s Plasma 6
If you're a fan of KDE Plasma, you'll be thrilled to hear they've announced a new Slimbook with an AMD CPU and the latest version of KDE Plasma desktop.
-
Monthly Sponsorship Includes Early Access to elementary OS 8
If you want to get a glimpse of what's in the pipeline for elementary OS 8, just set up a monthly sponsorship to help fund its continued existence.
-
DebConf24 to be Held in South Korea
Busan will be the location of the latest DebConf running July 28 through August 4
-
Fedora Unleashes Atomic Desktops
Fedora has combined its solid distribution with rpm-ostree system to make it possible to deliver a new family of Fedora spins, called Fedora Atomic Desktops.
-
Bootloader Vulnerability Affects Nearly All Linux Distributions
The developers of shim have released a version to fix numerous security flaws, including one that could enable remote control execution of malicious code under certain circumstances.