Benutzer-Werkzeuge

Webseiten-Werkzeuge


playground:marieketest

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
playground:marieketest [12.07.2024 14:04] Marieke Röbenplayground:marieketest [08.01.2025 14:47] (aktuell) Rhea Sophia Wagener
Zeile 1: Zeile 1:
 ======Text- und Medienfelder formatieren====== ======Text- und Medienfelder formatieren======
 +[[moodle:html-formatierung|HTML-Formatierung]]
  
 Moodle bietet zahlreiche Textformatierungen und -anpassungen über HTML. \\ Moodle bietet zahlreiche Textformatierungen und -anpassungen über HTML. \\
Zeile 23: Zeile 24:
 Beispiel:\\ Beispiel:\\
 ''<p style=“font-size:20px“> //Dies ist ein Text in Schriftgröße 20px.// </p>'' ''<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? ??? 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]]. !!!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 53: Zeile 54:
 Blocksatz inkl. letzter Zeile (in Moodle nicht möglich): ''<div style = „text-align:justify-all“>''. \\ 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? ??? 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).  
-1. 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>\\ ''<ul> Stichpunkt 1  <br>\\
 Stichpunkt 2 <br>\\ Stichpunkt 2 <br>\\
 ….  …. 
 </ul>''\\ </ul>''\\
-2. 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> \\ ''<ul> \\
 <li> Listenpunkt 1 </li>\\ <li> Listenpunkt 1 </li>\\
Zeile 65: Zeile 72:
  
 </ul>'' \\  </ul>'' \\ 
-3. Nummerierte AufzählungIn 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 festlegenmit 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 1 </li>\\ 
 <li> Listenpunkt 2 </li>\\ <li> Listenpunkt 2 </li>\\
 …. ….
 </ol>''\\ </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:\\ Beispiel:\\
 ''<dl> ''<dl>
Zeile 93: Zeile 113:
 ??? Wie formatiere ich Links? Kann ich E-Mail-Links anlegen? ??? 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>''\\  !!! 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/>'' Beispiel: ''<a href = mailto:beispiel@email.de> Beispieltext <a/>''
 ??? Kann ich verborgenen / ausklappbaren Text einbinden? ??? Kann ich verborgenen / ausklappbaren Text einbinden?
Zeile 105: 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|}}
playground/marieketest.1720793091.txt.gz · Zuletzt geändert: 12.07.2024 14:04 von Marieke Röben