Überschriften, Hervorhebungen, Boxen
Innerhalb des Textbereichs von Inhaltsseiten kann *normales* HTML geschrieben werden. Auf das Tag <p></p>
kann dabei verzichtet werden, es wird automatisch ergänzt. Außerdem stehen die folgenen Elemente per CSS-Klassen zur Verfügung.
Überschriften
Du kannst verschiedene Überschriften verwenden. Bitte beachte dabei die entsprechende Hierarchie. Wenn du eine <h4> (Überschrift der Größe 4) verwenden möchtest, so sollte dies innerhalb eines Abschnitts passieren, der von einer <h3> (Überschrift der Größe 3), passieren.
<h3>Überschrift 3</h3>
<h3 class="aufgabe">Überschrift 3 (Übungsaufgabe)</h3>
<h4>Überschrift 4</h4>
Renderergebnis
Seitenkopf (einmalig, wird automatisch aus title: generiert)
Überschrift 3
Überschrift 3 (Übungsaufgabe)
Überschrift 4
Wie du dem obigen Beispiel entnehmen kannst, erhalten Aufgabenüberschriften noch eine spezielle Klasse
Inline-Klassen
Innerhalb von Absätzen kannst du verschiedene Stile verwenden, die keine Blockelemente sind (und damit keinen Umbruch erzeugen sondern in der Zeile - inline - stehen)
Folgende Elemente stehen zur Verfügung
<em>Hervorgehoben</em>
<strong>Wichtig</strong>
<span class="konzept">Konzept</span>
<span class="proportional">Proportional</span>
Hier ein Beispiel zur Verwendung dieser Inline-Classes
Eine Anweisung ist ein zentrales Konzept der Informatik. Unter dem Begriff der Anweisung versteht man etwas wie x=2.
Listen
Du kannst geordnete Listen
<ol>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
</ol>
- Punkt
- Punkt
- Punkt
oder ungeordnete Listen verwenden:
<ul>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
</ul>
- PunktPunktPunktPunktPunktPunktPunktPunktPunkt PunktPunktPunktPunktPunkt PunktPunktPunktPunktPunktPunkt PunktPunktPunktPunkt PunktPunktPunktPunkt PunktPunktPunkt PunktPunktPunkt
- Punkt
- Punkt
Hinzu kommt noch eine ungeordnete Liste ohne Aufzählungspunkte
<ul class="ohne-listenpunkte">
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
</ul>
- Punkt
- Punkt
- Punkt
Bilder
Bilder können an verschiedenen Stellen positioniert werden. Zusätzlich bietet Javascript die Option eine Vergrößerung bei Klick.
Ein Bild rechts
<img alt="Testbild" class="rechts" src="testbild.jpg" width="200"/>

Ein Bild in der Seitenmitte
Bilder können ebenfalls in der Seitenmitte positioniert werden. Auch dies ist mit der Option vorschau
verwendbar.
<img alt="Testbild" class="mitte" src="testbild.jpg" width="200"/>

Hinweis zu Bildern/Vergrößerungen
Bilder, die mit einer Quellenangabe versehen sind, erhalten automatische eine entsprechende figure-Box, in der sie sich dann befinden. Dadurch können die Bilder dann auch automatisch vergrößert dargestellt werden.
Audio/Video
Audio- und Videodateien können per passendem HTML-Tag eingefügt werden. Das Attributposter=""
ist dabei optional.
<video poster="vorschau.jpg" controls="controls" preload="none" src="AutoGrundgeruest.mp4" type="video/mp4">
Hinweis: Es dürfen keine Breiten- und Höhenangaben in Prozent gemacht werden, das führt zu Darstellungsproblemen.
Weitere Klassen
Definitionsbox
Um Definitionen von Objekten u.a. zu erstellen, kannst du die Definitionsbox verwenden. Du erhälst sie mit folgendem Code:
<div class="def">
...
</div>
Diese Definitionsboxen kommen vor allem auf den Fachkonzept-Seiten zum Einsatz.
Weitere Boxen
div.achtung
div.frage
div.information