Texte kommen in Moodle an vielen Stellen vor. Es gibt textbasierte Kursinhalte, wie
Abschnittsbeschreibungen,
(eingeklappte) Textfelder,
Textseiten und
Bücher,
außerdem - innerhalb der Kursbestandteile -
Beschreibungen von Aktivitäten und Materialien,
Forenbeiträge,
Texteingaben in Aufgaben, Fragebögen und Wikis
u.v.m.
Für alle diese Texte stehen Texteditoren zur Texteingabe zur Verfügung. Sowohl die textbasierten Inhalte als auch die Editoren werden im Folgenden vorgestellt und erläutert:
Dies ist die Abschnittsbeschreibung. Sie steht in jedem Themen- oder Wochenabschnitt direkt unter dem Abschnittsnamen zur Verfügung und ist für eine kurze Einführung in das Thema des jeweiligen Abschnitts gedacht.
Die Bearbeitung erfolgt mittels des Bearbeitungsmenüs des entspr. Abschnitts, dass sie - wenn der Bearbeitungsmodus eingeschaltet ist - oben rechts in jedem Abschnitt hinter den drei Punkten finden.
Unter "Einstellungen bearbeiten" findet man die Möglichkeit,
den Abschnittsnamen zu ändern (was auch mit dem "Stift"-Symbol direkt auf der Kursseite funktioniert) und
die Abschnittsbeschreibung einzugeben.
Textfeld in der Materialauswahl
2. Text- und Medienfeld
Der Text, den Sie gerade lesen, steht in einem Text- und Medienfeld. Das sind Textfelder, die - wie Aktivitäten und andere Materialien auch - auf der Kursseite frei platziert werden können.
Im Gegensatz zu den Beschreibungs-Textfeldern, die z.B. in jedem Themen- oder Wochenabschnitt nur ganz oberen verfügbar sind (s.o.), können Textfelder auch zwischen den anderen Kursbestandteilen platziert werden, z.B. zwischen zwei Dokumenten innerhalb eines Abschnitts.
Texte können auf viele Weisen formatiert werden (s. Abschnitte zu den entsprechenden Texteditoren), außerdem Bilder, Videos und mehr (daher auch: "Medienfeld" 😉) beinhalten.
Eingeklapptes Text- feld in der Material- auswahl
3. Eingeklappte Textfelder
Eingeklappte Textfelder - wie das unter diesem Text - sind ebenfalls "Text- und Medienfelder" (s.o.). Einziger Unterschied: Sie sind eingeklappt und nehmen so viel weniger Platz weg. Damit sind die gut für z.B. Exkurse oder weiterführende Infos geeignet, oder um lange und textlastige Kurse optisch zu verkürzen.
Mit Klick auf den Titel lässt sich der Inhalt ein- und ausblenden. Es entspricht etwa der HTML-Elemente <details> und <summary> (Info), die Darstellung variiert allerdings ein wenig.
Außerdem können Nummerierungen im Titel angezeigt werden, um die eingeklappten Textfelder zu strukturieren.
Beispiel: Eingeklapptes Textfeld
Dies ist der Inhalt des eingeklappten Textfeldes. Er wird erst sichtbar, wenn ich auf den Titel geklickt und den Inhalt ausgeklappt habe.
Die Nummerierungs- und Farbeinstellungen bestehen aus Schrift- und Hintergrundfarbe sowie des Numemrierungswertes:
Einstellungen zur Nummerierung, hier ohne FarbangabeErgebnis der obigen EinstellungenEinstellungen zur Nummerierung, diesmal mit FarbangabeErgebnis der obigen Einstellungen
Buch und Textseite in der Materialauswahl
4. Textbasierte Materialien
Hier sind vor allem die Textseite (öffnet als eigene Seite) und das Buch (Textsammlung mit Kapitelstruktur) zu nennen.
Neben oben genannten von Kursbestandteilen Texten begegnen Ihnen auf Moodle an unzähligen weiteren Stellen Texteingabeoptionen, u.a. die Profilbeschreibung, die Beschreibungen von Aktivitäten und Materialien, die Kursbeschreibungen, Forenbeiträge, Wikieinträge, bei Texteingaben in Aufgaben, bei Freitextaufgaben in Tests, beim Anlegen von Testfragen, in Feedback- oder Befragungsaktivitäten u.v.m.
Die allermeisten Textfelder bieten über Texteditoren vielfältige Bearbeitungs- und Formatierungsmöglichkeiten an.
Nachdem in den alten Moodle-Versionen (bis v.2.6) der Texteditor "TinyMCE" (im Folgenden oft kurz "Tiny") - wie in vielen anderen Content-Management-Systemen - der Standard-Editor war, wurde mit Moodle v.2.7 der Editor "Atto" eingeführt.
Während Atto immer weiter entwickelt wurde, ist Tiny zwar mit den steigenden Moodle-Versionen "mitgeschleppt" worden, veraltete aber langsam vor sich hin. Es dauerte bis zur Moodle-Version 4.1, bis eine aktualisierte Tiny-Version in Moodle integriert wurde, seit Moodle 4.5 ist Tiny sogar der neue Standardeditor.
Alle Benutzenden können selber festlegen, welchen Editor sie standardmäßig benutzen möchten. Dazu (wenn eingeloggt) https://moodle.thga.de/user/editor.php aufrufen bzw. über das > Benutzendenmenü oben rechts > Einstellungen > Texteditor zur Einstellungsseite navigieren und dort
Editor Atto
Editor TinyMCE oder
Standard (=TinyMCE)
wählen und "Änderungen speichern".
Da in unserer Moodle-Instanz diverse Anpassungen an dem Funktionsumfang von Atto vorgenommen wurden (Gestaltungsvorlagen, Templates, Medienintegration, u.v.m., s.u.), bin ich ein wenig skeptisch ob des erneut anstehenden Editorwechsels und werde versuchen, beide Editoren parallel mit halbwegs vergleichbarem Funktionsumfang bereit zu halten. Denn auch wenn Tiny der neue Standard ist, kann Atto ggf. als Zusatzplugin weitergeführt werden.
Jeder Editor hat seine Vor- und Nachteile: Während Tiny deutlich standardkonformeres HTML erzeugt und z.B. für Tabellenformatierungen viel mehr Werkzeuge bereit hält, ist er auch etwas unübersichtlich wg. der zusätzlichen Menüzeile und der Kontextmenüs. Atto ist deutlich handlicher und meiner bescheidenen Meinung nach einfacher in der Bedienung.
Beide werden im Folgenden mit ihrem jew. Funktionsumfang ausgiebig erläutert. Hier erst einmal ein Funktionsvergleich:
Vergleich des Funktionsumfangs
Ich versuche, beide Texteditoren auf vergleichbarem Stand zu halten, allerdings gibt es bereits jetzt ein paar Unterschiede. Und es ist zu erwarten, dass weitere dazu kommen: Da Atto nur noch als Zusatzplugin gepflegt wird und die Atto-Plugins - also die Plugins des Plugins 🤯 - nach und nach ggf. nicht mehr weiter entwickelt werden, kann es früher oder später zu so gravierenden Funktionsabweichungen kommen, dass wir den "neuen" Standardeditor Tiny als einzigen Editor weiter führen.
Der Texteditor Atto war in den späten 2.x und allen 3.x Versionen von Moodle der Standard-Editor. Im Laufe der 4.x-Versionen wurde er als Standardeditor durch die neue Version des Editors Tiny abgelöst, blieb aber als Zusatzplugin erhalten.
Da Atto in den vielen Versionen immer weiter angepasst und mit Funktionen und Plugins aufgeladen wurde, ist er momentan immer noch der funktionalste und umfangreichste Texteditor in unserem Moodle.
Und so sieht er momentan aus:
Die Erläuterungen zu der Nummerierung, die wichtigsten Tastaturbefehle und das "Cheat Sheet" zum Ausdrucken oder Nachschlagen gibt es hier:
Welcher Button ist wofür?
Zweite Buttonzeile ein-/ausblenden
Absatzformate
Gestaltungsvorlagen
Templates
Fettschrift
Kursivschrift
Schriftfarbe
Hintergrundfarbe
ungeordnete Liste (Spiegelstriche bzw. Bulletpoints)
geordnete Liste (nummeriert)
Word-Import
Bild hinzufügen
Video oder Audio hinzufügen
(Mit diesem Textfeld verknüpfte) Dateien verwalten
Audio aufnehmen
Video aufnehmen
H5P-Inhalt einfügen
Hyperlink hinzufügen
Hyperlink löschen
Automatische Verlinkung unterdrücken
Unterstreichen
Durchstreichen
Tiefstellen
Hochstellen
Text (oder Objekt) linksbündig ausrichten
Text (oder Objekt) zentrieren
Text (oder Objekt) rechtsbündig ausrichten
Text- (oder Objekt-) Einrückung verringern
Text- (oder Objekt-) Einrückung vergrößern
Letzte Aktion widerrufen
Letzte Aktion wiederherstellen
Barrierefreiheit testen
Screenreader-Hilfe
Mehrsprachige Inhalte einfügen
Gleichung einfügen
Sonderzeichen einfügen
Tabelle einfügen
Formatierung löschen
Horizontale Linie einfügen
Emoticon einfügen
Quelltext anzeigen
Vollbildmodus
Tastaturbefehle
Der Atto-Editor versteht ein paar Tastaturbefehle, die Ihnen die Arbeit mit dem Editor ggf. vereinfachen können:
[Strg] + [c] = kopieren
[Strg] + [v] = einfügen
[Strg] + [Shift] + [v] = ohne Formatierung einfügen
[Strg] + [x] = ausschneiden
[Strg] + [z] = rückgängig
[Strg] + [y] = wiederherstellen
[Strg] + [a] = alles markieren
[Strg] + [b] = fett
[Strg] + [i] = kursiv
[Strg] + [u] = unterstrichen
[Strg] + [k] = Hyperlink einfügen
Darüber hinaus ist er mittels Tastatur bedienbar: Wenn das Eingabefeld aktiv ist (focus, erkennbar am blauen Rahmen), kann man
mit [Shift] + [Tab] in die Menüzeile(n) des Editors springen,
mit [<] und [>] durch die Buttons navigieren (gedrückte Richtungstaste geht schneller 😉),
mit [Leertaste] Dropdown-Menüs öffnen und mit [esc] wieder schließen,
mit [^] und [v] innerhalb von Dropdown-Menüs navigieren, und
mit [Enter] oder [Leertaste] ausgewählte Buttons betätigen oder markierte Dropdown-Einträge auswählen.
Der Texteditor TinyMCE ist seit der Moodle-Version 4.5 der Standard-Editor von Moodle.
Wer mit dem neuen Editor nicht zurecht kommt oder sich nicht umgewöhnen möchte, kann auch weiterhin den Editor Atto benutzen.
Und so sieht TinyMCE momentan aus:
Die Bedienung des Tiny ist - im Gegensatz zum Atto, der ausschließlich über eine Symbolleiste verfügt - dreigeteilt: Es gibt
eine oder mehrere Symbolleisten (Nrn. 1 bis 31),
eine Menüleiste (Nrn. 32 bis 38) und
Kontextmenüs in der Nähe von markiertem Text (Nrn. 39 bis 45)
und in der Nähe von markierten Bildern (Nrn. 46 bis 50):
Die Bearbeitungsmöglichkeiten sind daher häufig an mehreren Stellen auffindbar und werden im Folgenden auch ggf. entsprechend an mehreren Stellen aufgeführt und gekennzeichnet.
Die Erläuterungen zu der Nummerierung, die wichtigsten Tastaturbefehle und das "Cheat Sheet" zum Ausdrucken oder Nachschlagen gibt es hier:
Welcher Button ist wofür?
Letzte Aktion widerrufen
Letzte Aktion wiederherstellen
Fettschrift
Kursivschrift
Schriftfarbe
Hintergrundfarbe
Mehrsprachige Inhalte einfügen
Skizze hinzufügen
Bild hinzufügen
Video oder Audio hinzufügen
Audio aufnehmen
Video aufnehmen
Gestaltungsvorlagen
Gestaltungsvorlagen entfernen
H5P-Inhalt einfügen
Templates
Hyperlink hinzufügen
Hyperlink löschen
Automatische Verlinkung unterdrücken
Vollbildmodus
Text (oder Objekt) linksbündig ausrichten
Text (oder Objekt) zentrieren
Text (oder Objekt) rechtsbündig ausrichten
Textrichtung rechts nach links ("rtl" = right to left)
Textrichtung links nach rechts ("ltr" = left to right)
Zweite Buttonzeile ein-/ausblenden
Text- (oder Objekt-) Einrückung verringern
Text- (oder Objekt-) Einrückung vergrößern
ungeordnete Liste (Spiegelstriche bzw. Bulletpoints)
geordnete Liste (nummeriert)
Gleichung einfügen
Menü Bearbeiten (enthält z.B. Ausschneiden, Kopieren, Einfügen, u.m.)
Menü Ansicht (enthält z.B. Vollbild, Quellcode, Ansichtshilfen, u.m.)
Menü Einfügen (enthält z.B. Bild, Medien, Link, H5P, Tabelle, u.m.)
Menü Format (enthält z.B. fett, kursiv, Abschnittsformate, Textfarbe u.m.)
Menü Werkzeuge (enthält z.B. Tests zur Barrierefreiheit, Wörter zählen, u.m.)
Menü Tabelle (enthält alle Tabellenfunktionen)
Menü Hilfe (enthält Tastaturbefehle und Angaben zum TinyMCE und Plugins)
Kontextmenü: Fettschrift (entspricht Nr. 3)
Kontextmenü Text: Kursivschrift (entspricht Nr. 4)
Kontextmenü Text: Überschriften (auch unter 35: Abschnittsformate)
Kontextmenü Text: Blockzitat (auch unter 35: Abschnittsformate)
Kontextmenü Text: Schriftfarbe (entspricht Nr. 5)
Kontextmenü Text: Hintergrundfarbe (entspricht Nr. 6)
Kontextmenü Text: Automatische Verlinkung unterdrücken (entspricht Nr. 19)
Kontextmenü Bild: Ausrichtung für Bilder (entspricht Nrn. 21 - 23)
Kontextmenü Bild: Bild tauschen oder Bildeigenschaften bearbeiten (entspricht Nr. 9)
Kontextmenü Bild: Bild anreichern oder neue Skizze einfügen (entspricht Nr. 8)
Tastaturbefehle
Der Tiny-Editor versteht ein paar Tastaturbefehle, die Ihnen die Arbeit mit dem Editor ggf. vereinfachen können:
[Strg] + [c] = kopieren
[Strg] + [v] = einfügen
[Strg] + [Shift] + [v] = ohne Formatierung einfügen
[Strg] + [x] = ausschneiden
[Strg] + [z] = rückgängig
[Strg] + [y] = wiederherstellen
[Strg] + [a] = alles markieren
[Strg] + [b] = fett
[Strg] + [i] = kursiv
[Strg] + [u] = unterstrichen
[Strg] + [k] = Hyperlink einfügen
[Alt] + [Shift] + [1] bis [6] = Überschrift 1 - 6
Darüber hinaus ist er mittels Tastatur bedienbar: Wenn das Eingabefeld aktiv ist (focus, erkennbar am blauen Rahmen), kann man
mit [Alt] + [F9] in die Menüzeile des Editors springen,
mit [Alt] + [F10] in die Buttonzeile des Editors springen,
mit [Esc] aus Menü- oder Buttonzeile zurück zur Eingabe springen,
mit [<] und [>] durch die Buttons einer Gruppe navigieren,
mit [Leertaste] Dropdown-Menüs öffnen und mit [Esc] wieder schließen,
mit [^] und [v] innerhalb von Dropdown-Menüs navigieren, und
mit [Enter] oder [Leertaste] ausgewählte Buttons betätigen oder markierte Dropdown-Einträge auswählen.
Wie oben erwähnt, ist der Funktionsumfang einigermaßen vergleichbar. Daher werden hier alle Funktionen gruppiert vorgestellt, und für jede Funktion darauf verwiesen, wo man sie in welchem Editor findet.
Textformatierungen
Textformatierungen funktionieren ähnlich, wie es aus vielen Textverarbeitungsprogrammen bekannt ist: Markiertem Text kann über Buttons, Menüeinträge oder Tastaturkürzel eine entsprechende Formatierung zugewiesen werden.
Fett- und Kursivschrift
Man kann Text fett oder kursiv schreiben. In Anlehnung an die englischen Begriffe "bold" und "italic" sind die Buttons mit B bzw. I markiert.
Atto
Im Atto findet man dafür Buttons in der ersten Buttonzeile (in der Übersicht Nrn. 5 und 6).
Tiny
Im Tiny gibt es dazu mehrere Optionen: Buttons in der Buttonzeile (in der Übersicht Nrn. 3 und 4,
außerdem Buttons im "Kontextmenü Text", Nrn. 39 und 40
und Menüeinträge im Menü "Format" (35).
Unter- & Durchstreichungen
Man kann Text unterstreichen oder durchstreichen. Streichungen werden zusätzlich automatisch rot markiert. In Anlehnung an die englischen Begriffe "underline" und "strike through" sind die Buttons mit U bzw. S markiert:
Atto
Im Atto gibt es dazu in der zweiten Buttonzeile zwei Buttons (in der Übersicht Nrn. 21 und 22).
Tiny
Im Tiny findet man die Funktionen im Menü "Format" (Nr. 35)
Hoch- und Tiefstellung
Mit den Funktionen zum Tief- und Hochstellen von Text kann man z.B. Dinge schreiben wie
CO2
H2O
E = m c2
a2 + b2 = c2
Die Funktionen sind meist mit X2 und X2 oder ähnlich markiert.
Atto
Im Atto findet man dafür Buttons in der zweiten Buttonzeile (in der Übersicht Nrn. 23 und 24).
Tiny
Im Tiny verbergen sich die Funktionen im Menü "Format" (Nr. 35).
Text- und Hintergrundfarbe
Die Farbauswahlmenüs der Editoren im Vergleich
Man kann für markierten Text eine Schriftfarbe und eine Hintergrundfarbe einstellen. Man kann auch beides kombinieren und z.B. solche Tags erstellen:
blaurotgrüngelb
Die Farbauswahl orientiert sich am "Corporate Design" der THGA, um den Formatierungs-Wildwuchs ein wenig einzudämmen: Die vier bzw. fünf Blau- und Rottöne, die jew. drei Varianten von gelb und grün und die Graustufen sind empfohlen, die zusätzlichen Dekorfarben (nur im Atto verfügbar) sollten "sparsam" eingesetzt werden.
Einen älteren (!) Blogbeitrag zu den THGA-Farbwerten findet man hier: Alles so schön bunt!
Atto
Im Atto-Editor gibt es dafür in der zweiten Buttonzeile zwei Buttons (Nrn. 7 und 8).
Tiny
Im Tiny gibt es wiederum mehrere Möglichkeiten: Buttons in der Buttonzeile (Nrn. 5 und 6),
Buttons im Kontextmenü Text (Nrn. 43 und 44),
außerdem Einträge im Menü "Format" (Nr. 35,
Farbformatierungen löschen (Atto)
Im Atto kann die Funktion "Formatierung löschen" mit dem "Radiergummi"-Button in der zweiten Buttonzeile (Nr. 40) genutzt werden.
Farbformatierungen löschen (Tiny)
Im Tiny hat das Farbwahl-Menü unten links eine Funktion, um die Farbformatierung zu löschen.
Außerdem gibt es im Menü "Format" (Nr. 35) den Eintrag "Formatierung entfernen".
Hyperlinks
Atto
Atto-Buttons
In der Buttongruppe zu Hyperlinks gibt es im Atto-Editor einen zum Anlegen 18, einen zum Löschen 19 und einen zur Unterdrückung von Autoverlinkungen 20.
Der Button zum Anlegen eines Hyperlinks blendet einen Dialog mit folgenden Konfigurationsmöglichkeiten ein:
Atto-Dialog zum Anlegen von Hyperlinks
Tiny
Tiny-Buttons
Im Tiny-Editor ist es ähnlich: Die Buttons mit den Nrn. 17, 18 und 19 können Hyperlinks einfügen, löschen und unterdrücken.
Tiny-Dialog zum Anlegen von Hyperlinks
Für beide Editoren gilt: Der "Text zum Anzeigen" ist der verlinkende Text, in das Feld URL gehört die Adresse, zu welcher der Link führen soll. Mit "Dateien auswählen" kann auch ein Link auf eine Datei gesetzt werden (nicht in allen Kontexten verfügbar).
Wenn "Hyperlink einfügen" genutzt wird, wenn bereits Text markiert wurde, wird dieser Text automatisch in das Feld "angezeigter Text" eingefügt.
Um einen bereits angelegten, evtl. fehlerhaften Link zu bearbeiten, setzen Sie den Cursor in den Bereich des verlinkenden Textes oder markieren Sie den Link und klicken Sie erneut auf den "Link anlegen"-Button.
Um einen Link zu entfernen, markieren Sie den Text, der den Link enthält und klicken Sie auf den Button "Link entfernen."
Das funktioniert auch für ganze Absätze oder sogar ganze Textfelder. Der Button "Link entfernen" löscht ausnahmslos alle Verlinkungen in dem markierten Bereich. So kann man z.B. aus dem herüberkopierten Wikipedia-Artikel mit "alles markieren, [Strg] + [a]" und einem Klick auf "Link entfernen" alle Links auf einmal entfernen 😉
Die Funktion "Autoverlinkung verhindern" ist für automatisch generierte Hyperlinks gedacht, die unterdrückt werden sollen. Das können Autoverlinkungen von Glossareinträgen, Autoverlinkungen von Aktivitäten, automatisches Einbetten von Medien in einem Medienplayer oder die Ersetzungen von Emoticons sein. Details zu Autoverlinkungen finden Sie im Anleitungskurs "Filter" in den Abschnitten
Autoverlinkung zu Glossaren,
Autoverlinkung zu Aktivitäten und
Emoticon als Bild zeigen.
Absatzformate und Vorlagen
Im Gegensatz zu Textformatierungen, die für einzelne Worte oder Zeichen angewendet werden können, sind Absatzformate für ganze Abschnitte anwendbar. Dazu gehören neben Überschriften und Absätzen auch spezielle Formatierungen, Gestaltungsvorlagen und Templates:
Absatzformate
Absatzformate (Atto)
Hinter den Absatzformaten verbergen sich fünf (Atto, Nr. 2) bzw. sieben (Tiny, Menü "Format", Nr. 35) Formate:
Überschrift groß (Atto) bzw. 3 (Tiny)
Überschrift mittel (Atto) bzw. 4 (Tiny)
Überschrift klein (Atto) bzw. 5 (Tiny)
Überschrift 6 (nur Tiny)
Vorformatiert
Absatz und
Blockzitat (nur Tiny)
Absatzformate im Tiny Editor
Das hier ist
Überschrift groß / 3,
sie entspricht dem HTML-Element <h3>.
Überschrift mittel / 4
entspricht dem HTML-Element <h4>,
Überschrift klein / 5
entspricht dem HTML-Element <h5>,
Überschrift 6 (nur Tiny)
entspricht dem HTML-Element <h6>.
Dies ist vorformatierter Text. Er ist geeignet für Code-Darstellungen und entspricht dem HTML-Element <pre>
Dies ist das Absatzformat. Es entspricht dem HTML-Element <p>. Das Absatzformat hat - im Gegensatz zu nicht als Absatz formatiertem Text - vor allem andere vertikale Abstände zu vorherigen und folgenden Inhalten.
Das hier drüber ist ein Absatz (im Absatzformat), das hier ist lediglich ein Umbruch ([Shift] + [Enter]).
Das nur im Tiny als Absatzformat angelegte Blockzitat sieht so aus:
"... to examine the use of open source software to support a social constructionist epistemology of teaching and learning within Internet-based communities of reflective inquiry."Martin Dougiamas auf die Frage, warum er Moodle entwickelt hat
Das Blockzitat ist im Atto als "Template" 4 (s.u.) verfügbar.
Gestaltungsvorlagen
Gestaltungsvorlagen im Atto Editor
Die Gestaltungsvorlagen (im Atto Nr. 3, im Tiny Nrn. 13 und 14) sind mit Plugins (atto_styles bzw. tiny_elediastyles) realisiert und stellen ein paar spezielle Formatierungen zur Verfügung:
Farbige Textfelder
Hinter den Gestaltungsvorlagen verstecken sich viele verschiedene Vorlagen, vor allem die farbigen Boxen mit und ohne Icons in rot, blau, grün und gelb:
Dies ist ein rotes Textfeld.
Warnung: Dies ist das rote Textfeld mit Icon. Es eignet sich für besonders wichtige Hinweise oder Warnungen. Innerhalb des Textfeldes sind z.B. Umbrüche, Formatierung als fett, kursiv oder Links möglich, ich rate aber grds. eher zur Zurückhaltung mit exotischen oder vielen verschiedenen Formatierungen.
Dies ist ein grünes Textfeld.
Tipp: Das hier ist das grüne Textfeld mit Icon. Es eignet sich für Tipps, Hinweise oder Kennzeichnung von wichtigen weiterführenden Links.
Das gelbe Textfeld sieht so aus.
Frage: Das gelbe Textfeld gibt es auch mit Icon. Mit dem ?-Icon ist es geeignet für Fragestellungen oder Arbeitsaufträge.
Das ist ein blaues Textfeld
Info: Mit der Kennzeichnung mit einem "Info-i" ist es für die Hervorhebung wichtiger Informationen einsetzbar.
Gestaltungsvorlagen im Tiny Editor
Absatz vs. Blocksatz
Dies ist ein klassischer Absatz, linksbündig, mit automatischer Silbentrennung (Welche Browser den CSS-Befehl hyphens:auto; unterstützt, können Sie hier nachsehen: https://caniuse.com/css-hyphens):
Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Dem gegenüber kann die Gestaltungsvorlage "Blocksatz" das Ausfransen am rechten Rand verhindern. Da in den meisten Browsern aber auch jetzt schon die Silbentrennung aktiv ist (s.o.), ist der Blocksatz m.b.M.n. überbewertet. Hie noch etwas Blindtext: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Textumfluss steuern
Mit dem Eintrag "Textumfluss beenden" wird ein leeres Element eingefügt, dass den Textumfluss um Medien oder Tabellen mit Ausrichtung "links" oder "rechts" beendet. Diese ist dann sinnvoll, wenn z.B. Grafiken neben Texten dargestell werden sollen, allerdings nur in einem festgelegten Bereich: Dies hier ist ein recht kurzer Text. Das Bild rechts ist auf den meisten Desktop-Anzeigen höher als dieser Absatz. Daher habe ich den Textumfluss hier unterbrochen, damit der nächste Absatz erst unterhalb des Bildes erscheint.
Dieser Absatz steht nicht mehr neben dem Bild, da er vielleicht keinen Bezug zu dem Bild hat. Durch die Beendigung des Umflusses steht er nun unterhalb des Bildes. Im Bearbeitungsmodus wird so ein "Textumfluss beenden"-Element als - - - - - angezeigt.
Inline-Code (nur Atto)
Die letzte Gestaltungsvorlage ist - im Gegensatz zur Formatvorlage "Vorformatiert", s.o. - für die Code-Darstellung im Fließtext geeignet. So kann ich z.B. <p>HTML-Tags</p> direkt in den Text schreiben. Es entspricht in etwa dem HTML-Element <code>.
Im Tiny steht eine Inline-Code-Formatierung im Menü "Format" (Nr. 35), Eintrag "Code", zur Verfügung.
Formatierungen entfernen
Um Formatierungen zu entfernen, kann
im Atto der Menüeintrag "X Ohne Gestaltungsvorlage" aus dem Gestaltungsvorlagen-Dropdown und
im Tiny der Button Nr. 14
genutzt werden. Außerdem steht in beiden Editoren eine Funktion "Formatierung löschen" zur Verfügung,
im Atto als Button in der Menüzeile, Nr. 40, und
im Tiny im Menü Format, Nr. 35: "TxFormatierung entfernen".
Templates
Die Templates (im Atto Nr. 4, im Tiny Nr. 16, außerdem Menü "Einfügen", Nr. 34) basieren ebenfalls auf zusätzlichen Plugins (atto_templates4u bzw. tiny_htmlblock). Hier sind komplexere Vorlagen hinterlegt, die nach dem Hinzufügen weiter bearbeitet werden können:
Zitat
Die Zitatvorlage legt ein <blockquote>-Element an, dass für Blockzitate gedacht ist. Es enthält ein optionales <cite>-Element für eine Quellenangabe. Nach dem Hinzufügen sieht es so aus:
Hier das Zitat hineinkopieren... ... und hier die Quelle
Wenn ich dann entsprechende Eingaben mache, kann es so aussehen:
"Der Wissenschaftler findet seine Belohnung in dem, was Poincaré die Freude am Verstehen nennt, nicht in den Anwendungsmöglichkeiten seiner Erfindung." Albert Einstein, zit. nach wikiquote.org)
Veranstaltungsdetails
Das Template legt eine Tabelle an, in die Veranstaltungsdetails zu (Präsenz-) Veranstaltungen eingetragen werden können:
Veranstaltungsname
Geben Sie den Namen der Lehrveranstaltung ein.
Lehrpersonen
Name 1, Name 2, Name 3, ...
Modul-/Veranstaltungsnr.
123456
Raum:
GX, RYYY
Tag & Zeit:
Mo., 08:00 - 10:00 Uhr
Besonderheiten
Gruppen, Blockveranstaltung, 14-tägig, o.ä.?
Diese Vorlage wurde aus der Lehrendenschaft gewünscht. Wenn auch Sie ein Template benötigen, melden Sie sich gerne per Mail bei mir - vielleicht können wir gemeinsam eins entwickeln und für alle veröffentlichen.
Creative Commons-Hinweise
Wenn Sie Kurse oder Kursbestandteile mit einer freien Lizenz - hier: Creative Commons - versehen wollen, stehen sieben verschiedene Hinweis-Templates zur Verfügung. Diese enthalten Platzhalter für Werktitel und Urheber:in, außerdem die CC-Icons und die notwendigen Links zu den entsprechenden Lizenzen:
Achtung: Nicht alle oben aufgeführten Lizenzen sind freie Lizenzen im engeren Sinne von Open Educational Resources (OER) oder Free Cultural Works (FCW). Bitte machen Sie sich vor Verwendung der Lizenzen mit den Hintergründen vertraut, z.B. hier, hier oder hier.
Übrigens: Die E-Learning Koordinierungsstelle veröffentlicht bereits seit ca. 2015 die meisten Inhalte unter einer CC-by-sa-Lizenz. Weitere Infos finden Sie unter https://moodle.thga.de/cc-lizenzen.
Bitte beachten Sie: Die in diesem Kurs vorhandenen Lehrmaterialien sind urheberrechtlich geschützt. Eine Weitergabe, Vervielfältigung oder Veröffentlichung außerhalb des Lehrbetriebs ist ohne Zustimmung des/der Lehrenden nicht zulässig. Ebenfalls unzulässig ist ein Mitfilmen der Veranstaltung ohne Zustimmung.
Code-Highlighting
Die Vorlage ist vor allem für die Hervorhebung bestimmter Programmcode-Teile notwendig und arbeitet am besten in Verbindung mit einem Kursfilter (Anleitung zu Filtern finden Sie hier). Am Beispiel von HTML könnte das so aussehen:
Das Template "Bildbeschriftung" verknüpft ein Bild mit einem Text, so dass dieser nicht verrutscht - unabhängig von Anzeigegröße und Seitenbreite. Dafür wird ein <figure>-Element incl. der <figcaption> angelegt. Das sieht initial so aus:
Beschriftung hier
Das Bild kann dann markiert und über die Editor-Funktion "Bild einfügen oder bearbeiten" ausgetauscht werden. Auch die Ausrichtungs- und Textumflusseinstellungen sind darüber einstellbar:
Ein dümmlich grinsender Avatar, lange Bild- unterschriften müssen ggf. manuell in Bild- breite umgebrochen werden.
Hier neben ist ein Bild mit Bildbeschriftung und "Ausrichtung: links". Letzteres führt zum Textumfluss dieses Textes:
Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Listen
Die Listenfunktionen beschränken sich auf ungeordnete Listen mit Spiegelstrichen bzw. Bullet Points (Atto: Button Nr. 9, Tiny: Button Nr. 29) und nummerierte Listen mit automatischer Nummemrierung (Atto: Nr. 10, Tiny: Nr. 30):
Liste
mit
Bullet-
points
Liste
mit
Numme-
rierung
Diese lassen sich auch verschachteln und die beiden Arten lassen sich mischen. Dabei muss man allerdings zusätzlich mit der Funktion "Ein- / Ausrücken" (Atto: 28, 29, Tiny: 27, 28) arbeiten:
nummeriert, Level 1
Spiegelstrich, Level 2
Spiegelstrich, Level 2
nummeriert, Level 3
nummeriert, Level 3
Spiegelstrich, Level 4
Spiegelstrich, Level 4
nummeriert, Level 5
nummeriert, Level 5
Spiegelstrich, Level 4
nummeriert, Level 3
Spiegelstrich, Level 2
nummeriert, Level 1
Tipp (für den Atto-Editor): Legen Sie zuerst alle Listenpunkte an und formatieren Sie diese als Liste der Art der ersten Hierarchiestufe. Ändern Sie dann in einem zweiten Schritt die Einrückung (28, ggf. 29) und danach optional die Listenart. Ansonsten kann es sein, dass sich die Listenhierarchie zwischendurch "verhakelt".
Der Editor Tiny erzeugt deutlich standard-konformeres HTML, dort führt auch mehrfaches Ein- und Ausrücken und mehrfaches Ändern der Listenart nicht zu fehlerhaftem Quellcode.
Textausrichtungen und -einrückungen
Buttons im Atto-Editor
Für jeden Absatz (teilweise auch Bilder und den Inhalt von Tabellenzellen) kann man die Textausrichtung regeln. Absätze können linksbündig, zentriert oder rechtsbündig ausgerichtet werden. Hier jew. ein Beispiel:
Buttons im Tiny
linksbündig: (Atto: Button Nr. 25, Tiny: Button Nr. 21) Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
zentriert: (Atto: Nr. 26, Tiny: Nr. 22) Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
rechtsbündig: (Atto: 27, Tiny: 23) Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Eine spezielle Funktion ist der Blocksatz, den Sie im Menü "Gestaltungsvorlagen" (s.o., Atto: 3, Tiny: 13) finden: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Außerdem können Absätze ein- und ausgerückt (Atto:28&29, Tiny: 27 & 28) werden:
einfach eingerückt: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
zweifach eingerückt: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
dreifach eingerückt: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
vierfach eingerückt: Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Medien
Über die Editoren können Bilder, Videos und Audiodateien eingefügt oder erstellt werden. Die diversen Möglichkeiten werden im Folgenden erläutert:
Bilder einfügen
Atto, Button Nr. 12
Bildauswahl, -beschreibung, -größe und -ausrichtung
Bildauswahl: Hier kann eine URL eingegeben werden. Die Verwendung einer Adresse auf anderen Internetseiten ist allerdings nicht empfohlen!
Besser ist es, über den Button "Datei auswählen" mit dem bekannten "File Picker" eine bereits vorhandene Datei auszuwählen oder eine neue hochzuladen.
Bildbeschreibung: Die Bildbeschreibung ist derjenige Text, der von Screenreadern ausgegeben wird. Wie man "gute" Bildbeschreibungen erstellt, können Sie u.a. auf barrierefreiheit.dh.nrw nachlesen.
Der Haken bei "Bild nur zur Dekoration" mach aus der normalerweise verpflichtenden Beschreibung ein optionales Feld.
Bildgröße: Genutzte Bilder können hiermit auf eine neue Größe skaliert werden. Der Haken bei "Proportional" ist empfohlen, um das ursprüngliche Seitenverhältnis beizubehalten.
Bildausrichtung: Die Ausrichtung unterscheidet
vertikale Ausrichtungen (oben, mittig und unten): Die Einstellung einer vertikalen Ausrichtung ist bei Bildern innerhalb von Texten nur selten sinnvoll anwendbar. Lediglich, wenn sich ein Bild in einem größeren HTML-Elternelement befindet, das die Möglichkeit bietet, das Bild in der Höhe zu platzieren, hat das vertical-align eine Wirkung; und
horizontale Ausrichtungen (links und rechts): Hiermit wird das Bild an den linken bzw. rechten Rand geschoben. Damit geht automatisch ein Textumfluss einher. S. dazu auch "Textumfluss beenden" im Abschnitt "Gestaltungsvorlagen" oben.
Tiny, Button Nr. 9, auch: Menü "Einfügen" 34
Bildauswahl-Dialog im Tiny Editor
Bildauswahl: Hier kann eine Bilddatei per "Drag and drop", via Klick und Auswahl über den Datei-Explorer/Finder oder über eine URL eingegeben werden. Die Verwendung einer Adresse auf anderen Internetseiten ist allerdings nicht empfohlen!
Mit dem Button "Repositories durchsuchen" wird er bekannte "File Picker" angezeigt, mit dessen Hilfe eine bereits vorhandene Datei ausgewählt oder neu hochgeladen.
Erst danach können in einem weiteren Schritt weitere Bilddetails bearbeitet werden:
Bildbeschreibung und Größeneinstellungen im Tiny Editor
Bildbeschreibung: Die Bildbeschreibung ist derjenige Text, der von Screenreadern ausgegeben wird. Wie man "gute" Bildbeschreibungen erstellt, können Sie u.a. auf barrierefreiheit.dh.nrw nachlesen.
Der Haken bei "Bild nur zur Dekoration" macht aus der normalerweise verpflichtenden Beschreibung ein optionales Feld.
Bildgröße: Genutzte Bilder können hiermit entweder in Originalgröße oder auf eine neue Größe skaliert werden. Der Haken bei "Proportional" (nur sichtbar, wenn "Angepasste Größe" ausgewählt ist) ist empfohlen, um das ursprüngliche Seitenverhältnis beizubehalten.
Bildausrichtung: Die Bildausrichtung kann ausschließlich nach dem Einfügen über die Ausrichtungsbuttons (21 bis 23, außerdem 46 im Bild-Kontextmenü) eingestellt werden.
Damit wird das Bild an den linken bzw. rechten Rand geschoben oder zentriert. Damit geht automatisch ein Textumfluss einher. S. dazu auch "Textumfluss beenden" im Abschnitt "Gestaltungsvorlagen" oben.
Skizzen (nur Tiny)
Benutzendenoberfläche des Skizzen-Editors
Die Funktion "Skizze" 8 öffnet einen vollumfänglichen Grafikeditor. Er unterstützt Bildebenen und wartet mit erstaunlich vielen Funktionen auf. Die links angeordnete Werkzeugleiste und die Detaileinstellungen in mehreren Fenstern am rechten Rand erinnern stark an gängige Tools wie Adobe Photoshop, Affinity Studio , Gimp oder Photopea.
Es können geometrische Formen, Bild- und Textebenen eingefügt, konfiguriert und arrangiert werden, und zum Ende mit dem Button "Insert Sketch" als gerendertes und gerastertes PNG in das Textfeld eingefügt werden.
Tipp: Eine besondere Stärke liegt in der Anreicherung bereits vorhandener Bilder: Wenn ein bereits eingefügtes Bild im Texteditor markiert und über das Kontextmenü die Skizze-Funktion (48) aufgerufen wird, wird das vorhandene Bild als Hintergrundebene in den Skizzen-Editor geladen und kann mit Text, Pfeilen oder anderen Elementen angereichert werden!
Achtung: Mit der Betätigung des "Insert Sketch" Buttons werden alle Bildebenen in eine Rastergrafik zusammengeführt. Eine nachträgliche Bearbeitung der einzelnenen Ebenen ist dann nicht mehr möglich. Die Skizze-Funktion eignet sich daher vor allem für schnelle Skizzen (evtl. kommt der Name daher 🤔) und nicht für große Grafikprojekte, die viel Zeit benötigen und auch Tage später noch bearbeitbar sein sollen. Dafür sollte eine entsprechende Desktop-Software genutzt werden.
Audio oder Video einfügen
Über die Funktion "Audio/Videodatei einfügen oder bearbeiten" (Atto: 13, Tiny: 10) können Mediendateien in den Kurs eingebettet werden. Im Gegensatz zu einem Download oder einem Link werden die Medien hier direkt mit einem Medien-Player in die Webseite eingebaut:
eingegeben werden. Links zu YouTube und anderen Videoplattformen funktionieren aus Datenschutzgründen normalerweise nicht.
Reiter "Video":
Datei/URL: Hier kann sowohl eine Adresse angegeben als auch über "Datei auswählen" auf den File Picker (Upload, Sciebo, etc.) zugegriffen werden.
Alternative Mediendateien: Eine etwas veraltete Funktion, da früherTM nicht alle Geräte alle Formate abspielen konnten. Mit z.B. dem Container mp4 (Video: h.264, Audio: AAC) ist das aber eigentlich ein gelöstes Problem.
Darstellung: Hier können Titel (wird nur im Code hinterlegt, nicht auf der Seite angezeigt), Größe (hier reicht ein Wert - z.B. 1000px Breite - das Seitenverhältnis wird beibehalten) und Vorschaubild (wird angezeigt, bevor das Video gestartet wurde) angegeben werden.
Erweiterte Einstellungen: Hier kann man einstellen, ob Steuerungsbuttons angezeigt werden sollen (empfohlen), ob das Video automatisch abgespielt werden soll (nicht empfohlen), ob das Video initial ohne Ton (empfohlen bei Autoplay) geladen werden und ob es im unendlichen Loop abgespielt werden soll.
Untertitel / Bildunterschriften: Hier können über die verschiedenen Reiter Untertitel-Dateien und Kapitelmarken jew. für mehrere Sprachen (jew. im WebVTT-Format *.vtt) hinterlegt werden. Bildunterschriften, Beschreibungen und Metadaten kenne ich selber nicht ;-)
Reiter "Audio":
Datei/URL: Hier kann sowohl eine Adresse angegeben als auch über "Datei auswählen" auf den File Picker (Upload, Sciebo, etc.) zugegriffen werden.
Alternative Mediendateien: Veraltete Funktion, da früherTM nicht alle Geräte alle Formate abspielen konnten. Mit z.B. dem mp3- oder m4a-Format ist das aber eigentlich ein gelöstes Problem.
Darstellung: Hier kann ein Titel angegeben werden (wird nur im Code hinterlegt, nicht auf der Seite angezeigt).
Erweitert: Hier kann man einstellen, ob Steuerungsbuttons angezeigt werden sollen (empfohlen), ob die Audiodatei automatisch abgespielt werden soll (nicht empfohlen), ob der Player initial ohne Ton (bei Audio nicht empfohlen) geladen werden und ob es im unendlichen Loop abgespielt werden soll.
Untertitel / Bildunterschriften: Hier können über die verschiedenen Reiter Untertitel-Dateien und Kapitelmarken jew. für mehrere Sprachen (jew. im WebVTT-Format *.vtt) hinterlegt werden. Bei Audiodateien wird dann der 16.9-Videoplayer angezeigt, um Platz für die Texte zu haben. Bildunterschriften, Beschreibungen und Metadaten kenne ich selber nicht ;-)
Audio oder Video aufnehmen
Berechtigungen für Geräte einräumen
Über die WebRTC-Technologie, eine Sammlung von Online-Kommunikationsstandards, können mittels "RecordRTC" Video- und Audioaufnahmen direkt im Browser, hier: im Texteditor, erstellt werden. Damit können die Signale von Kameras und Mikrofonen direkt in Video- bzw. Audiodateien gespeichert und in das entsprechende Textfeld eingefügt werden. Unterstützt werden z.B. Webcams und die Kameras von Smartphones und Tablets genauso wie fest verbaute oder an das Endgerät angeschlossene Mikrofone.
Ggf. sind lokale Zugriffsberechtigungen notwendig (s. Screenshot). Hierbei fragt der Browser nach, ob die Signale von Kamera und/oder Mikrofon verwendet werden dürfen.
Diese Abfrage dient dem Datenschutz und ihrer Sicherheit, damit nicht private Szenen oder Gespräche für ein breiteres Publikum ungewollt öffentlich werden 😉
Für eine Aufnahme ist diese Berechtigung notwendig. Wenn nicht "Einstellung für Kameras/Mikrofone merken" (kann in unterschiedlichen Browsern anders heißen) markiert wird, ist diese Erlaubnis nur temporär und muss regelmäßig bei Nutzung von Kamera- oder Mikrofonsignalen erneuert werden.
Im Atto findet man die Funktionen hinter den Buttons 15 und 16, im Tiny hinter den Buttons 11 und 12.
H5P-Inhalte einfügen
H5P-Inhalte können in das Textfeld im Atto mit dem Button Nr. 17, im Tiny mit dem Button Nr. 15 eingebettet werden. H5P ist ein Werkzeug zur Erstellung interaktiver Inhalte, dazu gehören z.B. Drag-and-Drop-Anwendungen, interaktive Videos oder Kreuzworträtsel. Eine Übersicht zu den verschiedenen Inhaltstypen findet man hier.
Jedes Mal, wenn eine Datei im Textfeld verwendet wird - also z.B. ein Bild oder Video, eine Audiodatei o.ä. eingefügt oder ein Dokument verlinkt wird - wird diese Datei mit dem Textfeld verknüpft. Wenn nun diese Dateien, eingebetteten Medien oder Verlinkungen im Rahmen der Bearbeitung wieder entfernt werden, kommt es häufig dazu, dass die Verknüpfung zwischen Textfeld und Datei weiterhin bestehen bleibt.
Im Atto kann über den Button 14, im Tiny über das Menü Werkzeuge 36, Eintrag "Medien verwalten", eine Liste aller mit dem Text verknüpften Dateien angezeigt werden. Im Abschnitt "Unbenutzte Dateien" finden sie alle verknüpften, aber ungenutzten Dateien, die markiert und gelöscht werden können.
Fehlende Dateien, die zwar im Quelltext verlinkt, aber nicht mit dem Textfeld verknüpft sind, werden hier ebenfalls angezeigt.
Weitere Funktionen
Hierunter sind viele kleinere Komfort- und Service-Funktionen, aber auch exotischere Einfüge-Optionen zusammengeführt: Vom Import von Word-Dateien über die Überprüfung auf Barrierefreiheit, die Verwaltung mehrsprachiger Inhalte und dem Einfügen von Symbolen, Formeln, Tabellen und Emojis gibt es hier ggf. noch ein paar "Extras" zu entdecken:
Rückgängig & Wiederherstellen
Während einer Bearbeitung eines Textes können die meisten der Aktionen wieder rückgängig und rückgängig gemachte Aktionen wieder hergestellt werden. Wer dazu nicht die Tastenkombination [Strg] + [z] und für das Wiederherstellen [Strg] + [y] bzw. [Strg] + [Shift] + [z] im Muskelgedächtnis abgelegt hat, kann im Atto die Buttons 30 und 31 und im Tiny die Buttons 1 und 2 sowie die Einträge im Menü "Bearbeiten" (32) nutzen.
Diese Möglichkeit besteht nur für die Bearbeitungen zwischen zwei Speicherungen! Sobald der Inhalt des Textfeldes einmal gespeichert wurde, steht diese Möglichkeit nicht mehr zur Verfügung.
Word-Import (nur Atto)
Eventuell ist es Ihnen bereits aufgefallen: Word ist ggf. "schwierig", um Texte vorzuschreiben oder daraus zu kopieren, um sie in Moodle einzufügen. Denn im Hintergrund bastelt Word halbwegs web-fähigen (aber leider nicht standardkonformen) HTML-Code zusammen, der beim Einfügen in einen Moodle-Editor mit übertragen wird. Das kann zu "unerwünschten Effekten" führen.
Für diesen Fall gibt es im Atto den Word-Import (Button Nr. 11), über den man ganze Word-Dateien importieren kann. Allerdings werden komplex formatierte Dokumente (z.B. mit Kopf- und Fußzeile, mit viel Textumfluss, mit zusammengesetzen und bearbeiteten Grafiken, mit umfangreichen Tabellenformatierungen, o.ä.) nie 100%ig übernommen.
In solchen Fällen ist ein "Einfügen ohne Formatierung" ([Strg] + [Shift] + [v] o.ä., je nach Betriebssystem und ggf. installierter Software) und Nachformatieren mit den Werkzeugen des Editors die aufwändigere, aber sauberere Möglichkeit. Im Tiny findet man eine Option "Als Text einfügen" (= ohne Formatierung einfügen) im Menü "Bearbeiten" (32).
A11y-Überprüfung
Was ist Barrierefreiheit ("A11y")?
A11y kommt vom englischen accessibility (wobei die 11 Buchstaben jenseits des ersten und letzten als Zahl geschrieben werden) und beschreibt die Berrierearmut oder -freiheit, hier: von Online-Inhalten.
Barrierefreiheit bedeutet, Inhalte so zu entwickeln, dass sie für alle Personen zugänglich sind, unabhängig von deren physischen und kognitiven Fähigkeiten und der Art und Weise, wie sie auf das Web zugreifen.Barrierefreiheit in den MDN Web Docs
Die Punkte 1, 2 und 3 bieten der Moodle-Code bzw. Betriebssystem oder Browser von Hause aus an: Moodle lässt sich komplett mit der Tastatur (meist: Tab, Pfeiltasten, Space & Enter) steuern, wird auf verschiedenen Endgeräten jew. optimiert angezeigt und die Textgröße kann über eine Betriebssystemeinstellung oder via [Strg] + [+]/[-] eingestellt werden. Screenreader werden ebenfalls unterstützt. Auf die Punkte
haben die Ersteller:innen von Inhalten allerdings einen gewissen Einfluss:
Achten Sie vor allem bei der Nutzung von Vorder- und Hintergrundfarbe auf ein ausreichendes Kontrastverhältnis.
Bieten Sie für alle Bilder, die nicht ausschließlich zu dekorativen Zwecken genutzt werden, einen Alternativtext an.
Nutzen Sie für die Strukturierung entsprechende Zwischenüberschriften mit der richtigen Formatierung ("Überschrift 3 bis 5" aus den Absatzformaten) und ggf. einfache Sprache.
Verlinken Sie aussagekräftige Textteile (also nicht "Weitere Infos finden Sie hier" sondern besser "Weitere Informationen zur Barrierefreiheit finden Sie u.a. in dem verlinkten Wikipedia-Artikel".
Barrierefreiheit und Screenreaderkompatibilität testen
Die Überprüfung der Barrierefreiheit (Atto: 32, Tiny: Menü "Werkzeuge" 36, Eintrag "Tester zur Barrierefreiheit") überprüft z.B. Bilder auf Alt-Texte, das Kontrastverhältnis von Schrift- und Hintergrundfarbe und das Vorhandensein von Überschriften ab einer gewissen Textlänge.
Die Hilfe für Screenreader (nur Atto: 33) zeigt die genutzten HTML-Elemente, um die auf semantische Verständlichkeit für Screenreader zu überprüfen, eine Liste aller Links und verlinkender Texte und eine Liste aller Bilder incl. der angegebenen Alt-Texte.
Mehrsprachige Inhalte einfügen
Um mehrsprachige Texte zu hinterlegen, steht im Atto mit Button Nr. 34, im Tiny mit Button Nr. 7 und im Menü "Format" 35, Eintrag "Sprache") eine Funktion zur Hinterlegung mehrerer Sprachen zur Verfügung.
Im Atto (Button Nr. 35) und im Tiny (Button Nr. 31) kann der Gleichungseditor genutzt werden: Der Gleichungseditor versucht, eine grafische Oberfläche zur Verfügung zu stellen, über die man mathematische Formeln eingeben kann.
Über die Reiter "Operatoren", "Pfeile", "Griechische Symbole" und "Erweitert" stehen gängige Symbole und Formelteile zur Verfügung, die mittels Mausklicks zu komplexen Grafiken kombiniert werden können.
Darunter sieht man den TeX-Code und eine Vorschau der gerenderten Gleichung bzw. Formel. Über den Button "Gleichung speichern" wird der TeX-Code in den Editor eingefügt.
Tipp: Für fortgeschrittene Formeln und Gleichungen sollte man sich ggf. direkt mit der TeX-Eingabe und dem dazugehörigen Kursfilter auseinander setzen. Dazu gibt es eine eigene Anleitung unter https://moodle.thga.de/TeX.
Sonderzeichen
Das Sonderzeichen-Menü (Atto: 36, Tiny: Menü "Einfügen" 34, Eintrag "Sonderzeichen") zeigt gängige Sonderzeichen, z.B. Währungssymbole oder das Copyright-Zeichen, die man über die Tastatur nicht (oder nur schwer) eingeben kann.
Durch einen Klick auf das gewünschte Zeichen wird dieses sofort (an der aktuellen Position des Cursors) in das Textfeld eingefügt.
Horizontale Linien und Emojis
Horizontale Linie
Um zwei Abschnitte oder Inhalte visuell voneinander abzutrennen, kann eine horizontale Linie eingefügt werden. Die sieht so aus:
Im Atto findet man die Funktion hinter dem Button Nr. 37, im Tiny im Menü "Einfügen" 34, Eintrag "Horizontale Linie".
Emojis
Während Emoticons - also die mehr oder weniger erkennbaren Smileys aus gängigen Zeichen, z.B. :-) - über die Tastatur eingegeben werden und in Moodle-Kursen ggf. über den Filter "Emoticon als Bild zeigen" (s. Filter-Anleitung), sind Emojis "echte" Unicode-Zeichen, die von einem entsprechenden Konsortium festgelegt werden.
Alle, die in den letzten 10 Jahren eine beliebige Messenger-App auf einem Smartphone genutzt haben, kennen sie normalerweise. Diese Zeichen können über die Emoji-Auswahl (Atto: 38, Tiny: Menü "Einfügen" 34, Eintrag "Emojis") in den Text eingefügt werden.
Auch wenn der o.g. Emoticon-Filter für den entsprechenden Kurs deaktiviert ist, werden die Unicode-Emojis angezeigt: 🙄🤷♂️
Tabellen (Atto)
Dialog zum Einfügen von Tabellen
Mit dem entsprechenden Button 39 können Tabellen in den Editor eingefügt werden. Die Möglichkeiten im Atto-Editor sind einigermaßen beschränkt: Man kann eine Tabellenbeschriftung angeben, die Anzahl von Zeilen und Spalten und deren Kopfzeilen festlegen. Hier ein Beispiel mit Beschriftung, 5 Zeilen und drei Spalten:
Tabellentitel bzw. -beschriftung
Funktion
Editor Atto
Editor TinyMCE
Überschriften
✅
✅
Absatz
✅
✅
fett
✅
✅
kursiv
✅
✅
In dem entsprechenden Konfigurationsdialog kann man unter Titel die Tabellenbeschriftung eingeben, die Position des Titels auf "oben" oder "unten" einstellen und festlegen, welche Art von Überschriften (Spaltenüberschriften, Zeilenüberschriften oder beides) man generieren möchte.
Außerdem kann man die Anzahl der Zeilen und die Anzahl der Spalten festlegen.
In dem unteren Abschnitt "Aussehen" kann man das Design der Tabelle rudimentär beeinflussen. Der "Designstandard" meint
Inhaltszellen mit weißem Hintergrund, dunkler Schriftfarbe und hellgrauem Rahmen und
Überschriftenzellen mit blauem Hintergrund, weißer Fettschrift und hellblauem Rahmen.
Abweichend vom Designstandard - nicht empfohlen - kann man entweder für die gesamte Tabelle oder für die einzelnen Zellen Rahmenart (Linie "solid", gepunktet "dotted", gestrichelt "dashed"), Rahmendicke (in Pixeln), Rahmenfarbe und Hintergrundfarbe einstellen. Das funktioniert im Atto-Editor allerdings wenig verlässlich.
Für umfangreiche Tabellenformatierung ist der Editor TinyMCE deutlich besser geeignet.
Eine gewünschte Tabellenbreite kann in Prozent, bezogen auf die Breite des Textfelds, abhängig vom Anzeigegerät, eingestellt werden. Auch das ist eher nicht empfohlen, da die ansonsten automatisch festgelegte Breite von Tabellen und Tabellenspalten zumindest für kleine Anzeigegeräte deutlich besser geeignet ist.
Kontextmenü für Tabellen
Nach dem initialen Anlegen einer Tabelle ist die Bearbeitung dieser Eigenschaften noch möglich, allerdings ist das manchmal etwas hakelig und man sollte dazu ein paar Dinge beachten:
Sofern sich der Cursor in einer Tabellenzelle befindet, kann man durch erneuten Klick auf den "Tabelle einfügen"-Button 39 ein Kontextmenü aufrufen. Damit können
Spalten bzw. Zeilen vor oder nach der aktuelle Cursorposition eingefügt,
die aktuelle Spalte bzw. Zeile verschoben und
das Menü "Tabelle bearbeiten" (s.o.) erneut aufgerufen werden.
Das Menü "Tabelle" (Tiny)
Tabelle-Menü des Tiny Editors
Die erwähnten erweiterten Tabellenoptionen im Tiny haben einen eigenen Menüpunkt "Tabelle", Nr. 37. Darin findet man - strukturiert nach "Tabelle", "Zelle", "Zeile" und "Spalte" diverse Einstellungen:
Tabelle
Hinter dem Eintrag "Tabelle" verbirgt sich ein Raster, mit dem man - wie ggf. aus Textverarbeitungsprogrammen wie Microsoft Word" - ein Tabellenraster mit der gewünschten Spalten- und Zeilenanzahl erzeugen kann. Das Raster wird als leere Tabelle direkt an der Position des Cursors in das Textfeld eingefügt.
Zelle
Der Eintrag "Zelle" beinhaltet
die Zelleneinstellungen (für diejenige Zelle, in der sich der Cursor befindet) mit Optionen u.a. zu
Breite
Zellentyp (Zelle oder Kopfzelle) und
Ausrichtung (horizontal und vertikal), außerdem
unter "Erweitert" je Zelle zusätzliche Einstellungen für Rahmendicke, -stil, -farbe und Hintergrundfarbe der Zelle,
die Möglichkeit, mehrere Zellen zu verbinden (Voraussetzung: Mehrere Zellen sind markiert) und
die Möglichkeit, verbundene Zellen wieder zu teilen (Voraussetzung: Cursor befindet sich in einer verbundenen Zelle).
Zeile
Der Eintrag "Zeile" beinhaltet
Optionen zum Einfügen neuer Zeilen (davor oder danach bezieht sich auf die Position des Cursors),
Optionen zum Löschen, Ausschneiden oder Kopieren der entspr. Zeile,
wenn eine Zeile kopiert wurde, die Möglichkeit, diese kopierte Zeile vor oder nach der aktuellen Cursorposition einzufügen, sowie
die Zeileneigenschaften mit Einstellungen zu Typ, Ausrichtung, Rahmen und Hintergrundfarbe.
Spalte
Der Eintrag "Spalte" beinhaltet
Optionen zum Einfügen neuer Spalten (davor [=links] oder danach [=rechts] bezieht sich auf die Position des Cursors),
Optionen zum Löschen, Ausschneiden oder Kopieren der entspr. Spalte, sowie,
wenn eine Spalte kopiert wurde, die Möglichkeit, diese kopierte Spalte vor oder nach der aktuellen Cursorposition einzufügen.
Tabelleneigenschaften
Der Eintrag "Tabelleneigenschaften" setzt die Existenz einer Tabelle und die entsprechende Cursorposition voraus, beinhaltet dann
Optionen zu Gesamtbreite der Tabelle,
Einstellungen für den Zellenabstand innen und außen,
Rahmenoptionen,
Einstellungen zur Ausrichtung der gesamten Tabelle, außerdem
unter "Erweitert" wiederum die Einstellungen zu Rahmen und Farben sowie eine Option, eine Tabellenbeschriftung hinzuzufügen.
Außerdem hat Tiny ein tabellen-spezifisches Kontext-Menü, mit dem viele der Menüfunktionen schneller im Zugriff sind:
Kontextmenü für Tabellen im Tiny-Editor
Formatierung löschen, Quellcode, Vollbild
Formatierung löschen
Der Editor Atto verfügt dazu über einen Button (Nr. 40), damit wird die Formatierungen des markieren Editorinhalts gelöscht. Im Tiny steht dazu der Menüeintrag "Formatierung entfernen" im Menü "Format" (Nr. 35) zur Verfügung.
Das funktioniert vor allem für Fett-, Kursivschrift, Unter- und Durchstreichungen, Text- und Hintergrundfarbe. Außerdem ist diese Funktion nützlich für Text, den Sie aus anderen Quellen in den Editor kopiert haben und der noch „Spuren von Formatierungen“ (Schriftgröße o.ä.) enthält.
Bei komplexeren Formaten, z.B. den Gestaltungsvorlagen 3 oder Templates 4, funktioniert das nicht immer verlässlich. Dazu ein Tipp:
Das Dropdown-Menü für Gestaltungsvorlagen enthält (im Atto-Editor) als obersten Eintrag „ohne Gestaltungsvorlage“. Damit lassen sich die Formatierungen der Gestaltungsvorlagen recht leicht löschen. Im Tiny-Editor übernimmt das der Button Nr. 14.
Gegen nicht mehr notwendige Templates hilft oft nur „klassisches Löschen“ mit "großflächigem Markieren" und [Entf] oder [<-], im schlimmsten Fall ein Eingriff in den Quellcode (s.u.).
Quellcode anzeigen
Im Atto kann mit dem Button </> (41) der WYSIWYG-Editor (What You See Is What You Get) auf eine Code-Ansicht umgeschaltet werden, womit der erzeugte HTML-Code (HyperText Markup Language) sichtbar und bearbeitbar wird.
Im Tiny geht das mittels des Eintrags "< > Quellcode" im Menü "Ansicht" (Nr. 33).
Den Zusammenhang von WYSIWYG und HTML erläutere ich in einem kleinen Exkurs:
WYSIWYG vs. HTML
Moodle ist am Ende des Tages auch nur eine Webseite, die in HTML (HyperText Markup Language, Info) notiert ist. Dabei handelt es sich um eine Auszeichnungssprache, also eine Art der Dokumentengestaltung, in der sowohl der eigentliche Inhalt als auch Eigenschaften, Relationen und Formate innerhalb des gleichen Dokumentes beschrieben werden.
Ein Beispiel:
<h3>Überschrift</h3> <p>Dies ist der Text, mache Worte sind <strong>speziell formatiert</strong>.</p>
In dem obigen HTML-Schnipsel wird ein Element der Art Headline mit Hierarchiestufe 3 (=h3) erzeugt, ihr Beginn wird mit einem öffnenden Tag (<h3>) gekennzeichnet und am Ende mit dem Pendant (</h3>) geschlossen. Der Elementinhalt ist "Überschrift", wobei dt. Umlaute - je nach Zeichencodierung des Dokuments - hier durch die (veraltete) Entity-Schreibweise ersetzt sind (Ü = Ü).
Danach folgt ein Paragraph (<p>...</p>), in dem noch einmal eine weitere Zeichenkette als Fettschrift (<strong>) formatiert ist.
Alle Webseiten, die Sie in Ihrem Browser sehen, funktionieren genau so, allerdings ist Ihr Browser so nett, den HTML-Code zu rendern, also eben nicht das reine HTML anzuzeigen, sondern die - in obigem Beispiel - Überschriften, die Absätze und die Fettschrift als eben solche darzustellen.
Die Editoren von Moodle funktionieren allerdings im WYSIWYG-Modus, d.h. es wird versucht, aus dem eingegebenen Text im Hintergrund standardkonformes HTML zu erzeugen, während den Benutzenden direkt das gerenderte Endprodukt angezeigt wird. Wenn also ein Text über die Buttons des Editors als Liste formatiert wird, z.B.
Listenpunkt 1
Listenpunkt 2
Listenpunkt 3
wird diese auch so im Editor-Eingabebereich angezeigt. Im Hintergrund wird die Eingabe aber als uordered list (<ul>...</ul>) mit mehreren list items (<li>...</li>) gespeichert:
Mit gewissen Grundkenntnissen in HTML kann man in der Code-Ansicht die Inhalte des Textfeldes bearbeiten, dazu folgt weiter unten in diesem Kurs ein eigener Abschnitt.
Achtung: Der Editor Atto muss vor dem Speichern erst wieder in den WYSIWYG-Modus umgeschaltet werden, damit die Änderungen auch wirklich gespeichert werden 🙄
Vollbild
Der Vollbildmodus erweitert das Eingabefenster auf die Browser- (auf Desktops und Laptops) oder Bildschirmgröße (Tablets, Smartphones). Damit ist Textarbeit deutlich komfortabler, einfach weil mehr Platz zur Verfügung steht. 😉
Dafür steht im Atto der Button Nr. 42, im Tiny der Button Nr. 20, außerdem der Menüeintrag "Vollbild" im Menü "Ansicht" (33) zur Verfügung.
Die Quelltextansicht lässt sich leider nur im Atto in den Vollbild-Modus versetzen.
Markdown ist eine vereinfachte Auszeichnungssprache, beinhaltet also - wie HTML auch - den eigentlichen Textinhalt und Gliederungsangaben gleichermaßen. Im Gegensatz zu z.B. HTML sind deutlich weniger Auszeichnungen notwendig: Während jedes HTML-Element normalerweise einen öffnenden und schließenden Tag besitzt, können Auszeichnungen mittels Markdown mit einzelnen Zeichen oder Leerzeichen-Kombinationen vorgenommen werden.
Beispiele:
HTML: <h1>Überschrift
1</h1>
Markdown: #Überschrift 1
Ausgabe:
Überschrift 1
HTML: <strong>Fettschrift</strong>
Markdown: **Fettschrift**
Ausgabe: Fettschrift
Eine Markdown-Eingabe ist möglich, wenn in den persönlichen Einstellungen (Login erforderlich!) unter Texteditor wählen die Option "Einfacher Text" ausgewählt wird. Danach steht bei nächstem Aufruf einer Seite mit einem Texteditor unter dem Eingabefeld ein Drop-Down-Menü zur Verfügung, in dem man die Option "Markdown-Format" auswählen kann:
Die einzelnen Formatierungsmöglichkeiten finden Sie hier:
Text kann einfach eingegeben werden und wird als "normaler Text" gerendert. Dabei werden Zeilenumbrüche ignoriert:
Eingabe
Dies ist ein Text. Der Umbruch wird ignoriert.
Ausgabe
Dies ist ein Text. Der Umbruch wird ignoriert.
Um einen Umbruch zu generieren, müssen am Zeilenende mind. zwei Leerzeichen platziert werden:
Eingabe
Dies ist ein Text. Der Umbruch wird durch zwei Leerzeichen erzeugt.
Ausgabe
Dies ist ein Text. Der Umbruch wird durch zwei Leerzeichen erzeugt.
Absätze werden mit einer leeren Zeile erzeugt:
Eingabe
Dies ist ein Text.
Hier beginnt ein neuer Absatz.
Ausgabe
Dies ist ein Text.
Hier beginnt ein neuer Absatz.
03. Formatierungen
Inline-Formatierungen wie kursiv, fett und fett kursiv können mit unterschiedlich vielen * erzeugt werden. Für Inline-Code sind Hochkommata erforderlich:
Eingabe
Das hier ist *kursiv*.
So geht **fette** Schrift.
Drei Asteriske formatieren ***fett kursiv***.
Für Inline-Code werden `Hochkommata` genutzt.
Ausgabe
Das hier ist kursiv.
So geht fette Schrift.
Drei Asteriske formatieren fett kursiv.
Für Inline-Code werden Hochkommata genutzt.
04. Listen
Markdown unterstützt unordered lists (HTML: <ul>), also Listen mit Spiegelstrichen oder Punkten, die mit * generiert werden. Achtung: Nach dem Asterisk ist ein Leerzeichen erforderlich.
Die Listen lassen sich verschachteln. Jede weitere Hierarchiestufe wird mit einem weiteren Leerzeichen eingerückt.
Außerdem werden nummerierte Listen (ordered lists, <ol>) mit einer beliebigen Zahl incl. Punkt und Leerzeichen (3. ) generiert. Eingebürgert hat sich eine Nummerierung aller Listeneinträge mit 1. , 1. , 1. , ... da die "echte" Nummerierung beim Rendern vorgenommen wird, es können aber beliebige Zahlen geschrieben werden.
Blockzitate - also das HTML-Element <blockquote> - erzeugt man mit einer spitzen Klammer am Beginn der ersten Zeile: >.
Eingabe
> Der Gedanke, einmal in seiner Größe gefaßt, kann nicht mehr verschwinden; solange es Menschen gibt, wird auch der starke Wunsch da sein, den Turm zu Ende zu bauen. (Franz Kafka)
Ausgabe
Der Gedanke, einmal in seiner Größe gefaßt, kann nicht mehr verschwinden; solange es Menschen gibt, wird auch der starke Wunsch da sein, den Turm zu Ende zu bauen. (Franz Kafka)
07. Horizontale Linien
Horizontale Linien, das Element <hr> - erzeugt man mit drei Asterisken in einer Zeile ***:
Eingabe
Text oberhalb der Linie *** Text unterhalb der Linie
Ausgabe
Text oberhalb der Linie
Text unterhalb der Linie
08. Vorformatierung
(Code-) Blöcke - also das HTML-Element <pre> - erzeugt man mit vier Leerzeichen am Beginn einer Zeile.
Eingabe
Hier der Code ... ... in zwei Zeilen
Ausgabe
Hier der Code ... ... in zwei Zeilen
09. Hyperlinks
Für Hyperlinks - in HTML das <a>-Element - muss der Linktext (in runden Klammern) und das Linkziel [in eckigen Klammern] angegeben werden:
Eingabe
Hier ist ein (Link)[https://moodle.thga.de] zur Lernplattform.
Für Tabellen werden lediglich senkrechte | und waagerechte Striche - benötigt. Die senkrechten Striche kann man normalerweise mit [Alt Gr] + [<] erzeugen.
Eingabe
Spalten-|Überschriften ---|--- Zellen,|Zellen, Noch mehr|Zellen
Ausgabe
Spalten-
Überschriften
Zellen,
Zellen,
noch mehr
Zellen
11. Maskierung von Funktionszeichen
Wenn Sie einmal Zeichen verwenden möchten, die in Markdown eigentlich als Funktionszeichen belegt sind, z.B. das * oder das | , müssen diese maskiert werden. Das geht in Markdown mit einem "Backslash" \, der normalerweise mit [Alt Gr] + [ß] eingegeben werden kann. Der wird natürlich nicht ausgegeben, ist aber notwendig, um "dem Funktionszeichen seine Funktion zu nehmen":
Eine HTML-Eingabe ist möglich, wenn in den persönlichen Einstellungen (Login erforderlich!) unter Texteditor wählen die Option "Einfacher Text" ausgewählt wird. Danach steht bei nächstem Aufruf einer Seite mit einem Texteditor unter dem Eingabefeld ein Drop-Down-Menü zur Verfügung, in dem man die Option "HTML-Format" auswählen kann:
Alternativ können Sie den Editor mittels des Buttons vom WYSIWYG auf den Code-Modus umschalten, um direkt HTML zu schreiben, zu ändern oder zu bereinigen.
Eine CSS-Eingabe ist für Moodle-Texteditor-Benutzende nur als "inline style", also als Angabe direkt im HTML-Element möglich. Die wichtigsten Grundlagen und Möglichkeiten finden Sie hier:
1. Was ist HTML?
HTML steht für HyperText Markup Language und ist eine Auszeichnungssprache, beinhaltet also den eigentlichen Textinhalt und Gliederungsangaben gleichermaßen. HTML existiert bereits seit ca. 1989 und wird stetig weiterentwickelt, der aktuelle Standard ist HTML 5.2.
Im Gegensatz zu z.B. Markdown (s.o.), bei der teilweise eine Textformatierung mit einem einzelnen Zeichen generiert werden kann, sind in HTML öffnende und schließende Tags notwendig:
Für eine Überschrift (h wie headline) der Stufe 5 und einen Textabsatz (p wie paragraph) wäre z.B. die Eingabe von
<h5>Überschrift</h5> <p>Absatztext</p>
notwendig.
HTML-Elemente können verschachtelt werden, wobei wichtig ist, dass die inneren Elemente zuerst "sauber" mit schließenden Tags abgeschlossen werden, bevor die übergeordneten Elemente geschlossen werden:
<div> <p>Dies ist Text, hier ist er <strong>fett</strong> ausgezeichnet. Darin ist noch ein <span>weiteres Element</span>. </p> </div>
Innerhalb des <div> wird ein <p> geöffnet und geschlossen (</p>), bevor das Elternelement mit </div> ebenfalls geschlosswen wird. In dem <p>-Element befinden sich weitere Elemente (hier: <strong>...</strong> und <span>...</span>).
2. Wichtige HTML-Elemente
Natürlich kann ich nicht alle HTML-Elemente auflisten, die wichtigsten habe ich aber hier einmal aufgelistet.
Block-Elemente heißen "Block", weil sie einen Block in gesamter zur Verfügung steheder Breite bilden. Eine Überschrift kann z.B. nicht innerhalb einer Textzeile nur ein einzelnes Wort umfassen, vielmehr wird ein Block-Element immer den Textfluss unterbrechen und die gesamte mögliche Breite einnehmen.
* Text- und Hintergrundfarbe werden hier mittels CSS (s.u.) erzeugt, es handelt sich also um kein "reines" HTML
Formatierungen ("Inline"-Elemente)
Inline-Elemente heißen "inline", da sie innerhalb des Textflusses möglich sind und nicht die gesamte zur Verfügung stehende Breite einnehmen. So kann ein einzelnes Wort innerhalb einer Zeile auch fett markiert werden, ohne den Textfluss zu unterbrechen.
Erläuterung
HTML
Ergebnis
emphasized text (em)
This is <em>emphasized</em> text.
This is emphasized text.
italic text (i)
This is <i>italic</i> text.
This is italic text.
strong text
This is <strong>strong</strong> text.
This is strong text.
bold text (b)
This is <b>bold</b> text.
This is bold text.
marked text (mark)
This is <mark>marked</mark> text.
This is marked text.
strikethrough text (s)
This is <s>strikethrough</s> text.
This is strikethrough text.
subscripted characters (sub)
H<sub>2</sub>O
H2O
superscripted characters (sup)
E = mc<sup>2</sup>
E = mc2
small text
This is <small>small</small> text.
This is small text.
big text veraltet
This is <big>big</big> text.
This is big text.
cited text (cite)
This is <cite>cited</cite> text.
This is cited text.
quoted text (q)
This is <q>quoted</q> text.
This is quoted text.
line break (br)
Text davor<br>Text danach
Text davor Text danach
time information
Treffen am <time>15.3. um 14 Uhr</time>.
Treffen am .
inline code
This is <code>code</code>.
This is code.
spanned text (span)
This <span style="color: #e5000f;">spanned text</span> with inline style.
This spanned text with inline style.
anchor (a)
This is a <a target="_blank" href="https://moodle.thga.de">Link</a>.<br> Contact via <a href="mailto:name@example.com">mail</a> or<br> telephone: <a href="tel:+49234123456">+49 (0) 234 123456</a>.
Look at my avatar: <img src="https://path/to/image.png">
Look at my avatar:
3. Was ist CSS?
CSS steht für Cascading StyleSheets, meint also eigentlich "kaskadierende Gestaltungsdokumente", in denen Gestaltungsangaben ("styles") eingetragen sind. Der Name kommt daher, dass CSS oft in zusätzlichen Dateien ("sheets") gespeichert wird. Das "kaskadierend" ("cascading") nimmt Bezug auf die Eigenheit, dass den in HTML angegebenen Elementen auf verschiedenen Ebenen verschiedene Gestaltungsdefinitionen mitgegeben werden, die sich nach geschachtelter (kaskadierender) Logik überschreiben oder ergänzen.
ID-basiert (z.B. für alle Überschriften mit id="sitetitle"),
klassenbasiert (z.B. für alle Überschriften mit class="subheading") oder
nur für individuelle Elemente (z.B. für eine spezielle Überschrift, "inline style" genannt)
angegeben werden.
Notiert werden CSS-Definitionen nach dem Muster
element { property: value; property2: value; property3: value; }
Die verschiedenen Elemente, IDs und Klassen können in CSS über den Namen des Elements p, #id (mit Raute) für IDs und .class (mit Punkt) für Klassen adressiert werden. Ein Beispiel:
HTML
<p id="einleitungstext"> (1) Absatztext (normalerweise rot) mit ID "einleitungstext" (daher grün): "ID überschreibt Standard". </p> <p class="zweiterabsatz"> (2) Absatztext (normalerweise rot) mit Klasse ""zweiterabsatz" (daher blau): "Klasse überschreibt Standard". </p> <p id="einleitungstext" class="zweiterabsatz"> (3) Absatztext mit ID "einleitungstext" und Klasse "zweiterabsatz": "ID überschreibt Klasse". </p> <p> (4) Absatztext, für den die Standarddefinition gilt (daher rot). </p> <p id="einleitungstext" style="color:fuchsia;"> (5) Absatztext mit individueller Farbgebung "fuchsia" trotz ID "einleitungstext": "Inline überschreibt ID". </p>
(3) Absatztext mit ID "einleitungstext" und Klasse "zweiterabsatz": "ID überschreibt Klasse".
(4) Absatztext, für den die Standarddefinition gilt (daher rot).
(5) Absatztext mit individueller Farbgebung "fuchsia" trotz ID "einleitungstext": "Inline überschreibt ID".
Hier sieht man, dass - obwohl alle <p>-Elemente eigentlich rot (color:red;) dargestellt werden sollen - diese Vorgabe von den Definitionen der IDs oder Klassen überschrieben wird. Spannend (und für Einsteiger:innen oft nicht einfach) ist die Hierarchie der verschiedenen Stildefinitionen:
Absätze sollen grds. rot sein (s. Zeile 4), werden aber
mit ID "einleitungstext" grün dargestellt (s. Zeile 1),
mit Klasse "zweiterabsatz" blau (s Zeile 2).
Wenn sie ID UND Klasse haben, werden sie grün (s. Zeile 3), und
mit individuellen Stilvorgaben z.B. pink dargestellt 🤯
Faustformel: Inline schlägt ID, ID schlägt Klasse, Klasse schlägt Standarddefinition.
4. Das CSS "Box Model"
Das sog. "Box Model" ist ein Modell, mit dem man sich Außen- & Innenabstände, Umrandungen und Rahmen von HTML-Elementen vergegenwärtigen kann. Je nachdem, ob es sich um ein "Block"- oder "Inline"-Element (s. "Wichtige HTML-Elemente") handelt, ist die Größe des eigentlichen Elements im Standard vorgegeben:
Block-Elemente sind immer 100% breit - in Bezug zum Elterncontainer. Z.B. sind Absätze - <p>...</p> - immer so breit, wie im Elternelement Platz ist, sofern sie genügend Inhalt haben. Die Höhe ist abhängig vom Inhalt, bei <p>aragraphs also so viele Zeilen hoch, wie bei der maximalen Breite benötigt werden.
Block-Elemente können aber auch festgelegte Höhen und Breiten haben. Der Inhalt kann - wenn Höhe und/oder Breite nicht ausreichen, entweder aus dem Element herausragen oder das Element erhält Scrollleisten, um den Inhalt in dem bestehenden Platz zu bewegen.
Inline-Elemente sind auch in der horizontalen Ausdehnung nur so breit wie notwendig: Eine <em>pahsis-Markierung endet an der Stelle im Textfluss, wo der schließende Tag </em> platziert ist.
Neben diesen automatischen Werten können mittels CSS auch spezifischere Angaben zur Größe (s. "Wichtige (Inline-) CSS-Befehle") gemacht werden. Außerdem kann jedes Element äußere und innere Abstände und eine Rahmendicke haben, welche alle zusammen den endgültigen Platzverbrauch eines Elements ergeben:
Ein Beispiel zur Verdeutlichung des "Box Models" - hier ein <div> mit inline styles zu Breite (width), Höhe (height), Innenabstand (padding), Rahmen (border) und Außenabstand (margin):
Da in den Moodle-Texteditorem am einfachsten CSS-Code im "inline" Format (s. "Was ist CSS?") funktionieren, habe ich die wichtigsten hier einmal aufgeführt:
Allgemeines
Die Angabe von CSS-Code im HTML des Moodle-Editors muss immer im öffneneden Tag des HTML-Elements in Form von style="property:value;" platziert werden, z.B.
Der parapraph soll also mit roter Hintergrundfarbe (background-color) und weißem Text (color) angezeigt werden. Da <p> ein Block-Element ist, wird die gesamte Breite genutzt:
Text
Inline CSS kann erstaunlich lang und beliebig komplex werden. Wenn man zusätzlich zu Text- und Hintergrundfarbe auch Textausrichtung (text-align), Maße (width, height), Innen- (padding) und Außenabstand (margin), Rahmen (border) und z.B. Schriftfamlilie (font-family), Schriftstärke (font-weight), Schriftgröße (font-size) und Schriftstil (font-style) anpassen möchte, muss man alle angaben in den öffnenden HTML-Tag eintragen, die Umbrüche dienen ausschließlich der Übersichtlichkeit):
Abmessungen können in verschiedenen Varianten angegeben werden:
Absolute Größe in Pixeln (px): Wenn ein Element mit width:300px; ausgezeichnet ist, wird immer versucht, diese Breite auch darzustellen. Wenn das Anzeigegerät oder das Elternelement zu schmal ist, kann passieren, dass das zu breite Element abgeschnitten wird oder das Elternelement eine Scrollleiste erhält.
Prozentangaben (%): Man kann Abmessungen relativ zur Größenangabe des Elternelementes angeben: Ein Block-Element mit 100% Breite bestimmt, wie breit ein Kindelement mit z.B. 50% Breite dargestellt wird.
Relative Angaben zur Standardtextgröße (em/rem): Die Bezeichnung em kommt aus dem klassischen Schritfsatz und bezog sich ursprünglich auf die Breite des Großbuchstabens M. Die Standardtextgröße von Browsern ist standardmäßig auf 16px festgelegt, hier entspricht 1em = 16px. Wenn das Elternelement aber eine abweichende Schriftgröße hat (z.B. eine Tabelle mit font-size:30px;), kann die Bedeutung von 1em (z.B. für eine Tabellenzelle) allerdings entsprechend variieren. Die em-Angabe verträgt auch dezimale Angaben (mit Punkt!), z.B. 1.5em. Während em sich also auf das direkte Elternelement bezieht, meint rem (r für root) immer das Wurzelelement einer Webseite, was meist der oberste <html>-Knoten ist.
Relative Angaben zum Anzeigegerät (vw/vh): Mit Angaben zu viewport width (vw) und viewport height (vh) wird Bezug auf die gerätebezogene Anzeigegröße genommen: 50vw meint 50% der zur Verfügung stehende Viewport-Breite.
Vorbemerkung zu Farbangaben
Eigennamen: Für viele Farben kann man einen Eigennamen mittels color keywords eingeben, z.B. color:blue; oder color:red;. EIne Liste findet man hier.
HEX-Code: Die hexadezimale Farbangabe beruht auf dem RGB-Farbraum, bei dem sich alle Farben aus den verschiedenen Mischverhältnissen von Rot, Grün und Blau zusammensetzen. Für jeden der drei Werte steht eine zweistellige Hexadezimalzahl (von 00 bis ff, also 256 Abstufungen je Farbkanal) zur Verfügung, der mit einer Raute eingeleitete Hex-Wert ist also insg. sechsstellig (und kann ca. 16,8 Mio. Farben abbilden, da 2563 = 16.777.216):
# 00 00 00 (rot) (blau) (grün)
Da für Bildschirme eine additive Farbmischung gilt (kontraintuitiv entgegen der Erfahrungen aus dem Kunstunterricht, da Farben aus dem Malkasten der subtraktiven Farbmischung unterliegen), ergibt der Hex-Code #000000 schwarz, da alle drei Kanäle den Minimalwert aufweisen. Weitere Beispiele: #ff0000 = Rot (100% Rot, 0% Grün, 0% Blau) #00ff00 = Grün (0% Rot, 100% Grün, 0% Blau) #0000ff = Blau (0% Rot, 0% Grün, 100% Blau) #ffff00 = Gelb(Mischung aus 100% Rot und 100% Grün) #ff00ff = Magenta (Mischung aus 100% Rot und 100% Blau) #00ffff = Cyan(Mischung aus 100% Grün und 100% Blau)
Differenziertere Mischungen führen zu entsprechenden Ergebnissen, z.B. #003c7c = THGA-Blau #e50001 = THGA-Rot
HEX-Code mit Alphakanal: Der Alphakanal als "vierter" Kanal neben den drei RGB-Farbkanälen) beschreibt die Deckkraft des RGB-Mischungsverhältnisses und wird in hexadezimaler Schreibweise als vierte - wiederum zweistellige - Angabe hinter die RGB-Werte notiert. Die Deckkraft kann ebenfalls von 00 (= 0% Deckkraft) bis ff (=100% Deckkraft) reichen:
# 00 00 00 00 rot blau grün alpha
Hier die RGB-Mischung #003c7c mit verschiedenen Deckkraft-Angaben:
#003c7cff 100% Deckkraft
#003c7cc0 75% Deckkraft
#003c7c80 50% Deckkraft
#003c7c40 25% Deckkraft
#003c7c00 0% Deckkraft
Hintergrundfarben (so wie bei diesem Textfeld) scheinen entsprechend bei einer Deckkraft < 100% durch und "verfälschen" ggf. Farben, da sich die Hintergrund- und die Vordergrundfarbe auf dem Monitor/Anzeigegerät entspr. mischen.
RGB-Code: Die RGB-Werte können auch direkt als Zahl von 0 bis 255 angegeben werden. Dafür werden sie (kommagetrennt) in einer Klammer hinter dem Befehl rgb(...) notiert. 0 ist der minimale, 255 der maximale Wert:
rgb( 255, 255, 255 ) rot blau grün
// Alternative Schreibweise (ohne Kommata): rgb(255 255 255)
Beispiele: rgb(255,0,0) = Rot (100% Rot, 0% Grün, 0% Blau) rgb(0,255,0) = Grün (0% Rot, 100% Grün, 0% Blau) rgb(0,0,255) = Blau (0% Rot, 0% Grün, 100% Blau) rgb(255,255,0) = Gelb(Mischung aus 100% Rot und 100% Grün) rgb(255,0,255) = Magenta (Mischung aus 100% Rot und 100% Blau) rgb(0,255,255) = Cyan(Mischung aus 100% Grün und 100% Blau)
Differenziertere Mischungen führen zu entsprechenden Ergebnissen, z.B. rgb(0,60,124) = THGA-Blau rgb(227,0,15) = THGA-Rot
RGB-Code mit Alphakanal: Auch für die RGB-Farbwerte gibt es die Möglichkeit, über den Alphakanal die Deckkraft anzugeben. Dieser wird ebenfalls kommagetrennt als Dezimalzahl (mit Punkt!) (optional: hinter den drei Farbwertden angegeben, vor der Klammer steht allerding ein rgba (mit a für alpha):
rgba( 255, 255, 255, 0.5 ) rot blau grün alpha
// Alternative Schreibweise (ohne Kommata, Alpha in % hinter / ): rgba(255 255 255 / 50%)
Hier die RGB-Mischung rgb(227,0,15) mit verschiedenen Deckkraft-Angaben:
rgba(227,0,15,1) 100% Deckkraft
rgba(277,0,15,.75) 75% Deckkraft
rgba(277,0,15,.5) 50% Deckkraft
rgba(277,0,15,.25) 25% Deckkraft
rgba(277,0,15,0) 0% Deckkraft
Hintergrundfarben (so wie bei diesem Textfeld) scheinen entsprechend bei einer Deckkraft < 100% durch und "verfälschen" ggf. Farben, da sich die Hintergrund- und die Vordergrundfarbe auf dem Monitor/Anzeigegerät entspr. mischen.
HSL-Angabe: Die Angaben von Farbwerten in HSL basieren auf einem anderen Farbraummodell: HSL steht für hue, saturation und lightness und ist ein abgewandeltes Modell des HSV-Farbraums. Im Gegensatz zum Mischungsverhältnis von Grundfarben steht hier ein Farbkreis im Zentrum, eine Winkelangabe von 0° bis 360° beschreibt die gewünschte Farbe (hue):
Darüber hinaus beschreiben die Werte für saturation die Sättigung (von 0% = Neutralgrau bis 100% = "knallig", reine Farbe) und für lightness die relative Helligkeit (von 0% = lichtfrei / schwarz über 50% = vollfarbig bis 100% = weiß):
hsl( 360deg, 100%, 50% ) hue sat light
// Alternative Schreibweise (ohne Kommata, ohne Einheiten): hsl(360 100 50)
Als räumliches Farbmodell kann man es sich in etwa wie folgt vorstellen: Quelle: HSL color solid cylinder.png von SharkD, Lizenz: CC by-sa 3.0Beispiele: hsl(360deg,100%,50%) = Rot (Farbwinkel 360°, 100% Sättigung, 50% Helligkeit) hsl(211deg,100%,24.3%) = THGA-Blau (Farbwinkel 211°, 100% Sättigung, 24,3% Helligkeit) hsl(119deg,87.6%,28.4%) = Dunkelgrün (Farbwinkel 119°, 87,6% Sättigung, 28,4% Helligkeit)
HSL-Angabe mit Alphakanal: Auch für die HSL-Angabe kann eine Deckkraft angegeben werden, sie wird hinter einem "slash" / in der Klammer als Dezimalzahl (mit Punkt!) zwischen 0 (= transparent) und 1 (= voll deckend) notiert. Vor der Klammer steht allerding ein hsla (mit a für alpha):
hsla( 360deg, 100%, 50%, .75 ) hue sat light, alpha
// Alternative Schreibweise (ohne Kommata, ohne Einheiten, Alpha in % hinter /) hsla(360 100 50 / 75%)
Hier die HSL-Farbe hsl(166deg, 69%, 26%); mit verschiedenen Deckkraft-Angaben:
hsla(166deg, 69%, 26%, 1); 100% Deckkraft
hsla(166deg, 69%, 26%, .75); 75% Deckkraft
hsla(166deg, 69%, 26%, .5); 50% Deckkraft
hsla(166deg, 69%, 26%, .25); 25% Deckkraft
hsla(166deg, 69%, 26%, 0); 0% Deckkraft
7. Wichtige (Inline-) CSS-Befehle (IN ARBEIT!)
1. Anzeigeoptionen
1.1 Darstellung beeinflussen mit display
Um verschiedene "Anzeigeoptionen" zu erzeugen, stehen vor allem zwei Eigenschaften zur Verfügung: display regelt, ob ein Element z.B.
ausgeblendet werden soll (display:none;) oder
erzeugt mittels display:flex; (flexbox module) oder display:grid; (grid layout) Rasterdarstellungen.
Vor allem können aber die elementspezifischen Block- oder Inline-Darstellungen (s.o., "Wichtige HTML-Elemente") geändert werden:
Mit display:block; können Inline- zu Block-Elementen und
mit display:inline; entsprechend Block- zu Inline-Elementen umkonfiguriert werden, außerdem
liegt mit display:inline-block; eine Mischform vor.
1.2 Deckkraft einstellen mit opacity
Mit der Eigenschaft opacity kann jedem Element eine eigene Deckkraft (unabhängig von der Deckkraft verschiedener Farben, s. Ausführungen zu Alphakanälen in "Grundlagen zu Maßen und Farben") mitgegeben werden. Das funktioniert mittels eines Dezimalwertes (mit Punkt!) zwischen 0 (= keine Deckkraft) und 1 (= volle Deckkraft). Standard ist opacity:1;, halbtransparent wird ein Element mit z.B. opacity:0.5;, und opacity:0; macht das Element unsichtbar.
Mit dem Eintrag "Textumfluss beenden" wird ein leeres Element eingefügt, dass den Textumfluss um Medien oder Tabellen mit Ausrichtung "links" oder "rechts" beendet. Diese ist dann sinnvoll, wenn z.B. Grafiken neben Texten dargestell werden sollen, allerdings nur in einem festgelegten Bereich: Dies hier ist ein recht kurzer Text. Das Bild rechts ist auf den meisten Desktop-Anzeigen höher als dieser Absatz. Daher habe ich den Textumfluss hier unterbrochen, damit der nächste Absatz erst unterhalb des Bildes erscheint.
Die Templates (im Atto Nr. 4, im Tiny Nr. 16, außerdem Menü "Einfügen", Nr. 34) basieren ebenfalls auf zusätzlichen Plugins (atto_templates4u bzw. tiny_htmlblock). Hier sind komplexere Vorlagen hinterlegt, die nach dem Hinzufügen weiter bearbeitet werden können:
[Werktitel] von [Urheber] ist als Creative Commons Public Domain (CC0) gekennzeichnet.
[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung 4.0 International Lizenz.
[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.
[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Keine Bearbeitungen 4.0 International Lizenz.
[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.
[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Nicht kommerziell - Keine Bearbeitungen 4.0 International Lizenz.
[Werktitel] von [Urheber] ist lizenziert unter einer Creative Commons Namensnennung - Nicht kommerziell 4.0 International Lizenz.Achtung:
Bitte beachten Sie: Die in diesem Kurs vorhandenen Lehrmaterialien sind urheberrechtlich geschützt. Eine Weitergabe, Vervielfältigung oder Veröffentlichung außerhalb des Lehrbetriebs ist ohne Zustimmung des/der Lehrenden nicht zulässig. Ebenfalls unzulässig ist ein Mitfilmen der Veranstaltung ohne Zustimmung.
Die Listenfunktionen beschränken sich auf ungeordnete Listen mit Spiegelstrichen bzw. Bullet Points (Atto: Button Nr. 9, Tiny: Button Nr. 29) und nummerierte Listen mit automatischer Nummemrierung (Atto: Nr. 10, Tiny: Nr. 30):
Diese lassen sich auch verschachteln und die beiden Arten lassen sich mischen. Dabei muss man allerdings zusätzlich mit der Funktion "Ein- / Ausrücken" (Atto: 28, 29, Tiny: 27, 28) arbeiten:
Die einzelnen Formatierungsmöglichkeiten finden Sie hier:
Alternativ können Sie den Editor mittels des Buttons vom WYSIWYG auf den Code-Modus umschalten, um direkt HTML zu schreiben, zu ändern oder zu bereinigen.Eine CSS-Eingabe ist für Moodle-Texteditor-Benutzende nur als "inline style", also als Angabe direkt im HTML-Element möglich. Die wichtigsten Grundlagen und Möglichkeiten finden Sie hier:
