Kantine Texteditor

Die Basics

Bevor wir tiefer in die Möglichkeiten der Textformatierung einsteigen möchten wir dir einige Basics zur Hyper Text Markup Language (kurz HTML) und zu den Cascading Style Sheets (kurz CSS) geben.
Warum? Das sind die Standards auf denen die Darstellung von Webseite in der einen oder anderen Weise basiert.

HTML

HTML besteht aus sogenannten Tags. Über diese Tags wird festgelegt um was es sich innerhalb dieses Tags handelt. Dabei gibt es immer einen Anfangs- und einen Endtag.

<u>Dieser Text wird unterstrichen</u>

Du hast sicher auch die Ähnlichkeit zu unseren BB-Codes bemerkt, wie [event][/event] oder [ooc][/ooc]. Hier ist das Prinzip das selbe.

Um einen Text zu Unterstreichen verwenden wir als Anfangstag <u> und als Endtag </u> . Der Anfangs- und Endtag unterscheiden sich durch das / . Das ist meistens so.

Ich schreibe meistens, weil es ein besonderes Tag gibt, das alleine verwendet wird und zwar z.B.<br>.

Dieses Tag gibt an, dass an dieser Stelle ein Zeilenumbruch vorgenommen werden soll, hat deshalb keinen Inhalt und benötigt daher kein Endtag (</br> wird auch manchmal verwendet, dann aber ohne Anfangstag. Das Prinzip ist das gleiche).

Tags können auch verschachtelt werden. Dabei ist wichtig das immer der innere vor dem äußeren Tag geschlossen wird.

Also so <u><em></em></u> und nicht so <u><em></u></em>.

Für die Textbearbeitung im Texteditor auf unserer Webseite ist wichtig zu verstehen, auf in welcher Ansicht man den Text gerade bearbeitet, da in der Standard-Ansicht der angezeigte Text noch in HTML-Code umgewandelt werden muss. Somit kann die Standard-Ansicht nichts mit der Eingabe von <br> anfangen kann.

Ebenso wenig Funktioniert die Eingabe einer neuen Zeile durch einen Druck auf die Enter-Taste in der Code-Ansicht, da ja im HTML-Code ein Zeilenumbruch durch <br> definiert wird.

Einige Tags können auch weitere Informationen enthalten, wie einen zusätzlichen Namen, Wert oder einer Adresse. Diese Information wir dann im Anfangstag mit angegeben.

<a href="https://www.starcitizen-kantine.de">Zur Kantine</a>

 In diesem Beispiel ist die Adresse des Links im Anfangstag als "href"-Attribut enthalten. Tags können auch mehrere Attribute enthalten.

HTML: Link mit Bild <a href="https://www.starcitizen-kantine.de"> <img border="0" alt="Kantinen-Logo" src="https://www.starcitizen-kantine.de/images/style-9/pageLogo-4602c4f3.png" height="100px"> </a>

 In diesem Beispiel haben wir die Tags <a> und <img> verschachtelt (Ist es aufgefallen? Das <img>-Tag hat auch kein Endtag) und an das <img>-Tag mehrere Attribute vergeben.

Dabei legt "border" die Stärke der Umrandung des Bildes fest, "alt" den beschreibenden Text, "src" den Pfad zur Bildquelle und "height" die Höhe des Bildes in Pixel. Da wir den Bild-Tag innerhalb des Link-Tags geschrieben haben, funktioniert das Bild jetzt wie ein Link.

Da wir nun schon einige Tags kennen gelernt haben, hier eine Übersicht, über die wichtigsten:

Quellcode	Ergebnis	Beschreibung
HTML: Link mit Bild <a href="https://www.starcitizen-kantine.de">Zur Kantine</a>	Zur Kantine	So sieht ein Link aus.
HTML: Zeilenumbruch <br>		Zeilenumbruch
HTML: Durchgestrichen <del>Durchgestrichen</del>	Durchgestrichen	Der Text wird durchgestrichen
HTML: Kusiv <em>Kusiv</em>	Kusiv	Der Text wird kusiv
HTML: Bild <img border="0" alt="Kantinen-Logo" src="https://www.starcitizen-kantine.de/images/style-9/pageLogo-4602c4f3.png" height="100px">		So wird ein Bild eingebunden
HTML: Überschrift <h2>Überschrift 1</h2> <h3>Überschrift 2</h3> <h4>Überschrift 3</h4> <h5>Überschrift 4</h5>	Überschrift 1 Überschrift 2 Überschrift 3 Überschrift 4	Bei Überschriften gibt es verschiedene Ebenen (<h1> bis <h6>). <br><u>Hinweis:</u> Da für die Webseite an sich <h1> vorbehalten ist, beginnen im Texteditor die Überschriften bei 1, im Quellcode werden sie aber als <h2> geführt.
HTML: Nummerierte Liste <ol> <li>Listenelement</li> <li>Listenelement</li> </ol>	Listenelement Listenelement	In einer nummerierten Liste muss die Nummer nicht angegeben werden. Sie wird automatisch mit jeder neuen Zeile generiert.
HTML: Paragraf <p>Paragraf</p>	Paragraf	In einen Paragrafen wird in der Regel ein zusammenhängender Fließtext geschrieben.
HTML: Langer Code <pre data-file="Titel" data-highlighter="html" data-line="1">Langer Code</pre>	HTML: Titel Langer Code	Über das <pre>-Tag wird die sog. Codebox festgelegt. In unserem Beispiel hat diese noch folgende Attribute erhalten: Attribut Wert data-file Titel data-highlighter html data-line 1
HTML: Abschnitt <span style="color:blue">Abschnitt</span>	Abschnitt	Abschnitte werden häufig eingesetzt um bestimmte Designs festzulegen. Dazu dient das Attribut "style". In unserem Beispiel wird festgelegt, dass der Text Blau sein soll.
HTML: Fett <strong>Fett</strong>	Fett	Der Text wird fett
HTML: Tiefgestellt <sub>Tiefgestellt</sub>	Tiefgestellt	Der Text wird tiefgestellt
HTML: Hochgestellt <sup>Hochgestellt</sup>	Hochgestellt	Der Text wird hochgestellt
HTML: Tabelle <table> <thead> <tr> <th>Spaltenüberschrift 1</th> <th>Spaltenüberschrift 2</th> </tr> </thead> <tbody> <tr> <td>Zeile 1 Spalte 1</td> <td>Zeile 1 Spalte 2</td> </tr> <tr> <td>Zeile 2 Spalte 1</td> <td>Zeile 2 Spalte 2</td> </tr> <tr> <td>Zeile 3 Spalte 1</td> <td>Zeile 3 Spalte 2</td> </tr> </tbody> <tfoot> <tr> <td>Letzte Zeile 1</td> <td>Letzte Zeile 2</td> </tr> </tfoot> </table> Alles anzeigen	Spaltenüberschrift 1 Spaltenüberschrift 2 Letzte Zeile 1 Letzte Zeile 2 Zeile 1 Spalte 1 Zeile 1 Spalte 2 Zeile 2 Spalte 1 Zeile 2 Spalte 2 Zeile 3 Spalte 1 Zeile 3 Spalte 2	Bei einer Tabelle fällt sofort auf, dass dort mehrere Elemente ineinander verschachtelt sind. Tagname Beschreibung <table> Legt eine Tabelle fest <thead> Legt die Kopfzeile fest (optional) <tr> Legt eine Zeile fest (kommt immer vor der Zelle) <th> Legt eine Zelle in der Kopfzeile fest <tbody> Legt den Tabellenkörper fest <td> Legt eine Zelle fest <tfoot> Legt die Fußzeile fest (optional) Bei verschachtelten Elementen wie einer Tabelle ist besonders wichtig den Überblick über die Anfangs- und Endtags zu behalten. (Merke: So <tr><td></td></tr> und nicht so <td><tr></tr></td> oder so <tr><td></tr></td>)
HTML: Unterstrichen <u>Unterstrichen</u>	Unterstrichen	Der Text wird unterstrichen
HTML: Ungeordnete Liste <ul><li>Listenelement</li><li>Listenelement</li></ul>	Listenelement Listenelement	In einer ungeordneten Liste wird automatisch ein Listenzeichen generiert.

Besondere Tags

Mit dem nun gewonnenen Wissen können wir uns jetzt ein Beispiel aus dem Lexikoneintrag zur Textformatierung anschauen:

<fa-icon>exclamation-triangle</fa-icon> Achtung gleich kommt ein Spoiler:<br>
<woltlab-spoiler data-label="Eigener Spoilertitel">
Ich bin ein Spoiler
</woltlab-spoiler>
Du kannst deinem Spoiler eine eigene Beschriftung geben. Diese steht dann auf dem Button zur Anzeige des Spoilers.<br>
Klick dazu im Texteditor einfach auf den Titel des Spoilers.<br>

In diesem Beispiel findest du neben mehreren <br>-Tags auch die Tags <woltlab-spoiler> und <fa-icon>.

Diese haben wir noch nicht kennengelernt. Das liegt daran, dass es sich dabei um keine Standard-Tags handelt, sondern um extra für unsere Seite erstellten Tags.

<woltlab-spoiler>-Tag besitzt das Attribut "data-label". Dort ist der Beschriftung für den Spoiler hinterlegt.

Über das <fa-icon>-Tag kann ein in Icon aus der Font Awesome Datenbank eingefügt werden also z.B. <fa-icon>exclamation-triangle</fa-icon> für ein 

Wenn du mehr über das Thema HTML erfahren möchtest besuche die Seiten von w3schools.com oder selfHTML.org

CSS

Über CSS wird der Stil der Webseite festgelegt und arbeitet eng mit den Tags im HTML-Code zusammen.

h2 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

table {
  background-color: lightblue;
}

.text-center {
  text-align: center;
}

Möchte man für einzelne Elemente den Stil festlegen, so kann man diesen direkt als style-Attribut in das Anfangstag schreiben.

<h2 style="color:blue;text-align:center;">Überschrift 1</h2>
<span style="color:red">Bereich im Fließtext</span>

Nachdem wir bereits einige der Stilelemente wie color, background-color oder text-align kennengelernt haben hier eine Übersicht über die für den Texteditor relevanten:

<span style="color:#800000">Schriftfarbe</span>

<span style="font-family: Times New Roman, Times, serif">Schriftart</span>

<span style="font-size: 18pt">Schriftgröße</span>

<td class="text-center">Textausrichtung</td>

Wenn du mehr über das Thema CSS erfahren möchtest besuche die Seiten von w3schools.com oder selfHTML.org

Spezielle Formatierungen

Tabs

Ähnlich einer Tabelle in der Code-Ansicht können auch Tabs in der Standardansicht erstellt werden. Der Tab Hat dabei einen Titel und ihm kann ein Font Awesome Icon zugewiesen werden.

Innerhalb eines Tabs wird derzeit nur Textinhalt ODER Subtabs unterstützt. Beides gleichzeitig ist also nicht möglich.
Die Syntax hierzu sieht wie folgt aus:

[tabmenu]
    [tab='Tab 1','fa-bullhorn']
        Textinhalt Tab 1
    [/tab]
    [tab='Tab 2','fa-user']
        [subtab='Subtab 21','fa-calendar']Textinhalt Subtab 21[/subtab]
        [subtab='Subtab 22','fa-music']Textinhalt Subtab 22[/subtab]
    [/tab]

    [tab='Tab 3','fa-user-plus']
        [subtab='Subtab 31','fa-calendar-plus-o']Textinhalt Subtab 31[/subtab]
        [subtab='Subtab 32','fa-cart-plus']Textinhalt Subtab 32[/subtab]
    [/tab]
[/tabmenu]

Der Texteditor unterstützt folgende Shortcuts:

• Strg+Shift+M: Entfernen der Formatierung des selektierten Textes.
• Strg+B: Fettdruck
• Strg+I: Kursiv
• Strg+U: Unterstrichen
• Strg+H: Hochgestellt
• Strg+L: Tiefergestellt
• Strg+K: Verlinken
• Strg+Shift+7: Nummerierte Liste
• Strg+Shift+8: Unsortierte Liste