HTML Basics

HTML ist verschachtelte Elemente

<element>
  <element>
    <element>
      Text
    </element>
  </element>
</element>

Die wichtigsten Elemente heissen:

• <div> und <span> sind allgemeine Containerelemente
• <p> für Paragraph
• <h1>, <h2>, ... für Titel
• <a> für Link
• <strong> für Fett

Klassen

Zusätzlich können HTML-Elemente klassen haben, z.B::

<div class="mt-2">
  ...
</div>

Die Klassen verändern dann das aussehen.

Icons

<i class="fa-regular fa-house"></i>

Auf https://fontawesome.com/search können die Icons gesucht werden und der Code gleich kopiert werden.

Horizontal Stack 

<div class="hstack gap-1 flex-wrap">
  <a href="https://www.linkedin.com">
    <i class="fa-brands fa-linkedin fa-2x"></i>
  </a>
  <a href="https://www.x.com">
    <i class="fa-brands fa-x-twitter fa-2x"></i>
  </a>
  <a href="https://www.youtube.com">
    <i class="fa-brands fa-youtube fa-2x"></i>
  </a>
</div>

Die grösse des Icons kann mit fa-lg, fa-xl, fa-2x, fa-3x angepasst werden.

Schriftgrössen

<h2 class="fs-1">
  Titel
</h2>

Von Gross bis klein fs-1, fs-2, fs-3, fs-4, fs-5, fs-6

Extragross: display-1, display-2, display-3, display-4, display-5, display-6

Extra Abstände

<p class="mt-4">
  Inhalt
</p>

Standardabstand zwischen Elementen ist 2. Für grössere Abstände mt-3, mt-4, mt-5

mt steht für Margin Top, d.h. es muss am unteren Element angebracht werden.

Shift+Enter

Zeilenumbruch
ohne
neuen
Patagraphen zu starten.

Einbetten von Hacks, die nicht an dieser Position auf der Seite erscheinen sollen

z.B. für Floating Elemente, oder für CSS Hacks

HTML Widget benutzen und die Einstellungen "Code Editor" und die Option "Innerhalb Container mit section padding" deaktivieren.