i

Ü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 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>
Hervorgehoben
Wichtig
Konzept
Proportional

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>
  1. Punkt
  2. Punkt
  3. 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"/>
Testbild mit Vorschau rechts

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"/>
Testbild

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 Attribut poster="" 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

Suche

v
15.6.3.2.1
schuljahr.inf-schule.de/aktuell/infschule/dokumentation/kapitel-erstellen/textbereich/standard
schuljahr.inf-schule.de/aktuell/15.6.3.2.1

Rückmeldung geben