Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- moodle:html-formatierung [12.07.2024 14:27] – angelegt Marieke Röben
+++ moodle:html-formatierung [25.03.2025 14:51] (aktuell) – Marieke Röben
@@ Zeile 1: / Zeile 1: @@
-====== HTML-Formatierung ======
+~~FAQ moodle:html-formatierung~~
+======Text- und Medienfelder gestalten und formatieren======
+Moodle bietet zahlreiche Textformatierungen und -anpassungen über HTML. \\
+<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>
+===== Grundlagen =====
+??? Wie kann ich HTML-Formatierungen für Text- und Medienfelder verwenden?
+!!!\\
+{{:moodle:moodle-html_ausklappen.png?500|}}
+Um die folgenden Funktionen zu nutzen, öffnen Sie zunächst den HTML-Editor über den Pfeil über dem Texteditor und mit Klick auf das HTML-Icon (s. Screenshot).
+  * HTML-Befehle werden durch eckige Klammern markiert: ''<BEISPIEL>''
+  * Mit einem Schrägstrich in den Klammern beenden Sie einen Befehl: ''</BEISPIEL>''
+  * 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.
+Um Ihren Text nun in der Schriftgröße zu verändern, müssen Sie nach ''<p>'' oder ''<span>'' Folgendes einfügen: ''style="font-size://BEISPIEL//"''.
+Beispiel:\\
+''<p style=“font-size:20px“> //Dies ist ein Text in Schriftgröße 20px.// </p>''
+??? 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]].
+Beispiel: ''<p style="color:pink"> //Pinker Text// </p>''\\
+Beispiel: ''<p style="color:#ee29d0"> //Pinker Text// </p>''\\
+Beispiel: ''<p style="color:rgb(238, 41, 208)"> //Pinker Text// </p>''
+??? Kann ich Text durchstreichen / hochstellen / andere stilistische Veränderungen vornehmen?
+!!!In HTML gibt er mehrere Möglichkeiten Texte stilistisch zu verändern. Setzten Sie die folgenden Befehle einfach vor ''<>'' und mit ''</>'' hinter den Text.\\
+**Fett**:  ''<b>'' oder ''<strong>''\\
+//Kursiv//: ''<i>'' oder ''<em>''\\
+__Unterstrichen__: ''<u>'' \\
+<del>Durchgestrichen</del>: ''<s>'' oder ''<strike>''\\
+Tiefgestellt: ''<sub>''  \\
+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.
+??? Welche Arten von Überschriften kann ich nutzen?
+!!! Es gibt sechs verschiedene Größen von Überschriften. Beginnend mit ''<h1>'' als größter Überschrift werden die Überschriften bis zu ''<h6>'' immer kleiner. Üblicherweise wird pro Text nur eine H1 verwendet, ähnlich einem Titel. Alle weiteren Überschriftsgrößen können Sie mehrfach verwenden.\\
+??? Kann ich die Textausrichtung ändern? Ist Blocksatz möglich?
+!!! In HTML können Sie Ihre Texte auch in der Textausrichtung verändern. Um einen Abschnitt einer Textausrichtung zuzuweisen, umschließen Sie diesen zunächst mit dem Befehl ''<div>'', damit alle eingeschlossenen Elemente wie Bilder ebenfalls ausgerichtet werden. In der ''<div>''-Klammer können Sie dann die Ausrichtung einfügen: ''<div style = „text-align:“>'' Hinter dem Doppelpunkt fügen Sie den gewünschten Befehl ein:\\
+Linksbündig: ''<div style = „text-align:left“>''\\
+Rechtsbündig: ''<div style = „text-align:right“>''\\
+Zentriert: ''<div style = „text-align:center“>''\\
+Blocksatz (in Moodle nicht möglich): ''<div style = „text-align:justify“>''\\
+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).
+**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>''\\
+**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>\\
+<li> Listenpunkt 2 </li>\\
+…
+</ul>'' \\
+**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>''\\
+**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>
+ <dt> Listendefinition 1 </dt>\\
+ 	<dd> Listeneintrag 1</dd>\\
+ <dt> Listendefinition 2 </dt>\\
+ 	<dd> Listeneintrag 2 </dd>\\
+  	<dd> Listeneintrag 3 </dd>\\
+</dl>'' \\
+??? Kann ich eine Tabelle einfügen?
+!!! Um eine Tabelle einzufügen nutzen Sie den ''<table>''-Befehl. Um den Rahmen der Tabelle zu erstellen, müssen Sie zusätzlich noch ''<tbody>'' verwenden. Jede Zeile einer Tabelle wird mit einem ''<tr>'' (table row) Tag erstellt. In einer Zeile erstellen Sie Zellen durch ''<td>'' (table data) Abschnitte für normale Zellen oder ''<th>'' (table header) Abschnitte für Spalten-Zellen, die standardmäßig fettgedruckt und zentriert sind.\\
+Beispiel:\\
+''<table>
+<tbody> \\
+<tr> <th> //Überschrift in Zeile 1, Spalte 1// </th>  <td> //Zeile 1, Spalte 2// </td> </tr>\\
+<tr> <td> //Zeile 2, Spalte 1// </td> <td> //Zeile 2, Spalte 2// </td> </tr>
+</tbody>
+</table>
+''\\
+??? 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>''
+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/>''
+??? 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|}}
+??? Kann ich verborgenen / ausklappbaren Text einbinden?
+!!! Möchten Sie einen einklappbaren Abschnitt innerhalb Ihres Textes einzufügen, verwenden Sie die beiden Befehle ''<details>'' und ''<summary>''. Sie beginnen mit ''<details>'', anschließend ''<summary> //Bezeichnung// </summary>'' für die Überschrift des einklappbaren Abschnitts. Nun nutzen Sie ''<p> //Abschnittsinhalte// </p>'' um den Inhalt des eingeklappten zu erstellen. Zum Schluss schließen Sie diesen Bereich mit ''</details>''\\
+Beispiel: \\
+''<details>
+<summary> Überschrift zum Einklappen </summary> \\
+<p> Das ist der Inhalt für die eingeklappte Box </p> \\
+</details>
+''
+===== Einbindung von Bildern =====
+??? Wie kann ich Bilder so einbinden, dass sie sich dem Kurslayout / der Breite der Darstellung anpassen?
+!!! Wenn Moodle-Kurse auf unterschiedlichen Geräten oder in unterschiedlichen Fenstergrößen/Zoomstufen angezeigt werden, kann es passieren, dass die Größe eingebundener Bilder nicht mehr zum Gesamtlayout passt. Zum Beispiel kann ein Header im Kachelformat bei schmaler Darstellung (drei Kacheln nebeneinander) über die gesamte Breite des Kurses gehen, bei breiterer Darstellung (fünf Kacheln nebeneinander) aber nur noch einen Teil der Gesamtbreite abdecken.
+{{moodle:moodle_bilder_prozentual_-_gegenueberstellung_pixel.png?direct&450}}
+Dies kann gelöst werden, indem die Breite der Grafik in Prozent statt in Pixeln angegeben wird. Das Bild skaliert dann mit dem Gesamtlayout des Kurses:
+{{moodle:moodle_bilder_prozentual_-_gegenueberstellung_prozent.png?direct&450}}
+Um diesen Effekt zu erreichen, geben Sie einfach beim Einfügen des Bildes die Größe in Prozent an:
+{{:moodle:moodle-bilder_prozentual.png?450}}
+Für Header, die sich über die gesamte Breite des Kurses erstrecken sollen, bietet sich eine Zahl von 80-100% an. Wenn Sie eine Grafik nur am Rand einbinden möchten, bietet sich eine schmalere Variante, z.B. von 25-35%, an.

Support Digitale Lehre

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge