Beiträge formatieren - Wie funktioniert das überhaupt?
Da es öfter vorkam, dass mich Nutzer auf die Formatierung von Beiträge ansprachen, dachte ich mir, ich verfasse eine grobe Anleitung zu diesem langen Thema.
Nicht selten kam es vor, dass ich Beiträge oder gar Signaturen entdecke, in der die Möglichkeiten so ungeschult genutzt wurden, dass ich sie bereinigen musste.
Ich strebe mit dieser Anleitung keine Vollständigkeit an, denn dafür gibt es viel zu viele Kleinigkeiten, die ich dafür berücksichtigen müsste und vergessen würde.
Der Beitrag soll als Einweisung in die Prinzipien des Editors im Forum dienen, um Nutzern, die sich um einen ordentlichen Beitrag bemühen, eine Hilfe zu bieten.
Der wichtigste Grundsatz
Jeder, der sich ein wenig mit einer Programmiersprache im Rahmen seiner Frei- oder gar Schulzeit beschäftigt hat, wird wissen, dass es viele Wege zum Ziel gibt.
Inwiefern das relevant für das Forum ist? Ganz einfach. Ob euer Text eine blaue oder rote Farbe trägt, entscheidet ein HTML-Tag, dass im Editor eingefügt wurde.
Solltet ihr euch jetzt wundern:
„Was zum Teufel sind HTML-Tags, und warum kenne ich sie nicht, wenn ich schonmal den Text in meinem Forum eingefärbt habe?“ - Hier kommt die Antwort:
Jeder Knopf, den ihr im Editor drücken könnt, bewerkstelligt nichts anderes, als vordefinierte HTML-Tags einzufügen, um Unerfahrenen die Möglichkeit zu bieten.
Das Problem, was der Editor dabei aufwirft: Die verfügbaren Funktionen sind nicht vollständig und sogar die vorhandenen Funktionen sind nicht perfekt.
Ein Beispielszenario
Vielen ist es bestimmt schon einmal passiert, dass sie einen Text mittels der integrierten Funktion in der Kopfleiste falsch eingefärbt haben.
Ein menschlicher Fehler, der leicht zu beheben ist, einfach die richtige Farbe auswählen und noch mal drücken, denken sich die meisten bestimmt.
Leider ist es genau dieser Umgang mit den Funktionen, der dem Editor Probleme bei der Formatierung bereitet.
Mittels der Inline-Code Funktion werde ich hier darstellen, was sich aus dem oben beschriebenen Szenario ergibt.
(Das Szenario muss nicht in dieser Form auftreten, dennoch musste ich schon Signaturen davon bereinigen (60 Deklarationen~ 10 Worte Text),
vor allem dann, wenn Einstellungen in den Deklarationen kombiniert wurden, wie z.B. die gewählte Schriftgröße und die -farbe einzelner Texte.)
<span style="color:#ff8c00;"></span><span style="color:#0000ff;">Der gefärbte Text</span>Da ich in meiner Anleitung kein Grundverständnis von HTML voraussetzen möchte, werde ich den Quellcode „übersetzen“.
<span>Ist ein HTML-Element, das im Prinzip keine eigene Funktion hat, sondern einen Inhalt ummantelt, um diesen auswählbar zu machen.
Diese Auswahl kann genutzt werden, um den Text zu formatieren, die Färbung bewerkstelligt in diesem Fall die Deklaration style="color:#ff8c00;"
style="...;"ist dabei die grundlegende Funktion, um dem Element einen Stil zu geben. Was color:#ff8c00; dann noch tut, könnt ihr euch denken.
Bitte beachtet, dass jedes Element geschlossen sein muss, d.h. eine <span> mit </span> endet. Dies gilt für jedes Element, nicht aber für die Style-Deklaration.
Die Style-Deklaration ist immer Teil des Elements und wird in Anführungszeichen ("") gesetzt und innerhalb dieser Anführungszeichen mit einem Semikolon (;) beendet.
Was bringt uns das Ganze
Mit diesem Vorwissen können wir die Funktionen des Forums in ihrer Gänze nutzen, mit allen möglichen Farben und Formatierungen.
Das einzige, was ihr dafür kennen müsst, ist die „HTML-Aktivieren-Taste“ im Editor. Sie befindet sich in der Kopfleiste des Editors ganz links.
Durch Druck auf diese Taste werdet ihr den Text in Rohfassung sehen können, mit den jeweiligen Deklarationen, die ihr angegeben habt.
Solltet ihr das obige Szenario nachstellen, indem ihr zunächst einen Text orange und dann doch blau färbt, werdet ihr die Deklarationen sehen.
Ihr könnt diese in diesem Modus also kontrollieren, kopieren, einfügen und bearbeiten - und seid dabei nicht auf die Tasten des Editors angewiesen.
Das wirklich Wichtige aber ist, dass ihr jetzt die Grenzen der implementierten Funktionen des Editors überschreiten könnt, sofern ihr dies tun möchtet.
Ein möglicher Nutzen
Wie am Anfang erwähnt, könnte es vorgekommen sein, dass ihr über einen Beitrag gestolpert seid, dessen Formatierung ihr nicht nachvollziehen könnt.
Ein beliebtes Beispiel, das oft angesprochen wird, sind Farben in Beiträgen und den Wunsch, mehr von diesen einzufügen, da es ja „nur“ 40 davon gäbe.
Dies ist nicht der Fall!
Verfasst ihr einen Beitrag, färbt diesen und wechselt danach in den HTML-Modus, so könnt ihr jede Farbe verwenden, die euch in den Sinn kommt.
Wichtig ist hierbei, dass Farben im Editor nur über ihren HEX-Wert genutzt werden können, der, wie der Name andeutet, im Hexadezimal-System festgelegt ist.
Es gibt im Internet unzählige Webseiten, die einen Hex-Farbwähler oder „Colorpicker“ anbieten, bei welchem ihr eine Farbe auswählen und kopieren könnt.
Der HEX-Wert einer Farbe ist immer sechs- bzw. siebenstellig und besitzt eine Raute als erstes Zeichen. Die anderen Zeichen variieren von A-F und 1-6.
Eine kleine Anleitung zum Färben von Texten in jeder beliebigen Farbe:
- Auf diese Webseite navigieren und eine Farbe auswählen, den HEX-Wert kopieren.
- Optional: Bemerken, dass #a760e9 wirklich eine bemerkenswert schöne Farbe ist.
- Einen Beitrag verfassen und den zu färbenden Text mit der Maus markieren.
- Den Knopf „Schriftfarbe“ in der Kopfzeile drücken und irgendeine Farbe auswählen.
- In den HTML-Modus wechseln und die Deklaration identifizieren.
- Den vorhandenen HEX-Wert mit dem Gewünschten austauschen.
- Den HTML-Modus verlassen, den Beitrag abschicken und Likes erhalten.
Natürlich könnt ihr den Quellcode danach speichern und beim nächsten Mal ohne die anfallenden Schritte nutzen.
Bitte beachtet dabei jedoch, dass das Element immer mit der </span> - Deklaration geschlossen werden muss!
Schlusswort
Selbstverständlich werde ich in diesem Thema nicht jetzt und auch später nicht alle Funktionen der Knöpfe der Kopfleiste abhandeln.
Da alles übertragbar ist und jede Funktion gleichen Auflagen erliegt, kann man sich das Wissen leicht durch „Rumprobieren“ aneignen.
Der Knopf zur Funktion der Schriftgröße z. B. funktioniert absolut identisch zu den hier genannten Punkten des Schriftfarbe-Knopfes.
Sollten dennoch Fragen bestehen oder Inhalte, vor allem die der Anleitung für euch nicht reproduzierbar sein, meldet euch bitte in diesem Thema.