Hauptüberschrift

Der Lead-Paragraph bietet sich bei längeren Artikeln an. Er dient dazu, den Leser in knappen Worten zu informieren, was er in dem Artikel erfahren kann. Auf dieser Seite sind alle Text-Formatierungen angewendet.

Inline-Formatierungen (Das ist eine Zwischen-Überschrift, auch als H2 bezeichnet)

Fett kann ein Text sein, das ist aber keinesfalls beleidigend gemeint. Zwar zeigt die Werkzeugleiste ein Kursiv an, der resultierende Text wird allerdings gefärbt.

Links führen auf eine andere Seite. Interne Links sollten immer im selben Tab geöffnet werden. Externe Links sollten in einem neuen Tab geöffnet werden.

Block-Elemente

Einfacher Absatz (Dies hier ist eine Unter-Überschrift, auch H3 genannt)

Er enthält den Fließtext. Es gibt dazu nicht mehr zu sagen, es sei denn die Begriffe Fließen und Text sind noch unbekannt. Solche grundlegenden Begriffs­erklärungen sprengen allerdings den Rahmen einer generischen Textseite.
Ein einfacher Zeilenwechsel wird mit SHIFT-Return eingefügt. Er fügt keinen neuen Absatz ein (der immer einen Abstand nach unten hat), sondern lediglich eine neue Zeile.

Horizontale Linie

---

Zitat

Der Specht an der Wand erspart die Katze im Schukarton.
Oder so ähnlich.

Listen

Spiegelstriche

• Ungeordnete Listen haben Spiegelstriche vorneweg.
• Man kann Listen auch ineinander verschachteln.
  • Untergeordnete Liste…
  • … Mit einigen Elemente.
    • Und noch eine Ebene…
    • Wenn man das unbedingt möchte…
    • … was ich aber nicht empfehle.
• Es geht weiter mit der übergeordneten Liste
• Bis zum letzten Element.

Nummeriert

1. Geordnete Listen sind numeriert.
   1. Untergeordnete Liste
   2. Potzblitz, hier ist recht wenig Platz.
   3. Hoffentlich kriegen wir keine zweistelligen Ziffern.
2. Das zweite Element der übergeordneten Liste.
3. Das dritte und letzte Element.

Medien

Bilder

Bild Links umfließend. Umfließende Bilder nehmen auf Table- und Desktop-Screens höchstens die Hälfte der Spaltenbreite ein. Auf Telefonen gehen sie ungeachtet Ihrer tatsächlichen Größe immer über die gesamte Spaltenbreite.

Exkurs: Das Clear

Ein Clear beendet einen umflossenen Block. Wenn zum Beispiel, wie in diesem Fall, der Absatz zu kurz ist, um neben das Bild zu passen. Im Editor erkennt man es an der schrägen Schraffur und der dunklen Linie oben. (Bitte nicht mit der Horizontalen Linie verwechseln.)

---

 

Rechts umfließendes Bild. Interessant ist, dass sich das Bild im Quellcode vor dem Absatz befindet, den es verdrängt. Ansonsten gelten hier die gleichen Regeln wie für Linksbündige Bilder:

• Höchstens eine halbe Spaltenbreite auf Tablet und Desktop
• Eine ganze Spaltenbreite auf Telefonen

Kleine Bilder nicht umfließen zu lassen sieht total behämmert aus. Sollte man besser bleiben lassen, schon alleine aus ästhetischen Gründen. Ich muss hier noch einen Haufen Unsinn schreiben, damit der Effekt etwas deutlicher wird, also bitte Tolerant sein und sich über mein Geschwafel nicht zu sehr echauffieren. Wobei so eine richtige Echauffage schon ganz unterhaltsam sein kann.

Natürlich kann man auch ein Bild in der Textspalte zentrieren. Dann steht es in der Mitte. Ogottogott, schon wieder Lückenfüllen, damit das hier mindestens zweizeilig wird.

Video

Videos werden Über den Button „Dateien hinzufügen“ aus der Mediathek eingefügt.

Slider

Slider werden Über den Button „Dateien hinzufügen“ aus der Mediathek zusammengestellt.

Extras

Responsive

Mobile-Only-Element: Dieses Element ist nur auf Screens in Telefon-Größe zu sehen. Einfach mal das Browserfenster großziehen, dann gibts hier was anderes zu sehen.

Desktop-Only: Dieses Element ist nur auf Screen in Desktop- und Tablet-Größe zu sehen. Einfach mal das Browserfenster kleinschieben, dann gibts hier was anderes zu sehen.

Bei langen Wörtern benutzt man am besten das Be­dingt­heits­trenn­zei­chen­werk­zeug. Es fügt weiche Trennungen ein.