Eine Präsentation in HTML erstellen

1. Repository klonen

Stelle zuerst sicher, dass du keinen Ordner geöffnet hast. Um sicherzugehen, drücke einfach den Shortcut für »Ordner schließen«: StrgK und dann F. Dein Work­space sollte jetzt ungefähr so aussehen:

Wir holen uns eine Vorlage mit Hilfe von Git, damit du gleich loslegen kannst. Klicke dazu auf »Clone Repository« und füge die folgende URL ein:

https://git.nhcham.org/specht/shower.js.git

Bestätige anschließend mit Enter. Danach musst du ein Verzeichnis wählen, in dem das Repository gespeichert werden soll. Wähle dafür den Ordner /workspace.

Das Repository wird jetzt ins Verzeichnis /workspace/shower.js geklont. Öffne anschließend das Verzeichnis, indem du die Frage, ob das Repository jetzt geöffnet werden soll, mit »Open« beantwortest:

Dein Work­space sollte jetzt ungefähr so aussehen:

Links siehst du die Verzeichnisse und Da­tei­en, die gerade heruntergeladen wur­den. Öffne die Datei index.html, indem du darauf klickst.

2. Live Server-Er­wei­te­rung installieren

Bevor wir mit dem Schreiben der Präsentation beginnen, installieren wir eine Er­wei­te­rung, die uns eine Live-Vor­schau unserer Präsentation zeigt. Öffne dazu links die Extensions, suche die Er­wei­te­rung »Live Server« und klicke auf »Install«. Anschließend sollte dein Work­space so aussehen:

Öffne nun wieder den Explorer und öffne die Datei index.html. Unten rechts findest du jetzt den Eintrag »Go Live«. Drück dort drauf und die Vor­schau deiner Präsentation sollte sich in einem neuen Browsertab öffnen.

Wenn du alles richtig gemacht hast, sollte dein Fenster so aussehen:

Zieh das Tab aus dem Browser und ordne beide Fenster nebeneinander an, um deine Änderungen live in der Vor­schau zu sehen:

3. Präsentation schreiben

Schau dir die Vorlage an und versuche, sie zu verstehen. Die Präsentation steht in der Datei index.html. Sie besteht aus einzelnen Folien, die du verändern, löschen oder ergänzen kannst.

Für diese Präsentation verwendest du zwei Spra­chen:

• HTML be­schreibt den Inhalt: Überschriften, Texte, Listen, Bilder und Folien.
• CSS be­schreibt das Aussehen: Farben, Größen, Abstände und Positionen.

In der Vorlage sind Inhalt und Aussehen getrennt:

• Deine Folien stehen in der Datei index.html.
• Deine eigenen Gestaltungsregeln schreibst du in die Datei styles.css.

Öffne deshalb am besten zusätzlich die Datei styles.css. Am Ende der Datei findest du diesen Kommentar:

/*
 * Eigene CSS-Regeln
 *
 * Hier kannst du das Aussehen deiner Folien verändern:
 * Farben, Größen, Abstände, Schatten und Positionen.
 *
 * Schreibe deine eigenen CSS-Regeln unter diese Zeile.
 */

Wenn in diesem Tutorial später CSS-Beispiele gezeigt werden, gehören sie nor­ma­ler­wei­se unter diesen Kommentar in styles.css. So bleibt index.html übersichtlich: Dort stehen die Folien, während styles.css für das Aussehen zuständig ist.

Du kannst jetzt damit beginnen, die Vorlage an deine Bedürfnisse anzupassen und deine Präsentation zu schreiben.

Speichere deine Änderungen mit StrgS, um den Effekt im Vor­schaufenster zu sehen, falls dein Work­space Änderungen nicht schon automatisch speichert. Das kannst du im Menü unter »File« / »Auto Save« einstellen.

4. Referenz: Folien gestalten

In diesem Abschnitt findest du kurze Beispiele für typische Dinge, die du beim Gestalten deiner Folien brauchst. Du musst nicht alles der Reihe nach lesen. Such dir einfach die Stelle heraus, die zu deinem Problem passt.

Grundlagen

Der Grundaufbau einer Folie

Eine Folie ist in shower.js ein eigener Abschnitt in der Datei index.html. Dieser Abschnitt beginnt mit <section class="slide"> und endet mit </section>. Alles, was zwischen diesen beiden Zeilen steht, gehört zu dieser einen Folie.

<section class="slide">
    <h2>Meine Lieblingstiere</h2>
    <ol>
        <li>🐧 Pinguine</li>
        <li>🦊 Füchse</li>
        <li>🐬 Delfine</li>
        <li>🦉 Eulen</li>
    </ol>
</section>

Die wich­tig­sten Teile sind:

• <section class="slide"> beginnt eine neue Folie.
• <h2> ist die Überschrift der Folie.
• <ol> beginnt eine nummerierte Liste.
• Jedes <li> ist ein Punkt in der Liste.
• </section> beendet die Folie.

Die meisten HTML-Tags bestehen aus einem öffnenden Tag und einem schließenden Tag:

<h2>Meine Überschrift</h2>

Das öffnende Tag ist <h2>. Das schließende Tag ist </h2> – beim schließenden Tag steht also zusätzlich ein / vor dem Namen.

Einrückungen sind für den Browser nicht unbedingt nötig, aber sie helfen dir beim Lesen. Man sieht dadurch besser, welche Teile zusammengehören:

<section class="slide">
    <h2>Überschrift</h2>
    <p>Dieser Text gehört zur Folie.</p>
</section>

Text und Überschriften

Eine Folie braucht meistens zuerst eine klare Überschrift. In der Shower-Vorlage verwendest du dafür nor­ma­ler­wei­se <h2>.

Längere Texte schreibst du nicht direkt lose in die Folie, sondern in Absätze. Ein Absatz beginnt mit <p> und endet mit </p>.

<section class="slide">
    <h2>Warum HTML?</h2>

    <p>HTML beschreibt den Inhalt einer Webseite oder Präsentation.</p>
    <p>CSS legt fest, wie dieser Inhalt aussehen soll.</p>
</section>

Die wich­tig­sten Tags in diesem Beispiel sind:

• <h2> ist die Überschrift der Folie.
• <p> beginnt einen Textabsatz.
• </p> beendet den Textabsatz.
• Zwischen zwei Absätzen entsteht automatisch etwas Abstand.

Überschriften

In einer normalen Folie reicht meistens eine einzige Überschrift:

<h2>Mein Thema</h2>

Die Überschrift sollte kurz sagen, worum es auf der Folie geht. Besser ist oft eine konkrete Überschrift statt nur ein einzelnes Wort.

<h2>HTML</h2>

<h2>HTML be­schreibt die Struktur</h2>

Die zweite Überschrift hilft dem Publikum mehr, weil sie schon eine kleine Aussage enthält.

Absätze

Wenn du mehrere Gedanken auf einer Folie hast, kannst du mehrere Absätze verwenden:

<section class="slide">
    <h2>Die erste Webseite</h2>

    <p>Die erste Webseite bestand nur aus Text und Links.</p>

    <p>
        Heute enthalten Webseiten oft Bilder, Videos,
        Menüs und interaktive Bereiche.
    </p>
</section>

Du musst nicht selbst leere Zeilen in die Folie schreiben. Der Abstand entsteht durch die Gestaltung der Vorlage. Dabei ist es egal, ob du hinter <p> direkt Text schreibst oder erst eine Zeile frei lässt.

Einen Zeilenumbruch erzwingen

Manchmal möch­test du innerhalb eines Absatzes eine neue Zeile beginnen, ohne einen neuen Absatz zu starten. Dafür gibt es <br>.

<section class="slide">
    <h2>Über mich</h2>
    <p>Wer bin ich?</p>
    <p>
        Max Mustermann<br>
        Klasse 9b<br>
        Informatik
    </p>
</section>

<br> bedeutet: Hier beginnt eine neue Zeile.

Anders als viele andere HTML-Tags hat <br> kein eigenes schließendes Tag. Du schreibst also nicht </br>.

Zu viel Text vermeiden

Diese Folie ist technisch korrekt, aber als Präsentationsfolie wahr­schein­lich zu voll:

<section class="slide">
    <h2>Die Geschichte des Internets</h2>

    <p>
        Das Internet entstand aus mehreren technischen Entwicklungen und wurde
        über viele Jahre hinweg immer weiter ausgebaut. Heute benutzen wir es
        für Webseiten, E-Mails, Chats, Videos, Spiele, Cloud-Dienste und viele
        andere Anwendungen.
    </p>
</section>

Oft ist es besser, den Text zu kürzen oder auf mehrere Folien zu verteilen:

<section class="slide">
    <h2>Das Internet verbindet Computer</h2>

    <p>
        Das Internet ist ein riesiges Netzwerk aus vielen kleineren Netzwerken.
    </p>

    <p>
        Darüber können Computer Daten austauschen: Webseiten, Nachrichten,
        Bilder, Videos und vieles mehr.
    </p>
</section>

Listen und Stichpunkte

Listen sind auf Präsentationsfolien sehr praktisch, weil sie Informationen übersichtlich machen. In HTML gibt es zwei wichtige Arten von Listen:

• <ul> erstellt eine Liste mit Stichpunkten.
• <ol> erstellt eine nummerierte Liste.
• Jeder einzelne Listenpunkt steht in einem eigenen <li>.

li steht für »list item«, also »Listenpunkt«.

<section class="slide">
    <h2>Meine Projektidee</h2>

    <ul>
        <li>🎮 Ein kleines Spiel programmieren</li>
        <li>🧭 Eine Spielfigur bewegen</li>
        <li>💎 Punkte sammeln</li>
        <li>🏁 Ein Ziel erreichen</li>
    </ul>
</section>

Die wich­tig­sten Tags in diesem Beispiel sind:

• <ul> beginnt eine Liste mit Stichpunkten.
• <li> beginnt einen Listenpunkt.
• </li> beendet einen Listenpunkt.
• </ul> beendet die ganze Liste.

Nummerierte Liste

Eine nummerierte Liste verwendest du, wenn die Reihenfolge wichtig ist:

<section class="slide">
    <h2>So startest du</h2>

    <ol>
        <li>Repository klonen</li>
        <li>index.html öffnen</li>
        <li>Live Server starten</li>
        <li>Folie bearbeiten</li>
    </ol>
</section>

Bei <ol> setzt der Browser die Zahlen automatisch davor. Du musst die Zahlen also nicht selbst schreiben.

<ul>
    <li>1. Repository klonen</li>
    <li>2. index.html öffnen</li>
    <li>3. Live Server starten</li>
</ul>

<ol>
    <li>Repository klonen</li>
    <li>index.html öffnen</li>
    <li>Live Server starten</li>
</ol>

So kann der Browser die Nummerierung selbst übernehmen. Wenn du später einen Punkt einfügst oder löschst, stimmen die Zahlen automatisch wieder.

Listen nicht zu voll machen

Eine Liste auf einer Folie sollte nicht zu lang sein. Diese Folie ist zu voll und stößt an den unteren Rand der Folie:

<section class="slide">
    <h2>Vorteile von HTML-Präsentationen</h2>

    <ul>
        <li>Laufen im Browser</li>
        <li>Funktionieren auch offline</li>
        <li>Können mit CSS gestaltet werden</li>
        <li>Kann man auf einen Stick kopieren</li>
        <li>Trainieren den Umgang mit Code</li>
        <li>Sind gut versionierbar</li>
        <li>Können veröffentlicht werden</li>
        <li>Funktionieren auf verschiedenen Geräten</li>
    </ul>
</section>

Oft ist es besser, nur die wich­tig­sten Punkte auf die Folie zu schreiben:

<section class="slide">
    <h2>Vorteile von HTML-Präsentationen</h2>

    <ul>
        <li>Laufen in jedem modernen Browser</li>
        <li>Lassen sich mit CSS frei gestalten</li>
        <li>Trainieren den sicheren Umgang mit Code</li>
    </ul>
</section>

Typische Fehler bei Listen

Achte darauf, dass die <li>-Tags wirklich innerhalb der Liste stehen:

<ul>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
    <li>Dritter Punkt</li>
</ul>

Nicht so:

<ul>
</ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>

Im zweiten Beispiel stehen die Listenpunkte außerhalb der Liste. Der Browser versucht zwar oft trotzdem, etwas daraus zu machen, aber der HTML-Code ist nicht sauber.

Wörter hervorheben

Manchmal möch­test du nicht einen ganzen Absatz verändern, sondern nur einzelne Wörter hervorheben. Dafür gibt es in HTML kleine Tags, die mitten im Text stehen können.

Solche Tags nennt man Inline-Tags, weil sie in einer Zeile im Text mitlaufen.

<section class="slide">
    <h2>Wichtig!</h2>

    <p>Mit <strong>HTML</strong> beschreibst du den Inhalt.</p>
    <p>Mit <em>CSS</em> gestaltest du das Aussehen.</p>
    <p>Der Dateiname ist <code>index.html</code>.</p>
</section>

Die wich­tig­sten Inline-Tags sind:

• <strong> hebt etwas stark hervor.
• <em> betont etwas.
• <code> markiert Code, Da­tei­na­men oder Befehle.
• <sub> stellt Text tiefer.
• <sup> stellt Text höher.

Stark hervorheben mit strong

Mit <strong> markierst du Wörter, die besonders wichtig sind:

<p>
    Speichere deine Datei mit <strong>Strg + S</strong>,
    bevor du die Vorschau überprüfst.
</p>

Im Browser wird dieser Text meistens fett dargestellt. Wichtiger ist aber die Bedeutung: Dieses Wort oder diese Stelle ist besonders wichtig.

Betonen mit em

Mit <em> betonst du ein Wort oder eine kurze Wortgruppe:

<p>
    Verwende Einblendungen <em>sparsam</em>,
    damit die Präsentation ruhig bleibt.
</p>

Im Browser wird der Text meistens kursiv dargestellt.

Code, Da­tei­na­men und Befehle markieren

Mit <code> markierst du kurze Stücke Code, Da­tei­na­men, Tags oder Befehle:

<p>
    Öffne die Datei <code>index.html</code>
    und suche nach <code>&lt;section class="slide"&gt;</code>. Verwende dazu <mark>Strg + F</mark>.
</p>

Bei echten HTML-Tags im normalen Text musst du die spitzen Klammern ersetzen:

• Statt < schreibst du <.
• Statt > schreibst du >.

Darum steht im Beispiel:

<code>&lt;section class="slide"&gt;</code>

und nicht:

<code><section class="slide"></code>

Im zweiten Beispiel würde der Browser versuchen, wirklich eine neue Folie zu beginnen, und das ist nicht das, was du hier möch­test.

Hochgestellte und tiefgestellte Zeichen

Für manche Themen brauchst du hochgestellte oder tiefgestellte Zeichen. Dafür gibt es <sup> und <sub>.

<section class="slide">
    <h2>Formeln im Text</h2>

    <p>Fläche: A = a<sup>2</sup></p>
    <p>Wasser: H<sub>2</sub>O</p>
    <p>Binärzahl: 1010<sub>2</sub></p>
</section>

<sup> stellt den Text höher. Das ist praktisch für Potenzen wie a².

<sub> stellt den Text tiefer. Das ist praktisch für chemische Formeln oder Zahlensysteme.

Inline-Tags richtig schließen

Auch Inline-Tags müssen meistens wieder geschlossen werden:

<p>Das ist <strong>wichtig</strong>.</p>

Nicht so:

<p>Das ist <strong>wichtig.</p>

Wenn du das schließende </strong> vergisst, kann es passieren, dass viel mehr Text fett wird, als du eigentlich wolltest.

Formeln mit KaTeX

Manchmal reichen <sup> und <sub> nicht aus. Für richtige mathematische Formeln kannst du in der Vorlage LaTeX-Schreibweise verwenden. Die Dar­stell­ung übernimmt KaTeX.

Es gibt zwei typische Arten von Formeln:

• Eine Inline-Formel steht mitten im Satz.
• Eine abgesetzte Formel steht groß in einer eigenen Zeile.

<section class="slide">
    <h2>Formeln mit KaTeX</h2>

    <p>Die Fläche eines Kreises ist \(A = \pi r^2\).</p>

    <p>Der Satz des Pythagoras:</p>

    <p>$$a^2 + b^2 = c^2$$</p>
</section>

Für kurze Formeln im Text verwendest du \( und \):

<p>Die Fläche eines Kreises ist \(A = \pi r^2\).</p>

Für größere Formeln in einer eigenen Zeile verwendest du doppelte Dollarzeichen:

<p>$$a^2 + b^2 = c^2$$</p>

Häufige LaTeX-Schreibweisen

Einige Schreibweisen brauchst du besonders oft:

x^2              hochgestellte 2
H_2O             tiefgestellte 2
\frac{a}{b}      Bruch
\sqrt{x}         Wurzel
\pi              π
\cdot            Malpunkt
\le              kleiner oder gleich
\ge              größer oder gleich

Zum Beispiel:

<section class="slide">
    <h2>Weitere Formeln</h2>

    <p>Eine Wurzel: \(\sqrt{25} = 5\)</p>
    <p>Ein Bruch: \(\frac{1}{2} + \frac{1}{4} = \frac{3}{4}\)</p>
    <p>Eine Ungleichung: \(x \ge 10\)</p>
</section>

Wenn eine Formel nicht angezeigt wird

Wenn du statt einer schön gesetzten Formel nur den LaTeX-Code siehst, prüfe zuerst diese Punkte:

• Hast du am Anfang und am Ende der Formel \( und \) geschrieben?
• Bei abgesetzten Formeln: Hast du am Anfang und am Ende jeweils zwei Dollarzeichen geschrieben?
• Hast du geschweifte Klammern richtig geschlossen, zum Beispiel bei \frac{1}{2}?
• Hast du einen Backslash \ vor LaTeX-Befehlen wie \sqrt, \frac oder \pi geschrieben?

<p>Die Fläche ist \(A = \pi r^2.</p>

<p>Die Fläche ist \(A = \pi r^2\).</p>

Im falschen Beispiel fehlt das schließende Klammerzeichen \). Dadurch weiß KaTeX nicht, wo die Formel endet.

Bilder

Bilder können eine Präsentation viel anschaulicher machen. Dabei musst du dich um zwei Dinge kümmern:

1. Du brauchst zuerst eine Bilddatei in deinem Projekt.
2. Danach musst du diese Bilddatei mit HTML in eine Folie einfügen.

Bilddateien hinzufügen

Wenn du den File Explorer in VS Code öffnest, siehst du einen Ordner namens pictures, in dem alle Bilder liegen sollten, die du in deiner Präsentation verwenden möch­test. Klicke auf eine Bilddatei, um sie in der Vor­schau zu sehen:

Es gibt verschiedene Bilddateiformate, die dir begegnen werden:

Verwende für Bilddateien am besten einfache Da­tei­na­men: kleine Buchstaben, keine Leerzeichen, keine Umlaute und keine Sonderzeichen. Gut sind zum Beispiel fuji.jpg, berlin.webp oder live-at-msg.png.

fuji.jpg

mount-fuji.webp

Fuji Bild endgültig NEU!!!.JPG

Im Folgenden siehst du drei Möglichkeiten, wie du eine Bilddatei in den Ordner pictures bekommen kannst, damit du sie später in deiner Präsentation verwenden kannst.

Möglichkeit 1: Bilddatei per Drag & Drop hochladen

Wenn du eine Bilddatei bereits auf deinem Com­puter hast, kannst du sie in den File Explorer von VS Code ziehen und dort im Verzeichnis pictures ablegen:

Möglichkeit 2: Bild aus der Zwischenablage einfügen

Du kannst auch ein Bild direkt in die Zwischenablage kopieren und dann in den Ordner pictures einfügen. Das ist besonders praktisch, wenn du einen Screenshot gemacht hast und diesen direkt verwenden möch­test, du kannst aber auch Bilder aus dem Internet oder von anderen Quellen auf diese Weise in deinen Work­space bekommen.

Um ein Bild aus dem Internet in die Zwischenablage zu kopieren, kannst du mit der rechten Maustaste auf das Bild klicken und »Bild kopieren« oder »Copy Image« auswählen:

Klicke jetzt im File Explorer auf ein Bild im Ordner pictures und drücke StrgV, um das Bild in denselben Ordner einzufügen:

Du solltest die neue Datei sehen, die automatisch einen Namen wie image.png bekommt:

Am unteren Rand siehst du zwei wichtige Informationen:

1. die Auflösung des Bildes (in diesem Fall 1280×1013 Pixel): Achte darauf, dass deine Bilder nicht zu klein sind, damit sie auf der Folie nicht unscharf werden
2. die Dateigröße (in diesem Fall 1,92 MB): Achte darauf, dass deine Bilder nicht zu groß sind, damit deine Präsentation später nicht zu viel Speicherplatz braucht und schnell lädt

Gib der Bilddatei jetzt einen sinnvollen Namen, zum Beispiel classroom.png:

Dadurch, dass ein Bild aus der Zwischenablage oft als PNG-Datei gespeichert wird, kann es passieren, dass die Dateigröße sehr groß ist, auch wenn die Auflösung nicht besonders hoch ist. Wir können die Datei aber leicht verkleinern, indem wir sie in ein moderneres Format wie WebP umwandeln.

Installiere dazu die Er­wei­te­rung »WebP Converter for VSCode«. Anschließend kannst du mit einem Rechtsklick auf die Bilddatei die Option »Convert to WebP« auswählen:

Du wirst nun nach der Qualität gefragt, die du verwenden möch­test. »Lossless« bedeutet, dass die Qualität des Bildes erhalten bleibt, aber die Dateigröße trotzdem deutlich kleiner wird – diese Option eignet sich am besten für Gra­fi­ken. »Lossy« bedeutet, dass die Qualität des Bildes etwas schlechter wird, aber die Dateigröße noch weiter reduziert wird – diese Option eignet sich am besten für Fotos. Für unser Foto eines Klassenzimmers wählen wir »Lossy« mit einer Qualität von 85%:

Mit einem Klick auf »Finish« wird die neue WebP-Datei erstellt, die deutlich kleiner ist als die ur­sprüng­liche PNG-Datei:

Die neue Datei classroom.webp hat jetzt eine Dateigröße von nur 180 kB und sieht immer noch gut aus:

Bilder einfügen

Wenn die Bilddatei im richtigen Ordner liegt, kannst du sie mit dem Tag <img> in eine Folie einfügen. Angenommen, dein Bild heißt fuji.jpg und liegt im Ordner pictures. Dann fügst du es so ein:

<section class="slide">
    <h2>Dieses Bild ist zu groß</h2>

    <img
        src="pictures/fuji.jpg"
        alt="Der Fuji vom Shōji-See aus gesehen"
    >
</section>

Die wich­tig­sten Teile sind:

• <img> fügt ein Bild ein.
• src="pictures/fuji.jpg" sagt dem Browser, wo die Bilddatei liegt.
• alt="Der Fuji vom Shōji-See aus gesehen" be­schreibt das Bild kurz.

Der Pfad muss genau stimmen

Der häufigste Fehler bei Bildern ist ein falscher Pfad. Wenn dein Bild im Ordner pictures liegt, muss dieser Ordner auch im src-Attribut stehen:

<img src="pictures/fuji.jpg" alt="Der Fuji">

<img src="Fuji.jpg" alt="Der Fuji">

Bildgröße anpassen

Um die Größe eines Bildes anzupassen, kannst du CSS verwenden. Füge dazu ein style-Attribut zum <img>-Tag hinzu und schreibe die gewünschten CSS-Eigenschaften hinein.

<section class="slide">
    <h2>Höhe: 350px</h2>

    <img
        src="pictures/fuji.jpg"
        alt="Der Fuji"
        style="
            height: 350px;
        ">
</section>

In diesem Beispiel wird die Höhe des Bildes auf 350 Pixel festgelegt. Die Breite wird automatisch angepasst, damit das Seitenverhältnis erhalten bleibt. Du kannst auch die Breite festlegen, zum Beispiel mit width: 250px;, wodurch sich die Höhe automatisch anpasst.

Falls du die Breite und die Höhe gleichzeitig festlegst, wird dein Bild verzerrt, wenn die angegebenen Werte nicht zum ur­sprüng­lichen Seitenverhältnis des Bildes passen:

<section class="slide">
    <h2>Größe: 250px &times; 350px</h2>

    <img
        src="pictures/fuji.jpg"
        alt="Der Fuji"
        style="
            width: 250px;
            height: 350px;
        ">
</section>

Das Bild wur­de zusammegestaucht und der Fuji ist jetzt spitzer als in Wirklichkeit. Um dieses Problem zu lösen, kannst du die CSS-Eigenschaft object-fit verwenden, um zu bestimmen, wie das Bild in den vorgegebenen Rahmen passt. Mit object-fit: cover; wird das Bild so skaliert, dass es den gesamten Rahmen ausfüllt, ohne das Seitenverhältnis zu verändern. Dabei wird das Bild aber so zugeschnitten, dass es nicht verzerrt wird:

<section class="slide">
    <h2>Größe: 250px &times; 350px + Cover</h2>

    <img
        src="pictures/fuji.jpg"
        alt="Der Fuji"
        style="
            width: 250px;
            height: 350px;
            object-fit: cover;
        ">
</section>

Wenn du den Fokus des Bildausschnitts anpassen möch­test, kannst du zusätzlich die Eigenschaft object-position verwenden. Zum Beispiel mit object-position: 70% 0%; wird der Fokus mehr auf die rechte Seite des Bildes gelegt:

<section class="slide">
    <h2>Größe: 250px &times; 350px + Cover + Position</h2>

    <img
        src="pictures/fuji.jpg"
        alt="Der Fuji"
        style="
            width: 250px;
            height: 350px;
            object-fit: cover;
            object-position: 70% 0%;
        ">
</section>

Bilder verschieben

Um das Bild auf der Folie zu verschieben, kannst du die CSS-Eigenschaft position: relative; verwenden und dann mit left, und top angeben, wie weit das Bild von seiner ur­sprüng­lichen Position verschoben werden soll:

<section class="slide">
    <h2>Verschiebung nach rechts</h2>

    <img
        src="pictures/fuji.jpg"
        alt="Der Fuji"
        style="
            height: 350px;
            position: relative;
            left: 150px;
        ">
</section>

Abgerundete Ecken und Schattierung

Wenn du dein Bild mit abgerundeten Ecken oder einer Schattierung versehen möch­test, kannst du die CSS-Eigenschaft border-radius für abgerundete Ecken und box-shadow für Schattierung verwenden:

<section class="slide">
    <h2>Abgerundete Ecken + Schattierung</h2>

    <img
        src="pictures/fuji.jpg"
        alt="Der Fuji"
        style="
            height: 350px;
            position: relative;
            left: 150px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
        ">
</section>

Die Eigenschaft border-radius: 10px; sorgt dafür, dass die Ecken des Bildes mit einem Radius von 10 Pixeln abgerundet werden. Die Eigenschaft box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); fügt dem Bild einen Schatten hinzu, der:

• um 0 Pixel nach rechts verschoben ist (da es eine 0 ist, können wir hier die Einheit px weglassen)
• um 4 Pixel nach unten verschoben ist
• eine Unschärfe von 8 Pixeln hat
• eine Farbe von Schwarz mit einer Transparenz von 25% hat (rgba steht für Rot, Grün, Blau und Alpha, wo­bei Alpha die Transparenz angibt)

Bilder zuschneiden

Manchmal möchte man nur einen Teil eines Bildes zeigen und es wichtiger, dass das Bild auf der Folie ein bestimmtes Seitenverhältnis hat, als dass das ganze Bild zu sehen ist. Verschiedene Seitenverhältnisse eignen sich für verschiedene Zwecke:

Wenn du für dein Bild eine Höhe mit height angibst, wird die Breite automatisch berechnet. Du kannst diese Berechnung beeinflussen, indem du dein gewünschtes Seitenverhältnis mit aspect-ratio angibst, z. B. so:

<img
    src="pictures/fuji.jpg"
    alt="Der Fuji"
    style="
        height: 170px;
        aspect-ratio: 2/3;
    ">

Dabei wird die Höhe auf 170 Pixel festgelegt, und die Breite wird so berechnet, dass das Seitenverhältnis von 2:3 eingehalten wird. Vergiss nicht, object-fit: cover; zu verwenden, damit dein Bild nicht verzerrt wird, wenn das Seitenverhältnis nicht zum ur­sprüng­lichen Seitenverhältnis des Bildes passt.

<section class="slide">
    <h2>Feste Seitenverhältnisse</h2>

    <div style="text-align: center;">

        <img
            src="pictures/fuji.jpg"
            alt="Der Fuji"
            style="
                height: 170px;
                aspect-ratio: 2/3;
                object-fit: cover;
                border-radius: 10px;
            ">
        <img
            src="pictures/fuji.jpg"
            alt="Der Fuji"
            style="
                height: 160px;
                aspect-ratio: 3/4;
                object-fit: cover;
                border-radius: 10px;
            ">
        <img
            src="pictures/fuji.jpg"
            alt="Der Fuji"
            style="
                height: 150px;
                aspect-ratio: 1/1;
                object-fit: cover;
                border-radius: 10px;
            ">
        <br>
        <img
            src="pictures/fuji.jpg"
            alt="Der Fuji"
            style="
                height: 150px;
                aspect-ratio: 4/3;
                object-fit: cover;
                border-radius: 10px;
            ">
        <img
            src="pictures/fuji.jpg"
            alt="Der Fuji"
            style="
                height: 150px;
                aspect-ratio: 16/9;
                object-fit: cover;
                border-radius: 10px;
            ">
    </div>
</section>

Bild im Hintergrund

Du kannst ein Bild auch als Hintergrund verwenden, indem du ihm die CSS-Klasse cover zuweist:

<section class="slide bright-text">
    <h2>Mount Fuji im Hintergrund</h2>

    <img
        src="pictures/fuji.jpg"
        alt="Der Fuji"
        class="cover"
    >

    <p style="margin-top: 350px;">
        Text auf Bildern ist schwerer lesbar.
        Achte auf ausreichenden Kontrast!
    </p>
</section>

In dieser Folie haben wir außerdem der Folie selbst die Klasse bright-text zugewiesen, damit der Text auf dem dunklen Bild besser lesbar ist. Im Absatz haben wir außerdem einen großen Abstand nach oben mit margin-top: 350px; hinzugefügt, damit der Text das Bild nicht so stört und besser lesbar ist.

Text und Bild nebeneinander

Häufig möchte man ein Bild zeigen und daneben noch etwas Text. Um diesen Effekt zu erreichen, kannst du ein <div> mit der CSS-Klasse side-by-side verwenden, das zwei Kinder hat, die nebeneinander angeordnet werden:

<section class="slide">
    <h2>Text links, Bild rechts</h2>

    <div class="side-by-side">
        <div>
            <p>
                Lege die Größe deines Bildes mit CSS fest, und der Rest
                des Platzes wird automatisch für den Text genutzt.
            </p>
            <p>
                Tipp: Verschiebe das <code>&lt;img&gt;</code> vor das
                <code>&lt;div&gt;</code>, um das Bild auf der linken
                Seite zu platzieren.
            </p>
        </div>
        <img src="pictures/fuji.jpg" alt="Der Fuji"
            style="
                height: 350px;
                aspect-ratio: 3/4;
                object-fit: cover;
                border-radius: 10px;
            ">
    </div>
    <figcaption class="copyright right">
        Bild: 名古屋太郎, CC BY-SA 3.0, Wikimedia Commons<br>
        https://de.wikipedia.org/wiki/Datei:Kodaki_fuji_frm_shojinko.jpg
    </figcaption>
</section>

Im Beispiel ist das erste Kind ein <div>, das zwei Absätze mit Text enthält, und das zweite Kind ist ein <img>, das das Bild enthält. Das <div> und das <img> werden automatisch nebeneinander angeordnet.

Wenn du die Reihenfolge der Kinder tauschst, wird das Bild auf der linken Seite und der Text auf der rechten Seite angezeigt:

<section class="slide">
    <h2>Bild links, Text rechts</h2>

    <div class="side-by-side">
        <img src="pictures/fuji.jpg" alt="Der Fuji"
            style="
                height: 350px;
                aspect-ratio: 3/4;
                object-fit: cover;
                border-radius: 10px;
            ">
        <div>
            <p>
                Lege die Größe deines Bildes mit CSS fest, und der Rest
                des Platzes wird automatisch für den Text genutzt.
            </p>
            <p>
                Tipp: Verschiebe das <code>&lt;img&gt;</code> vor das
                <code>&lt;div&gt;</code>, um das Bild auf der linken
                Seite zu platzieren.
            </p>
        </div>
    </div>
    <figcaption class="copyright right">
        Bild: 名古屋太郎, CC BY-SA 3.0, Wikimedia Commons<br>
        https://de.wikipedia.org/wiki/Datei:Kodaki_fuji_frm_shojinko.jpg
    </figcaption>
</section>

Gestaltung

Farben ändern

Mit CSS kannst du die Farben deiner Folien verändern. Am Anfang sind vor allem zwei Eigenschaften wichtig:

• color ändert die Textfarbe.
• background ändert den Hintergrund.

Du kannst Farben zum Beispiel mit Farbnamen oder mit Farbcodes angeben:

color: red;
color: white;
color: #75507b;
background: #f3e5f5;

Farbcodes mit # nennt man Hex-Farben. Sie sind besonders praktisch, weil du damit sehr genaue Farben auswählen kannst.

Die Textfarbe eines Elements ändern

Wenn du nur ein einzelnes Element verändern möch­test, kannst du direkt ein style-Attribut verwenden.

<section class="slide">
    <h2 style="color: #75507b;">Farben ändern</h2>

    <p>
        Diese Folie hat eine farbige Überschrift.
    </p>

    <p style="color: #4b86c2;">
        Dieser Absatz ist blau.
    </p>
</section>

In diesem Beispiel bekommt die Überschrift eine violette Textfarbe:

color: #75507b;

Der zweite Absatz bekommt eine blaue Textfarbe:

color: #4b86c2;

Einen Hintergrund färben

Mit background kannst du den Hintergrund eines Elements verändern. Das funktioniert zum Beispiel gut bei einer kleinen Infokarte.

<section class="slide">
    <h2>Eine farbige Infokarte</h2>

    <div style="
        background: #f3e5f5;
        color: #3b2540;
        padding: 28px;
        border-radius: 16px;
    ">
        <strong>Merke:</strong><br>
        Mit <code>background</code> färbst du den Hintergrund.
        Mit <code>color</code> färbst du den Text.
    </div>
</section>

Die Infokarte bekommt hier einen hellvioletten Hintergrund:

background: #f3e5f5;

Die Textfarbe wird dunkelviolett:

color: #3b2540;

Die ganze Folie färben

Du kannst auch der ganzen Folie eine Hintergrundfarbe geben. Dazu setzt du die Farbe direkt auf das <section>-Element.

<section class="slide" style="background: #2e3440; color: white;">
    <h2 style="color: white;">Eine dunkle Folie</h2>

    <p>
        Auf einem dunklen Hintergrund braucht der Text eine helle Farbe.
    </p>
</section>

In diesem Beispiel bekommt die gesamte Folie einen dunklen Hintergrund:

background: #2e3440;

Gleichzeitig wird die Textfarbe auf Weiß gesetzt:

color: white;

Da dies auf die Überschrift nicht automatisch angewendet wird, muss auch hier die Textfarbe explizit mit color: white; festgelegt werden.

Schriftgrößen ändern

Mit CSS kannst du auch die Größe von Text verändern. Dafür verwendest du die Eigenschaft font-size.

font-size: 36px;

Einen Absatz größer machen

Wenn du nur ein einzelnes Element verändern möch­test, kannst du wieder ein style-Attribut verwenden.

<section class="slide">
    <h2>Schriftgrößen ändern</h2>

    <p>
        Dieser Absatz hat die normale Schriftgröße.
    </p>

    <p style="font-size: 42px;">
        Dieser Absatz ist größer.
    </p>
</section>

Die entscheidende Zeile ist:

font-size: 42px;

Damit wird nur dieser eine Absatz größer dargestellt. Die Überschrift und der erste Absatz bleiben unverändert.

Eine besonders große Aussage

Manchmal soll eine Folie nur eine wichtige Aussage zeigen. Dann darf der Text ruhig deutlich größer sein.

<section class="slide">
    <h2>Merksatz</h2>

    <p style="
        font-size: 56px;
        line-height: 1.15;
    ">
        Eine Folie soll deinen Vortrag unterstützen,
        nicht ersetzen.
    </p>
</section>

Hier werden zwei Eigenschaften ver­wen­det:

• font-size: 56px; macht den Text groß.
• line-height: 1.15; legt den Abstand zwischen den Zeilen fest.

line-height bedeutet Zeilenhöhe. Bei großem Text ist es oft sinnvoll, die Zeilenhöhe etwas kleiner zu machen, damit die Zeilen optisch zusammengehören.

Kleine Zusatzinformationen

Manchmal brauchst du eine kleine Zusatzinformation, zum Beispiel eine Quelle, einen Hinweis oder eine kurze Bemerkung. Dann kannst du die Schrift etwas kleiner machen.

<section class="slide">
    <h2>Das Internet verbindet Computer</h2>

    <p>
        Das Internet ist ein riesiges Netzwerk aus vielen
        kleineren Netzwerken.
    </p>

    <p style="
        font-size: 80%;
        color: #666666;
    ">
        Hinweis: Ein Netzwerk verbindet Geräte, damit sie Daten austauschen können.
    </p>
</section>

Der Hinweis ist kleiner und etwas heller. Dadurch er­kennt man sofort: Das ist nicht die Hauptaussage der Folie, sondern eine Zusatzinformation.

Seitenzahl-Ribbon ändern oder ausblenden

In der Standardvorlage von shower.js erscheint rechts oben automatisch ein rotes Ribbon mit der Foliennummer. Du musst dafür nor­ma­ler­wei­se nichts in deine Folie schreiben. Die Vorlage erzeugt dieses Ribbon selbst mit Hilfe dieser CSS-Regel:

.slide::after {
    position: absolute;
    top: 0;
    left: 875px;
    padding-top: 15px;
    box-sizing: border-box;
    width: var(--ribbon-size);
    height: calc(var(--ribbon-size) * 2);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%);
    background-color: var(--color-red);
    color: white;
    text-align: center;
    counter-increment: slide;
    content: counter(slide);
}

Die Zeile content: counter(slide); ist besonders wichtig. Sie sorgt dafür, dass die Foliennummer automatisch ein­ge­setzt wird. Du schreibst die Zahl also nicht selbst in den HTML-Code der Folie.

Die Variablen --color-red und --ribbon-size kommen ebenfalls aus der Vorlage. var(--color-red) bedeutet: »Nimm den Wert der CSS-Variable --color-red.« So kann die Vorlage Farben und Größen an einer zentralen Stelle verwalten.

Farbe des Standard-Ribbons ändern

Wenn du nur die Farbe ändern möch­test, kannst du das vorhandene Ribbon behalten und nur die Hintergrundfarbe überschreiben. Schreibe diese Regel in styles.css unter den Kommentar Eigene CSS-Regeln:

.slide::after {
    background-color: #4b86c2;
}

Du kannst auch die vorhandene Shower-Farbvariable verwenden:

.slide::after {
    background-color: var(--color-blue);
}

Eine runde Seitenzahl verwenden

Das Ribbon muss nicht wie ein Lesezeichen aussehen. Du kannst daraus auch einen Kreis machen. Auch diese Regel gehört in styles.css:

.slide::after {
    top: 32px;
    left: auto;
    right: 55px;

    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;
    padding-top: 0;

    clip-path: none;
    border-radius: 50%;
    background-color: #4aa03f;

    line-height: 1;
}

Wichtig sind hier vor allem drei Dinge:

• clip-path: none; entfernt die Lesezeichenform.
• border-radius: 50%; macht aus der Fläche einen Kreis.
• left: auto; right: 55px; platziert die Seitenzahl von rechts aus.

Nur eine kleine Zahl unten rechts anzeigen

Manchmal soll die Seitenzahl sehr unauffällig sein. Dann kannst du Hintergrund und Form komplett entfernen:

.slide::after {
    top: auto;
    left: auto;
    right: 60px;
    bottom: 32px;

    width: auto;
    height: auto;
    padding-top: 0;

    clip-path: none;
    background: transparent;
    color: var(--color-grey);

    font-size: 20px;
    line-height: 1;
}

Die Seitenzahl auf einer einzelnen Folie ausblenden

In der Starter-Vorlage gibt es dafür schon eine CSS-Regel in styles.css:

.slide.nopagenumber::after {
    visibility: hidden;
}

Du musst also nur der Folie in index.html die zusätzliche Klasse nopagenumber geben:

<section class="slide nopagenumber">
    <h2>Startfolie ohne Seitenzahl</h2>
    <p>Auf dieser Folie soll kein Ribbon erscheinen.</p>
</section>

Achte darauf, dass beide Klassen im selben class-Attribut stehen:

class="slide nopagenumber"

slide macht den Abschnitt zu einer Folie. nopagenumber blendet nur auf dieser Folie die Seitenzahl aus.

Die Seitenzahl überall ausblenden

Wenn du die Seitenzahl auf allen Folien ausblenden möch­test, kannst du diese Regel in styles.css ergänzen:

.slide::after {
    visibility: hidden;
}

Elemente genau platzieren

Normalerweise ordnet der Browser die Elemente einer Folie automatisch untereinander an: erst die Überschrift, dann Absätze, Listen, Bilder und so weiter. Das ist meistens gut, weil die Folie dadurch or­dent­lich bleibt.

Manchmal möch­test du aber ein Element ganz gezielt an eine bestimmte Stelle setzen: zum Beispiel eine kleine Infobox unten rechts, ein Logo in eine Ecke oder eine Beschriftung direkt auf ein Bild.

Dafür gibt es in CSS die Eigenschaft position.

Es gibt zwei Arten, die du dafür besonders gut gebrauchen kannst:

• position: relative; verschiebt ein Element von seiner normalen Position aus.
• position: absolute; platziert ein Element frei auf der Folie.

Ein Element leicht verschieben

Mit position: relative; bleibt ein Element grundsätzlich an seiner normalen Stelle, wird aber optisch verschoben.

<section class="slide">
    <h2>Relative Positionierung</h2>

    <p>Dieser Absatz steht ganz normal auf der Folie.</p>

    <p style="
        position: relative;
        left: 120px;
        top: 40px;
    ">
        Dieser Absatz wurde verschoben.
    </p>
</section>

Die wich­tig­sten Eigenschaften sind:

• position: relative; erlaubt das Verschieben des Elements.
• left: 120px; verschiebt das Element 120 Pixel nach rechts.
• top: 40px; verschiebt das Element 40 Pixel nach unten.

Ein Element frei auf der Folie platzieren

Mit position: absolute; kannst du ein Element frei auf der Folie platzieren. Das Element wird dann aus dem normalen Textfluss herausgenommen. Andere Elemente machen keinen Platz mehr dafür.

<section class="slide">
    <h2>Absolute Positionierung</h2>

    <p>
        Dieser normale Text bleibt oben auf der Folie.
        Die Infokarte wird unabhängig davon unten rechts platziert.
    </p>

    <div style="
        position: absolute;
        right: 70px;
        bottom: 60px;

        width: 320px;
        padding: 24px;

        border-radius: 16px;
        background: #ffe88b;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    ">
        <strong>Merke:</strong><br>
        Absolute Positionierung ist gut für besondere Elemente.
    </div>
</section>

In diesem Beispiel wird die Infokarte unten rechts platziert:

• position: absolute; nimmt die Infokarte aus dem normalen Textfluss.
• right: 70px; bedeutet: 70 Pixel Abstand vom rechten Rand der Folie.
• bottom: 60px; bedeutet: 60 Pixel Abstand vom unteren Rand der Folie.
• width: 320px; legt die Breite der Infokarte fest.
• padding: 24px; erzeugt Innenabstand innerhalb der Infokarte.

Die vier Richtungen

Du kannst ein absolut positioniertes Element von verschiedenen Seiten aus platzieren:

left: 80px;      /* Abstand vom linken Rand */
right: 80px;     /* Abstand vom rechten Rand */
top: 60px;       /* Abstand vom oberen Rand */
bottom: 60px;    /* Abstand vom unteren Rand */

Diese Kombination setzt ein Element oben links auf die Folie:

position: absolute;
left: 80px;
top: 80px;

Diese Kombination setzt ein Element unten rechts auf die Folie:

position: absolute;
right: 80px;
bottom: 60px;

Eine Beschriftung auf ein Bild setzen

Absolute Positionierung ist besonders praktisch, wenn du ein kleines Element über ein Bild legen möch­test. Dafür packst du Bild und Beschriftung gemeinsam in ein <div>. Dieses äußere <div> bekommt position: relative;. Die Beschriftung darin bekommt position: absolute;.

<section class="slide">
    <h2>Beschriftung auf einem Bild</h2>

    <div style="
        position: relative;
        width: 650px;
        height: 360px;
        border-radius: 15px;
        overflow: hidden;
    ">
        <img
            src="pictures/fuji.jpg"
            alt="Der Fuji"
            style="
                width: 100%;
                height: 100%;
                object-fit: cover;
            ">

        <div style="
            position: absolute;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
            color: white;
            padding: 0 12px;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
            font-size: 90%;
        ">
            Fuji vom Shōji-See aus, dazwischen der Berg Ōmuro.
        </div>
    </div>
</section>

Das äußere <div> ist hier der Rahmen für die Positionierung:

<div style="position: relative;">

Das Bild und die Beschriftung orientieren sich dadurch nicht an der ganzen Folie, sondern an diesem Rahmen. Die Beschriftung wird mit position: absolute; genau innerhalb dieses Rahmens platziert, und zwar so, dass sie unten über dem Bild liegt (bottom: 0;) und sich über die gesamte Breite erstreckt (left: 0; right: 0;).

In diesem Beispiel tauchen einige interessante CSS-Eigenschaften auf, die du vielleicht noch nicht kennst:

• overflow: hidden; sorgt dafür, dass die Inhalte des äußeren <div> nicht über dessen Grenzen hinaus sichtbar sind, damit die abgerundeten Ecken auch wirklich rund aussehen
• background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); erzeugt einen Farbverlauf von einem halbtransparenten Schwarz zu transparent, damit die weiße Beschriftung besser lesbar ist
• text-align: center; zentriert den Text horizontal in der Beschriftung
• font-size: 90%; macht die Schrift etwas kleiner als die normale Schriftgröße, damit sie besser zum Bild passt

Mehrere Spalten verwenden

Wenn du Inhalte gleichmäßig nebeneinander anordnen möch­test, musst du sie nicht einzeln mit left, right, top oder bottom platzieren. Für normale Layouts sind Spalten meistens viel einfacher.

In der Vorlage gibt es dafür die Klasse columns. Zusätzlich gibst du an, wie viele Spalten du möch­test:

• columns two erzeugt zwei Spalten
• columns three erzeugt drei Spalten

Das ist besonders praktisch für Vergleiche, kurze Listen, Vor- und Nachteile oder mehrere kleine Textblöcke nebeneinander.

Zwei Textspalten

Für zwei Spalten verwendest du ein äußeres <div> mit der Klasse columns two. Jedes direkte Kind dieses <div> wird zu einer eigenen Spalte.

<section class="slide">
    <h2>Zwei Spalten</h2>

    <div class="columns two">
        <div>
            <h3>HTML</h3>
            <p>
                HTML beschreibt die Struktur:
                Überschriften, Absätze, Listen, Bilder und Folien.
            </p>
        </div>

        <div>
            <h3>CSS</h3>
            <p>
                CSS beschreibt die Gestaltung:
                Farben, Größen, Abstände und Positionen.
            </p>
        </div>
    </div>
</section>

Die Struktur ist wichtig:

<div class="columns two">
    <div>Erste Spalte</div>
    <div>Zweite Spalte</div>
</div>

Das äußere <div> erzeugt das Spaltenlayout. Die beiden inneren <div>-Elemente sind die Inhalte der beiden Spalten.

Listen in zwei Spalten

Du kannst auch Listen in Spalten setzen. Das ist praktisch, wenn du zwei Gruppen gegenüberstellen möch­test.

<section class="slide">
    <h2>Vor- und Nachteile</h2>

    <div class="columns two">
        <div>
            <h3>Vorteile</h3>
            <ul>
                <li>Läuft im Browser</li>
                <li>Funktioniert auch offline</li>
                <li>Lässt sich mit CSS gestalten</li>
            </ul>
        </div>

        <div>
            <h3>Nachteile</h3>
            <ul>
                <li>HTML muss genau stimmen</li>
                <li>Fehler sind anfangs ungewohnt</li>
                <li>Man braucht etwas Übung</li>
            </ul>
        </div>
    </div>
</section>

In diesem Beispiel enthält jede Spalte eine eigene Überschrift und eine eigene Liste. Die Listen gehören also nicht direkt in das äußere Spalten-<div>, sondern jeweils in ein eigenes inneres <div>.

Drei Spalten verwenden

Für drei Spalten verwendest du columns three. Das funktioniert genauso wie bei zwei Spalten, nur mit drei direkten Kindern.

<section class="slide">
    <h2>Drei wichtige Dateien</h2>

    <div class="columns three">
        <div>
            <h3>index.html</h3>
            <p>Hier stehen deine Folien und Inhalte.</p>
        </div>

        <div>
            <h3>styles.css</h3>
            <p>Hier stehen deine eigenen Gestaltungsregeln.</p>
        </div>

        <div>
            <h3>pictures</h3>
            <p>In diesem Ordner liegen deine Bilder.</p>
        </div>
    </div>
</section>

Bei drei Spalten ist weniger Platz pro Spalte. Darum sollten die Texte besonders kurz sein.

5. Präsentation halten

Wenn du deine Präsentation halten möch­test, kannst du sie einfach im Browser öffnen und mit den Pfeiltasten navigieren. Du kannst auch die Maus benutzen, um durch die Präsentation zu scrollen.

Der besondere Vorteil bei dieser Art von Präsentation ist, dass sie in jedem modernen Browser funktioniert und du keine spe­zielle Software brauchst. Du kannst einfach das ganze Verzeichnis auf einen Stick kopieren und deine Präsentation überall abspielen, wo es einen modernen Webbrowser gibt.

Du kannst deine Präsentation auch online stellen, zum Beispiel direkt in der Hack­schu­le. Hier erfährst du, wie das geht.