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.
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:
