In dieser Erklärung erfahren Sie, wie Sie:
- einen Button per HTML-Editor hinzufügen können.
- diesen Button interaktiv verlinken können
- Cheatsheet für Buttons und Farben
1) Buttons hinzufügen
a) HTML-Editor in Moodle Textfeld öffnen
Um
den HTML-Editor beim Moodle Textfeld zu öffnen, klicken Sie in der
Steuerungsleiste auf den Pfeil ganz links, der nach unten zeigt.
Daraufhin öffnen sich die erweiterten Steuerungsleiste, bei der Sie ganz rechts, dann den HTML-Code des Textfelds öffnen können.
Dort können Sie dann ihr komplettes Textfeld auf der HTML-Code-Ebene bearbeiten und anpassen.
b) HTML-Code für Button in Moodle Textfeld hinzufügen
Um
nun einen blauen Button einzufügen geben Sie folgenden Code ein. Der
Stil kann mt Hilfe von anderen Klassen auch verändert werden.
Code für den Button selbst (unverlinkt):
<button type="button" class="btn btn-primary">Test</button>
c) Test
Abschließend
schalten Sie den HTML Editor aus, indem Sie wieder in der erweiterten
Steuerleiste auf das Zeichen dafür klicken. Sie schauen, ob der Button
angezeigt wird. Er sollte wie folgt aussehen:
Hinweis, der Button ist aber noch nicht interaktiv. Wie das geht, wird im nächsten Abschnitt erklärt.
2) Zwei Varianten der Verlinkung
a) markieren und Verlinken
Diese
Variante ist nur bei einem Button zu empfehlen, da es sonst zu
Problemen kommen kann. Hierfür markieren Sie ganz einfach mit dem Cursor
den Button und wählen in der einfachen Steuerleiste die
Verlinkungsoption aus.
Darauf öffnet sich das Verlinkungsfenster, in dem Sie dann die gewünschte Verlinkung eintragen.
b) Button im HTML-Editor mit Code verlinken
Die
empfohlene Variante Buttons zu verlinken, ist es dies im HTML-Editor zu
tun. Hierfür öffnen Sie wie oben beschrieben den HTML-Editor.
Damit nun eine Verlinkung auf diesem Button liegt, muss man
zunächst Verlinkungen in HTML so verstehen, dass sie immer das
eingeschlossene Objekt zu einer Verlinkung machen. Als Beispiel verlinke
ich das Wort "Test" auf die Seite "
">https://www.fh-potsdam.de/".
<a href="https://www.fh-potsdam.de/">Test</a>
Das Wort "Test" verlinkt nun auf die Seite "
Damit">https://www.fh-potsdam.de/".
Damit
nun der Button "Test" auf die Webseite der Fachhochschule verlinkt,
muss auch der Button von dem Link eingeschlossen sein. Das sieht so aus:
<a href="https://www.fh-potsdam.de/"><button type="button" class="btn btn-primary">Test</button></a>
In diesem Beispiel verlinkt also der Button "Test" in der Farbe Blau = Primary auf die Webseite der Fachhochschule.
Wenn Sie möchten, dass der Link in einem neuen Tab öffnet, müssen Sie nach dem Link "target="_blank"
ergänzen. Das sieht so aus:
<a href="https://www.fh-potsdam.de/"target="_blank"
><button type="button" class="btn btn-primary">Test</button></a>
3) Cheatscheet für Buttons und Farben [Bearbeiten]
a) Weitere Button-Varianten finden Sie
hier im Cheatsheet mit HTML-Code. Nicht alle funktionieren. Testen Sie diese vorher in einem Testkurs aus.
b) Wenn Sie möchten, dass der Button eine andere Farbe hat, können statt Primary für Blau im HTML-Code folgenden Code eingeben:
"Secondory" für Grau
"Success" für Grün
"Info" für Hellblau
"Warning" für Gelb
"Danger" für Rot