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 wir gleich loslegen können. 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. Anschließend 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-Vorschau unserer Präsentation zeigt. Öffne dazu links die Extensions, suche die Er­wei­te­rung »Live Server« und klicke auf »Install«, um die Er­wei­te­rung zu installieren. 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 Vorschau 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 Vorschau zu sehen:

3. Präsentation schreiben

Schau dir die Vorlage an und versuche, sie zu verstehen. Falls du nach Hilfe suchst: die Technologien, die hier ver­wen­det werden, heißen HTML und CSS. Du kannst dann damit beginnen, die Vorlage an deine Bedürfnisse anzupassen und deine Präsentation zu schreiben.

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

4. HTML

HTML wird nor­ma­ler­wei­se nicht für Präsentationen, sondern für Websites ver­wen­det. Die Funktion dieser Spra­che ist es, Text mit bestimmten Eigenschaften auszuzeichnen – daher auch der Name »Hypertext Markup Language«. Schau dir den Quelltext einer beliebigen Website mit StrgU an und du wirst HTML-Code sehen.

Generell ist es so, dass bei HTML Textteile in sogenannte Tags eingeschlossen werden. Schreibt man z. B. H<sub>2</sub>O, sorgen die <sub>-Tags dafür, dass die 2 tiefer gestellt wird: H₂O. Ein öffnendes Tag wie <sub> muss immer mit einem passenden schließenden Tag </sub> geschlossen werden, wo­bei Tags beliebig geschachtelt werden können. Hier sind einige Beispiele:

HTML-Tag	Beispiel	Code
<strong>	fetter Text	<strong>fetter Text</strong>
<em>	kursiver Text	<em>kursiver Text</em>
<u>	unterstrichener Text	<u>unterstrichener Text</u>
<sub>	tiefgestellter Text	<sub>tiefgestellter</sub> Text
<sup>	hochgestellter Text	<sup>hochgestellter</sup> Text
<p>	Absatz	<p> Absatz </p>
<h1>	Überschrift 1	<h1>Überschrift 1</h1>
<h2>	Überschrift 2	<h2>Überschrift 2</h2>
<h3>	Überschrift 3	<h3>Überschrift 3</h3>
<ul>	Stichpunkt 1 Stichpunkt 2	<ul>   <li>Stichpunkt 1</li>   <li>Stichpunkt 2</li> </ul>
<ol>	Aufzählung 1 Aufzählung 2	<ol>   <li>Aufzählung 1</li>   <li>Aufzählung 2</li> </ol>
<img>		<img src='image.jpg'>

5. Präsentation halten

Wenn du deine Präsentation halten möchtest, 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, um sie abzuspielen. Du kannst einfach das ganze Verzeichnis auf einen Stick kopieren und deine Präsentation überall abspielen, wo es einen modernen Webbrowser gibt.