Absatz-, Listen- und Tabellenauszeichnungen

Formatierungen der Absatz-, Listen- und Tabellenauszeichnungen die in in diesem Theme benutzt werden.

Weitere Formatierungen können auf den folgenden Seiten gefunden werden

In der jeweiligen Box «Beispiel» sehen Sie anhand eines Beispiels, wie die entsprechende Definition aussehen wird. Um das Beispiel selbst nutzen zu können, kopieren Sie den Beispielcode aus der Box «Code» in Ihre Seite und passen den Text nach Ihren Bedürfnissen an.

Achten Sie darauf, dass Sie den Code in den Texteditor kopieren und nicht in den Visuelleditor.

Teiler (Horizontale Linien)

Einfache Linie

<hr />

Unterbruch des Hintergrunds

Es wird eine Linie erstellt in der gleichen Farbe wie der Hintergrund der Website. So entsteht der eindruch, dass das Blatt unterbrichen ist. Im Praxiseinsatz geht die Linie bis an den Blattrand.

<hr class=»break» />

Listen

Mit den Listen Definitionen können Sie verschiedene Aufzählungen formatieren.

Geordnete Liste

Das Tag <ol> bezeichnet eine geordnete oder nummerierte Liste, bei der die Reihenfolge der Elemente von Bedeutung ist.

  1. bei Anette vorbeischauen
  2. bei Bert vorbeischauen
  3. bei Christine vorbeischauen
  4. bei Dieter vorbeischauen
<ol>
<li>bei Anette vorbeischauen</li>
<li>bei Bert vorbeischauen</li>
<li>bei Christine vorbeischauen</li>
<li>bei Dieter vorbeischauen</li>
</ol>
  1. bei Anette vorbeischauen
  2. bei Bert vorbeischauen
  3. bei Christine vorbeischauen
  4. bei Dieter vorbeischauen

Ungeordnete Liste

Das Tag <ul> beschreibt eine ungeordnete Aufzählungsliste, also eine Liste, bei der die Reihenfolge der Elemente nur eine untergeordnete oder keine Rolle spielt.

Einfache Listen

Folgende Listen können Sie für diverse listen artige Aufzählungen nutzen. Die Listen können auch mehrstufig erstellt werden.

Basis Listen

Eine einfach HTML Liste mit dem Standard (Scheibe) Bullet-Zeichen.

  • Baum
    • Tanne
    • Buche
  • Blume
    • Rose
      • A Longs Pédoncules
      • Ambassador
    • Sonnenblume
  • Tiere
    • Biene

<ul>
<li>Baum
<ul>
<li>Tanne</li>
<li>Buche</li>
</ul>
</li>
<li>Blume
<ul>
<li>Rose
<ul>
<li>A Longs Pédoncules</li>
<li>Ambassador</li>
</ul>
</li>
<li>Sonnenblume</li>
</ul>
</li>
<li>Tiere
<ul>
<li>Biene</li>
</ul>
</li>
</ul>

Liste mit Kreisen

Soll eine Liste mit dem Bullet-Zeichen Kreisen dargestellt werden, dann verwenden Sie zusätzlich das Element <div class="listcircle"></div> um die Liste zu umschliessen.

  • Baum
  • Tanne
  • Buche

<div class=»listcircle»>
<ul>
<li>Baum
<ul>
<li>Tanne</li>
<li>Buche</li>
</ul>
</li>
<li>Blume
<ul>
<li>Rose
<ul>
<li>A Longs Pédoncules</li>
<li>Ambassador</li>
</ul>
</li>
<li>Sonnenblume</li>
</ul>
</li>
<li>Tiere
<ul>
<li>Biene</li>
</ul>
</li>
</ul>
</div>

  • Baum
  • Tanne
  • Buche
  • Baum
  • Tanne
  • Buche
  • Baum
  • Tanne
  • Buche
  • Baum
  • Tanne
  • Buche
  • Baum
  • Tanne
  • Buche
  • Baum
  • Tanne
  • Buche
  • Baum
  • Tanne
  • Buche
  • Baum
  • Tanne
  • Buche
Liste mit Quadraten

Soll eine Liste mit dem Bullet-Zechen Quadrat dargestellt werden, dann verwenden Sie zusätzlich das Element <div class="listsquare"></div> um die Liste zu umschliessen.

  • Baum
    • Tanne
    • Buche
  • Blume
    • Rose
      • A Longs Pédoncules
      • Ambassador
    • Sonnenblume
  • Tiere
    • Biene

<div class=»listsquare»>
<ul>
<li>Baum
<ul>
<li>Tanne</li>
<li>Buche</li>
</ul>
</li>
<li>Blume
<ul>
<li>Rose
<ul>
<li>A Longs Pédoncules</li>
<li>Ambassador</li>
</ul>
</li>
<li>Sonnenblume</li>
</ul>
</li>
<li>Tiere
<ul>
<li>Biene</li>
</ul>
</li>
</ul>
</div>

Liste mit Strichen

Soll eine Liste mit dem Bullet-Zeichen Strich dargestellt werden, dann verwenden Sie zusätzlich das Element <div class="listminus"></div> um die Liste zu umschliessen.

  • Baum
    • Tanne
    • Buche
  • Blume
    • Rose
      • A Longs Pédoncules
      • Ambassador
    • Sonnenblume
  • Tiere
    • Biene

<div class=»listminus»>
<ul>
<li>Baum
<ul>
<li>Tanne</li>
<li>Buche</li>
</ul>
</li>
<li>Blume
<ul>
<li>Rose
<ul>
<li>A Longs Pédoncules</li>
<li>Ambassador</li>
</ul>
</li>
<li>Sonnenblume</li>
</ul>
</li>
<li>Tiere
<ul>
<li>Biene</li>
</ul>
</li>
</ul>
</div>

Liste mit Pfeilen

Soll eine Liste mit dem Bullet-Zeichen Pfeilen dargestellt werden, dann verwenden Sie zusätzlich das Element <div class="listarrow"></div> um die Liste zu umschliessen.

  • Baum
    • Tanne
    • Buche
  • Blume
    • Rose
      • A Longs Pédoncules
      • Ambassador
    • Sonnenblume
  • Tiere
    • Biene

<div class=»listarrow»>
<ul>
<li>Baum
<ul>
<li>Tanne</li>
<li>Buche</li>
</ul>
</li>
<li>Blume
<ul>
<li>Rose
<ul>
<li>A Longs Pédoncules</li>
<li>Ambassador</li>
</ul>
</li>
<li>Sonnenblume</li>
</ul>
</li>
<li>Tiere
<ul>
<li>Biene</li>
</ul>
</li>
</ul>
</div>

Liste ohne Bullet-Zeichen

Soll eine Liste ohne Bullet-Zeichen dargestellt werden, dann verwenden Sie zusätzlich das Element <div class="listnone"></div> um die Liste zu umschliessen.

  • Baum
    • Tanne
    • Buche
  • Blume
    • Rose
      • A Longs Pédoncules
      • Ambassador
    • Sonnenblume
  • Tiere
    • Biene

<div class=»listnone»>
<ul>
<li>Baum
<ul>
<li>Tanne</li>
<li>Buche</li>
</ul>
</li>
<li>Blume
<ul>
<li>Rose
<ul>
<li>A Longs Pédoncules</li>
<li>Ambassador</li>
</ul>
</li>
<li>Sonnenblume</li>
</ul>
</li>
<li>Tiere
<ul>
<li>Biene</li>
</ul>
</li>
</ul>
</div>

Icon List
  • item 2
  • item 1
  • item 3
  • item 3
  • item 3
Dekorationslisten

Dekorationslisten sind ein wenig aufwendiger zu gestalten, bieten aber erheblich mehr Möglichkeiten. Die gesamte Liste wird mit dem Element <div class="decolist"></div> umfasst. Jeder Listeneintrag wird dann mit dem Element <div class="listelement"><div> umfasst.

Sie können nun für alle Listeneinträge diverse Aufzählungszeichen in verschieden Farben wählen. Dafür ergänzen Sie das «decolist» Element mit dem Angaben des Zeichens und der Farbe, wie zum Beispiel <div class="decolist arrow yellow"> um eine Liste mit gelben Pfeilen als Aufzählungszeichen zu erhalten. Sie können jedem Listeneintrag ein eigenes Zeichen mit eigener Farbe zuweisen. Dazu ergänzen Sie das entsprechende «listelement» mit der Angabe des Zeichens und der Farbe. Zum Beispiel <div class="listelement yellow checkmark"> um einem Listenelement mit einem Hacken auf gelben Hintergrund zuzuweisen.

Die Aufzählungszeichen müssen immer auf einem farbigen Hintergrund platziert werden!

Die einzelnen Listeneinträge können noch mit zusätzlichen Notizen versehen werden. Fassen Sie die Notiz dazu in das Element <div class="listcomentelement green"></div> ein, um die Notiz auf einem grünen Notizzettel erscheinen zu lassen. Für die Notizzettel stehen die gleichen Farben wie für die Aufzählungszeichen zur Verfügung.

Denken Sie bei der Auswahl der Zeichen und Farben immer an die Grundregel: «Weniger ist mehr».

Folgende Farben stehen zu Verfügung:

  • green
  • yellow
  • blue
  • red

Folgende Aufzählungszeichen stehen zu Verfügung:

  • arrow
  • checkmark
  • exclamation-marks
  • exclamation-point
  • heart
  • idea-lightbulb
  • question-mark
  • star
  • thumbs-up
  • thumbs-down

 

Einfaches Beispiel einer Dekorationsliste
  • Baum
  • Blume
  • Biene

<div class=»decolist arrow yellow»>
<ul>
<li><div class=»listelement»>Baum</div></li>
<li><div class=»listelement»>Blume</div></li>
<li><div class=»listelement»>Biene</div></li>
</ul>
</div>

Komplexeres Beispiel einer Dekorationsliste
  • Baum
      • Tanne
      • Buche
    Die Buchen (Fagus) sind die einzige Pflanzengattung der Unterfamilie der Fagoideae innerhalb der Familie der Buchengewächse (Fagaceae). Die etwa elf Arten besitzen eine weite Verbreitung in den gemäßigten Gebieten der Nordhalbkugel in Nordamerika und Eurasien.
  • Blume
    • Rose
      Die Rosen (aus lateinisch rosa) sind die namensgebende Pflanzengattung der Familie der Rosengewächse (Rosaceae). Die Gattung umfasst je nach Auffassung zwischen 100 und 250 Arten.
      • A Longs Pédoncules
      • Ambassador
    • Sonnenblume
  • Tiere
    • Biene

<div class=»decolist»>
<ul>
<li><div class=»listelement heart green»>Baum</div>
<ul>
<li><div class=»listelement heart green»>Tanne</div></li>
<li><div class=»listelement heart green»>Buche</div></li>
<div class=»listcomentelement green»>Die Buchen (Fagus) sind die einzige Pflanzengattung der Unterfamilie der Fagoideae innerhalb der Familie der Buchengewächse (Fagaceae). Die etwa elf Arten besitzen eine weite Verbreitung in den gemäßigten Gebieten der Nordhalbkugel in Nordamerika und Eurasien.</div>
</ul>
</li>
<li><div class=»listelement arrow red»>Blume</div>
<ul>
<li><div class=»listelement arrow red»>Rose</div>
<div class=»listcomentelement red»>Die Rosen (aus lateinisch rosa) sind die namensgebende Pflanzengattung der Familie der Rosengewächse (Rosaceae). Die Gattung umfasst je nach Auffassung zwischen 100 und 250 Arten.</div>
<ul>
<li><div class=»listelement arrow red»>A Longs Pédoncules</div></li>
<li><div class=»listelement arrow red»>Ambassador</div></li>
</ul>
</li>
<li><div class=»listelement arrow red»>Sonnenblume</div></li>
</ul>
</li>
<li><div class=»listelement yellow star «>Tiere</div>
<ul>
<li><div class=»listelement star yellow»>Biene</div></li>
</ul>
</li>
</ul>
</div>

Definitionslisten

Definitionslisten werden mit dem Tag <dl> aufgebaut.
Der zu erläuternde Ausdruck steht zwischen <dt>…</dt>.
Die Beschreibung steht zwischen <dd>…</dd>.

Äpfel
Die Äpfel (Malus) bilden eine Pflanzengattung der Kernobstgewächse (Pyrinae) aus der Familie der Rosengewächse (Rosaceae).
Bananen
Die Bananen (Musa), veraltet Paradiesfeigen, sind eine Pflanzengattung in der Familie der Bananengewächse (Musaceae) innerhalb der Einkeimblättrigen Pflanzen (Monokotyledonen).
<dl>
<dt>Äpfel</dt>
<dd>Die Äpfel (Malus) bilden eine Pflanzengattung der Kernobstgewächse (Pyrinae) aus der Familie der Rosengewächse (Rosaceae).</dd>
<dt>Bananen</dt>
<dd>Die Bananen (Musa), veraltet Paradiesfeigen, sind eine Pflanzengattung in der Familie der Bananengewächse (Musaceae) innerhalb der Einkeimblättrigen Pflanzen (Monokotyledonen).</dd>
</dl>

Navigationsliste

Ziele
…..

Teilnehmer
…..

Entscheidungen
…..

Zitat

Mithilfe des Tag <blockquote> können Sie Zitate von Fremdautoren in einem eigenen, anders formatierten Absatz hervorheben.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Ut wisi enim ad minim veniam.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
<blockquote>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</blockquote>
Ut wisi enim ad minim veniam.

Infoboxen

Mit den Infoboxen können sie Textabschnitte hervorheben.

Infobox grün

UPDATE: Wir sind immer noch gleicher Meinung
<div class=»notification_green»>
UPDATE: Wir sind immer noch gleicher Meinung
</div>

Infobox gelb

Das sollten sie nicht ausprobieren.
<div class=»notification_yellow»>
Das sollten sie nicht ausprobieren.
</div>

Infobox blau

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class=»notification_blue»>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

Infobox rot

Der Text können Sie mit den Tag <center> zentriert darstellen.

ACHTUNG: Das ist nicht ernst gemeint
<div class=»notification_red»>
ACHTUNG: Das ist nicht ernst gemeint
</div>

Quelltext, Code

Um Code anzeigen zu können, verwenden Sie die Tags <code>.


x = 5;
y = 6;
z = x + y;
<code>
x = 5;<br />
y = 6;<br />
z = x + y;
</code>

Vorformatierter Text

Um einen Text mit den vorgegebenen Abständen und Zeilenumbrüchen Auszugeben nutzen Sie den Tag <pre>.

Dieser Text wir in einer Schrift mit 
		fixer Breite dargestellt. 
		Die Zeilenumbrüche und 
		    Abstände werden ebenfalls dargestellt.
<pre>Dieser Text wir in einer Schrift mit
fixer Breite dargestellt.
Die Zeilenumbrüche und
Abstände werden ebenfalls dargestellt.</pre>

Formulare

Formulare auf Web-Seiten werden mit dem Tag <form> definiert.
Wobei im Tag <form> die Aktion wohin des Formular gesendet werden soll, definiert wird. Zwischen den Start-Tag und dem End-Tag werden die benötigten Felder angegeben.



<form id=»beispielform»>
<label for=»vorname»>Vorname</label>
<input id=»vorname» maxlength=»30″ name=»vorname» type=»text» />
<label for=»nachname»>Nachname</label>
<input id=»nachname» maxlength=»40″ name=»nachname» type=»text» />
<input type=»reset» value=»Löschen» /> <input type=»submit» value=»Senden» />
</form>

Bezeichnungen

Um die jeweiligen Felder mit einer Bezeichnung zu versehen wird der Tag <label> genutzt.

<label for=»name»>Name:</label>

Einzeiliges Texteingabefeld

Der Tag <input> kann innerhalb von Formularen für einzeilige Eingaben genutzt.

<input id=»name» tabindex=»1″ name=»name» type=»text» value=»» />

Mehrzeiliges Texteingabefeld

Der Tag <textarea> kann für mehrzeilige Eingaben genutzt werden.

<textarea cols=»50″ rows=»10″>Beschreiben Sie Ihr Leben …</textarea>

Radio-Buttons

Radio-Buttons sind eine Gruppe von Knöpfen, von denen immer nur einer ausgewählt werden kann.



<fieldset>
<fieldset><input id=»rot» name=»Farbe» type=»radio» class=»option-input radio» value=»Rot» /><label for=»rot»> Rot</label>
<input id=»gelb» name=»Farbe» type=»radio» class=»option-input radio» value=»Gelb» /><label for=»gelb»> Gelb</label>
<input id=»grun» name=»Farbe» type=»radio» class=»option-input radio» value=»Gruen» /><label for=»grun»> Grün</label></fieldset>

Checkboxen

Checkboxen sind ein Gruppe von Köpfen, von denen einer oder mehrere ausgewählt werden können.

Orange
Banane
Apfel
<fieldset>
<fieldset><input name=»Frucht» class=»option-input checkbox» type=»checkbox» value=»Orange» /> Orange
<input name=»Frucht» type=»checkbox» class=»option-input checkbox» value=»Banane» /> Banane
<input name=»Frucht» type=»checkbox» class=»option-input checkbox» value=»Apfel» /> Apfel</fieldset>

Dropdown-Liste

Die Dropdown-Liste gibt eine Liste von vordefinierten Werten vor, aus der ein Wert ausgewählt werden kann.

<label>Auswahlliste:
<select name=»list»>
<option>sehr gut</option>
<option>gut</option>
<option>genügend</option>
<option>ungenügend</option>
<option>schlecht</option>
</select>
</label>

Knöpfe

Mit dem Knopf «reset» kann das Formular zurückgesetzt werden.
Mit den Formularknopf «submit» kann ein Formular abgesendet werden.

<input type=»reset» value=»Löschen»> <input type=»submit» value=»Senden»>

Tabellen

Eine Tabelle ist eine geordnete Zusammenstellung von Texten oder Daten. Die darzustellenden Inhalte werden dabei in Zeilen (waagerecht) und Spalten (senkrecht) gegliedert, die grafisch aneinander ausgerichtet werden.

Kontobewegungen
Monat Einnahmen Ausgaben Saldo
Januar € 80’000 € 80’000
Februar € 30’000 € 50’000
<table>
<tr>
<th>Monat</th>
<th>Einnahmen</th>
<th>Ausgaben</th>
<th>Saldo</th>
</tr>
<tr>
<td>Januar</td>
<td>€ 20’000</td>
<td>€ 10’000</td>
<td>€ 10’000</td>
</tr>
<tr>
<td>Februar</td>
<td>€ 80’000</td>
<td>€ 30’000</td>
<td>€ 60’000</td>
</tr>
</table>