With a Little Help of HTML

Mit ein bisschen HTML und CSS lassen sich attraktive Präsentationen erstellen, die es locker mit Powerpoint & Co. aufnehmen können.

Dafür stellen beispielsweise die Webslides eine solide und ausgefeilte Bibliothek zur Verfügung. So kann mit wenigen Änderungen eine eigene Präsentation erstellt werden, ohne dass dafür aufwändige Grundlagenarbeit erforderlich ist. Die herunterladbaren Muster sind Beispiel und Lernprogramm in einem. Sie enthalten die verfügbaren Elemente, die an eigene Anforderungen angepasst werden können.

Weil es sich um gut strukturierte HTML-Quellen handelt, lässt sich sehr schnell mit einem einigermaßen vernünftigen Editor eine Präsentation mit Pepp erzeugen. Die hat den Charme, dass sie in allen aktuellen Browsern läuft und sich – CSS/HTML sei Dank – problemlos an vorhandene Bildschirmgrößen anpasst. Oder per größere/kleinere Schrift anpassen lässt, was jeder Browser standardmäßig anbietet. Elementare Voraussetzung ist lediglich ein Grundverständnis von bzw. für HTML und die Nutzung von CSS-Klassen.

Webslides bietet die klassischen Folienfunktionen zum Blättern mit Übergängen. Wahlweise per Klick, per Tastatur oder zeitgesteuert. Neben einer Übersicht über alle „Folien“ gibt es einen „Folienzähler“, was die Übersicht erheblich verbessert. Mit diversen Textausrichtungen und Formaten, sowie attraktiven Gestaltungsoptionen für Bilder und Grafiken lässt sich damit bequem, portabel und mit vergleichweise geringem Datenvolumen eine autarke Präsentation erstellen, die notfalls sogar auf dem Mobiltelefon präsentiert werden kann. Weil in Webslides alles Erforderliche enthalten ist, läuft die Präsentation sowohl online als auch ohne Internet im Browser.

Wer schon einmal im Hörsaal einer Klinik ohne Gastzugang für das WLAN und aufgrund von Stahlbeton erzwungenem „Flugzeugmodus“ des Mobiltelefons einen Vortrag „offline“ halten musste, wird diese Flexibilität sehr schätzen.

Es gibt noch diverse weitere Optionen für „Powerpoint-Präsentationen ohne Powerpoint“. Allerdings verlegen sich die Anbieter dafür zunehmen in Cloud-Services, die eine Internet-Verbindung für die Nutzung voraus setzen. Der vermeintliche Vorteil der allgegenwärtigen Verfügbarkeit ist unter den genannten obigen Umständen ein hochgradig relevanter Nachteil. Denn „das Netz“ ist keineswegs überall.

Grundsätzlich lässt sich mit vergleichsweise geringem Aufwand sogar eine Präsentation via HTML und CSS mit signifikant „schlankerem Fuß“ als mit Webslides erzeugen. Denn ob es der möglichen Effekte überhaupt bedarf, ist eine Grundsatzfrage. Eine gute Präsentation wird vom Präsentierenden getragen – eine showlastige Folienparade macht aus einem drögen Folienableser keinen eloquenten Showmaster. Wer seine Zuhörenden fesseln will, nutzt die Folien typischerweise nur als Stichwortgeber für den Vortrag. Die sind dementsprechend übersichtlich und lassen den Anwesenden hinreichend Zeit, sich auf die Worte des Vortrags zu konzentrieren.

Dafür eignet sich beispielsweise auch ein „Einseiter“, wie er im Artikel „Es geht auch ohne Framework“ inklusive Beispieldaten vorgestellt wurde. Die „Animation“ erfolgt ggf. per scrollen, „Sprünge“ lassen sich mit Accesskeys in HTML erzeugen:

<h1 id="bsp"><a title="Beispiel" accesskey="B" href="#bsp">Beispile</a></h1>

Wer in seiner Stilvorlage (CSS) noch

html, body {
        scroll-behavior: smooth;
    }

einfügt, kann statt hinspringen sanft hinrollen. wobei die Access-Keys je nach Browser unterschiedlich aktiviert werden, mal mit ALT-Taste, mal mit STRG-Taste, mal mit SHIFT ALT etc. – das muss ggf. kurz vorher mal getestet (bzw. in der Hilfe nachgelesen) werden.

Hier auf der Seite kann mit dem Access-Key T wie „T“op, oder Klick auf den Link an den Artikelanfang unterhalb der Überschrift gerollt werden. Mit Q geht es ebenfalls – ohne Link. Der Sprungebefehl ist dafür verdeckt im Text eingegeben:

<a href="#oben" accesskey="Q"></a>

Ganz simpel lässt sich eine Sprungnavigation mit leeren Links und Tabindex erzeugen, die dann mit der TAB-Taste im Browser angesprungen werden können (wenn vom Browser unterstützt – was die meisten neueren tun):

<a href="" tabindex="x"></a>

Wobei „x“ für eine Zahl steht, die – in diesem besonderen Anwendungsfall – immer die Gleiche sein kann.

Hier auf der Seite sind ein paar „Tabsprünge“ zum ausprobieren platziert. Allerdings wird das Suchfeld einstellungsabhängig von einigen Browsern (z.B. „Vivaldi“) auch ohne Tab-Index als Sprungmarke für die TAB-Taste angesehen.