--- title: Basics tags: - demoIndex order: 2 --- {% layout 'hippie/page.liquid' %} {% block title %}Grundlagen{% endblock %} {% block main %}
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.

Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <footer> eingesetzt.

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:

  1. Geordnete
  2. 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 %} Flag
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

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 Auszeichnung 今日 きょう ♥ : Herz , Cœur . ☘ : Kleeblatt , Trèfle . ✶ : Stern , Étoile .

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

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.

Einfache Eingabeelemente
Einfache Eingabeelemente mit Stil
Weitere Eingabemöglichkeiten

Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf.

Hier nun eine Liste weiterer Arten von Eingabefeldern:

Interaktive Elemente

Struktur

Medien

Druck

Ende der Einführung

Dies war eine Übersicht der grundlegenden Elemente. Nun folgen Komponenten mit Kombinationen und erweiterten Formatierungen.

{% endblock %}