Ü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

Wie du dem obigen Beispiel entnehmen kannst, erhalten Aufgabenüberschriften noch eine spezielle Klasse aufgabe, sodass sie von normalen Überschriften unterscheidbar sind.

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

Listen

Du kannst geordnete Listen

<ol>
    <li>Punkt</li>
    <li>Punkt</li>
    <li>Punkt</li>
</ol>

oder ungeordnete Listen verwenden:

<ul>
    <li>Punkt</li>
    <li>Punkt</li>
    <li>Punkt</li>
</ul>

Hinzu kommt noch eine ungeordnete Liste ohne Aufzählungspunkte

<ul class="ohne-listenpunkte">
    <li>Punkt</li>
    <li>Punkt</li>
    <li>Punkt</li>
</ul>

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

<video poster="vorschau.jpg" controls="controls" preload="none" src="AutoGrundgeruest.mp4" type="video/mp4">

Weitere Klassen

Definitionsbox

<div class="def">
...
</div>

Weitere Boxen