Ein Bildschirm zeigt eine moderne HTML-Präsentation mit klarem Layout.

Adieu PowerPoint? HTML-Präsentationen erobern die Bühne (Teil 1)

Juni 20, 2025 admin

(Erstellt mit Hilfe von: ChatGPT, Gemini, Qwen– Bild: Imagen)

Folien ohne Foliensoftware – Sinn oder Spinnerei?

PowerPoint, Keynote und Google Slides sind seit Jahrzehnten die unangefochtenen Könige der Präsentationssoftware. Doch sind sie immer noch die beste Wahl? In einer zunehmend vernetzten und interaktiven Welt stoßen die „klassischen“ Folien an ihre Grenzen. HTML-Präsentationen bieten eine spannende Alternative, die den Spieß umdreht: Sie laufen direkt im Browser, lassen sich nahtlos in moderne Workflows integrieren und sind offen für alles, was das Web zu bieten hat.

In diesem ersten Teil unserer Serie „Präsentieren mit HTML“ erfährst du, warum der Umstieg auf HTML-basierte Slides für dich interessant sein könnte und welche Tools dir den Schnellstart in wenigen Minuten ermöglichen.

Typische Fallstricke klassischer Präsentationen

Jeder kennt sie: die kleinen und großen Ärgernisse im Umgang mit herkömmlichen Präsentationsprogrammen. Hier sind die häufigsten Schmerzpunkte und ihre Auswirkungen im Alltag:

Schmerzpunkt	Alltagseffekt
Proprietäres Dateiformat	„Final_v7b.pptx“ – niemand weiß mehr, was aktuell ist und welche Version die richtige ist.
Softwarepflicht	Ohne installierte App oder gültige Lizenz bleibt das Publikum außen vor.
Demo-Brüche	Live-Code, Web-Apps oder interaktive Elemente erzwingen störende Tab-Wechsel.
Sperrige Zusammenarbeit	Gleichzeitiges Bearbeiten führt schnell zu Konflikten und Datenverlusten.

Was HTML-Slides besser können: Die Vorteile auf einen Blick

HTML-Präsentationen sind nicht nur eine Alternative, sie bieten eine Reihe von handfesten Vorteilen, die deine Vorträge auf das nächste Level heben können:

Vorteil	Konkreter Nutzen für dich	Beispiele (Frameworks/Ressourcen)
Läuft in jedem Browser	Du teilst nur eine URL – keine Installation oder spezielle Software nötig.	revealjs.com
100 % anpassbar	Voller Zugriff auf CSS & JavaScript für individuelles Design, Animationen und Live-APIs.	revealjs.com
Interaktiv & multimedial	Diagramme, Umfragen, Code-Demos oder interaktive Elemente direkt in der Slide.	hartenfeller.dev
Versionskontrolle mit Git	Klartext-Dateien statt Binär-Monster – nutze Branches statt Dubletten für die Zusammenarbeit.	github.com
Leichtgewichtig	Keine „bloatige“ Binärdatei, oft nur wenige Kilobyte groß.	reddit.com

Dein HTML-Präsentations-Schnellstart in 5 Minuten

Bereit, es selbst auszuprobieren? Mit dem beliebten Framework Reveal.js kannst du in kürzester Zeit deine erste HTML-Präsentation erstellen.

CDN-Einbindung: Nutze die neueste stabile Version (aktuell v5.2.1, vom 28. März 2025) direkt über ein Content Delivery Network (CDN).
index.html erstellen: Kopiere den folgenden Code in eine Datei namens index.html und speichere sie.
Im Browser öffnen: Doppelklicke auf die index.html-Datei oder ziehe sie in deinen Browser.

HTML

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>Meine HTML‑Präsentation – Deluxe Edition</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Reveal.js Core & Theme -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/sky.css" id="theme">

  <!-- Code‑Highlighting -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/monokai.css">

  <style>
    /* Eigene Akzente */
    .reveal h1, .reveal h2 {
      color: #ff6b00;
    }
    .reveal .slide-background {
      filter: brightness(.85);
    }
  </style>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <!-- Titelfolie mit Hintergrundbild -->
      <section data-background-image="https://source.unsplash.com/1600x900?galaxy" data-background-opacity="0.25">
        <h1 style="font-size:3em">Hallo 👋</h1>
        <p>Willkommen zu meiner <strong>fancy</strong> HTML‑Präsi</p>
        <aside class="notes">
          Kurze Vorstellung und Ice‑Breaker.
        </aside>
      </section>

      <!-- Auto‑Animation‑Beispiel -->
      <section data-auto-animate>
        <h2>Vorteile von HTML‑Slides</h2>
        <ul>
          <li class="fragment">Interaktiv</li>
          <li class="fragment">Open Source</li>
          <li class="fragment">Beliebig erweiterbar</li>
        </ul>
      </section>

      <!-- Code‑Highlighting‑Beispiel -->
      <section>
        <h2>Code‑Highlighting 🤓</h2>
        <pre><code class="language-js" data-trim>
function hello(name) {
  console.log(`Hallo ${name}!`);
}
hello('Welt');
        </code></pre>
      </section>

      <!-- Video & Parallax -->
      <section data-background-video="https://media.giphy.com/media/26xBwdIuRJiAIqHwA/giphy.mp4"
               data-background-video-muted
               data-background-opacity="0.35">
        <h2>Video‑Hintergrund &amp; Parallax</h2>
        <p class="fragment">Einfach wow!</p>
      </section>

      <!-- Abschlussfolie -->
      <section data-transition="convex">
        <h2>Danke für deine Aufmerksamkeit</h2>
        <p>Fragen?</p>
      </section>
    </div>
  </div>

  <!-- Reveal.js & Plugins -->
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/notes/notes.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/highlight.js"></script>
  <script>
    Reveal.initialize({
      hash: true,
      slideNumber: true,
      progress: true,
      controls: true,
      center: true,
      plugins: [ RevealNotes, RevealHighlight ],
      parallaxBackgroundImage: 'https://source.unsplash.com/1600x900?nebula',
      parallaxBackgroundSize: '2100px 900px'
    });
  </script>
</body>
</html>

Shortcut-Magie: Drücke während der Präsentation die Taste S. Es öffnet sich ein zweites Fenster mit Speaker-Notes, einem Timer und einer Vorschau der nächsten Folien – perfekt für den Präsentator! Mehr dazu findest du auf revealjs.com.

Entscheidungs-Checkliste: Lohnt sich der Umstieg für dich?

Ob HTML-Präsentationen die richtige Wahl für dich sind, hängt von deinen individuellen Anforderungen ab. Beantworte die folgenden Fragen, um eine erste Einschätzung zu erhalten:

Frage	„Ja“ → HTML lohnt sich	„Nein“ → Klassische Slides reichen
Benötigst du Live-Demos, Code oder API-Daten in deiner Präsentation?	✅	❌
Arbeitest du im Team und nutzt Tools wie GitHub für die Zusammenarbeit?	✅	❌
Musst du deine Slides einfach und öffentlich verlinken oder einbetten können?	✅	❌
Soll das Deck auch als PDF verfügbar sein?	✅ (Reveal: `?print-pdf`)	✅
Brauchst du feste Master-Vorlagen deiner Firma (ohne zusätzlichen Aufwand)?	❌ (möglicher Zusatzaufwand)	✅

In Google Sheets exportieren

Starte noch heute!

Öffne den Code-Schnipsel in einem Texteditor deiner Wahl, speichere ihn als index.html ab und öffne die Datei anschließend im Browser. Du wirst sehen, wie einfach und schnell der Einstieg in die Welt der HTML-Präsentationen ist.

KI-Anwendung