+ Dies ist einfach nur Text.
Weniger wäre nichts, denn dieser Text ist nicht durch ein spezifisches Element
+ umschlossen.
Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung
+ verwendet.
+
+ Es wirken nur die Eigenschaften des
+ <body>
+ Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor.
+ Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in
+ Abschnitte.
+ Bereiche
+
+ Ein Abschnitt, welcher für sich alleine stehen kann, definiert sich durch
+ <article>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne
+ jegliche Gestaltung aus.
+ Noch allgemeiner ist das
+ <section>
+ Element. Es schafft Bereiche, um Inhalte zu strukturieren.
+ Bestimmte Bereiche haben einen vorgegebenen Zweck.
Folgende Bereiche sind vorgegeben:
+
+
+
+
+
+ Um einleitenden Inhalt festzuhalten, wird das
+ <header>
+ Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den
+ nächsten, umgebenden Abschnitt.
+
+
+
+
+
+ Zur feineren Strukturierung und Gliederung von Texten sind einige weitere Elemente verfügbar. Diese werden
+ nun der Reihe nach aufgeführt. Zu Beginn die Überschriften, da sie noch zu den Abschnitten gehören. Das
+ kommt vermutlich daher, da Abschnitte häufig eine kennzeichnende Überschrift beinhalten.
+ Überschrift 1
+ Eine Überschrift erster Ordnung
+ <h1>
+ ist sehr groß und steht daher oft außerhalb eines Textflusses. Sie schafft eine deutliche Trennung sowohl
+ inhaltlich wie auch optisch. Sie erzeugt einen Abstand gleich der horizontalen Linie über sich.
+ Überschrift 2
+ Die weiteren Überschriften
+ <h2>
+ bis
+ <h6>
+ gliedern Text und werden auch als Titel für andere Elemente eingesetzt.
+ Überschrift 3 ist in Großbuchstaben gesetzt
+ Überschrift 4 verwendet normale Buchstaben und gleicht ansonsten Überschrift 3
+ Überschrift 5 ist Überschrift 5
+
+ Überschrift 6
+ Überschriften können mit dem Element <hgroup> mit Absätzen gruppiert werden, um
+ beispielsweise Untertitel abzubilden.
+
+
+
+ Gruppierung
+ Ein Absatz
+ <p>. Zugegeben ein kurzer.
+ Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder
+ unterhaltsamen Charakter.
Einfache Zeilenumbrüche werden darin mit
+ <br>
+ erreicht. Dies ist allerdings ein Element der Textebene und keine Gruppierung.
+ Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu
+ verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer
+ serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen
+ ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:
+ Text sitzt gerne auch mal zentriert.
+
+ p.txt_center
+
+ Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.
+
+ p.txt_right
+
+ Das Element
+ <address>
+ hat den Zweck, Kontaktinformationen bereitzustellen. Diese werden, je nach Position des Elements im
+ Kontext der gesamten Seite, anders gewertet.
+
+ Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte
+ <hr>
+ Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des
+ Elements. Eine Linie ist schwarz und durchgezogen.
+
+ Es ist auch eine unsichtbare Unterteilung möglich:
+
+
+ hr.hidden
+
+ Die Linie darf auch gepunktet sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert
+ der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:
+
+
+ hr.dotted
+
+
+
+ hr.space_even_half
+
+
+
+ hr.dotted.space_even_fourth
+
+ Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu.
+ Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine
+ breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilenanfang zu finden. Die
+ vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung
+ viele Formen annehmen.
+
+ p.column_2
+
+ Drei Spalten gilt es jetzt also zu füllen. Dann erst wird die Trennung
+ der Spalten durch eine Linie sichtbar.
+
+ p.column_3.column_line
+
+ Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird
+ dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon
+ gegeben.
Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu
+ trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter.
Auch
+ das zeigen diese beiden Absätze ganz gut.
+ Es gibt die Möglichkeit vorformatierten Text darzustellen
+ <pre>.
+ dadurch
bleiben
einrückungen
durch
tabulatoren
erhalten.
+ Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat
+ <blockquote>
+ zur Anwendung. Es besteht aus der Aussage und der Quelle.
+
+ Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen,
+ vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text
+ oder ein Hinweis auf eine bestimmte Textstelle.
+
+ Wikipedia
+
+
+
+ blockquote>p+p.quote_source
+
+ Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die
+ Formatierung automatisch ergänzt werden.
+
+ Das kannst du schon so machen aber dann isses halt Kacke.
+ o. V.
+
+
+ blockquote.quote_mark>p+p.quote_source
+
+ Listen
+ Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete
+ <ul>
+ und geordnete Listen
+ <ol>
+ sowie Beschreibungslisten
+ <dl>. Die beiden ersten Varianten beinhalten das Listenelement
+ <li>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck
+ <dt>
+ und Beschreibung
+ <dd>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:
+
+
+
+ - Geordnete
+ - Liste
+
+
+ - Beschreibungsliste
+ - Auch Definitionslisten genannt
+ - Ausdruck
+ - Beschreibung
+
+ Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden
+ sie mit
+ <figure>
+ umschlossen und tragen eine Bezeichnung, welche mit
+ <figcaption>
+ ausgezeichnet wird.
+
+ Fahne
+ {% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
+
+
+
+ figure>figcaption+{element}
+
+
+ Eine sehr klar definierte Gruppierung stellt das Element
+ <main>
+ dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.
+ Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch
+ <div>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die
+ Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.
+
+
Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese
+ hervorgehobene Information zeigt.
+
+ div.div_info>p
+
+
+
+ Textebene
+ Verweise
+ Ein wesentlicher Bestandteil von Hypertext sind Verweise
+ <a>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen
+ und externen Verweisen unterschieden werden.
+ Interne Verweise
+
+ a.a_line
+
+ können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren.
+ Externe Verweise
+ verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail-Adressen oder
+ Dateien zeigen. Theoretisch kann solch ein Verweis
+ alles
+ auslösen. Anweisungen werden im
+ URL-Standard
+ übergeben.
+ Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden.
+ Abhängig von ihrer Funktion und ihrem Zweck werden Verweise unterschiedlich formatiert.
+ Farbige
+ oder
+ unterstrichene Varianten
+ sind einfache Beispiele.
+ Wird der Verweis innerhalb eines
+ <nav>
+ Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes
+ oder der Anwendung. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.
+
+
+ Formatierungen
+ Texte, Wörter oder Zeichen können vielfältig formatiert werden.
+ Sie können
+ fett
+ <b>
+ oder
+ kursiv
+ <i>
+ geschrieben sein.
+
+ Auch beides ist möglich!?! Sollen sie nicht nur anders
+ aussehen, sondern auch
+ eine besondere inhaltliche Bedeutung
+ bekommen, werden sie mit
+ <strong>
+ und
+ <em>
+ ausgezeichnet.
+ Das
+ <u>
+ Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten,
+ nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie
+ Interaktionsweise, oder die Beschriftung des Textes als
+ flasch
+ (falsch) geschrieben.
+ Ähnlich ist es mit dem Element
+ <small>.
+ Es steht für Randnotizen, wird aber häufig auch kleiner dargestellt.
+
+ Ist ein Text nicht mehr korrekt oder relevant kann er mit
+ <s>
+ markiert werden:
+ Die Erde ist eine Scheibe.
+
+ Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. So was kann mit
+ <cite>
+ ausgezeichnet werden.
+ Pulp Fiction, ist ein super Film - zum Beispiel.
+ Um ein Zitat direkt im Text zu verwenden benutzt man das
+ <q>
+ Element. Es platziert Anführungszeichen um die Aussage:
+ Sie sagte:
+ Du wolltest staubsaugen!
Er sagte:
+ Mach' ich morgen.
+
+ Mit dem
+ <dfn>
+ Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen
+ <abbr>
+ gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut
+ title
+ stehen. Dies ist ein globales Attribut, das erklärende Informationen zu dem Element enthält. Diese wird
+ typischerweise beim darauf Zeigen eingeblendet.
+
+
+ HIPPIE
+
+ is a recursive acronym for
+ Hippie interweaves preeminent personal interface elements.
+ Die besondere Auszeichnung
+ <ruby>
+ bezeichnet ein Anmerkungssystem, bei dem der Text
+ zusammen mit seiner Anmerkung in einer Zeile erscheint.
+ Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:
+
+ -
+
<rb>
+
+ - Basis Textkomponente
+ -
+
<rt>
+
+ - Annotation
+ -
+
<rtc>
+
+ - Einzelne Komponente einer Annotation
+ -
+
<rp>
+
+ - Alternative bei fehlender Unterstützung
+
+
+
+
+ Basis
+
+
+
+ 今日
+
+
+
+ ♥
+
+
+
+
+
+ ☘
+
+
+
+
+
+ ✶
+
+
+
+
+
+
+
+
+ Wikipedia erklärt dies ausführlicher unter
+ Ruby Annotation.
+ Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird
+ unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die
+ Elemente
+ <data>
+ und
+ <time>
+ enthalten eine maschinen-lesbare Repräsentation des Inhaltes:
+
+ -
+ 0
+ ≠
+ NULL
+
+ -
+
<data>0</data> ≠ <data>NULL</data>
+
+ - Der Wert
+ NULL
+ mit Attribut
+
+ -
+
<data value="NULL">NULL</data>
+
+ -
+
+
+ -
+
<time>2018-10-08</time>
+
+ - Die Zeitangabe
+
+
+
+ mit Attribut
+
+ -
+
<time datetime="2018-10-08">Gestern</time>
+
+
+ Die Auszeichnung
+ <code>
+ wurde bis hier hin schon verwendet. Sie markiert ebenfalls Maschinensprache. Allerdings dient sie dazu von
+ Menschen gelesen zu werden. In diesem Dokument werden alle Elemente, die erklärt werden wiederum mit diesem
+ Element markiert.
+ Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element
+ <pre>
+ verwendet:
+ <html>
<head>
<title>hyper text markup language</title>
</head>
<body id="root">
<!-- content goes here -->
<p class="example">just like this.</p>
</body>
</html>
+ Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.
+
+ var def = "Definition einer Variablen";
+
+ In diesem Beispiel wird die Variable
+ def
+ definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element
+ <var>
+ ausgezeichnet werden.
+ Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das
+ <samp>
+ Element verwendet. Der Computer hat gesagt:
+ Ich kann das angegebene Objekt nicht finden.
+ Benutzereingaben haben ebenfalls ein eigenes Element
+ <kbd>. Damit werden Eingaben durch den Nutzer, wie zum Beispiel
+ Drücken Sie gleichzeitig Strg und A
, gekennzeichnet.
+ Hoch- und Tiefgestellte Zeichen werden durch die Elemente
+ <sup>
+ und
+ <sub>
+ repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen, sondern werden für ihren
+ jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:
+ Beispielsweise die Formel
+ E=m
+ c
+ 2
+ oder das Element H2O
+ Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden.
+ Dies stellt sich wie folgt dar:
+ Beispiel zum markieren 😉.
+ Eine Markierung kann, mittels
+ <mark>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar:
+ Diese Worte sind markiert.
+
+ Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen
+ كائن بشري
+ , die auch rechtsbündig geschrieben sein können, wird das
+ <bdi>
+ Element eingesetzt.
Die Schreibweise kann auch vom Author vorgegeben und expliziert geändert werden.
+ Dies wird dem
+ <bdo>
+ Element umgesetzt. Die Richtung wird dann mit dem Attribut
+ dir
+ angegeben.
+
+
+ -
+ كائن بشري
+
+ -
+ إنسان آلي
+
+
+ Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist
+ das
+ <span>
+ Element.
Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen
+ haben und eben keine inhaltlichen. Mit den Attributen
+ id
+ oder
+ class
+ werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen
+ Elementen ist ein Grundprinzip der Auszeichnungssprache
+ HTML.
+ Mit der Einführung von Absätzen wurde auch schon das
+ <br>
+ Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer
+ Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes
+ den Text umzubrechen.
+ Eine besondere Form des Zeilenumbruchs kann mit
+ <wbr>
+ eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines
+ HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen, falls ein Wort
+ zu lang für eine Textzeile sein sollte.
+ Und der Löwe brüllte "RRRR
+
+ rrrr
+
+ oooooooo
+
+ aaaa
+
+ AAAAAAAA
+
+ HHHH
+
+ hhhh
+
+ rrrrrrrrr"!
+
+ Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen
+ Änderungen
+ Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser
+ nachvollzogen werden.
Zum Beispiel eine Ergänzung von Inhalt.
+
+ Der Inhalt wird dann mit
+ <ins>
+ ausgezeichnet. Wird Text entfernt, kommt
+ <del>
+ zum Einsatz.
+ Zu Tun
+
+ - Fahrrad reparieren
+ -
+
Staubsaugen
+
+ - Tisch bauen
+
+
+
+ Eingebundene Inhalte
+ {% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
+ Dies ist ein Bild. Es wird mit dem Element
+ <img>
+ eingebunden. Solch ein Bild hat üblicherweise die Attribute
+ width
+ und
+ height. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer
+ das Attribut
+ alt
+ für eine alternative Beschreibung in Textform verwendet werden.
+ Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut
+ src
+ angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel
+ können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür
+ können dann die Elemente
+ <source>
+ und
+ <picture>
+ in Kombination verwendet werden.
+ {% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
+
+
+ Tabellen
+ Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt.
+ Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im Folgenden
+ aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert (fixiert) oder richten sich nach ihrem
+ Inhalt. Das bedeutet, die Spaltenbreite entspricht der breitesten ihrer Zellen.
+
+
+ | Eine |
+ einfache |
+
+
+ | Tabelle |
+
+
+
+ table.width_full>tr>td*2^tr>td[colspan=2]
+
+
+
+
+ | Eine |
+ freie (nicht fixierte) |
+
+
+ | Tabelle |
+
+
+
+ table>tr>td*2^tr>td[colspan=2]
+
+
+
+ | Mit |
+ ohne |
+
+
+ | Linien |
+
+
+
+ table.blank>tr>td*2^tr>td[colspan=2]
+
+
Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre
+ Zellverteilung:
+
+ Beschreibung bzw. Zusammenhang der Tabelle
+
+
+ | Kopfzeile |
+ A |
+ B |
+
+
+
+
+ | Tabelle |
+ |
+
+
+ | mit |
+ Titel |
+ |
+
+
+ |
+ Kopf- |
+ und |
+
+
+ |
+ Fußzeile |
+
+
+
+
+ | Fußzeile |
+ A |
+ B |
+
+
+
+
+ table.width_full.fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2
+
+ Viele weitere Formate sind möglich.
+
+
+ Formulare
+ Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben
+ Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht
+ explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig.
Üblicherweise stehen alle
+ Bedienelemente innerhalb eines
+ <form>
+ Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise
+ keine gestalterische Funktion.
+ Grundlegend ist das Element
+ <input>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert,
+ nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.
+
+ Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche
+ <input[type="button"]>. Es gibt allerdings auch ein eigenes Element
+ <button>
+ dafür.
+
+
+
+
+
+
+ Interaktive Elemente können durch das Attribut
+ readonly
+ nur lesbar gemacht werden oder mittels
+ disabled
+ gänzlich deaktiviert werden.
+ {% comment %}// TODO: Abstände, besonders margin generell überarbeiten{% endcomment %}
+
+
+
+
+
+
+ Das Element
+ <label>
+ ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente
+ zueinander deutlich ist.
+
+
+
+
+ Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese
+ werden mit
+ <fieldset>
+ realisiert.
+
+ Sie können mittels
+ <legend>
+ auch eine eigene Beschriftung erhalten.
+
+
+
+
+ Interaktive Elemente
+
+
+ Struktur
+
+
+
+
+
+
+
+
+
+ Medien
+
+
+ Druck
+
+
+
+
article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}
+
+ Bereiche
+ Elemente:
+ // body
// article
// section
// nav
// aside
// h1-h6
// header
// footer
+ <body>
+ Keine speziellen Attribute. Bekommt üblicherweise allgemeine Klassen zur Steuerung der Abmessungen
+ zugewiesen.
+ <article>
+ Ein Artikel.
+ <section>
+
+ Varianten
+ section.sec_main_center
+
+ Ende.
+ Zentrierter Bereich.
+
+ section.sec_main_status
+
+ <nav>
+
+ <aside>
+ Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit .bside.
+ aside.right+div.bside
+
+
+ Hauptbereich
+
+ <h*>
+ Überschrift 1
+ Überschrift 2
+ Überschrift 3
+ Überschrift 4
+ Überschrift 5
+
+ Überschrift 6
+ Mit Absatz innerhalb von <hgroup>.
+
+
+ Überschrift 1 oder 2
+ Mit Absatz innerhalb von <hgroup>.
+
+ <header>
+
+ header.header_page
+ header.header_txt>h1
+
+ <footer>
+ Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.
+
+
+ {% render 'hippie/partials/footer-pinned.liquid' %}
+
+
+
+ Gruppierung
+ Elemente:
+ // p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div
+ <p>
+ Ein Absatz. Ein code Element innerhalb wird besonders behandelt.
+ Varianten
+ p.column_2
+ Spalten können angegeben werden.
+ p.column_3.column_line
+ Spalten können angegeben werden.
+ <address>
+ Anschrift, mit bestimmtem, ##### Format.
+ <hr>
+
+ Varianten
+ hr.hidden+hr.dotted+hr.double
+
+
+
+ hr.vertical
+
+ <pre>
+ Vorformatierter Text.
+ erhält Umbrüche und Einrückung.
+
+ pre.pre_code>code*2
+ let variable = true;
+()(){}
+ <blockquote>
+ Ein Zitat ist eingerückt.
+ blockquote.quote_mark>p+p.quote_source
+
+ Zitat mit automatischen Anführungszeichen
+ und Quellenangabe.
+
+ <dl>, <ol>, <ul>
+
+ - Begriff
+ - Definition
+
+
+ - Eins
+ - Zwei
+
+
+ Varianten
+ ul.list_basic.list_dash>li*2
+
+ - Mehr Abstand und
+ - mit Unterstrichen.
+
+ ul.list_link>(li>a)*2
+
+ <figure>
+ figure>figcaption+{element}
+
+ Bezeichnung
+ Grafisches Element.
+
+ <main>
+ Hauptbereich
+ <div>
+ Varianten
+ div.div_info>p
+
+
Absatz in einer Box mit dem Typ Information.
+
div.box_space>div.box_cube>span
+
+ div.box_placeholder+hr+div.box_placeholder_bkg
+
+
+
+
+
+ Tabellen
+ Elemente:
+ // table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th
+ <table>
+ Varianten
+ table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
+
+
+
+ |
+ Kopfzeile |
+ A |
+ B |
+
+
+
+
+ | Vorspalte |
+ Eine |
+ |
+ |
+
+
+ | 1 |
+ |
+ erweiterte |
+ |
+
+
+ | 2 |
+ |
+ |
+ Tabelle |
+
+
+
+ table.width_full.stripe.fix.free>tr>td*3
+
+
+ | Tabelle |
+ |
+ |
+
+
+ | ohne |
+ Rahmen |
+ |
+
+
+ |
+ jedoch |
+ mit |
+
+
+ |
+ |
+ Streifen |
+
+
+ table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
+
+ Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
+
+
+ | Bezeichnung |
+ Menge |
+ Wert |
+
+
+
+
+ | Alpha |
+ 1 |
+ 8990 |
+
+
+ | Bravo |
+ 10 |
+ 1 |
+
+
+ | Charlie |
+ 1 |
+ 1 |
+
+
+
+
+ | Summe |
+ 9001 |
+
+
+
+
+
+
+ Elemente:
+ // form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend
+ <input>
+
+
+
+
+
+
+
+ Varianten
+ input.button_io+button.button_io
+
+
+
+
+
+
+
+
+
+
+
+
+ <select>
+
+
+
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid
new file mode 100644
index 0000000..9ee9246
--- /dev/null
+++ b/source/screens/demo/examples/10print.liquid
@@ -0,0 +1,71 @@
+---
+title: 10print
+tags:
+- demoExample
+---
+{% layout 'hippie/simple.liquid' %}
+
+{% block head %}
+{{ block.super -}}
+
+{% endblock %}
+
+{% block body %}
+
+ {{ gate.list(
+ 'Tor mit Symbol und Liste',
+ '../demo', {
+ src: '/art/flag_websafe_128x80.gif',
+ alt: 'Flag of Interaktionsweise'
+ }, [
+ {
+ name: '1',
+ href: 'http://domain.tld',
+ img: '../art/bullet.gif'
+ }, {
+ name: 'Zwei',
+ href: 'http://domain.tld',
+ img: '../art/bullet.gif'
+ }
+ ]
+ ) }}
+ {{ gate.simple('Tor', '../demo') }}
+
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/songbook.njk b/source/screens/demo/examples/songbook.njk
new file mode 100755
index 0000000..78a9939
--- /dev/null
+++ b/source/screens/demo/examples/songbook.njk
@@ -0,0 +1,52 @@
+---
+title: Songbook
+tags:
+ - demoExample
+---
+{% set pageBase = "../" %}
+{% set pageId = page.fileSlug %}
+
+{% extends "demo/_default.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+{% import "hippie/macros/_song.njk" as song %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block head %}
+ {{ super() }}
+{% endblock %}
+
+{% block body %}
+
+
+
+
+ Bereiche (sections)
+ section
+ section.overflow>div.float_space_left>img^p+p>br+a.lineLink
+
+
+ {% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
+
+ {% text hippie.placeholders.name %}
{% text hippie.placeholders.address %}
+ {% text hippie.placeholders.phone %}
{% link hippie.placeholders.mail, '', '', 'a_line' %}
+
+ nav
+ div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)
+
+ nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4
+
+ div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4
+
+ header
+ header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4
+
+ header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4
+
+
+
+
footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4
+
+
+
Interaktiv (interactive)
+ input
+
+
+
+
+
+
+
+ form
+
+
+ Gruppierung (grouping)
+ p
+ p.txt_right+p.txt_center+p.txt_left
+ Rechts
+ Mittig
+ Links
+ h*
+ h3.txt_color_dark+p.txt_tiny
+ Dunkle Überschrift
+ Mit winzigem Textabsatz
+ a>h4
+
+ Überschrift als Block-Verweis
+
+ Überschrift 1
+ Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.
+ Überschrift 2
+ kann das ebenso.
+ hr
+ hr.space_even_half
+
+ hr.dotted.space_even_fourth
+
+ ul
+ nav>ul.list_link>(li>a)+li>a>img+span
+
+ div
+ div.space_left_fourth>(hr+p+hr)
+
+
+
Eingerückter Inhalt
+
+
Tabellen
+ table.link>thead>tr>th{ }+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2
+
+
+
+ | |
+ Ab / Zy |
+ Neu / Alt |
+
+
+
+
+ | ■ |
+
+ Name
+ URL
+ |
+ YYYY-MM-DD |
+
+
+ |
+ Beschreibung
+ |
+
+
+
+
+ | ■ |
+
+ Name
+ URL
+ |
+ YYYY-MM-DD |
+
+
+ |
+ Beschreibung
+ |
+
+
+
+
+ Eingebettet
+
+ {% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+
+
+
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/pages/blank.liquid b/source/screens/demo/pages/blank.liquid
new file mode 100644
index 0000000..5cf5e7c
--- /dev/null
+++ b/source/screens/demo/pages/blank.liquid
@@ -0,0 +1,5 @@
+---
+title: Blank
+---
+{% assign pageId = page.fileSlug -%}
+{% layout 'hippie/simple.liquid' %}
diff --git a/source/screens/demo/pages/default.liquid b/source/screens/demo/pages/default.liquid
new file mode 100644
index 0000000..9b84b78
--- /dev/null
+++ b/source/screens/demo/pages/default.liquid
@@ -0,0 +1,13 @@
+---
+title: Default
+---
+{% assign pageId = page.fileSlug -%}
+{% assign pageClass = 'default' -%}
+{% assign bodyClass = 'default' -%}
+{% layout 'hippie/default.liquid' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block body %}
+
+{% endblock %}
diff --git a/source/screens/demo/pages/error/304.liquid b/source/screens/demo/pages/error/304.liquid
new file mode 100644
index 0000000..75127a7
--- /dev/null
+++ b/source/screens/demo/pages/error/304.liquid
@@ -0,0 +1,19 @@
+---
+title: 304
+---
+{% assign bodyClass = 'body_status' %}
+{% layout 'hippie/status.liquid' %}
+
+{% block main %}
+{{ block.super -}}
+Hier ist nichts. Not Found
+Zeitüberschreitung der Anforderung. Request Timeout
+Dienst nicht verfügbar. Service Unavailable
+