- 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
deleted file mode 100644
index 9ee9246..0000000
--- a/source/screens/demo/examples/10print.liquid
+++ /dev/null
@@ -1,71 +0,0 @@
----
-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
deleted file mode 100755
index 78a9939..0000000
--- a/source/screens/demo/examples/songbook.njk
+++ /dev/null
@@ -1,52 +0,0 @@
----
-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
deleted file mode 100644
index 5cf5e7c..0000000
--- a/source/screens/demo/pages/blank.liquid
+++ /dev/null
@@ -1,5 +0,0 @@
----
-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
deleted file mode 100644
index 9b84b78..0000000
--- a/source/screens/demo/pages/default.liquid
+++ /dev/null
@@ -1,13 +0,0 @@
----
-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
deleted file mode 100644
index 75127a7..0000000
--- a/source/screens/demo/pages/error/304.liquid
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-