975 lines
38 KiB
Text
975 lines
38 KiB
Text
---
|
|
title: Basics
|
|
tags:
|
|
- demoIndex
|
|
order: 2
|
|
---
|
|
{% layout 'hippie/page.liquid' %}
|
|
|
|
{% block title %}Grundlagen{% endblock %}
|
|
|
|
{% block main %}
|
|
<div class="demo__intro">
|
|
Dies ist einfach nur Text.<br>Weniger wäre nichts, denn dieser Text ist nicht durch ein spezifisches Element
|
|
umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung
|
|
verwendet.<br><br>
|
|
<article>
|
|
<p>Es wirken nur die Eigenschaften des
|
|
<code><body></code>
|
|
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.</p>
|
|
<h1 id="sections">Bereiche</h1>
|
|
<section>
|
|
<p>Ein Abschnitt, welcher für sich alleine stehen kann, definiert sich durch
|
|
<code><article></code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne
|
|
jegliche Gestaltung aus.</p>
|
|
<p>Noch allgemeiner ist das
|
|
<code><section></code>
|
|
Element. Es schafft Bereiche, um Inhalte zu strukturieren.</p>
|
|
<p>Bestimmte Bereiche haben einen vorgegebenen Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
|
|
</section>
|
|
<!-- <div class="overflow"> -->
|
|
<aside class="left">
|
|
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit
|
|
<code><aside></code>
|
|
markiert.</p>
|
|
</aside>
|
|
<section class="bside">
|
|
<header>
|
|
<p>Um einleitenden Inhalt festzuhalten, wird das
|
|
<code><header></code>
|
|
Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den
|
|
nächsten, umgebenden Abschnitt.</p>
|
|
<nav>
|
|
<p>Das Element
|
|
<code><nav></code>
|
|
umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
|
|
</nav>
|
|
</header>
|
|
<footer>
|
|
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird
|
|
<code><footer></code>
|
|
eingesetzt.</p>
|
|
</footer>
|
|
</section>
|
|
<!-- </div> -->
|
|
<p>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.</p>
|
|
<h1>Überschrift 1</h1>
|
|
<p>Eine Überschrift erster Ordnung
|
|
<code><h1></code>
|
|
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.</p>
|
|
<h2>Überschrift 2</h2>
|
|
<p>Die weiteren Überschriften
|
|
<code><h2></code>
|
|
bis
|
|
<code><h6></code>
|
|
gliedern Text und werden auch als Titel für andere Elemente eingesetzt.</p>
|
|
<h3>Überschrift 3 ist in Großbuchstaben gesetzt</h3>
|
|
<h4>Überschrift 4 verwendet normale Buchstaben und gleicht ansonsten Überschrift 3</h4>
|
|
<h5>Überschrift 5 ist Überschrift 5</h5>
|
|
<hgroup>
|
|
<h6>Überschrift 6</h6>
|
|
<p>Überschriften können mit dem Element <code><hgroup></code> mit Absätzen gruppiert werden, um
|
|
beispielsweise Untertitel abzubilden.</p>
|
|
</hgroup>
|
|
</article>
|
|
<article>
|
|
<h1 id="grouping">Gruppierung</h1>
|
|
<p>Ein Absatz
|
|
<code><p></code>. Zugegeben ein kurzer.</p>
|
|
<p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder
|
|
unterhaltsamen Charakter.<br>Einfache Zeilenumbrüche werden darin mit
|
|
<code><br></code>
|
|
erreicht. Dies ist allerdings ein Element der Textebene und keine Gruppierung.</p>
|
|
<p>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:</p>
|
|
<p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">p.txt_center</code>
|
|
</div>
|
|
<p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">p.txt_right</code>
|
|
</div>
|
|
<address>Das Element
|
|
<code><address></code>
|
|
hat den Zweck, Kontaktinformationen bereitzustellen. Diese werden, je nach Position des Elements im
|
|
Kontext der gesamten Seite, anders gewertet.
|
|
</address>
|
|
<p>Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte
|
|
<code><hr></code>
|
|
Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des
|
|
Elements. Eine Linie ist schwarz und durchgezogen.</p>
|
|
<hr/>
|
|
<p>Es ist auch eine unsichtbare Unterteilung möglich:</p>
|
|
<hr class="hidden js_pop"/>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">hr.hidden</code>
|
|
</div>
|
|
<p>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%:</p>
|
|
<hr class="dotted js_pop"/>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">hr.dotted</code>
|
|
</div>
|
|
<hr class="space_even_half js_pop"/>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">hr.space_even_half</code>
|
|
</div>
|
|
<hr class="dotted space_even_fourth js_pop"/>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">hr.dotted.space_even_fourth</code>
|
|
</div>
|
|
<p class="column_2 js_pop">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>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">p.column_2</code>
|
|
</div>
|
|
<p class="column_3 column_line js_pop">Drei Spalten gilt es jetzt also zu füllen. Dann erst wird die Trennung
|
|
der Spalten durch eine Linie sichtbar.</p>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">p.column_3.column_line</code>
|
|
</div>
|
|
<p class="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.<br>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.<br>Auch
|
|
das zeigen diese beiden Absätze ganz gut.</p>
|
|
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen
|
|
<code><pre></code>.</p>
|
|
<pre>dadurch<br> bleiben<br> einrückungen<br> durch<br> tabulatoren<br> erhalten.</pre>
|
|
<p>Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat
|
|
<code><blockquote></code>
|
|
zur Anwendung. Es besteht aus der Aussage und der Quelle.</p>
|
|
<blockquote class="js_pop" cite="https://de.wikipedia.org/wiki/Zitat/">
|
|
<p>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.</p>
|
|
<p class="quote_source">
|
|
<a href="https://de.wikipedia.org/wiki/Zitat/">Wikipedia</a>
|
|
</p>
|
|
</blockquote>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">blockquote>p+p.quote_source</code>
|
|
</div>
|
|
<p>Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die
|
|
Formatierung automatisch ergänzt werden.</p>
|
|
<blockquote class="quote_mark js_pop" cite="">
|
|
<p>Das kannst du schon so machen aber dann isses halt Kacke.</p>
|
|
<p class="quote_source">o. V.</p>
|
|
</blockquote>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">blockquote.quote_mark>p+p.quote_source</code>
|
|
</div>
|
|
<h2>Listen</h2>
|
|
<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete
|
|
<code><ul></code>
|
|
und geordnete Listen
|
|
<code><ol></code>
|
|
sowie Beschreibungslisten
|
|
<code><dl></code>. Die beiden ersten Varianten beinhalten das Listenelement
|
|
<code><li></code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck
|
|
<code><dt></code>
|
|
und Beschreibung
|
|
<code><dd></code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
|
|
<ul>
|
|
<li>Ungeordnete</li>
|
|
<li>Listen</li>
|
|
</ul>
|
|
<ul class="list_dash">
|
|
<li>Verschiedener</li>
|
|
<li>Art</li>
|
|
</ul>
|
|
<ol>
|
|
<li>Geordnete</li>
|
|
<li>Liste</li>
|
|
</ol>
|
|
<dl>
|
|
<dt>Beschreibungsliste</dt>
|
|
<dd>Auch Definitionslisten genannt</dd>
|
|
<dt>Ausdruck</dt>
|
|
<dd>Beschreibung</dd>
|
|
</dl>
|
|
<p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden
|
|
sie mit
|
|
<code><figure></code>
|
|
umschlossen und tragen eine Bezeichnung, welche mit
|
|
<code><figcaption></code>
|
|
ausgezeichnet wird.</p>
|
|
<figure class="js_pop">
|
|
<figcaption>Fahne</figcaption>
|
|
{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
|
y="0px" width="10%" height="10%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
|
<desc>Flag</desc>
|
|
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
|
|
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
|
|
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
|
|
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
|
|
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
|
|
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
|
|
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
|
|
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
|
|
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
|
|
</svg>
|
|
</figure>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">figure>figcaption+{element}</code>
|
|
</div>
|
|
<hr class="hidden">
|
|
<p>Eine sehr klar definierte Gruppierung stellt das Element
|
|
<code><main></code>
|
|
dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
|
|
<p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch
|
|
<code><div></code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die
|
|
Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
|
|
<div class="div_info js_pop">
|
|
<p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese
|
|
hervorgehobene Information zeigt.</p>
|
|
</div>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">div.div_info>p</code>
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<h1 id="textlevel">Textebene</h1>
|
|
<h2>Verweise</h2>
|
|
<p id="links">Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
|
|
<code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen
|
|
und externen Verweisen unterschieden werden.
|
|
<a class="a_internal js_pop" href="#links">Interne Verweise</a>
|
|
<span class="exp_pop">
|
|
<code class="code_solo">a.a_line</code>
|
|
</span>
|
|
können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren.
|
|
<a class="a_external" href="https://de.wikipedia.org">Externe Verweise</a>
|
|
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
|
|
<b>alles</b>
|
|
auslösen. Anweisungen werden im
|
|
<a href="https://tools.ietf.org/html/rfc1738">URL-Standard</a>
|
|
übergeben.</p>
|
|
<p>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.
|
|
<a class="a_internal" href="#">Farbige</a>
|
|
oder
|
|
<a class="a_line" href="#">unterstrichene Varianten</a>
|
|
sind einfache Beispiele.</p>
|
|
<p>Wird der Verweis innerhalb eines
|
|
<code><nav></code>
|
|
Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes
|
|
oder der Anwendung. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.</p>
|
|
<nav>
|
|
<p>
|
|
<a class="a_button_text" href="#textlevel">↥</a>
|
|
(Zum Anfang des Abschnitts springen)
|
|
<a class="a_button_text" href="#">⇫</a>
|
|
(Zum Anfang der Seite springen)</p>
|
|
</nav>
|
|
<nav class="nav_center_old">
|
|
<ul>
|
|
<li>
|
|
<a href="/demo/examples/start.html" class="a_button">Startseite</a>
|
|
</li>
|
|
<li>
|
|
<a href="" class="a_button a_internal">Hilfe</a>
|
|
</li>
|
|
<li>
|
|
<a href="" class="a_button">⌨</a>
|
|
</li>
|
|
<li>
|
|
<a href="" class="a_button">⋯</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<h2>Formatierungen</h2>
|
|
<p>Texte, Wörter oder Zeichen können vielfältig formatiert werden.</p>
|
|
<p>Sie können
|
|
<b>fett</b>
|
|
<code><b></code>
|
|
oder
|
|
<i>kursiv</i>
|
|
<code><i></code>
|
|
geschrieben sein.
|
|
<b>
|
|
<i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders
|
|
<strong>aussehen</strong>, sondern auch
|
|
<em>eine besondere inhaltliche Bedeutung</em>
|
|
bekommen, werden sie mit
|
|
<code><strong></code>
|
|
und
|
|
<code><em></code>
|
|
ausgezeichnet.</p>
|
|
<p>Das
|
|
<code><u></code>
|
|
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
|
|
<u>Interaktionsweise</u>, oder die Beschriftung des Textes als
|
|
<u>flasch</u>
|
|
(falsch) geschrieben.</p>
|
|
<p>Ähnlich ist es mit dem Element
|
|
<code><small></code>.
|
|
<small>Es steht für Randnotizen, wird aber häufig auch kleiner dargestellt.</small>
|
|
</p>
|
|
<p>Ist ein Text nicht mehr korrekt oder relevant kann er mit
|
|
<code><s></code>
|
|
markiert werden:<br>
|
|
<s>Die Erde ist eine Scheibe.</s>
|
|
</p>
|
|
<p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. So was kann mit
|
|
<code><cite></code>
|
|
ausgezeichnet werden.
|
|
<cite>Pulp Fiction</cite>, ist ein super Film - zum Beispiel.</p>
|
|
<p>Um ein Zitat direkt im Text zu verwenden benutzt man das
|
|
<code><q></code>
|
|
Element. Es platziert Anführungszeichen um die Aussage:</p>
|
|
<p>Sie sagte:
|
|
<q>Du wolltest staubsaugen!</q><br>Er sagte:
|
|
<q>Mach' ich morgen.</q>
|
|
</p>
|
|
<p>Mit dem
|
|
<code><dfn></code>
|
|
Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen
|
|
<code><abbr></code>
|
|
gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut
|
|
<code>title</code>
|
|
stehen. Dies ist ein globales Attribut, das erklärende Informationen zu dem Element enthält. Diese wird
|
|
typischerweise beim darauf Zeigen eingeblendet.</p>
|
|
<p>
|
|
<dfn>
|
|
<abbr title="Hippie interweaves preeminent personal interface elements">HIPPIE</abbr>
|
|
</dfn>
|
|
is a recursive acronym for
|
|
<dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
|
|
<p>Die besondere Auszeichnung
|
|
<code><ruby></code>
|
|
<q cite="https://de.wikipedia.org/wiki/Ruby_Annotation">bezeichnet ein Anmerkungssystem, bei dem der Text
|
|
zusammen mit seiner Anmerkung in einer Zeile erscheint.</q>
|
|
Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:</p>
|
|
<dl>
|
|
<dt>
|
|
<code><rb></code>
|
|
</dt>
|
|
<dd>Basis Textkomponente</dd>
|
|
<dt>
|
|
<code><rt></code>
|
|
</dt>
|
|
<dd>Annotation</dd>
|
|
<dt>
|
|
<code><rtc></code>
|
|
</dt>
|
|
<dd>Einzelne Komponente einer Annotation</dd>
|
|
<dt>
|
|
<code><rp></code>
|
|
</dt>
|
|
<dd>Alternative bei fehlender Unterstützung</dd>
|
|
</dl>
|
|
<hr class="dotted space_even_half">
|
|
<div class="txt_center">
|
|
<ruby class="space_right_small">
|
|
<rb>Basis</rb>
|
|
<rt>Auszeichnung</rt>
|
|
</ruby>
|
|
<ruby class="space_right_small">
|
|
<rb>今日</rb>
|
|
<rt>きょう</rt>
|
|
</ruby>
|
|
<ruby>
|
|
♥
|
|
<rp>:
|
|
</rp>
|
|
<rt>Herz</rt>
|
|
<rp>,
|
|
</rp>
|
|
<rtc>
|
|
<rt lang="fr">Cœur</rt>
|
|
</rtc>
|
|
<rp>.</rp>
|
|
☘
|
|
<rp>:
|
|
</rp>
|
|
<rt>Kleeblatt</rt>
|
|
<rp>,
|
|
</rp>
|
|
<rtc>
|
|
<rt lang="fr">Trèfle</rt>
|
|
</rtc>
|
|
<rp>.</rp>
|
|
✶
|
|
<rp>:
|
|
</rp>
|
|
<rt>Stern</rt>
|
|
<rp>,
|
|
</rp>
|
|
<rtc>
|
|
<rt lang="fr">Étoile</rt>
|
|
</rtc>
|
|
<rp>.</rp>
|
|
</ruby>
|
|
</div>
|
|
<hr class="dotted space_even_half">
|
|
<p>Wikipedia erklärt dies ausführlicher unter
|
|
<a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
|
|
<p>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
|
|
<code><data></code>
|
|
und
|
|
<code><time></code>
|
|
enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
|
|
<dl>
|
|
<dt>
|
|
<data value="0">0</data>
|
|
≠
|
|
<data value="">NULL</data>
|
|
</dt>
|
|
<dd>
|
|
<code><data>0</data> ≠ <data>NULL</data></code>
|
|
</dd>
|
|
<dt>Der Wert
|
|
<data value="NULL">NULL</data>
|
|
mit Attribut
|
|
</dt>
|
|
<dd>
|
|
<code><data value="NULL">NULL</data></code>
|
|
</dd>
|
|
<dt>
|
|
<time>2018-10-08</time>
|
|
</dt>
|
|
<dd>
|
|
<code><time>2018-10-08</time></code>
|
|
</dd>
|
|
<dt>Die Zeitangabe
|
|
<i>
|
|
<time datetime="2018-10-08">Gestern</time>
|
|
</i>
|
|
mit Attribut
|
|
</dt>
|
|
<dd>
|
|
<code><time datetime="2018-10-08">Gestern</time></code>
|
|
</dd>
|
|
</dl>
|
|
<p>Die Auszeichnung
|
|
<code><code></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.</p>
|
|
<p>Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element
|
|
<code><pre></code>
|
|
verwendet:</p>
|
|
<pre class="pre_code"><code><html><br> <head><br> <title>hyper text markup language</title><br> </head><br> <body id="root"><br> <!-- content goes here --><br> <p class="example">just like this.</p><br> </body><br></html></code></pre>
|
|
<p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p>
|
|
<p>
|
|
<code>var def = "Definition einer Variablen";</code>
|
|
</p>
|
|
<p>In diesem Beispiel wird die Variable
|
|
<var>def</var>
|
|
definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element
|
|
<code><var></code>
|
|
ausgezeichnet werden.</p>
|
|
<p>Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das
|
|
<code><samp></code>
|
|
Element verwendet. Der Computer hat gesagt:
|
|
<samp>Ich kann das angegebene Objekt nicht finden</samp>.</p>
|
|
<p>Benutzereingaben haben ebenfalls ein eigenes Element
|
|
<code><kbd></code>. Damit werden Eingaben durch den Nutzer, wie zum Beispiel
|
|
<q>Drücken Sie gleichzeitig <kbd>Strg</kbd> und <kbd>A</kbd></q>, gekennzeichnet.</p>
|
|
<p>Hoch- und Tiefgestellte Zeichen werden durch die Elemente
|
|
<code><sup></code>
|
|
und
|
|
<code><sub></code>
|
|
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:</p>
|
|
<p>Beispielsweise die Formel
|
|
<var>E</var>=<var>m</var>
|
|
<var>c</var>
|
|
<sup>2</sup>
|
|
oder das Element H<sub>2</sub>O</p>
|
|
<p>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:</p>
|
|
<p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
|
|
<p>Eine Markierung kann, mittels
|
|
<code><mark></code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar:
|
|
<mark>Diese Worte sind markiert.</mark>
|
|
</p>
|
|
<p>Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen
|
|
<bdi>كائن بشري</bdi>
|
|
, die auch rechtsbündig geschrieben sein können, wird das
|
|
<code><bdi></code>
|
|
Element eingesetzt.<br>Die Schreibweise kann auch vom Author vorgegeben und expliziert geändert werden.
|
|
Dies wird dem
|
|
<code><bdo></code>
|
|
Element umgesetzt. Die Richtung wird dann mit dem Attribut
|
|
<code>dir</code>
|
|
angegeben.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<bdo dir="rtl">كائن بشري</bdo>
|
|
</li>
|
|
<li>
|
|
<bdo dir="rtl">إنسان آلي</bdo>
|
|
</li>
|
|
</ul>
|
|
<p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist
|
|
das
|
|
<code><span></code>
|
|
Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen
|
|
haben und eben keine inhaltlichen. Mit den Attributen
|
|
<code>id</code>
|
|
oder
|
|
<code>class</code>
|
|
werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen
|
|
Elementen ist ein Grundprinzip der Auszeichnungssprache
|
|
<abbr title="Hypertext Markup Language">HTML</abbr>.</p>
|
|
<p>Mit der Einführung von Absätzen wurde auch schon das
|
|
<code><br></code>
|
|
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.</p>
|
|
<p>Eine besondere Form des Zeilenumbruchs kann mit
|
|
<code><wbr></code>
|
|
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.</p>
|
|
<p>Und der Löwe brüllte "RRRR
|
|
<wbr>
|
|
rrrr
|
|
<wbr>
|
|
oooooooo
|
|
<wbr>
|
|
aaaa
|
|
<wbr>
|
|
AAAAAAAA
|
|
<wbr>
|
|
HHHH
|
|
<wbr>
|
|
hhhh
|
|
<wbr>
|
|
rrrrrrrrr"!
|
|
</p>
|
|
<p>Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen</p>
|
|
<h2>Änderungen</h2>
|
|
<p>Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser
|
|
nachvollzogen werden.<br>Zum Beispiel eine Ergänzung von Inhalt.</p>
|
|
<aside>
|
|
<ins>Dies ist auch wichtig.</ins>
|
|
</aside>
|
|
<p>Der Inhalt wird dann mit
|
|
<code><ins></code>
|
|
ausgezeichnet. Wird Text entfernt, kommt
|
|
<code><del></code>
|
|
zum Einsatz.</p>
|
|
<h6>Zu Tun</h6>
|
|
<ul>
|
|
<li>Fahrrad reparieren</li>
|
|
<li>
|
|
<del>Staubsaugen</del>
|
|
</li>
|
|
<li>Tisch bauen</li>
|
|
</ul>
|
|
</article>
|
|
<article>
|
|
<h1 id="embedded">Eingebundene Inhalte</h1>
|
|
{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
|
|
<p>Dies ist ein Bild. Es wird mit dem Element
|
|
<code><img></code>
|
|
eingebunden. Solch ein Bild hat üblicherweise die Attribute
|
|
<code>width</code>
|
|
und
|
|
<code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer
|
|
das Attribut
|
|
<code>alt</code>
|
|
für eine alternative Beschreibung in Textform verwendet werden.</p>
|
|
<p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut
|
|
<code>src</code>
|
|
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
|
|
<code><source></code>
|
|
und
|
|
<code><picture></code>
|
|
in Kombination verwendet werden.</p>
|
|
{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
|
|
</article>
|
|
<article>
|
|
<h1>Tabellen</h1>
|
|
<p>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.</p>
|
|
<table class="width_full js_pop">
|
|
<tr>
|
|
<td>Eine</td>
|
|
<td>einfache</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">Tabelle</td>
|
|
</tr>
|
|
</table>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">table.width_full>tr>td*2^tr>td[colspan=2]</code>
|
|
</div>
|
|
<div class="overflow">
|
|
<table class="float_space_left js_pop">
|
|
<tr>
|
|
<td>Eine</td>
|
|
<td>freie (nicht fixierte)</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">Tabelle</td>
|
|
</tr>
|
|
</table>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
|
|
</div>
|
|
<table class="blank float_space_left js_pop">
|
|
<tr>
|
|
<td>Mit</td>
|
|
<td>ohne</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">Linien</td>
|
|
</tr>
|
|
</table>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">table.blank>tr>td*2^tr>td[colspan=2]</code>
|
|
</div>
|
|
</div>
|
|
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre
|
|
Zellverteilung:</p>
|
|
<table class="width_full fix js_pop">
|
|
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Kopfzeile</th>
|
|
<th>A</th>
|
|
<th>B</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Tabelle</td>
|
|
<td colspan="2"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>mit</td>
|
|
<td>Titel</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="2"></td>
|
|
<td>Kopf-</td>
|
|
<td>und</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td>Fußzeile</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th scope="row">Fußzeile</th>
|
|
<td>A</td>
|
|
<td>B</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
<div class="exp_pop">
|
|
<code class="code_solo">table.width_full.fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
|
|
</div>
|
|
<p>Viele weitere Formate sind möglich.</p>
|
|
</article>
|
|
<article>
|
|
<h1>Formulare</h1>
|
|
<p>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.<br>Üblicherweise stehen alle
|
|
Bedienelemente innerhalb eines
|
|
<code><form></code>
|
|
Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise
|
|
keine gestalterische Funktion.</p>
|
|
<p>Grundlegend ist das Element
|
|
<code><input></code>. 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.</p>
|
|
<p><input value="Undefiniert"/><input class="input_io" value="Undefiniert mit Stil"/></p>
|
|
<p>Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche
|
|
<code><input[type="button"]></code>. Es gibt allerdings auch ein eigenes Element
|
|
<code><button></code>
|
|
dafür.</p>
|
|
<p><input type="button" value="Input Button">
|
|
<button>Button</button>
|
|
</p>
|
|
<p><input class="button_io" type="button" value="Input Button">
|
|
<button class="button_io">Button</button>
|
|
</p>
|
|
<p>Interaktive Elemente können durch das Attribut
|
|
<code>readonly</code>
|
|
nur lesbar gemacht werden oder mittels
|
|
<code>disabled</code>
|
|
gänzlich deaktiviert werden.</p>
|
|
{% comment %}// TODO: Abstände, besonders margin generell überarbeiten{% endcomment %}
|
|
<p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text"
|
|
value="Deaktivierte Eingabe"
|
|
size="21" disabled="disabled">
|
|
<button disabled="disabled">Deaktivierte Schaltfläche</button>
|
|
</p>
|
|
<p><input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="input_io"
|
|
type="text"
|
|
value="Deaktivierte Eingabe"
|
|
size="21"
|
|
disabled="disabled">
|
|
<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
|
|
</p>
|
|
<p>Das Element
|
|
<code><label></code>
|
|
ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente
|
|
zueinander deutlich ist.</p>
|
|
<p>
|
|
<label>Beschriftung:<input type="text"></label>
|
|
</p>
|
|
<div class="overflow">
|
|
<div class="float_left">
|
|
<table class="fix blank">
|
|
<tr>
|
|
<td>
|
|
<label for="demo__raw_a">Alpha:</label>
|
|
</td>
|
|
<td><input type="text" id="demo__raw_a"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label for="demo__raw_b">Beta:</label>
|
|
</td>
|
|
<td><input type="text" id="demo__raw_b"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<table class="float_right">
|
|
<tr>
|
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_d"
|
|
value="11.966504" size="10"></td>
|
|
<td class="demo__td_pr">
|
|
<label for="demo__io_a">x</label>
|
|
</td>
|
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number"
|
|
id="demo__io_a" value="10" min="0"
|
|
max="1000"></td>
|
|
<td class="demo__td_pr">
|
|
<label for="demo__io_a">Breite</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_e"
|
|
value="51.503491" size="10"></td>
|
|
<td class="demo__td_pr">
|
|
<label for="demo__io_b">y</label>
|
|
</td>
|
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number"
|
|
id="demo__io_b" value="10" min="0"
|
|
max="1000"></td>
|
|
<td class="demo__td_pr">
|
|
<label for="demo__io_b">Tiefe</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_f"
|
|
value="88" size="10"></td>
|
|
<td class="demo__td_pr">
|
|
<label for="demo__io_c">z</label>
|
|
</td>
|
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number"
|
|
id="demo__io_c" value="48" min="0"
|
|
max="1000"></td>
|
|
<td class="demo__td_pr">
|
|
<label for="demo__io_c">Höhe</label>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese
|
|
werden mit
|
|
<code><fieldset></code>
|
|
realisiert.</p>
|
|
<fieldset>
|
|
<div class="dis_grid grid_column_2">
|
|
<label for="demo__input">Input:</label><input class="input_io" type="text" value="love"
|
|
readonly="readonly" id="demo__input">
|
|
<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness"
|
|
readonly="readonly" id="demo__output">
|
|
</div>
|
|
</fieldset>
|
|
<p>Sie können mittels
|
|
<code><legend></code>
|
|
auch eine eigene Beschriftung erhalten.</p>
|
|
<fieldset>
|
|
<legend>Einfache Eingabeelemente</legend>
|
|
<div class="dis_grid grid_column_2">
|
|
<label>Schaltflächen:</label>
|
|
<div>
|
|
<button>Senden</button>
|
|
<input type="reset" value="Abbrechen"></div>
|
|
<label>Zeicheneingaben:</label>
|
|
<div><input type="text" placeholder="Text"><input type="number" value="0815"></div>
|
|
<label>Einzelauswahl:</label>
|
|
<div><input type="radio" name="direction" value="up" checked="checked"/><input type="radio"
|
|
name="direction"
|
|
value="down"/></div>
|
|
<label>Mehrfachauswahl:</label>
|
|
<div><input type="checkbox" name="speed" value="slow" checked="checked"/><input type="checkbox"
|
|
name="speed"
|
|
value="fast"/></div>
|
|
<label>Auswahllisten:</label>
|
|
<div>
|
|
<select class="txt_top">
|
|
<option value="A" selected="selected">Option A</option>
|
|
<option value="B">Option B</option>
|
|
</select>
|
|
<select class="txt_top" size="3">
|
|
<option value="red" selected="selected">Rot</option>
|
|
<option value="green">Grün</option>
|
|
<option value="blue">Blau</option>
|
|
</select>
|
|
</div>
|
|
<label>Textfeld:</label>
|
|
<textarea rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Einfache Eingabeelemente mit Stil</legend>
|
|
<div class="dis_grid grid_column_2">
|
|
<label>Schaltflächen:</label>
|
|
<div class="flex inline">
|
|
<button class="button_io">Senden</button>
|
|
<input class="button_io" type="reset" value="Abbrechen"></div>
|
|
<label>Zeicheneingaben:</label>
|
|
<div class="flex inline"><input class="input_io" type="text" placeholder="Text"><input class="input_io"
|
|
type="number"
|
|
value="0815">
|
|
</div>
|
|
<label>Einzelauswahl:</label>
|
|
<div><input class="io_radio" type="radio" name="direction" value="up" checked="checked"/><input
|
|
class="io_radio" type="radio" name="direction" value="down"/></div>
|
|
<label>Mehrfachauswahl:</label>
|
|
<div><input class="io_check" type="checkbox" name="speed" value="slow" checked="checked"/><input
|
|
class="io_check" type="checkbox" name="speed" value="fast"/></div>
|
|
<label>Auswahllisten:</label>
|
|
<div class="flex inline">
|
|
<select class="io_select txt_top">
|
|
<option value="A" selected="selected">Option A</option>
|
|
<option value="B">Option B</option>
|
|
</select><select class="io_select txt_top" size="3">
|
|
<option value="red" selected="selected">Rot</option>
|
|
<option value="green">Grün</option>
|
|
<option value="blue">Blau</option>
|
|
</select>
|
|
</div>
|
|
<label>Textfeld:</label>
|
|
<textarea class="io_textarea" rows="3">Dies ist ein Eingabefeld für Fließtext. Es bildet auch Zeilenumbrüche ab und hat häufig variable Größen.</textarea>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Weitere Eingabemöglichkeiten</legend>
|
|
<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen
|
|
Information oder lockern das Erscheinungsbild auf.</p>
|
|
<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
|
|
<form action="">
|
|
<div class="dis_grid grid_column_2">
|
|
<label class="">Farbauswahl<br>
|
|
<code><input[type="color"]></code>
|
|
</label>
|
|
<div><input class="" type="color"></div>
|
|
<label class="">Bereichsauswahl<br>
|
|
<code><input[type="range"]></code>
|
|
</label>
|
|
<div><input class="" type="range"></div>
|
|
<label class="">Datum<br>
|
|
<code><input[type="date"]></code>
|
|
</label>
|
|
<div><input class="input_io" type="date"></div>
|
|
<label class="">Uhrzeit<br>
|
|
<code><input[type="time"]></code>
|
|
</label>
|
|
<div><input class="input_io" type="time"></div>
|
|
<label class="">Datum und Zeit<br>
|
|
<code><input[type="datetime-local"]></code>
|
|
</label>
|
|
<div><input class="input_io" type="datetime-local"></div>
|
|
<label class="">Kalendermonat<br>
|
|
<code><input[type="month"]></code>
|
|
</label>
|
|
<div><input class="input_io" type="month"></div>
|
|
<label class="">Kalenderwoche<br>
|
|
<code><input[type="week"]></code>
|
|
</label>
|
|
<div><input class="input_io" type="week"></div>
|
|
<label class="">@dresse<br>
|
|
<code><input[type="email"]></code>
|
|
</label>
|
|
<div><input class="input_io" placeholder="@" type="email"></div>
|
|
<label class="">Passwort<br>
|
|
<code><input[type="password"]></code>
|
|
</label>
|
|
<div><input class="input_io" value="admin" autocomplete="off" type="password"></div>
|
|
<label class="">Telefonnummer<br>
|
|
<code><input[type="tel"]></code>
|
|
</label>
|
|
<div><input class="input_io" value="0190123456" type="tel"></div>
|
|
<label class="">URL<br>
|
|
<code><input[type="url"]></code>
|
|
</label>
|
|
<div><input class="input_io" placeholder="url://" type="url"></div>
|
|
<label class="">Suche<br>
|
|
<code><input[type="search"]></code>
|
|
</label>
|
|
<div><input class="input_io" type="search"></div>
|
|
<label class="">Datei<br>
|
|
<code><input[type="file"]></code>
|
|
</label>
|
|
<div><input class="" type="file"></div>
|
|
<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
|
|
</div>
|
|
</form>
|
|
</fieldset>
|
|
|
|
<h2>Interaktive Elemente</h2>
|
|
</article>
|
|
<article>
|
|
<h1>Struktur</h1>
|
|
<div class="box_placeholder"></div>
|
|
<hr class="hidden"/>
|
|
<div class="box_placeholder">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
|
y="0px" width="100%" height="100%">
|
|
<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
|
|
<line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>
|
|
</svg>
|
|
</div>
|
|
<hr class="hidden"/>
|
|
<div class="box_placeholder_bkg"></div>
|
|
</article>
|
|
<article>
|
|
<h1>Medien</h1>
|
|
</article>
|
|
<article>
|
|
<h1>Druck</h1>
|
|
</article>
|
|
|
|
<section>
|
|
<header class="header_txt">
|
|
<h1>Ende der Einführung</h1>
|
|
<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen Komponenten mit Kombinationen und
|
|
erweiterten Formatierungen.</p>
|
|
</header>
|
|
</section>
|
|
</div>
|
|
{% endblock %}
|