3.3 Texte mit dem Editor formatieren

[gesichtete Version][gesichtete Version]
(Änderung 437 von Claussen (Diskussion) rückgängig gemacht.)
Markierung: Rückgängigmachung
Keine Bearbeitungszusammenfassung
 
(106 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
Mit den Schaltschlächen des Untermenüs "'''Erweitert'''" können Sie Ihren Text formatieren. Die geläufigsten Funktionen stellen wir Ihnen an dieser Stelle kurz vor.  
Beim Bearbeiten Ihres Textes können Sie zwischen zwei verschiedenen Optionen wählen. Sie können entweder das Wiki-Format im Text selbst mit dem passenden "Code" anwenden oder die Symbolleiste des Editors verwenden. Die geläufigsten Funktionen stellen wir Ihnen an dieser Stelle kurz vor.  
<br>
== Wikitext-Format anwenden ==


<loop_figure id="5e8c6956129ef">
Hier erfahren Sie, wie Sie die verschiedenen Formate direkt in Ihrem Text anwenden können, wenn Sie mit den Schaltflächen des Editors nicht vertraut sind.<br>
<loop_title>Funktionen des Editors mit den Bearbeitungsoptionen "Erweitert"</loop_title>
<br>
[[file:editor_erweitert.png]]
====='''Fett-Formatierung'''=====
</loop_figure>
 
 
==Fett-/Kursiv-Formatierung==
'''Fett-Formatierung'''<br \>
Möchten Sie ein Wort oder einen Satz fett formatieren, markieren Sie den entsprechenden Bereich und klicken Sie auf den Button "Fett" des Editors.
 
'''Kursiv-Formatierung'''<br \>
Möchten Sie ein Wort oder einen Satz kursiv formatieren, markieren Sie den entsprechenden Bereich und klicken Sie auf den Button "Kursiv" des Editors.
 
<loop_figure id="5e8c6956129fa">
[[file:loop_seiteneditor_fett_kursiv_marked.png|700px]]
<loop_title>Text fett und kursiv formatiert.</loop_title>
<loop_description></loop_description>
</loop_figure>
 
Abschließend klicken Sie auf "Seite speichern" und sehen Ihren fett- bzw. kursiv-formatierten Text.
 
 
==Text hoch-/tiefstellen==
 
Mit dem Editor können Sie ebenso Text hoch- oder tiefstellen.
 
<loop_figure id="5e8c695612a06">
[[file:loop_seiteneditor_hoch_tief_marked.png]]
<loop_title>Text hochgestellt und tiefgestellt formatiert.</loop_title>
<loop_description> </loop_description>
</loop_figure>
 
Mit dem Wikitext im Bearbeitungsfeld ... ... legen Sie folgenden Text (nach "Seite speichern") auf der LOOP-Seite an:
 
<loop_figure id="5e8c695612a16">
[[file:loop_seiteneditor_hoch_tief_rendered.png]]
<loop_title>Gerendertes Ergebnis des hoch- und tiefgestellten Text aus obiger Abbildung.</loop_title>
</loop_figure>
 
 
==Text vergrößern/verkleinern==
 
Sie können Texte vergrößert oder verkleinert darstellen. Dazu markieren Sie die Passage und klicken auf die Schaltfläche "Groß" oder "Klein".
 
<loop_figure id="5e8c695612a6c">
[[file:loop_seiteneditor_groß_klein_marked.png|700px]]
<loop_title>Vergrößerter und verkleinerter Text mit Hilfe von Wikisyntax.</loop_title>
</loop_figure>
 
Sie können die Schaltflächen auch mehrfach auf einen Text anwenden. Auf der Seite sehen Sie die veränderte Größe im Verhältnis zur Schriftgröße ohne Veränderung durch den Editor ("Normale Schriftgröße").
 
 
==Einrückungen==


Um einen Text einzurücken, verwenden Sie die Schaltfläche "Einrücken". Sie können einen Zeile oder einen Abschnitt einrücken. Die Einrückung kann von Ihnen auch mit anderen Elementen kombinieren werden, z. B. mit Spiegelstrichen, um eine weitere Darstellungsform für Aufzählungen zu ermöglichen.
Um ein Wort oder einen Satz fett zu formatieren, schreiben Sie es zwischen 3 Apostrophen je Seite:


Eine Einrückung mit Spiegelstrichen ist für Einrückungen von Stichpunkten geeignet, nicht aber für Einrückungen von ganzen Sätzen und Abschnitten.
'''<code>'''fett formatiert'''</code>'''
<br>


<loop_figure id="5e8c695612a84">
====='''Kursiv-Formatierung'''=====
[[file:loop_seiteneditor_einrueckung_marked.png|700px]]
<loop_title>Einrückung von Text und Stichpunkten.</loop_title>
</loop_figure>


Möchten Sie ein Wort oder einen Satz kursiv formatieren, schreiben Sie es zwischen 2 Apostrophe je Seite:


==Umbrüche==
''<code>''kursiv formatiert''</code>''
<br>


Um einen manuellen Umbruch einzufügen, nutzen Sie den Button "Zeilenumbruch erzwingen". Auf der LOOP-Seite haben Sie den folgenden Text in die nächste Zeile geschrieben.
====='''Texteinzug'''=====


<loop_figure id="5e8c695612a9b">
Um den Text am Anfang einzurücken wird der Doppelpunkt ":" davor gesetzt:
[[file:loop_seiteneditor_zeilenumbruch_marked.png]]
:Texteinzug
<loop_title>Ein erzwungener Zeilenumbruch</loop_title>
<br>
</loop_figure>




==Sonderzeichen==
=====''' Text vergrößern/verkleinern '''=====


Um lateinische oder griechische Sonderzeichen einzufügen verwenden Sie das Untermenü "Sonderzeichen" im Seiteneditor. Klicken Sie auf das gewünschte Symbol/Sonderzeichen und es wird an der Stelle des Cursors eingefügt.
Sie können Texte vergrößert oder verkleinert darstellen. Dazu schreiben Sie die Passage zwischen den Symbolen größer als (>) und kleiner als (<) mit dem Schlüsselwort "big" oder "small".


<loop_figure id="5e8c695612ab6">
<loop_area type="notice">Sie können die Schaltflächen auch mehrfach auf einen Text anwenden.</loop_area>
[[file:loop_seiteneditor_sonderzeichen_short.png|700px]]
<loop_title>Sonderzeichen </loop_title>
</loop_figure>


Auf der Seite sehen Sie die veränderte Größe im Verhältnis zur Schriftgröße ohne Veränderung durch den Editor ("Normale Schriftgröße").


==Listen==
<loop_area type="example">
===Aufgezählte Liste===
<code>normal → <big>groß</big> → <big><big>größer</big></big><br></code>


Möchten Sie eine aufgezählte Liste (Bullets) erstellen, klicken Sie im Editor auf den Button für "Aufgezählte Liste".
<code>normal → <small>klein</small> → <small><small>kleiner</small></small></code>
</loop_area>
<br>
Sie bekommen die folgenden Ergebnisse:
<br>


<loop_figure id="5e8c695612ad3">
normal → <big>groß</big> → <big><big>größer</big></big><br>
[[file:loop_seiteneditor_liste_aufzaehlung1_marked.png]]
<loop_title>Einfügen eines Bullets mittels entsprechender Schaltfläche.</loop_title>
</loop_figure>


Im Bearbeitungsfeld erscheint der Wikitext für den Listeneintrag einer aufgezählten Liste.
normal → <small>klein</small> → <small><small>kleiner</small></small>


Klicken Sie mehrfach auf das Symbol, erscheinen Listeneinträge untereinander:
<br>
Geben Sie Ihre Listeneinträge ein.


Speichern Sie die Seite und sehen Sie sich die gerenderten Listeneinträge an.
====='''Text hoch-/tiefstellen'''=====


====Aufgezählte Liste mit mehreren Ebenen====
Schreiben Sie das Wort oder den Text zwischen den Symbolen größer als (>) und kleiner als (<) mit dem Schlüsselwort "sup" oder "sub", um es hoch- oder tiefzustellen.


Sie können ihrer aufgezählten Liste mehrere Ebenen hinzufügen indem Sie * mehrfach vor Ihren Listeneintrag setzen. Einträge mit gleicher Anzahl von * befinden sich auf einer hierarchischen Ebene. Nach dem Speichern ist die Liste in mehreren Ebenen unterteilt.
<loop_area type="example">
<code>Beispiel<sup>Hochgestellt formatiert</sup></code>


Bsp.:
<code>Beispiel<sub>Tiefgestellt formatiert</sub></code>
Gliederung
</loop_area>
*Ablauf eines Audits
<br>
**Auswahl der Auditoren
Sie bekommen die folgenden Ergebnisse:
**Audithäufigkeit
**Auditprogramm und Auditziele
**Audittätigkeiten
***Vorbereitung auf die Audittätigkeiten vor Ort
***Audittätigkeiten vor Ort
***Auditbericht


<loop_figure id="5e8c695612af2">
<br>
[[file:loop_seiteneditor_liste_aufzaehlung2_rendered.png]]
Beipiel<sup>Hochgestellt formatiert</sup>
<loop_title>Hierarchische Unterteilung einer aufgezählten Liste.</loop_title>
</loop_figure>


===Nummerierte Liste===
Beispiel<sub>Tiefgestellt formatiert</sub>


Möchten Sie eine nummerierte Liste erstellen, klicken Sie im Editor auf "Nummerierte Liste". Im Wikitext der Seite sehen Sie die Einträge für die nummerierte Liste. Auch im Fall einer nummerierten Liste können Sie mehrere  Ebenen anlegen.
<br>


Zusätzlich lässt sich eine Aufzählung auflockern, indem Sie manuell Zeilenumbrüche hinter dem Listeneintrag einfügen und so den Abstand der durchnummerierten Einträge erhöhen.
===== '''Umbrüche''' =====
 
<loop_figure id="5e8c695612b13">
[[file:loop_seiteneditor_liste_nummeriert_marked.png]]
<loop_title>Nummerierte Liste mit mehreren Ebenen und manuellen Zeilenumbrüchen.</loop_title>
</loop_figure>
 
Das gerenderte Ergebnis der obigen Wikitextes sieht dann wie folgt aus:
 
<loop_figure id="5e8c695612b3d">
[[file:loop_seiteneditor_liste_nummeriert_rendered.png]]
<loop_title>Ergebnis der obigen nummerierten Liste nach erfolgreichen Speichern.</loop_title>
</loop_figure>


Um einen Umbruch einzufügen, nutzen Sie das reservierte Zeichen:
<code><br></code>


<loop_area type="notice">Schreiben Sie die Listeneinträge für die nummerierte Liste direkt untereinander und lassen Sie keine Leerzeilen, da sonst die Nummerierung nicht fortgeführt wird. Wollen Sie die nummerierte Liste auflockern fügen Sie stattdessen manuelle Zeilenumbrüche ein.</loop_area>
Der Text nach diesem Symbol wird in der nächsten Textzeile angezeigt.


==Textfarbe==
<loop_area type="notice">Sie können es mehrfach verwenden, um weitere Absätze einzufügen.</loop_area>
<br>


Möchten Sie Ihren Text farblich verändern, nutzen Sie das Untermenü "LOOP" des Seiteneditors. Hier finden Sie den Button <big>"T"</big> welcher einen HTML-Tag in ihren Text einfügt. Innerhalb dieses Tags werden die Wörter mit der Farbe angezeigt, welche sie zuvor als HTML-Farbcode wie folgt angegeben haben.
===== '''Textfarbe''' =====


Tag: &lt;span style="color:#ff0000;">Beispiel in roter Farbe.</span>
Wenn Sie die Farbe Ihres Textes ändern möchten, müssen Sie ihn wie gezeigt aufschreiben:  


Ergebnis: <span style="color:#ff0000;">Beispiel in roter Farbe.</span>
<code><span style="color:#ff0000;">Beispieltext</span>,</code>  


<loop_figure id="5e8c695612b65">
wodurch ein HTML-Tag in Ihren Text eingefügt wird. Innerhalb dieses Tags werden die Wörter mit der Farbe dargestellt, die Sie zuvor gemäß der HTML-Farbtabelle angegeben haben. Die Farbe muss in hexadezimaler Form spezifiziert werden.
[[file:loop_seiteneditor_textfarbe_marked.png|700px]]
<loop_title>HTML-Tag für die Textfärbung in rot.</loop_title>
</loop_figure>


Ergebnisse für Rotfärbung: <span style="color:#ff0000;">Beispieltext</span>


'''HTML-Farbcode:'''<br>
'''HTML-Farbcode:'''<br>
Jeder HTML Code enthält das Symbol „#” und 6 Buchstaben oder Zahlen. Diese Zahlen sind im hexadezimal numerischen System (0123456789abcdef). Zum Beispiel „ff” in Hexadezimal steht für die Zahl 255 im Dezimalen.  
Jeder HTML Code enthält das Symbol „#” und 6 Buchstaben oder Zahlen. Diese Zahlen sind im hexadezimal numerischen System (0123456789abcdef). Zum Beispiel steht „ff” in Hexadezimal für die Zahl 255 im Dezimalen.  


'''Bedeutung der Symbole:'''<br \>  
'''Bedeutung der Symbole:'''<br \>  
Zeile 191: Zeile 122:
|}
|}
</loop_table>
</loop_table>
<br>
===== '''Hintergrundfarbe''' =====
Möchten Sie den Hintergrund eines Textes farblich hervorheben, brauchen Sie die folgende Codezeile zu befolgen:
<code><span style="background-color:#ff0000;">Beispieltext</span></code>


Mit ihr fügen Sie einen HTML-Tag ein, der ebenso wie der Tag für Textfarbe mittels HTML-Farbcode funktioniert.


==Hintergrundfarbe==
Ergebnis: <span style="background-color:#ff0000;">Beispieltext</span>


Möchten Sie den Hintergrund eines Textes farblich hervorheben, nutzen Sie die Schaltfläche [[file:loop_seiteneditor_hintergrundfarbe_icon.png|30px]]. Mit ihr fügen Sie einen HTML-Tag ein, der ebenso wie der Tag für Textfarbe mittels HTML-Farbcode funktioniert.
Die Kombination von farbigem Hintergrund und anderer Textfarbe ist ebenso möglich. Dafür hier ein kleines Beispiel:


<loop_figure id="5e8c695612bcc">
<loop_area type="example">
[[file:loop_seiteneditor_hintergrundfarbe_marked.png|700px]]
<code><span style="background-color:#ff0000;color:#ffffff">Beispieltext</span></code>
<loop_title>HTML-Tag für roten Farbhintergrund für einen Beispieltext.</loop_title>
</loop_area>
 
Ergebnis: <span style="background-color:#ff0000;color:#ffffff">Beispieltext</span>
 
<br>
 
== Registerkarte Wikitext ==
 
Der Editor stellt Ihnen die Werkzeuge zur Verfügung, um Ihren Text zu editieren und zu formatieren.
 
Mit den Schaltflächen des Untermenüs "'''Erweitert'''" können Sie Ihren Text formatieren.
<br>
<loop_figure title="Der Seiteneditor und seine Grundfunktionen" id="5e8c693ea18fb">
[[file:bearbeitungsfunktion_des_gra_de.png|700px]]
</loop_figure>
</loop_figure>
<br>
Um Ihrem Text ein bestimmtes Format zu geben, markieren Sie die zu formatierende Passage und klicken Sie auf die zugeordnete Schaltfläche des gewünschten Formats.


Tag: &lt;span style="background-color:#ff0000;">Beispiel mit rotem Hintergrund</span>
<br>
=====''' Sonderzeichen '''=====


Ergebnis: <span style="background-color:#ff0000;">Beispiel mit rotem Hintergrund</span>
Um lateinische oder griechische Sonderzeichen einzufügen, verwenden Sie das Untermenü "Sonderzeichen" im Seiteneditor. Klicken Sie auf das gewünschte Symbol/Sonderzeichen, damit es an der aktuellen Position des Cursors eingefügt wird.


Die Kombination von farbigen Hintergrund und anderer Textfarbe ist ebenso möglich. Dafür hier ein kleines Beispiel:
<loop_figure title="Sonderzeichen" id="60265ce0dd5b6">
 
[[file:sondernzeichnen_des_gra_de.png|700px]]
Tag: &lt;span style="background-color:#ff0000;color:#ffffff">Hallo</span>
</loop_figure>


Ergebnis: <span style="background-color:#ff0000;color:#ffffff">Hallo</span>
<br>

Aktuelle Version vom 13. März 2024, 12:42 Uhr

Beim Bearbeiten Ihres Textes können Sie zwischen zwei verschiedenen Optionen wählen. Sie können entweder das Wiki-Format im Text selbst mit dem passenden "Code" anwenden oder die Symbolleiste des Editors verwenden. Die geläufigsten Funktionen stellen wir Ihnen an dieser Stelle kurz vor.

Wikitext-Format anwenden

Hier erfahren Sie, wie Sie die verschiedenen Formate direkt in Ihrem Text anwenden können, wenn Sie mit den Schaltflächen des Editors nicht vertraut sind.

Fett-Formatierung

Um ein Wort oder einen Satz fett zu formatieren, schreiben Sie es zwischen 3 Apostrophen je Seite:

'''fett formatiert'''

Kursiv-Formatierung

Möchten Sie ein Wort oder einen Satz kursiv formatieren, schreiben Sie es zwischen 2 Apostrophe je Seite:

''kursiv formatiert''

Texteinzug

Um den Text am Anfang einzurücken wird der Doppelpunkt ":" davor gesetzt:

Texteinzug



Text vergrößern/verkleinern

Sie können Texte vergrößert oder verkleinert darstellen. Dazu schreiben Sie die Passage zwischen den Symbolen größer als (>) und kleiner als (<) mit dem Schlüsselwort "big" oder "small".

Hinweis

Sie können die Schaltflächen auch mehrfach auf einen Text anwenden.

Auf der Seite sehen Sie die veränderte Größe im Verhältnis zur Schriftgröße ohne Veränderung durch den Editor ("Normale Schriftgröße").

Beispiel

normal → <big>groß</big> → <big><big>größer</big></big><br>

normal → <small>klein</small> → <small><small>kleiner</small></small>


Sie bekommen die folgenden Ergebnisse:

normal → groß → größer

normal → klein → kleiner


Text hoch-/tiefstellen

Schreiben Sie das Wort oder den Text zwischen den Symbolen größer als (>) und kleiner als (<) mit dem Schlüsselwort "sup" oder "sub", um es hoch- oder tiefzustellen.

Beispiel

Beispiel<sup>Hochgestellt formatiert</sup>

Beispiel<sub>Tiefgestellt formatiert</sub>


Sie bekommen die folgenden Ergebnisse:


BeipielHochgestellt formatiert

BeispielTiefgestellt formatiert


Umbrüche

Um einen Umbruch einzufügen, nutzen Sie das reservierte Zeichen: <br>

Der Text nach diesem Symbol wird in der nächsten Textzeile angezeigt.

Hinweis

Sie können es mehrfach verwenden, um weitere Absätze einzufügen.


Textfarbe

Wenn Sie die Farbe Ihres Textes ändern möchten, müssen Sie ihn wie gezeigt aufschreiben:

<span style="color:#ff0000;">Beispieltext</span>,

wodurch ein HTML-Tag in Ihren Text eingefügt wird. Innerhalb dieses Tags werden die Wörter mit der Farbe dargestellt, die Sie zuvor gemäß der HTML-Farbtabelle angegeben haben. Die Farbe muss in hexadezimaler Form spezifiziert werden.

Ergebnisse für Rotfärbung: Beispieltext

HTML-Farbcode:
Jeder HTML Code enthält das Symbol „#” und 6 Buchstaben oder Zahlen. Diese Zahlen sind im hexadezimal numerischen System (0123456789abcdef). Zum Beispiel steht „ff” in Hexadezimal für die Zahl 255 im Dezimalen.

Bedeutung der Symbole:
Die zwei ersten Symbole im HTML-Farbecode stehen für die Intensität der roten Farbe. Für den verwendeten Farbraum ist 00 am wenigsten und ff am meisten intensiv. Das dritte und vierte stehen für die Intensität der grünen Farbe und das fünfte und sechste Symbol stehen für die Intensität von blau (#RRGGBB). Mit der kombinierten Intensität von rot, grün und blau können wir fast jede Farbe erzeugen. In der unteren Tabelle haben Sie eine kleine Übersicht von gebräuchlichen Farben und den dazugehörigen HTML-Farbcodes.

Farbname HTML-Farbcode Beispiel
weiß #ffffff Beispiel
gelb #ffff00 Beispiel
orange #ff4500 Beispiel
pink #ffc0cb Beispiel
rot #ff0000 Beispiel
lila #800080 Beispiel
grün #00ff00 Beispiel
blau #0000ff Beispiel
braun #8b4513 Beispiel
grau #c0c0c0 Beispiel
schwarz #000000 Beispiel
 Tab. 1: Gebräuchliche HTML-Farbcodes


Hintergrundfarbe

Möchten Sie den Hintergrund eines Textes farblich hervorheben, brauchen Sie die folgende Codezeile zu befolgen:

<span style="background-color:#ff0000;">Beispieltext</span>

Mit ihr fügen Sie einen HTML-Tag ein, der ebenso wie der Tag für Textfarbe mittels HTML-Farbcode funktioniert.

Ergebnis: Beispieltext

Die Kombination von farbigem Hintergrund und anderer Textfarbe ist ebenso möglich. Dafür hier ein kleines Beispiel:

Beispiel

<span style="background-color:#ff0000;color:#ffffff">Beispieltext</span>

Ergebnis: Beispieltext


Registerkarte Wikitext

Der Editor stellt Ihnen die Werkzeuge zur Verfügung, um Ihren Text zu editieren und zu formatieren.

Mit den Schaltflächen des Untermenüs "Erweitert" können Sie Ihren Text formatieren.

Bearbeitungsfunktion des gra de.png

 Abb. 20: Der Seiteneditor und seine Grundfunktionen


Um Ihrem Text ein bestimmtes Format zu geben, markieren Sie die zu formatierende Passage und klicken Sie auf die zugeordnete Schaltfläche des gewünschten Formats.


Sonderzeichen

Um lateinische oder griechische Sonderzeichen einzufügen, verwenden Sie das Untermenü "Sonderzeichen" im Seiteneditor. Klicken Sie auf das gewünschte Symbol/Sonderzeichen, damit es an der aktuellen Position des Cursors eingefügt wird.

Sondernzeichnen des gra de.png

 Abb. 21: Sonderzeichen


Abgerufen von „https://loop.eduloop.de/mediawiki/index.php?title=Texte_mit_dem_Editor_formatieren&oldid=1556“