h5smple – Style Demo

Inhalt

Im Folgenden kommen einige Beispiele mit verschieden HTML-Elementen. Dabei soll ein Gesamteindruck von komplexen Dokumenten in diesem Stil ermöglicht werden. Dabie ist ein wichtiges Element natürlich der Text selbst, der, in Absätze gegliedert, oft die größte Fläche eines Dokumentes einnimmt. Ein Absatz sollte i.d.R. nicht mehr als 6 Zeilen lang sein, damit sich das Auge des Lesers schnell im Text orientieren kann.

Textauszeichnungen

In diesem Abschnitt werden verschiedene Formen der Textauszeichnung demonstriert.

Logische Gestaltung

Durch eine logische Gestaltung des Textes, lassen sich die Zusammenhänge der verschiedenen Aussagen im Text schneller erfassen. Auch wird die Stellung eines Wortes oder Absatzes im Kontext des Textes erkennbar, ohne den Text inhaltlich erfassen zu müssen.

Hervorhebung

Ein Fließtext kann mit verschiedenen Mitteln logisch gestaltet werden. So kann man einzelne Worte oder ganze Passagen z.B. hervorheben. Eine einfache Hervorhebung sollte aber den Textfluss nicht unterbrechen und das Auge nicht ablenken.
Noch kräftiger geht es mit einer starken Hervorhebung, durch welche ein Wort noch stärker aus dem Text hervorsticht.

Textstellung

Text kann sowohl hoch als auch tief gestellt werden.

Zitat

Ein eingebettes Zitat kann man als solches kenntlich machen (vergl. The Inline Quotation element). Ebenso kann man ein größeres wörtliches Zitat kennzeichnen:

Überlege einmal, bevor du gibst, zweimal, bevor du annimmst, und tausendmal, bevor du verlangst. Marie von Ebner-Eschenbach

Durch Email-Antworten entstehen manchmal verschachtelte Zitate:

Hallo Knut,

zu deiner Email von gestern:
Ich hatte einen schönen Urlaub.
Das freut mich, ich konnte mich auch erholen.
Hast du Zeit für ein Meeting?

Wolfgang will sich nochmal mit uns treffen.

Wolfgang:
Mit der Aussage vom letzten Donnerstag habe ich Schwierigkeiten.
Können wir uns nochmal zusammensetzen?
Na klar, am besten gleich Morgen früh.

Bis bald,
Gustav

Listen

Listen sind sehr gut geeignet, um Stichpunkte oder Aufzählungen darzustellen.

  • Luft
  • Erde
  • Wasser
    • Dampf
    • Wolken
      • Zirrus
      • Stratus
      • Nimbus
    • Schnee
    • Eis
  • Feuer

Wenn die Listeneinträge eine feste Reihenfolge haben, können sie auch automatisch nummeriert werden.

  1. Alpha
  2. Bravo
  3. Charlie
    1. Charli
    2. Charlie
    3. Charly
      1. Charly
      2. Charley
    4. Charley
  4. Delta
  5. Echo

Gruppierungen

Durch eine Vorschau-Detail-Darstellung, lassen sich Detailinformationen zu einer Aussage hinzufügen.

Ein Atom ist die kleinste Einheit, in die sich Materie mit mechanischen oder chemischen Mitteln zerlegen lässt.

Zusammen mit dem wissenschaftlich gesicherten Nachweis der Existenz von Atomen zu Anfang des 20. Jahrhunderts wurde bemerkt, dass sie nicht unteilbar sind. Vielmehr bestehen sie aus einer Atomhülle mit negativ geladenen Elektronen und einem positiv geladenen Atomkern. Später fand man heraus, dass der Atomkern aus positiv geladenen Protonen und ungeladenen Neutronen aufgebaut ist. Alle Atomsorten, die im neutralen Zustand dieselbe Anzahl Elektronen und damit Protonen besitzen, gehören zu ein und demselben chemischen Element. Die Anzahl der Neutronen in den Atomkernen eines Elements kann verschieden sein, dabei handelt es sich um Isotope des Elements.

Elektronen können durch elektrische Anziehung statt an einen auch an mehrere Atomkerne zugleich gebunden sein und dadurch solche Systeme zusammenhalten: Sie bilden Moleküle, die kleinsten Teile, die eine chemische Verbindung darstellen.

Revision

In einem Fließtext können Elemente ein- bzw. hinzugefügt oder auch aus dem Text enfternt bzw. gelöscht werden. Man kann auch Teile eines Textes markieren.

Quelltexte

In einem Text können einzelne Worte als Schlüsselworte ausgezeichnet werden. Mehrere Zeilen Quelltext werden üblicherweise mit einer Nichtproportionalschrift dargestellt:

public static int Main(string[] args)
{
    var requestHelp = args.Contains("help");
    Console.WriteLine(requestHelp ? "Use the livebelt!" : "What do you want?");
    return 0;
}

Quelltext wird auch oft mit Syntaxhighlighting dargestellt.

-- An example with SQL
-- DDL:
CREATE TABLE demo
(
    a varchar(255) PRIMARY KEY,
    b double precision,
    c integer NOT NULL
);
-- DQL:
SELECT a, b, COUNT(c)
FROM demo
WHERE a LIKE '%berlin'
  AND b > 200.0
ORDER BY a ASC
GROUP BY a, b;
import java.lang;

/* Another example with Java code... */
class ABC {

    private ArrayList<int> list = new ArrayList<int>();

    public static void main(String args[]) {
        // Comment
        float a = 10 + (float)200.0 * 300f;
        String b = "xyz";
        ArrayList<String> list2 = new ArrayList<String>();
        list.add(a);
    }
}
// Regular expression in JavaScript
var r = /^<div[^>]>([\s\S]*?)<\/div>$/g;

Alle Syntax-Klassen im Überblick:

Source Code Keyword
Source Code Type
Source Code Function Name
Source Code Literal String "Xyz"
Source Code Literal Character 'A'
Source Code Literal Hex or Binary 0x12345678
Source Code Literal Integer 1234
Source Code Literal Float 3.141592
Source Code Comment
Source Code Alternative Comment
Source Code Generic Error
Source Code Error
Source Code RE

Tabellen

Tabellen können sehr unterschiedliche Größen annehmen. Und gerade bei großen Tabellen ist die Übersichtlichkeit und Lesbarkeit der Werte in den Zellen von erheblicher Bedeutung. Z.B. sollten Linien, welche die Zellen trennen, ausreichend deutlich sein, dass das Auge in den Zeilen und Spalten gehalten wirde. Sie dürfen aber auch nicht über den Zelleninhalt dominieren.

Einfache Tabelle

Hier kurz eine einfache Tabelle mit wenig Inhalt.

AB
X0001
Y1011

Aber Tabellen können noch mehr...
Kopf- und Fußzeilen verleihen einer Tabelle mehr Übersichtlichkeit.

Kopfzeile 1Mehrere Spalten
Kopfzeile 2ABCD
Zeile 1Inhalt 1Inhalt 2Inhalt 3Inhalt 4
Zeile 2Inhalt 5Inhalt 6Inhalt 7Inhalt 8
Zeile 3Inhalt 9Inhalt 10Inhalt 11Inhalt 12
Zeile 4Inhalt 13Inhalt 14Inhalt 15Inhalt 16
Zeile 5Inhalt 17Inhalt 18Inhalt 19Inhalt 20
FußzeileSumme210
Eine Tabelle mit Kopf- und Fußzeilen.

Grafiken

Wenn eine Grafik in einem Text verwendet wird, sieht das so aus: Info.

Eine Grafik kann auch mit einer Beschriftung versehen werden.

Info
Infografik

Badges

Mit einem Badge, kann man den Status eines Abschnitts kennzeichnen.

Standard
Hervorgehoben
Erfolg
Information
Warnung
Fehler
Aktiv
Passiv

Ein Badge kann man auch innerhalb eines Textes verwenden.

Zwischen zwei Paragraphen ...

Dazwischen

Sieht das dann wie in diesem Fall aus.

Überschrift 1

In diesem Abschnitt werden alle Überschriften dargestellt

Überschrift 2

Hier kommt ein wenig Text.

Überschrift 3

Und hier kommt auch ein wenig Text.

Überschrift 4

In der 4. Ebene gibt es immer noch etwas zu sagen.
Überschrift 5
Und weil das noch nicht detailliert genug war...
Überschrift 6
gehen wir hier in der sechsten Ebene noch mal richtig in die Tiefe.