Handbuch

Befehle, Formate und Handgriffe zum Nachsehen. Aktivitäten verweisen auf diese Abschnitte; hier stehen sie alle auf einen Blick.

Workspace

Workspace: Grundlagen

Erste SchritteTerminal öffnen
VorlagenRepository klonen · Eine neue Version der Vorlage holen
Live-Vorschau startenIm Workspace ist die Erweiterung »Live Server« installiert.
ErweiterungenErweiterung installieren

Shortcuts

Tastatur-Shortcuts

Terminal

Terminal: Dateien und Verzeichnisse

HTML und CSS

HTML: Inhalt und Struktur

TagsHTML-Code besteht aus Tags.
Das Grundgerüst einer SeiteJede Webseite hat dasselbe Gerüst.
Überschriften und AbsätzeEine neue Zeile ohne neuen Absatz
ListenListen machen Inhalte übersichtlich.
Wörter hervorhebenSpitze Klammern im Text
LinksDas H in HTML steht für Hypertext: Seiten können auf andere Seiten verweisen.
Bilddateien ins Projekt holenBildformate · Möglichkeit 1: Drag & Drop · Möglichkeit 2: Aus der Zwischenablage · Bilder verkleinern: WebP
Bilder einfügenDer Pfad muss genau stimmen · Was in den Alt-Text gehört
Bereiche: divManchmal sollen mehrere Elemente zusammengehören, etwa eine Überschrift und eine Liste, die gemeinsam neben …

HTML und CSS

CSS: Aussehen

CSS-RegelnZum Ausprobieren: style
SelektorenDer Selektor bestimmt, wofür eine Regel gilt:
FarbenZwei Eigenschaften brauchst du ständig:
SchriftDie Schriftart · Eine eigene Schriftart
Abstände, Rahmen und SchattenJedes Element ist ein Kasten.
Bildgröße und ZuschnittBreite und Höhe zugleich · Ein festes Seitenverhältnis
Wenn eine Regel nicht wirktDie genauere Regel gewinnt

HTML und CSS

Layout: Anordnen

Nebeneinander mit FlexboxBild und Text sollen nebeneinander stehen.
SpaltenSollen mehrere gleich wichtige Dinge gleich breit nebeneinander stehen, etwa ein Vergleich oder Vor- und …
Genau platzierenEin Element etwas verschieben
Kleine BildschirmeWebseiten werden auf dem Handy, dem Tablet und dem Laptop geöffnet.

Präsentationen

Folien mit Shower

Eine FolieIn der Vorlage steht die ganze Präsentation in index.html.
Gute FolienEine Folie ist keine Buchseite.
Was die Vorlage mitbringtBild neben Text: side-by-side · Spalten: columns · Ein Bild als Hintergrund: cover
Die SeitenzahlFarbe ändern · Eine runde Seitenzahl · Ohne Seitenzahl
Formeln mit KaTeXKaTeX einschalten · Formeln schreiben
PräsentierenDeine Präsentation läuft in jedem Browser:

Farben

Farben angeben

Eine Farbe angebenFarbnamen · Farbcodes mit # · Rot, Grün und Blau einzeln
Farben findenDie Cling-Palette · Farben mischen
KontrastText muss sich deutlich vom Hintergrund abheben.

Git und GitLab

Git und GitLab: Zugang und Veröffentlichen

Einmal einrichtenSSH-Schlüssel für GitLab · Git sagen, wer du bist
Wenn Git den Push ablehntIn einem Klassen-Repository veröffentlichen viele.

Datenbanken

ER-Modelle als Text

AusprobierenSchreib links ein Modell; rechts erscheint es als Diagramm, darunter die Tabellen und das SQL.
Ein Modell schreibenAufbau einer Datei · Entitäten und Attribute · Beziehungen und Kardinalitäten
Was die ER-Werkstatt daraus machtVom Modell zu Tabellen · Die drei Diagramme
WerkzeugeDie ER-Werkstatt in VS Code · Auf der Kommandozeile

Interaktive Geschichten

Interaktive Geschichten mit BIF

SeitenEine Geschichte besteht aus Seiten.
EntscheidungenEine Entscheidung ist ein Listenpunkt mit einem Link: In eckigen Klammern steht, was die Leserin oder der …
Lokale EntscheidungenMit einem Punkt statt einer Seitennummer bleibt die Geschichte auf derselben Seite.
VariablenIn einem <script>-Block gibst du einer Variable einen Wert.
BedingungenEine Bedingung entscheidet, ob eine Entscheidung oder ein Text gerade erscheint.
EndeEine Seite, auf der keine Entscheidung zu einer anderen Seite führt, ist ein Ende.
Eigener GeschichtenordnerWelche Geschichte BIF zeigt, steht in config.js.
Wenn BIF ein Problem meldetBIF liest deine Geschichte bei jedem Speichern und meldet unten im Bereich Problems, in welcher Datei und …
Aussehen anpassenDas Aussehen deiner Geschichte stellst du ganz oben in 1.md ein.
MarkdownFür die normalen Texte kannst du die üblichen Markdown-Schreibweisen verwenden.
BilderBilder speicherst du am besten innerhalb deines Geschichtenordners, zum Beispiel:
Audio und VideoAuch Audio- und Videodateien können Teil einer Geschichte sein:
Werte im TextVariablen können nicht nur true und false, sondern auch Zahlen oder Texte enthalten.
ZufallFür manche Geschichten kann Zufall interessant sein.
Graph-GruppenBei größeren Geschichten kannst du Seiten im Graphen zu Bereichen zusammenfassen.
JavaScriptFür normale Entscheidungen reichen die Markdown-Links fast immer aus: