Spickzettel - PDFs mit HTML erstellen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Spickzettel (engl. Cheat sheets) sind nicht nur illegale Lösungshilfen bei Prüfungen,
sondern eben auch Lernhilfen, bei denen alles Wichtige auf einer, maximal zwei Seiten zusammengefasst ist.[1][2]


SELFHTML möchte mit diesen PDFs Anfängern einen schnellen Überblick verschaffen:

  • Spickzettel
    HTML & CSS

    Alles auf einen Blick! (PDF, 141KB)

     


Jetzt ist nur die Frage, wie man so etwas produzieren kann.

Bisher habe ich Arbeitsblätter und Cheat Sheets mit MS Word erstellt. Oft gab es bereits ein bestehendes Dokument, das man als Vorlage nutzen und erweitern konnte. Im Laufe der Zeit wurden diese Dokumente jedoch immer komplexer. Dadurch konnten schon kleine Änderungen – etwa an mehreren nebeneinander angeordneten Textfeldern – dazu führen, dass sich das Layout an ganz anderer Stelle verschob.

Deshalb möchte ich nun auf HTML und CSS umsteigen. Damit kann ich das Layout genauer festlegen und einfacher wiederverwenden. Diese Dokumente lassen sich dann direkt im Browser anzeigen und als PDF ausdrucken.

HTML

HTML ist eben nicht nur für Webseiten geeignet. Als Auszeichnungssprache dient es dazu, Inhalte klar zu strukturieren und darzustellen. In Verbindung mit CSS lassen sich Layout, Schriftarten, Farben und Abstände präzise festlegen.

Dadurch eignet sich HTML auch sehr gut für Arbeitsblätter, Cheat Sheets und andere Unterrichtsmaterialien. Sowohl HTML als auch das CSS lassen sich als Vorlagen leicht wiederverwenden und anpassen, was den Pflegeaufwand langfristig reduziert.

Valides HTML

Eine gute HTML-Struktur verbessert nicht nur die Wartbarkeit des Dokuments, sondern oft auch dessen Lesbarkeit. Zwar sehen die Leser die HTML-Elemente nicht direkt, doch eine klare Struktur führt meist zu einer übersichtlicheren Darstellung und einer besseren Orientierung im Dokument.

Achte auf:

  • Abschnitte, die verwandte Inhalte zusammenfassen.
  • Passende Überschriften, die für eine klare Informationshierarchie sorgen.
  • Abbildungen und Bildunterschriften, die den Zusammenhang zwischen Abbildungen und Erläuterungen sicherstellen.
  • Listen erleichtern das Überfliegen der wichtigsten Punkte.

Syntaxhighlighting

Wenn deine Spickzettel Code enthalten, ist HTML deutlich besser geeignet als Word. In Word müsste man jeden gewünschten Abschnitt manuell einfärben.

Es gibt Bibliotheken, die man auch per CDN einbinden kann:

In prism.js kann man sogar mehrere Themes einstellen. Solarized Light ähnelt dem vorhandenen Look and Feel des Wiki und die gewünschten Sprachen können einfach zusammengestellt und heruntergeladen werden.

Einbindung von prism.js 
<!DOCTYPE html>
<html>
<head>
	...
	<link href="css/prism.css" rel="stylesheet">
</head>
<body>
	...
	<script src="js/prism.js"></script>
</body>
</html>

So sind Syntaxhervorhebung, automatischer Zeilenumbruch und einheitliche Formatierung kein Problem!

Backlink als QR-Code

Unser Cheat Sheet soll weder Tutorial noch die Referenz ersetzen sondern ergänzen. Deshalb findet sich unten ein Link zum entsprechenden Tutorial. Im PDF anklickbar, wäre es ausgedruckt nur unterstrichener Text in blauer Schrift.

Zur Ergänzung dient ein QR-Code, der auch in der gedruckten Version einen schnellen Zugriff auf das Tutorial ermöglicht.

Es gibt im Netz viele QR-Code-Generatoren.

Mit diesem Generator erhält man direkt SVG: www.tu-chemnitz.de/urz/apps/qrcode

Dieses SVG wird einfach als Inline-SVG im Dokument notiert.

QR-Code als inline-SVG ansehen …

CSS

In MS Word kann man ein bereits formatiertes Textfeld als Standard festlegen und anschließend wiederverwenden. Dadurch muss man nicht jedes neue Textfeld erneut formatieren.

CSS geht jedoch einen entscheidenden Schritt weiter: Gestaltungseigenschaften werden nicht für einzelne Elemente gespeichert, sondern zentral definiert und beliebig vielen Elementen zugewiesen. Ändert man später eine solche Definition, werden alle betroffenen Elemente automatisch angepasst. Das erleichtert die Pflege, sorgt für ein einheitliches Erscheinungsbild und macht auch umfangreiche Dokumente oder Webseiten deutlich einfacher wartbar.

Grundlage unseres Stylesheets sind die in unserem Style-Guide festgehaltenen Regeln.

Print first! - really?

Anders als im Responsiven Webdesign sollte man Seitenbereiche festlegen:

Wrapperelemente in Seitengröße 
<div class="page">
    Seite 1  - Inhalt
</div>

<div class="page">
    Seite 2  - Inhalt
</div>

Im CSS finden sich einige wichtige Festlegungen für den Druck:

CSS-Festlegungen für Druckausgabe 
@media print {
  html {
    print-color-adjust: exact;
  }

  :root {
    --base-font-size: 9pt;
    --space-2: 0.05rem;
    --space-4: 0.5rem;
    --space-6: 0.2rem;
  }
  .page {
    width: 210mm;
    height: 297mm;
    break-after: always;
  }

  .page:last-child {
    break-after: auto;
  }
}

Die Eigenschaft print-color-adjust legt fest, dass Hintergründe und Textfarben (z. B. der Code-Snippets) nach Nutzerwunsch farbig gedruckt werden können. Die Schriftgröße wird mit 9pt fest eingestellt, um das Seitenlayout an die feste Blattgröße zu binden. Auch die Abstände wurden gegenüber dem Screenlayout reduziert.

Anfangs hatten wir die @media print- Merkmalsabfrage ausgeklammert, um unser Layout ohne Druckvorschau sehen zu können. Ziel ist es ja, das Wichtigste auf eine DIN A4-Seite (evtl. mit Rückseite) zu bekommen.

Deshalb nützt es wenig, zuerst an Mobile first und an breite Viewports, dann erst zum Schluss an das Ausdrucken zu denken, sodass dann mehrere, zum Teil nur halb gefüllte Seiten herauskommen.
Aber keine Angst: Das fertige Produkt wird Mobile first!

Seiten umbrechen – aber wann?

Steuerung von Seitenumbrüchen 
  /* Überschriften nicht vom folgenden Inhalt trennen. */
  h1, h2, h3,
  caption,
  figcaption {
    break-after: avoid-page;
  }

  /* Kleine zusammengehörige Blöcke nicht auf zwei Seiten verteilen. */
  pre,
  blockquote,
  figure,
  img,
  svg,
  .box,
  .note,
  .shape-card,
  .source-footer {
    break-inside: avoid-page;
  }
Browserunterstützung
caniuse.com

Die Eigenschaft break-after dient der Steuerung von Seiten-, Spalten- und anderen Umbrüchen bei fortlaufender oder paginierter (auf Seiten aufgeteilte) Darstellung. Sie verhindert, dass Überschriften nicht getrennt vom folgenden Fließtext am ende einer seite stehen bleiben.

Analog werden mit break-inside: avoid-page Seitenumbrüche innerhalb von Fließtext vermieden.

Beachte: Stand Juni 2026 funktioniert vieles davon erst in Chrome.

Das druckfertige Produkt

Die einfachste Vorgehensweise wäre es, Cheat Sheets als HTML-Dokument online zu stellen und diese auf allen Geräten dank des CSS responsiv darzustellen. Wer diese ausdrucken möchte kann dies tun, das Print-CSS optimiert den Druck.

Spickzettel – für Screen und Print ansehen …
<div class="page" aria-labelledby="html-title">
    <header>
      <h1 id="html-title">
        <a href="https://wiki.selfhtml.org/wiki/SELFHTML" aria-label="SELFHTML">
          <img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="Logo SELFHTML">
        </a>
        Spickzettel HTML
      </h1>
      ...
      <p class="print-hint no-print"><strong>Hinweis:</strong> Aktiviere im Druckdialog die Option „Hintergrundgrafiken“, damit Flächen farbig erscheinen. Deaktiviere „Kopf- und Fußzeilen“, um den verfügbaren Platz nicht einzuschränken. Wähle für Ränder die Einstellung „Standard“.</p>
      <img src="https://wiki.selfhtml.org/images/3/38/HTML5_Logo.svg" alt="HTML Logo">
    </header>
    ...

Allerdings kann man man den Druck auch in eine PDF-Datei leiten und diese dann als externe Ressource zur Ansicht und zum Download anbieten. So muss der Nutzer keine eigenen Einstellungen mehr tätigen. Wir haben uns für diesen Weg entschieden, da die sorgfältig verfassten und überprüften (peer review) Spickzettel nicht dauernd verändert werden sollen.

  • Spickzettel
    HTML & CSS

    Alles auf einen Blick! (PDF, 141KB)

     

Diese PDFs sind …

  • perfekt angepasst auf 1, 2 (oder 4) DIN A4-Seiten
  • nicht veränderbar (zumindest nicht ohne Programme wie Adobe Pro) 

So können wir auch ausschließen, dass Nutzer Probleme aufgrund „falscher“ Druckeinstellungen bekommen.

Fazit: Für Lehrkräfte, die über mehrere Jahre hinweg zahlreiche Spickzettel erstellen, ist HTML/CSS (oder Markdown → HTML) in der Regel eine langfristig bessere Lösung als MS Word.

Siehe auch

SELFHTML möchte mit diesen PDF-Spickzetteln Anfängern und Fortgeschrittenen einen schnellen Überblick verschaffen:


  • Spickzettel
    Grid Layout

    Alles auf einen Blick! (PDF, 245KB)

     
  • Print-CSS (Druckausgabe)

    Druckvorlage

     

Weblinks

  1. ↑ Spickzettel (de.wikipedia.org)
  2. ↑ Cheat Sheet für HTML? SELF-Forum vom 27.05.2024
  3. ↑ Spickzettel HTML & CSS SELF-Forum vom 12.05.2025
    Ausufernde Grundlagendiskussion, wie man die spitzen Klammern von HTML-Tags denn besser nennen könne.
    Wir blieben bei der ursprünglichen Fassung!

Abgerufen am 26.07.2026
von "http://wiki.selfhtml.org/wiki/Spickzettel_-_PDFs_mit_HTML_erstellen"