Support Digitale Lehre

Um mit HTML zu starten ist dies die Grundlegende Basis.

• In diesen Klammern <> stehen die Befehle für HTML
• Mit/ in den Klammern beenden Sie einen Befehl

Damit der Text nicht nur unformatiert heruntergeschrieben wird, gibt es mit verschiedenen Befehlen die Möglichkeit Struktur hineinzubringen.

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, hier bei ist kein Stopp mit </br> nötig. Wollen Sie das 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.

Es gibt 6 verschiedene Größen von Überschriften beginnend mit <h1> als größte 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.

In HTML können Sie Ihre Texte auch in der Textausrichtung verändern. Um einen Abschnitt einer Textausrichtung zuzuweisen, verwenden Sie zunächst <div> um eine Ebene zu erstellen und somit alle eingeschlossenen Elemente wie Bilder ebenfalls auszurichten. In der <div>-Klammer können Sie dann die Ausrichtung einfügen. <div style = „text-align:“> hinter dem Doppelpunkt fügen Sie Left, right ein für Links- bzw rechtsbündig oder center für Zentriert. Für einen Blocksatz geben Sie justify ein, wenn die letzte Zeile auch mit in Blocksatz geschrieben werden soll, geben Sie justify-all ein.
Linksbündig: <div style = „text-align:left“>
Rechtsbündig: <div style = „text-align:right“>
Zentriert: <div style = „text-align:center“>
Blocksatz: <div style = „text-align:justify“>
Blocksatz inkl. letzter Zeile: <div style = „text-align:justify-all“>. Diese Funktion ist allerdings nicht in Moodle möglich.

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>.
1. Auflistung ohne Zeichen oder Nummerierung:
<ul> Stichpunkt 1 <br>
Stichpunkt 2 <br>
…. </ul>
2. Auflistung mit Aufzählungszeichen:
<ul>
<li> Listenpunkt 1 </li>
<li> Listenpunkt 2 </li>
… </ul>
3. 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“>
<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>.
Beispiel:
<dl> <dt> Listendefinition 1 </dt>
<dd> Listeneintrag 1</dd>
<dt> Listendefinition 2 </dt>
<dd> Listeneintrag 2 </dd>
<dd> Listeneintrag 3 </dd>
</dl>

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>

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 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.
Beispiel: <a href = mailto:beispiel@email.de> Beispieltext <a/>

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>

Mit HTML können Sie die Schriftgröße in verschiedener Form einstellen. Am besten verwenden Sie dafür die Angabe in Pixeln. Achten Sie darauf, dass die Basis Standardschriftgröße bei 15px liegt und Darstellungen ab 10px zu klein und ab 50px zu groß zum Lesen sein können. Sie können die Schriftgröße auch verkleinern oder vergrößern, wir raten davon allerdings im Rahmen der Lesbarkeit ab.
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 fügen Sie bitte, entweder im Befehl des Absatz <p> oder <span>, in den Befehlsklammern style=„font-size:20px“ ein.
Beispiel:
<p style=“font-size:20px“> Dies ist ein Text in Schriftgröße 20px. </p>

Um Texte ansprechender zu gestalten können Sie Passagen farblich verändern. Dafür verwenden Sie in den Befehlsklammen style=“color:Farbname ODER Hex-Code“. Beachten Sie, dass die Farbnamen nur auf Englisch angenommen werden, der Farbraum umschließt die Regenbogenfarben sowie schwarz, weiß, grau und braun. Sie können auf dieser Webseite eine Farbe wählen und den Hexadezimalcode direkt kopieren https://htmlcolorcodes.com.
Beispiel: <p style=“color:pink“> Pinker Text </p>

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>
Kursiv: <i>
Unterstrichen: <u>
Durchgestrichen: <strike> oder <s>
Tiefgestellt: <sub>
Hochgestellt: <sup>
Hervorgehoben: <strong> entspricht fett
Betont: <em> entspricht kursiv