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.
In diesem Abschnitt werden verschiedene Formen der Textauszeichnung demonstriert.
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.
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.
Text kann sowohl hoch als auch tief gestellt werden.
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?Na klar, am besten gleich Morgen früh.
Wolfgang will sich nochmal mit uns treffen.
Wolfgang:Mit der Aussage vom letzten Donnerstag habe ich Schwierigkeiten.
Können wir uns nochmal zusammensetzen?
Bis bald,
Gustav
Listen sind sehr gut geeignet, um Stichpunkte oder Aufzählungen darzustellen.
Wenn die Listeneinträge eine feste Reihenfolge haben, können sie auch automatisch nummeriert werden.
Durch eine Vorschau-Detail-Darstellung, lassen sich Detailinformationen zu einer Aussage hinzufügen.
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.
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.
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 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.
Hier kurz eine einfache Tabelle mit wenig Inhalt.
A | B | |
---|---|---|
X | 00 | 01 |
Y | 10 | 11 |
Aber Tabellen können noch mehr...
Kopf- und Fußzeilen verleihen einer Tabelle mehr Übersichtlichkeit.
Kopfzeile 1 | Mehrere Spalten | |||
Kopfzeile 2 | A | B | C | D |
Zeile 1 | Inhalt 1 | Inhalt 2 | Inhalt 3 | Inhalt 4 |
---|---|---|---|---|
Zeile 2 | Inhalt 5 | Inhalt 6 | Inhalt 7 | Inhalt 8 |
Zeile 3 | Inhalt 9 | Inhalt 10 | Inhalt 11 | Inhalt 12 |
Zeile 4 | Inhalt 13 | Inhalt 14 | Inhalt 15 | Inhalt 16 |
Zeile 5 | Inhalt 17 | Inhalt 18 | Inhalt 19 | Inhalt 20 |
Fußzeile | Summe | 210 |
Wenn eine Grafik in einem Text verwendet wird, sieht das so aus: .
Eine Grafik kann auch mit einer Beschriftung versehen werden.
Mit einem Badge, kann man den Status eines Abschnitts kennzeichnen.
Ein Badge kann man auch innerhalb eines Textes verwenden.
Zwischen zwei Paragraphen ...
Sieht das dann wie in diesem Fall aus.
In diesem Abschnitt werden alle Überschriften dargestellt