<?php
	$type = 'post';
	$published = false;
	$date = '2026-03-03';
	$title = 'Demo';
	$description = 'Eine kleine Demonstration von Textformatierungs-Möglichkeiten in HTML, die mit den Buttons in der Werkzeugleiste und den sogenannten „Snippets“ (Schnipsel) erzielt werden können.';
	$image = '';
	$cats = '';
	$tags = '';
	$listed = false;
	$pinned = false;
	$front = false;
	include 'lib/default-header.php';
?>

<p><b>Eine kleine Demonstration von Textformatierungs-Möglichkeiten in HTML, die mit den Buttons in der Werkzeugleiste und den sogenannten „Snippets“ (Schnipsel) erzielt werden können.</b></p>

<details class="toc textbox noprint" _open>
	<summary><b>Inhaltsverzeichnis</b></summary>
</details>

<p><i>Tipp: Öffne diesen Artkel am besten im Editor, damit Du den Quelltext sehen kannst!</i></p>

<style>
<!--
	h3[id]::before {
		content: "— ";
	}
	h3[id]::after {
		content: " —";
	}
-->
</style>

<h2 id="Textformatierung</">Textformatierung</h2>

<p>Hier eine kleine Demonstration von Textformatierungs-Möglichkeiten in HTML, die mit den Buttons in der Werkzeugleiste oben (Buttons <b>P</b>, <b>H2</b>, <b>H3</b> usw.) und den sogenannten "Snippets" (Schnipsel) aus dem "<b>Einfügen...</b>"-Menü erzielt werden können. Hierzu einfach den zu formatierenden Text markieren und den gewünschten Button anklicken oder das gewünschte Snippet auswählen.</p>

<p>Darüberhinaus können natürlich auch sämtliche weiteren Formatierungs-Möglichkeiten genutzt werden, die HTML zu bieten hat, indem man die gewünschten HTML-Tags direkt in den Quelltext schreibt.</p>

<p>Um eine Formatierung schnell wieder zu entfernen, einfach den Text markieren und den Button <b>x</b> anklicken. Mit jedem Klick auf den <b>x</b>-Button wird von außen nach innen bzw. von links nach rechts eine weitere Formatierung entfernt.</p>

<p>Zudem funktionieren (zumindest unter Windows) auch die Standard-Tastenkombinationen wie z.B. <b>Strg</b>+<b>Z</b>, um Änderungen rückgängig zu machen, <b>Strg</b>+<b>Y</b>, um versehentlich rückgängig gemachte Änderungen wiederherzustellen, und natürlich <b>Strg</b>+<b>C</b>, <b>Strg</b>+<b>X</b> und <b>Strg</b>+<b>V</b> zum Kopieren, Ausschneiden und Einfügen von Text über die Zwischenablage.</p>

<p>Grundsätzlich gilt, dass der zu formatierende Text zuvor markiert werden muss - egal ob mit der Maus oder mit der Tastatur:</p>

<ul>
	<li>Ziehen bei gedrückt gehaltener linker Maustaste markiert einen Text zeichenweise.</li>
	<li>Ziehen bei gedrückt gehaltener linker Maustaste nach Doppelklick markiert einen Text wortweise.</li>
	<li>Doppelklick auf ein Wort markiert das ganze Wort.</li>
	<li>Dreifachklick in einen Absatz markiert den ganzen Absatz.</li>
	<li>Pfeiltaste links/rechts/oben/unten bei gedrückt gehaltener Umschalt-Taste markiert einen Text zeichen- bzw. zeilenweise.</li>
	<li>Pfeiltaste links/rechts bei gleichzeitig gedrückt gehaltener Umschalt- und Strg-Taste markiert einen Text wortweise.</li>
</ul>

<p>Hier nun die Demonstration der Formatierungs-Möglichkeiten:</p>

<h2>Überschrift 2</h2>

<h3>Überschrift 3</h3>

<h4>Überschrift 4</h4>

<h5>Überschrift 5</h5>

<p>Ein normaler Absatz mit Text in <b>fett</b>, <i>kursiv</i>, <u>unterstrichen</u>, mit <mark>Textmarker</mark> markiert, mit einer <span style="background-color: #D0F0F0; padding: 0.2em; margin: -0.2em;">Hintergrundfarbe</span> hinterlegt oder <span style="color: #00C000;">farbig</span>.</p>

<h2 id="Snippets">Snippets</h2>

<p>Nun die Demonstration der Snippets aus dem "<b>Einfügen...</b>"-Menü. Um die Funktionsweise besser zu verstehen, wird jeweils zuerst der zu markierende Text angegeben und anschließend das Endergebnis nach Einfügen des Snippets.</p>

<h3 id="section-single-image">Einzelnes Bild</h3>

<p>Unter dieser Rubrik sind Snippets zusammengefasst, die ein einzelnes Bild betreffen.</p>

<h4 id="image">einfach</h4>

<p>Fügt ein Bild in den Artikel ein. Hierzu wird zuerst die Bild-URL über die Medienverwaltung eingefügt. Wird zusätzlich ein Bildbeschreibungstext angegeben, dann erscheint dieser unter dem Bild.</p>

<p><i>Ausgangstext:</i></p>

media/green-article-image.jpg
Bildbeschreibung

<p>Hier stehen die Bild-URL und der Bildbeschreibungstext in je einer Zeile.</p>

<p><i>Ergebnis</i> nach Markieren dieser beiden Zeilen und Anwenden des Snippets:</p>

<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>

<p>Alternativ können Bild-URL und Bildbeschreibungstext auch in einer Zeile stehen. Sie werden dann mit | voneinander getrennt:</p>

<p><i>Ausgangstext:</i></p>

media/green-article-image.jpg|Bildbeschreibung

<p>Das <i>Ergebnis</i> nach Markieren und Auswählen des Snippets ist dasselbe:</p>

<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>

<p>Das oben Geschrieben gilt auch für alle folgenden Snippets, daher wird im weiteren Verlauf nicht wieder darauf eingegangen.</p>

<p>Standardmäßig ist für die eingefügten Bilder der Bildbetrachter aktiviert, erkennbar an dem "+"-Symbol unten rechst auf dem Bild. Durch Klick auf das Bild wird dieses im Bildbetrachter geöffnet. Soll der Bildbetrachter nicht aktiviert werden, dann einfach die Klasse "viewer" entfernen oder umbenennen, z.B. in "_viewer":</p> 

<div><figure class="_viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>

<h4 id="image-thinframe">mit dünnem Rahmen</h4>

<p>Fügt ein Bild in den Artikel ein und zeichnet eine dünne, hellgraue Rahmenlinie um das Bild.</p>

<p><i>Ausgangstext:</i></p>

media/default-favicon.png
Bildbeschreibung

<p><i>Ergebnis:</i></p>

<div><figure class="thinframe viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>

<h4 id="image-thumbnail">mit Vorschaubild</h4>

<p>Zeigt im Artikel ein Vorschaubild an und öffnet bei Klick darauf das Bild in voller Auflösung im Bildbetrachter. Hierzu werden zwei Bild-URLs (Vorschau-Bild und großes Bild) angegeben:</p>

<p><i>Ausgangstext:</i></p>

media/dark-favicon.png
media/dark-article-image.jpg
Klicken zum Vergrößern

<p><i>Ergebnis:</i></p>

<div><figure class="viewer"><img src="media/dark-favicon.png" data-src="media/dark-article-image.jpg" alt="" /><figcaption>Klicken zum Vergrößern</figcaption></figure></div>

<h4 id="image-link">mit Link</h4>

<p>Zeigt ein Bild mit Link an. Beim Klick auf das Bild wird der Link in einem neuen Browser-Tab geöffnet. Der Link kann z.B. ein anderes Bild, ein Artikel oder eine Website sein. Für das Snippet werden hierzu die Bild-URL, der Link und ggf. eine Bildbeschreibung angegeben:</p>

<p><i>Ausgangstext:</i></p>

media/default-favicon.png
/
Zur Startseite

<p><i>Ergebnis:</i></p>

<div><figure><a href="/" target="_blank"><img src="media/default-favicon.png" /></a><figcaption>Zur Startseite</figcaption></figure></div>

<h3 id="section-multiple-images">Mehrere Bilder</h3>

<p>Hier finden sich Snippets, die mehrere Bilder betreffen. Die Bilder müssen dazu bereits mit einem der Snippets aus der Rubrik "Einzelnes Bild" formatiert worden sein.</p>

<h4 id="image-carousel">im „Karussell“</h4>

<p>Die Bilder werden in einem "Bilder-Karussell" dargestellt. Durch Klick auf die Buttons oder durch "Wischen" mit dem Finger kann zwischen den Bildern "geblättert" werden.</p>

<p>Hierzu werden die Bilder zuerst aus der Medienverwaltung in den Editor eingefügt:</p>

<p><i>Ausgangstext:</i></p>

media/warm-article-image.jpg
media/default-article-image.jpg
media/green-article-image.jpg
media/dark-article-image.jpg

<p>Dann wird auf jedes einzelne Bild ein Bild-Snippet angewendet (wie oben demonstriert). Zuletzt werden alle Bilder markiert und das Snippet "Bilder-Karussell" ausgewählt.</p>

<p><i>Ergebnis:</i></p>

<div class="image-carousel middle viewer"> <!-- Vertikale Ausrichtung: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<h4 id="image-grid">im Raster angeordnet</h4>

<p>Hierdurch werden die Bilder in einem Raster aus quadratischen Vorschaubildern ("Thumbnails") angeordnet:</p>

<div class="image-grid cover viewer"> <!-- Bildquadrat ausfüllen: cover / CSS-Variablen: --Size, --Gap, --Radius -->
	<div><figure class="viewer"><img src="media/widget-example-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-header-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/cool-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<p>Durch Angabe folgender CSS-Variablen kann das Verhalten beeinflusst werden:</p>

<ul>
	<li><b>--Size</b>: Maximale Größe der Thumbnails.</li>
	<li><b>--Gap</b>: Abstand zwischen den Thumbnails.</li>
	<li><b>--Radius</b>: Eckenradius der Thumbnails.</li>
</ul>

<p>Hier ein Beispiel mit kleineren Thumbnails (max. 100px), kleinerem Abstand und ohne Eckenradius:</p>

<div class="image-grid cover viewer" style="--Size: 100px; --Gap: 1px; --Radius: 0;"> <!-- Bildquadrat ausfüllen: cover / CSS-Variablen: --Size, --Gap, --Radius -->
	<div><figure class="viewer"><img src="media/widget-example-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-header-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/cool-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<p>Durch Entfernen oder Umbenennen der Klasse "cover" kann erreicht werden, dass die Thumbnails vollständig angezeigt werden, wobei die "freien" Bereiche dann mit einer Hintergrundfarbe ausgefüllt werden:</p>

<div class="image-grid _cover viewer" style="--Size: 100px; --Gap: 4px; --Radius: 0;"> <!-- Bildquadrat ausfüllen: cover / CSS-Variablen: --Size, --Gap, --Radius -->
	<div><figure class="viewer"><img src="media/widget-example-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-header-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/cool-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<h4 id="columns">in Spalten nebeneinander</h4>

<p>Hiermit können mehrere Bilder nebeneinander angeordnet werden. Auf schmalen Displays werden sie untereinander angezeigt.</p>

<p><i>Beispiel mit 2 Bildern, oben ausgerichtet:</i></p>

<div class="columns top viewer"> <!-- Vertikale Ausrichtung: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>
</div>

<p><i>Beispiel mit 3 Bildern, mittig ausgerichtet:</i></p>

<div class="columns middle viewer"> <!-- Vertikale Ausrichtung: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>
</div>

<p><i>Beispiel mit 4 Bildern, unten ausgerichtet:</i></p>

<div class="columns bottom viewer"> <!-- Vertikale Ausrichtung: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Bildbeschreibung</figcaption></figure></div>
</div>

<h4 id="gallery">zentriert nebeneinander</h4>

<p>Mit diesem Snippet werden soviele Bilder zentriert nebeneinander angeordnet, wie horizontaler Platz zur Verfügung steht. Die Bilder werden dabei in Originalgröße angezeigt, jedoch (so wie bei allen Bildern) maximal so breit wie die Artikel-Seite.</p>

<div class="gallery top viewer"> <!-- Vertikale Ausrichtung: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/warm-favicon.png" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-favicon.png" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-favicon.png" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<h3 id="section-links">Links</h3>

<p>Hier sind verschiedene Arten von Links zu anderen Artikeln, Websites oder anderen Zielen gruppiert.</p>

<h4 id="link">Link intern</h4>

<p>Interne Links werden im aktuellen Browser-Tab geöffnet und eignen sich zum Verlinken anderer Artikel. Für das Snippet wird zuerst ein Link-Text angegeben, dann die URL bzw. der Dateiname des Artikels, der auch über die Dateiverwaltung eingefügt werden kann:</p>

<p><i>Ausgangstext:</i></p>

Herzlich willkommen!
ueber

<p><i>Ergebnis:</i></p>

<p><a href="ueber">Herzlich willkommen!</a></p>

<p>Statt der obigen zweizeiligen Schreibweise funktioniert auch hier wieder die einzeilige Schreibweise mit | oder [...] als Trenner zwischen dem Linktext und der URL:</p>

<p><i>Ausgangstext:</i></p>

<p>Sei herzlich willkommen [ueber] auf meinem Blog!</p>

<p><i>Ergebnis:</i></p>

<p>Sei <a href="ueber" title="">herzlich willkommen</a> auf meinem Blog!</p>

<p><i>Ausgangstext:</i></p>

<p>Sei herzlich willkommen|ueber auf meinem Blog!</p>

<p><i>Ergebnis:</i></p>

<p>Sei <a href="ueber" title="">herzlich willkommen</a> auf meinem Blog!</p>

<p>(Dies gilt auch wieder für die nachfolgenden Beispiele.)</p>

<h4 id="link-extern">Link extern</h4>

<p>Externe Links werden in einem neuen Browser-Tab geöffnet und eignen sich z.B. zum Verlinken von Seiten anderer Websites:</p>

<p><i>Ausgangstext:</i></p>

<p>Mein Blog | https://beispiel.de/</p>

<p><i>Ergebnis:</i></p>

<p><a href="https://beispiel.de/" target="_blank" rel="noopener" title="">Mein Blog</a></p>

<h4 id="button-link">Button-Link intern</h4>

<p>Ein interner Link in Form eines Buttons.</p>

<p><i>Ausgangstext:</i></p>

Willkomen! | ueber

<p><i>Ergebnis:</i></p>

<p class="center"><a href="ueber" class="button-link">Willkomen!</a></p>

<h4 id="button-link-extern">Button-Link extern</h4>

<p>Ein externer Link in Form eines Buttons.</p>

<p><i>Ausgangstext:</i></p>

Mein Blog | https://beispiel.de/

<p><i>Ergebnis:</i></p>

<p class="center"><a href="https://beispiel.de/" target="_blank" rel="noopener" class="button-link">Mein Blog</a></p>

<h4 id="article-card">Artikel-Card intern</h4>

<p>Links zu internen Artikeln werden als "Card" dargestellt.</p>

<p>Ausgangstext sind die Dateinamen existierender Artikel, eingefügt z.B. über die Dateiverwaltung. Nach Anwendung des Snippets kann optional ein alternativer (verkürzter) Beschreibungstext angegeben werden.</p>

<p><i>Ausgangstext:</i></p>

intro
help

<p><i>Ergebnis:</i></p>

<div class="websites noprint">
	<?php include_once "snippets/article-card.php"; ArticleCard('intro', ''); ?>
	<?php include_once "snippets/article-card.php"; ArticleCard('help', 'Ein anderer Beschreibungstext...'); ?>
</div>

<h4 id="website-card">Website-Card extern</h4>

<p>Links zu externen Websites werden als "Card" dargestellt.</p>

<p>Ausgangstext sind 4 Zeilen mit folgendem Inhalt:</p>

<p>Titel
<br>Dateiname (eingefügt über die Dateiverwaltung, ohne die Endung .php)
<br>Bild-Link
<br>Beschreibungstext</p>

<p><i>Ausgangstext:</i></p>

Blog4u
https://www.stefanbion.de/ein-blog-fuer-dich
https://www.stefanbion.de/blog4u/media/mein-blog.jpg
Ein nettes kleines Blog-System für dich!

<p><i>Ergebnis:</i></p>

<!--
	Snippet "Website-Card" - Ausgangstext sind 4 Zeilen mit folgendem Inhalt:

	Titel
	Link oder Dateiname (eingefügt über die Dateiverwaltung, ohne die Endung .php)
	Bild-Link
	Beschreibungstext
-->

<div class="websites noprint">

	<div class="website">
		<a href="https://www.stefanbion.de/ein-blog-fuer-dich" target="_blank" rel="noopener" title="Blog4u">
			<img src="https://www.stefanbion.de/media/blog4u/mein-blog.jpg">
			<div>
				<p class="website-title">Blog4u</p>
				<p class="website-description">Ein nettes kleines Blog-System für dich!</p>
				<p class="center"><span class="button-link" ><?php echo GetString('VisitNow');?></span></p>
			</div>
		</a>
	</div>

	<!-- Weitere Websites hier einfügen (ohne das äußere div) -->
</div>

<h4 id="tooltip">Tooltip</h4>

<p>Fügt einen Tooltip-Link in den Text ein. Wird der Mauszeiger darübergehalten, erscheint der Text in einem Tooltip.</p>

<p><i>Ausgangstext:</i></p>

Einzelne Wörter können mit einem Tooltip[Ein Tooltip ist ein kurzer Erklärungstext,&#10;der beim Darüberhalten des Mauszeigers&#10;angezeigt wird. Zeilenumbrüche werden&#10;mittels &amp;#10; erzeugt.] versehen werden.

<p><i>Ergebnis:</i></p>

<p>Einzelne Wörter können mit einem <span class="tooltip" title="Ein Tooltip ist ein kurzer Erklärungstext,&#10;der beim Darüberhalten des Mauszeigers&#10;angezeigt wird. Zeilenumbrüche werden&#10;mittels &amp;#10; erzeugt.">Tooltip</span> versehen werden.</p>

<h3 id="section-highlighting">Hervorhebungen</h3>

<p>Snippets zum Hervorheben einzelner Zeilen oder längerer Textabschnitte.</p>

<h4 id="quote">Zitat</h4>

<p><i>Ausgangstext</i> ist bereits fertig formatierter Text:</p>

<p>Jeder Mensch hat in seinem Herzen ein Loch, in das nur Gott hineinpasst. Und nichts weniger als Gott kann dieses Loch ausfüllen.</p>
<a href="https://www.pro-medienmagazin.de/blaise-pascal-der-philosoph-der-christ-wurde/" target="_blank" rel="noopener" title="">Blaise Pascal (1623–1662)</a>

<p><i>Ergebnis:</i></p>

<blockquote>
	<p>Jeder Mensch hat in seinem Herzen ein Loch, in das nur Gott hineinpasst. Und nichts weniger als Gott kann dieses Loch ausfüllen.</p>
	<cite><a href="https://www.pro-medienmagazin.de/blaise-pascal-der-philosoph-der-christ-wurde/" target="_blank" rel="noopener" title="">Blaise Pascal (1623–1662)</a></cite>
</blockquote>

<h4 id="bible">Bibelzitat</h4>

<p>Bei diesem Snippet werden die letzten beiden Zeilen automatisch in einen Link umgewandelt:</p>

<p><i>Ausgangstext:</i></p>

Und sucht ihr mich, so werdet ihr mich finden, ja, fragt ihr mit eurem ganzen Herzen nach mir, so werde ich mich von euch finden lassen, spricht der HERR.
Jeremia 29,13-14
https://www.bibleserver.com/ELB/Jeremia29%2C13-14

<p><i>Ergebnis:</i></p>

<blockquote class="biblequote">
	<p><i>Und sucht ihr mich, so werdet ihr mich finden, ja, fragt ihr mit eurem ganzen Herzen nach mir, so werde ich mich von euch finden lassen, spricht der HERR.</i></p>
	<cite>– <a href="https://www.bibleserver.com/ELB/Jeremia29%2C13-14" target="_blank" rel="noopener">Jeremia 29,13-14</a> –</cite>
</blockquote>

<h4 id="textbox">Textbox</h4>

<p>Eine einzelne Textzeile wird in einer "Textbox" dargestellt.</p>

<p><i>Ausgangstext:</i></p>

Gutes und Barmherzigkeit werden mir folgen mein Leben lang, und ich werde bleiben im Hause des HERRN immerdar.

<p><i>Ergebnis:</i></p>

<p class="textbox">Gutes und Barmherzigkeit werden mir folgen mein Leben lang, und ich werde bleiben im Hause des HERRN immerdar.</p>

<h4 id="table">Tabelle</h4>

<p>Text wird in Tabellenform mit Zeilen und Spalten dargestellt.</p>

<p><i>Ausgangstext:</i></p>

Spalte A | Spalte B | Spalte C
Zelle A1 | Zelle B1 | Zelle C1
Zelle A2 | Zelle B2 | Zelle C2
Zelle A3 | Zelle B3 | Zelle C3
Tabellentitel

<p><i>Ergebnis:</i></p>

<figure>
	<table>
		<tr>
			<th>Spalte A</th>
			<th>Spalte B</th>
			<th>Spalte C</th>
		</tr>
		<tr>
			<td>Zelle A1</td>
			<td>Zelle B1</td>
			<td>Zelle C1</td>
		</tr>
		<tr>
			<td>Zelle A2</td>
			<td>Zelle B2</td>
			<td>Zelle C2</td>
		</tr>
		<tr>
			<td>Zelle A3</td>
			<td>Zelle B3</td>
			<td>Zelle C3</td>
		</tr>
	</table>
	<figcaption>Tabellentitel</figcaption>
</figure>

<p>Als Trenner eignen sich statt | auch Tabulatoren:</p>

<p><i>Ausgangstext:</i></p>

Spalte A	Spalte B	Spalte C
Zelle A1	Zelle B1	Zelle C1
Zelle A2	Zelle B2	Zelle C2
Zelle A3	Zelle B3	Zelle C3
Tabellentitel

<h4 id="code">Code</h4>

<p>Formatiert den Text als Programmcode. Zeilenumbrüche bleiben dabei erhalten.</p>

<p><i>Ausgangstext:</i></p>

function Next(amount)
{
	var i = imageIndex;
	i += amount;
	if (i >= imageCount[name])
		i = (amount === 1 ?  0 : imageCount[name] - 1);
	if (i !== imageIndex)
	{
		imageIndex = i;
		MoveImage(0, -1, function()
		{
				Viewer(null, function() { MoveImage(1, 0); });
		});
	}
}

<p><i>Ergebnis:</i></p>

<pre class="textbox">
function Next(amount)
{
	var i = imageIndex;
	i += amount;
	if (i >= imageCount[name])
		i = (amount === 1 ?  0 : imageCount[name] - 1);
	if (i !== imageIndex)
	{
		imageIndex = i;
		MoveImage(0, -1, function()
		{
				Viewer(null, function() { MoveImage(1, 0); });
		});
	}
}
</pre>

<h3 id="section-embedding">Einbettungen</h3>

<p>Hiermit können Medien (Audio, Video) oder Karten in den Artikel eingebettet werden.</p>

<h4 id="audio">Audioclip</h4>

<p>Stellt einen Audio-Player zum Abspielen einer Audio-Datei dar. Die verwendete MP3-Datei wird aus der Medienverwaltung eingefügt (ggf. zuvor dort hochladen). Natürlich kann auch ein externer Link angegeben werden. Es wird immer nur ein Audioclip zur selben Zeit abgespielt, d.h. wenn die Wiedergabe eines Audioclips gestartet wird, so wird die Wiedergabe des aktuell abgespielten Audioclips gestoppt.</p>

<p><i>Ausgangstext:</i></p>

media/Froschkonzert.mp3
Froschkonzert

<p><i>Ergebnis:</i></p>

<figure>
	<audio controls src="media/Froschkonzert.mp3"></audio>
	<figcaption>Froschkonzert</figcaption>
</figure>

<h4 id="audio-playlist">Audioclip für Playlist</h4>

<p>Im Unterschied zum einfachen Audioclip (s.o.) ist dieser Audioclip Teil einer Playlist. Sind mehrere solcher Audioclips auf der Seite vorhanden, werden diese der Reihe nach abgespielt. Der aktuell abgespielte Audioclip wird dabei optisch hervorgehoben.</p>

<p><i>Ausgangstext:</i></p>

media/Froschkonzert.mp3
Froschkonzert

<p><i>Ergebnis:</i></p>

<figure class="playlist">
	<p>Froschkonzert</p>
	<p><audio controls src="media/Froschkonzert.mp3"></audio></p>
</figure>

<h4 id="video">Videoclip</h4>

<p>Stellt einen Video-Player zum Abspielen einer Video-Datei dar. Die verwendete MP4-Datei wird aus der Medienverwaltung eingefügt (ggf. zuvor dort hochladen). Natürlich kann auch ein externer Link angegeben werden.</p>

<p><i>Ausgangstext:</i></p>

media/wolken.mp4
Wolken

<p><i>Ergebnis:</i></p>

<figure>
	<video controls src="media/wolken.mp4"></video>
	<figcaption>Wolken</figcaption>
</figure>

<h4 id="iframe">IFRAME (Video, Karte, ...)</h4>

<p>Fügt externen Inhalt (z.B. YouTube-Video, GoogleMaps-Karte) mittels eines IFRAME in den Artikel ein.</p>

<h5 id="youtube">Beispiel: YouTube-Video einbetten</h5>

<p>Den Einbettungs-Code erhält man über die "Teilen"-Funktion auf der YouTube-Seite zu einem Video.</p>

<p><i>Ausgangstext:</i></p>

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/FpGYImM_VeM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Lied: I Speak Jesus (Here Be Lions)

<p><i>Ergebnis:</i></p>

<figure>
	<iframe width="560" height="315" data-src="https://www.youtube.com/embed/FpGYImM_VeM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
	<figcaption>Lied: I Speak Jesus (Here Be Lions)</figcaption>
</figure>

<p>In dem obigen Einbettungs-Code (&lt;iframe ...) wurde das Attribut "src" nachträglich per Hand durch "data-src" ersetzt. Hierdurch wird das Video nicht sofort geladen, sondern datenschutzkonform erst nach Klick auf den Button.</p>

<p>Das Platzhalter-Bild, das anstelle des YouTube-Players angezeigt wird, ist ein Screenshot, der unter dem Dateinamen "FpGYImM_VeM.jpg" in die Medien-Bibliothek hochgeladen wurde, wobei "FpGYImM_VeM" der YouTube-Video-ID entspricht, wie sie in der YouTube-URL im Einbettungscode hinter "embed/" angegeben ist. Alternativ kann auch ein beliebiger anderer Bild-Dateiname in dem Attribut "data-img" angegeben werden (Beispiel: data-img="video.png").</p>

<h5 id="googlemaps">Beispiel: GoogleMaps-Karte einbetten</h5>

<p>Den Einbettungs-Code für die Karte erhält man über die "Teilen"-Funktion im Menü auf der GoogleMaps-Seite.</p>

<p><i>Ausgangstext:</i></p>

<iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1331.6806453458598!2d11.513305599999997!3d48.1225556!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5f875ba02a03736!2zNDjCsDA3JzIxLjIiTiAxMcKwMzAnNDcuOSJF!5e0!3m2!1sde!2sde!4v1660604605751!5m2!1sde!2sde" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
Google-Maps-Karte

<p><i>Ergebnis:</i></p>

<figure>
	<iframe data-img="media/gm-westpark.jpg" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1331.6806453458598!2d11.513305599999997!3d48.1225556!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5f875ba02a03736!2zNDjCsDA3JzIxLjIiTiAxMcKwMzAnNDcuOSJF!5e0!3m2!1sde!2sde!4v1660604605751!5m2!1sde!2sde" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
	<figcaption>Google-Maps-Karte</figcaption>
</figure>

<p>In dem obigen Einbettungs-Code (&lt;iframe ...) wurde das Attribut "src" nachträglich per Hand durch "data-src" ersetzt. Hierdurch wird die Karte nicht sofort geladen, sondern datenschutzkonform erst nach Klick auf den Button.</p>

<p>Das Platzhalter-Bild, das anstelle der echten Karte angezeigt wird, ist ein Screenshot, der unter dem Dateinamen "gm-westpark.jpg" in die Medien-Bibliothek hochgeladen wurde und anschließend in dem manuell hinzugefügten Attribut "data-img" angegeben wurde (data-img="media/gm-westpark.jpg").</p>

<h3 id="section-paragraph">Absatz</h3>

<p>Snippets zum Formatieren einer oder mehrerer Zeilen.</p>

<h4 id="separator.html">Absatztrenner (* * *)</h4>

<p>Absatztrenner eignen sich als optische Trenner zwischen zwei Absätzen, z.B. um einen Nachsatz zu schreiben.</p>

<h2 class="center">* * *</h2>

<p>Hier folgt dann der abgetrennte Absatz...</p>

<h4 id="toc.html">Inhaltsverzeichnis</h4>

<p>Anhand der im Artikel enthaltenen Überschriften mit ID wird automatisch ein Inhaltsverzeichnis generiert. Die IDs werden dabei als Sprungziele verwendet. Als Beispiel soll der vorliegende Demo-Artikel dienen, in dem die Überschriften mit IDs versehen sind.</p>

<h4 id="toc-details.html">Inhaltsv. aufklappbar</h4>

<p>Wie zuvor, aber zum Aufklappen. Als Beispiel soll der vorliegende Demo-Artikel dienen, in dem die Überschriften mit IDs versehen sind. Ein Anwendungsbeispiel für das Snippet befindet sich ganz oben am Beginn dieses Artikels. Initial ist das Inhaltsverzeichnis aufgeklappt. Lässt man das Attribut "open" weg, ist das Inhaltsverzeichnis initial zugeklappt.</p>

<h4 id="summary">Bereich aufklappbar</h4>

<p>Ein Abschnitt ist initial versteckt und kann durch Anklicken des Titels aufgeklappt werden:</p>

<p><i>Ausgangstext:</i></p>

Details
<p>Es war einmal...</p>
<p>Und wenn sie nicht gestorben sind...</p>

<p><i>Ergebnis:</i></p>

<details class="textbox noprint">
	<summary><b>Details</b></summary>
	<p>Es war einmal...</p>
	<p>Und wenn sie nicht gestorben sind...</p>
</details>

<h4 id="ul">Aufzählung (● ● ●)</h4>

<p>Die Zeilen werden als Listenpunkte dargestellt.</p>

<p><i>Ausgangstext:</i></p>

Punkt 1
Punkt 2
Punkt 3

<p><i>Ergebnis:</i></p>

<ul>
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ul>

<p>Es können auch weitere Einrückungen vorgenommen werden. Dies muss aber manuell gemacht werden:</p>

<ul>
	<li>Punkt 1</li>
	<li>Punkt 2
		<ul>
			<li>Unterpunkt 1</li>
			<li>Unterpunkt 2</li>
			<li>Unterpunkt 3</li>
		</ul>
	</li>
	<li>Punkt 3</li>
</ul>

<h4 id="ol">Aufzählung (1. 2. 3.)</h4>

<p>Die Zeilen werden als numerierte Aufzählungspunkte  dargestellt.</p>

<p><i>Ausgangstext:</i></p>

Punkt 1
Punkt 2
Punkt 3

<p><i>Ergebnis:</i></p>

<ol>
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ol>

<p>Auch hier können durch manuell eingegebene HTML-Tags weitere Einrückungen erreicht werden:</p>

<ol>
	<li>Punkt 1</li>
	<li>Punkt 2
		<ol>
			<li>Unterpunkt 1</li>
			<li>Unterpunkt 2</li>
			<li>Unterpunkt 3</li>
		</ol>
	</li>
	<li>Punkt 3</li>
</ol>

<h4 id="footnote">Einzelne Fußnote (*)</h4>

<p>Fügt eine einzelne "Sternchen"-Fußnote in den Artikel ein.</p>

<p><i>Ausgangstext:</i></p>

Name aus Datenschutzgründen geändert.

<p><i>Ergebnis:</i></p>

<ul class="footnote" id="hinweis">
	<p><b>Hinweis:</b></p>
	<li>Name aus Datenschutzgründen geändert.</li>
</ul>

<h4 id="footnotes">Mehrere Fußnoten (1. 2. 3.)</h4>

<p>Fügt mehrere numerierte Fußnoten in den Artikel ein.</p>

<p><i>Ausgangstext:</i></p>

Grid Layout ist wie Flexbox eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen.
Dabei können Elemente beliebig innerhalb eines Rasters platziert werden, wenn gewünscht, auch übereinander.
Grid Layout wird in allen modernen Browsern (und mit vendor-prefix -ms- selbst in IE10- IE11) unterstützt.

<p><i>Ergebnis:</i></p>

<ol class="footnote" id="hinweise">
	<b>Hinweise:</b>
	<li>Grid Layout ist wie Flexbox eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen.</li>
	<li>Dabei können Elemente beliebig innerhalb eines Rasters platziert werden, wenn gewünscht, auch übereinander.</li>
	<li>Grid Layout wird in allen modernen Browsern (und mit vendor-prefix -ms- selbst in IE10- IE11) unterstützt.</li>
</ol>

<p>Fußnoten können auch mit Links zum Hin- und Zurückspringen versehen werden, wie etwa in diesem Beispiel der Hinweis auf Pseudonyme<a href="#pseudonym">*</a>:</p>

<ul class="footnote" id="pseudonym">
	<b>Hinweis:</b>
	<li>Name aus Datenschutzgründen geändert.</li>
</ul>

<h3 id="section-line">Zeile</h3>

<h4 id="nowrap">Kein automat. Umbruch</h4>

<p>Wenn Textzeilen zuerst an "Sollbruchstellen" umgebrochen werden sollen, dann können die zusammengehörigen Teile zwischen diesen Sollbruchstellen mit diesem Snippet formatiert werden:</p> 

<p><i>Ausgangstext:</i></p>

Erster zusammengehöriger Teil, zweiter zusammengehöriger Teil, dritter zusammengehöriger Teil.

<p><i>Ergebnis:</i></p>

<p><span class="nowrap">Erster zusammengehöriger Teil,</span> <span class="nowrap">zweiter zusammengehöriger Teil,</span> <span class="nowrap">dritter zusammengehöriger Teil.</span></p>

<h3 id="section-comment">Kommentar</h3>

<p>Snippets zum Auskommentieren von Teilen des Quelltexts.</p>

<h4 id="remark-inline">Inline</h4>

<p>Hiermit kann ein oder mehrere Wörter innerhalb einer Zeile auskommentiert werden.</p>

<p><i>Ausgangstext:</i></p>

<p>Dies ist nun schon das erste zweite Mal.</p>

<p><i>Ergebnis:</i></p>

<p>Dies ist nun schon das <!-- erste --> zweite Mal.</p>

<h4 id="remark-block">Block</h4>

<p>Hiermit können eine oder mehrere Zeilen auskommentiert werden.</p>

<p><i>Ausgangstext:</i></p>

<p>Erste Zeile.</p>
<p>Zweite Zeile</p>
<p>Dritte Zeile.</p>
<p>Vierte Zeile.</p>

<p><i>Ergebnis:</i></p>

<p>Erste Zeile.</p>
<!--
<p>Zweite Zeile</p>
<p>Dritte Zeile.</p>
-->
<p>Vierte Zeile.</p>

<h3 id="section-contact-link">Kontakt-Link</h3>

<p>Fügt einen Link zum Kontaktformular in den Artikel ein. Betreff und Nachrichtentext können vorbelegt werden.</p>

<h4 id="contact">einfach</h4>

<p>Öffnet das Kontaktformular.</p>

<p><i>Ausgangstext:</i></p>

Kontaktformular

<p><i>Ergebnis:</i></p>

<a href="kontakt">Kontaktformular</a>

<h4 id="contact-subject">mit Betreff</h4>

<p>Öffnet das Kontaktformular mit vorausgefüllter Betreffzeile.</p>

<p><i>Ausgangstext:</i></p>

Kontaktformular|Bestellung

<p><i>Ergebnis:</i></p>

<a href="kontakt?subject=Bestellung">Kontaktformular</a>

<h4 id="contact-subject-message">mit Betreff + Nachricht</h4>

<p>Öffnet das Kontaktformular mit vorausgefüllter Betreffzeile und Nachrichtentext.</p>

<p><i>Ausgangstext:</i></p>

Kontaktformular
Bestellung
Nachricht Zeile 1{}Nachricht Zeile 2{}Nachricht Zeile 3{}{}Nachricht Zeile 5{}

<p><i>Ergebnis:</i></p>

<a href="kontakt?subject=Bestellung&message=Nachricht Zeile 1{}Nachricht Zeile 2{}Nachricht Zeile 3{}{}Nachricht Zeile 5{}">Kontaktformular</a>

<p>Hinweis: Bei mehrzeiligem Nachrichtentext dient {} als Zeilenumbruch.</p>

<h3 id="section-translation">Übersetzung</h3>

<p>Snippets zum automatisierten Übersetzen des Artikels oder verlinkter Seiten.</p>

<h4 id="lang.html">Mehrsprachiger Artikel</h4>

<p>Dieses Snippet ermöglicht die Erstellung zweisprachiger Artikel mit automatischer Umschaltung zwischen diesen zwei Sprachen: (1) Einer nicht-englischen Standardsprache wie z.B. Deutsch (de), und (2) Englisch (en) für alle Benutzer mit abweichender Spracheinstellung.</p>

<p>Weitere Hinweise und Beispiele zur Verwendung werden nach Einfügen des Snippets angezeigt.</p>

<h4 id="link-translate-target">Link</h4>

<p>Dieses Snippet fügt einen Link ein, der das Linkziel in "Google Translate" öffnet und in eine Zielsprache übersetzt. Die zu verwendende Quellsprache kann im Attribut <b>x-data-translate-from</b> des Snippets angegeben werden (z.B. "de" für Deutsch). Wird es leergelassen, dann wird die im "lang"-Attribut des HTML-Dokuments angegebene Sprache verwendet. Die Zielsprache ist die im Browser des Benutzers eingestellte Sprache (z.B. "en" für Englisch). Die Weiterleitung an "Google Translate" erfolgt nur, wenn Quell- und Zielsprache voneinander abweichen.</p>

<p><i>Ausgangstext:</i></p>

Mehr dazu in der Hilfe|help#setup.

<p><i>Ergebnis:</i></p>

Mehr dazu in der <a href="help#setup" target="_blank" rel="noopener" x-data-translate-from="">Hilfe</a>.

<h4 id="link-translate-page">Diese Seite übersetzen</h4>

<p>Dieses Snippet fügt einen Button zum Übersetzen der Seite mit "Google Translate" ein. Die zu verwendende Quellsprache kann im Attribut <b>x-data-translate-from</b> des Snippets angegeben werden (z.B. "de" für Deutsch). Wird es leergelassen, dann wird die im "lang"-Attribut des HTML-Dokuments angegebene Sprache verwendet. Die Zielsprache ist die im Browser des Benutzers eingestellte Sprache (z.B. "en" für Englisch). Der Button ist nur sichtbar, wenn Quell- und Zielsprache voneinander abweichen.</p>

<p>Ohne markierten Text wird ein Standard-Linktext verwendet (nur sichtbar, wenn die Sprache des Artikels von der Browser-Sprache abweicht):</p> 

<p class="translate center hidden" x-data-translate-from=""></p>

<p>Wenn statt des Standard-Linktextes ein eigener Linktext für den Button angezeigt werden soll, kann dieser innerhalb des <b>&lt;p&gt;</b>-Tags angegeben werden. Beim Einfügen des Snippets wird hierfür der markierte Text verwendet:</p>

<p><i>Ausgangstext:</i></p>

Übersetzen

<p><i>Ergebnis</i> (nur sichtbar, wenn die Sprache des Artikels von der Browser-Sprache abweicht):</p>

<p class="translate center hidden" x-data-translate-from="">Übersetzen</p>

<h3 id="section-settings">Einstellungen</h3>

<p>Die Snippets in dieser Rubrik fügen Formulare ein, über die der Besucher der Website verschiedene Einstellungen vornehmen kann. Diese können z.B. in eine eigene Einstellungs-Seite oder in eine Datenschutzerklärung eingefügt werden.</p>

<h4 id="setting-external-content">Externe Inhalte</h4>

<p>In diesem Formular kann eingestellt werden, ob externe Inhalte wie z.B. YouTube-Videos oder GoogleMaps-Karten, die mittels IFRAMEs in eine Webseite eingebettet sein können, automatisch oder erst nach Klick auf einen Button geladen werden:</p>

<?php include 'snippets/setting-external-content.php'; ?>

<h4 id="setting-stats">Website-Statistik</h4>

<p>In diesem Formular kann eingestellt werden, ob während des Besuchs der Website Statistikdaten gesammelt werden dürfen:</p>

<?php include 'snippets/setting-stats.php'; ?>

<h3 id="section-text-blocks">Textbausteine</h3>

<p>Textbausteine sind wiederverwendbare Texte, die in Artikel eingefügt werden können und zentral gepflegt werden. Änderungen an einem Textbaustein werden sofort in allen Artikeln sichtbar, in denen er eingefügt ist.</p>

<p>Beispiele für Textbausteine:</p>

<h4 id="example-textblock">Beispiel-Textbaustein</h4>

<?php include 'textblocks/beispiel-textbaustein.html';?>

<p>Um einen neuen Textbaustein zu erstellen, lege über den Button "<b>Neu</b>" (oben links) eine neue Datei mit dem Dateityp "Textbaustein" an. Binde diese dann mit dem obigen PHP-Code in den Artikel ein.</p>

<p>Um einen Textbaustein als Snippet in das "Einfügen..."-Menü einzubinden, erstelle eine neue Datei mit dem Dateityp "Snippet" und füge dort den PHP-Code nach obigem Beispiel ein. Öffne anschließend über den Button "<b>Öffnen</b>" (oben) die Datei "snippets.xml" aus dem Bereich "<b>Snippets</b>" und füge das neue Snippet an passender Stelle ein.</p>

<p>Ausführlich erklärt wird das Erstellen eigener Snippets in der <a href="help#snippets">Hilfe</a> unter "<b>Ein Snippet erstellen</b>".

<?php include 'lib/default-footer.php'; ?>
