Ü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.
Achtung: Der Textbereich endet mit den abgrenzenden Strichen ----
und darunter folgt die Uuid die nicht verändert werden darf. Weitere Informationen auf der folgenden Seite.
Für den Textbereich stehen folgende 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
<ol class="aufgaben">
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
</ol>
- Punkt
- Punkt
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus eveniet quaerat non laudantium placeat voluptas quasi quidem asperiores, dolorem veritatis, aspernatur rem tenetur architecto. Quis asperiores obcaecati numquam esse odio!
- 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.