Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- playground:marieketest [12.07.2024 14:03] – Marieke Röben
+++ playground:marieketest [08.01.2025 14:47] (aktuell) – Rhea Sophia Wagener
@@ Zeile 1: / Zeile 1: @@
 ======Text- und Medienfelder formatieren======
+[[moodle:html-formatierung|HTML-Formatierung]]
 Moodle bietet zahlreiche Textformatierungen und -anpassungen über HTML. \\
@@ Zeile 5: / Zeile 6: @@
 <WRAP info round>Einige der hier erläuterten Funktionen bietet Moodle auch selbst an (z.B. als klickbares Icon im Texteditor), ohne dass Sie den HTML-Code bearbeiten müssen. Der Vollständigkeit halber haben wir sie hier trotzdem erwähnt.</WRAP>
-===== Überschrift 2 =====
+===== Grundlagen =====
 ??? Wie kann ich HTML-Formatierungen für Text- und Medienfelder verwenden?
 !!!\\
@@ Zeile 18: / Zeile 17: @@
   * Absätze werden (in Moodle automatisch) mit dem Befehl ''<p>'' oder ''<span>'' umspannt. Einige der folgenden Formatierungen werden in die eckigen Klammern dieses Befehls eingefügt.
+===== Schriftformatierungen =====
 ??? Wie kann ich die Schriftgröße manuell ändern?
 !!!Mit HTML können Sie die Schriftgröße in verschiedener Form einstellen. Am besten verwenden Sie dafür die Angabe in Pixeln. Die Standardschriftgröße liegt bei 15px. Darstellungen ab 10px können zu klein und ab 50px zu groß zum Lesen sein. Für Überschriften werden oft Größen zwischen 20px und 30px verwendet. Fließtexte wie dieser haben in der Regel eine Größe zwischen 12 und 16px.
@@ Zeile 25: / Zeile 24: @@
 Beispiel:\\
 ''<p style=“font-size:20px“> //Dies ist ein Text in Schriftgröße 20px.// </p>''
-===== Überschrift 3 =====
 ??? Ich möchte mehr Farben im Text! Wie kann ich die Schriftfarbe manuell ändern?
 !!!Um Texte ansprechender zu gestalten, können Sie Passagen farblich verändern. Dafür verwenden Sie in den Befehlsklammern nach ''<p>'' oder ''<span>'' den Befehl ''style=“color://FARBNAME oder #HEX-CODE oder RBG-WERTE//“''. Beachten Sie, dass die Farbnamen nur auf Englisch angenommen werden. Der Farbraum umschließt dabei die Regenbogenfarben sowie schwarz, weiß, grau und braun. Sie können außerdem beliebige Farbcodes im Hexadezimalformat oder als RGB-Werte auswählen. Auf dieser Webseite können Sie eine Farbe wählen und den Hexadezimalcode bzw. die RGB-Werte direkt kopieren [[https://htmlcolorcodes.com]].
@@ Zeile 42: / Zeile 41: @@
 Hochgestellt: ''<sup>''
+===== Absatzformatierungen =====
 ??? Kann ich manuell Absätze und Umbrüche einfügen?
 !!!Am einfachsten lassen sich Texte in verschiedene Absätze unterteilen. Dafür wird ''<p>'' verwendet. Nach einem Absatz verwenden Sie ''</p>'' und beginnen den nächsten Absatz wieder mit ''<p>''. Dieser Absatz nimmt die volle Breite auch nach dem Ende in Anspruch. Mit <span> beschränkt sich der Absatz nur auf die Länge der enthaltenen Sätze.\\ Neben den klassischen Textabsätzen können Sie mit ''<br>'' auch einen Zeilenumbruch einfügen. Dieser Befehl muss nicht mit einem Schrägstrich beendet werden, sondern nur an einer Stelle eingefügt.\\ Wollen Sie, dass ein bestimmtes Wort, falls es an dieser Stelle in der Darstellung nötig ist, getrennt wird, dann verwenden Sie an der Stelle im Wort ''&wbr;'' und schreiben dahinter das Wort weiter.
@@ Zeile 56: / Zeile 54: @@
 Blocksatz inkl. letzter Zeile (in Moodle nicht möglich): ''<div style = „text-align:justify-all“>''. \\
 ??? Wie kann ich unterschiedliche Arten von Listen oder Aufzählungen einstellen?
-!!! Um eine Auflistung zu erstellen, gibt es verschiedene Wege. Es besteht die Möglichkeit diese ohne Aufzählungszeichen oder Nummerierung zu machen (1), verschiedene Auflistungszeichen (2) und der nummerierten Aufzählung (3). Der Beginn einer __Auflistung__ ist immer ''<ul>'' und endet mit ''</ul>''. __Nummerierte Aufzählungen__ beginnen mit ''<ol start>'' und enden mit ''</ol>''. \\
+!!! Um eine Auflistung zu erstellen, gibt es verschiedene Wege. Es besteht die Möglichkeit diese ohne Aufzählungszeichen oder Nummerierung zu machen (1), verschiedene Auflistungszeichen (2) und der nummerierten Aufzählung (3).
-. Auflistung ohne Zeichen oder Nummerierung:\\
+**1. Auflistung ohne Zeichen oder Nummerierung** \\
+Der Beginn einer __Auflistung__ ist immer ''<ul>'' und ihr Ende immer ''</ul>''. Die einzelnen Punkte werden einfach mit dem Absatzbefehl ''<br>'' getrennt. Die einzelnen Aufzählungspunkte werden dann lediglich eingerückt.\\
+Beispiel: \\
 ''<ul> Stichpunkt 1  <br>\\
 Stichpunkt 2 <br>\\
 ….
 </ul>''\\
-. Auflistung mit Aufzählungszeichen:\\
+**2. Auflistung mit Aufzählungszeichen**\\
+Wenn die Punkte mit einem Zeichen ("Bullet Points") versehen werden sollen, wird der Befehl ''<li>'' genutzt. \\
+Beispiel: \\
 ''<ul> \\
 <li> Listenpunkt 1 </li>\\
@@ Zeile 68: / Zeile 72: @@
 …
 </ul>'' \\
-. Nummerierte Aufzählung: In den Anführungszeichen können Sie festlegen mit welcher Zahl die Auflistung beginnen soll. Geben Sie nur <ol> ein, beginnen Sie automatisch mit 1. \\
-''<ol start = „//Zahl//“> \\
+**3. Nummerierte Aufzählung** \\
+__Nummerierte Aufzählungen__ beginnen mit ''<ol start>'' und enden mit ''</ol>''. In den Anführungszeichen können Sie festlegen, mit welcher Zahl die Auflistung beginnen soll. Geben Sie nur ''<ol>'' ein, beginnen Sie automatisch mit 1. \\
+Beispiel: \\
+''<ol start = „//ZAHL//“> \\
 <li> Listenpunkt 1 </li>\\
 <li> Listenpunkt 2 </li>\\
 ….
 </ol>''\\
-Um eine Unterliste innerhalb einer Liste zu erstellen, beginnen Sie wie üblich, fügen dann vor dem Unterstichpunkt ein weiteres ''<ul>'' bzw. ''<ol>'' ein und beenden dieses vor dem nächsten Stichpunkt der Hauptlist wieder mit ''</ul>'' bzw. ''</ol>''.\\
-Neben den Stichpunktlisten und Aufzählungen gibt es noch die __Definitionsliste__. In dieser wird der Definitionstitel mit <dt> gekennzeichnet und optisch vom Definitionseintrag <dd> abgesetzt. Begonnen wir diese List mit ''<dl>''.\\
+**Unterpunkte / Listen innerhalb von Listen** \\
+Um eine Unterliste innerhalb einer Liste zu erstellen, beginnen Sie wie üblich, fügen dann vor dem Unterpunkt ein weiteres ''<ul>'' (für nicht nummerierte) bzw. ''<ol>'' (für nummerierte Unterpunkte) ein und beenden dieses vor dem nächsten Stichpunkt der Hauptliste wieder mit ''</ul>'' bzw. ''</ol>''.\\
+Beispiel: \\
+''<ol> \\
+    <li> Listenpunkt 1 </li> \\
+    <ul> <li>Unterpunkt 1 ohne Nummerierung</li> </ul> \\
+    <li> Listenpunkt 2 </li> \\
+</ol>'' \\
+**Definitionslisten** \\
+Neben den Stichpunktlisten und Aufzählungen gibt es noch die __Definitionsliste__. In dieser wird der Definitionstitel mit <dt> gekennzeichnet und optisch vom Definitionseintrag <dd> abgesetzt. Begonnen wird diese List mit ''<dl>''.\\
 Beispiel:\\
 ''<dl>
@@ Zeile 96: / Zeile 113: @@
 ??? Wie formatiere ich Links? Kann ich E-Mail-Links anlegen?
 !!! Möchten Sie in Ihren Texten eine Verlinkung auf eine andere Webseite einbinden, nutzen Sie den Befehl ''<a href=" ">''. In die Anführungszeichen fügen Sie den Link zur Webseite ein. Anschließend können Sie noch einen anzuzeigenden Text eingeben bevor Sie den Befehl mit ''</a>'' beenden. Beispiel: ''<a href="//URL//"> //Klicken Sie hier// </a>''\\
-Damit sich der Link in einem neuen Browserfenster öffnet, verwenden Sie den Zusatz //target = „_top“// zwischen ''<a>'' und ''href=“ “''.\\ Beispiel: ''<a target="_top" href="URL"> Klicke hier </a>'' \\
+Damit sich der Link in einem neuen Browserfenster öffnet, verwenden Sie den Zusatz //target = „_top“// zwischen ''<a>'' und ''href=“ “''.\\ Beispiel: ''<a target="_top" href="URL"> Klicke hier </a>''
-Um direkt auf eine E-Mail zu verlinken, beginnen Sie wie bei einer normalen Webseite, setzen aber statt den Anführungszeichen //mailto:// vor die Emailadresse. Sie können hier einen Text anzeigen lassen anstelle der E-Mail-Adresse.\\
+Um direkt auf eine E-Mail-Adresse zu verlinken, beginnen Sie wie bei einer normalen Webseite, setzen aber keine Anführungszeichen und ein //mailto:// vor die Emailadresse. Sie können hier einen Text anzeigen lassen anstelle der E-Mail-Adresse.\\
 Beispiel: ''<a href = mailto:beispiel@email.de> Beispieltext <a/>''
 ??? Kann ich verborgenen / ausklappbaren Text einbinden?
@@ Zeile 108: / Zeile 126: @@
 ''
+??? Wie können Buttons mit hinterlegten Links erstellt werden?
+!!! Möchten Sie statt einem Link im Text direkt einen Button als Schaltfläche einsetzen, können Sie wie folgt vorgehen.\\
+Mit dem Befehl ''<button>'' fügen Sie eine Buttonschaltfläche ein und mit ''<a href= >'' können Sie den gewünschten Link im Button hinterlegen. Über einen eingegebenen Text zwischen ''<button>'' und ''</button>'' können Sie eine Beschriftung für diesen anzeigen. Dies könnte dann beispielsweise so aussehen:\\
+'' <a> Hier können Sie die Seite zur </a> <a href="https://www.leuphana.de/lehre.html"> <button> Lehre </button> </a> <a> öffnen. </a>''\\
+{{:playground:button_link.png?direct|}}

Support Digitale Lehre

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge