<?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;
	$noindex = true;
	$nofollow = false;
	$noarchive = true;
	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>

<h4 id="image-table">als Tabelle</h4>

<p>Fügt ein Bild als HTML-Tabelle ein. Dies soll dem Zweck dienen, sensible Informationen wie etwa Kontaktdaten im Impressum gegen Missbrauch zu schützen. Hierzu schreibt man diese Informationen zuerst temporär in den Editor, macht einen Screenshot davon und beschneidet das Bild in einem Bildbearbeitungsprogramm auf die erforderliche Größe. Dann lädt man es in die Medien-Bibliothek hoch, fügt den Dateipfad des Bildes in den Editor ein und wendet das Snippet an. Das Bild sollte nicht zu groß sein (max. 300 x 150 Pixel), da der Browser sonst zu lange braucht, um die Grafik anzuzeigen.</p>

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

media/dd.png

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

<?php include_once "snippets/image-table.php"; PrintImageTable('media/dd.png', '#FFFFFF', '#000000', 'var(--ContentFgColor)'); ?>

<p>Im obigen Beispiel wurde eine reine Schwarzweiß-Grafik verwendet (schwarze Schrift auf weißem Hintergrund). Damit das Bild an die Farben der Webseite angepasst wird, wurden nach Einfügen des Snippets noch die folgenden drei Parameter zum Aufruf der PHP-Funktion PrintImageTable hinzugefügt: '#FFFFFF' = die Bildfarbe, die transparent erscheinen soll (hier das Weiß des Hintergrundes); '#000000' = die Bildfarbe die durch eine andere Farbe ersetzt werden soll (hier das Schwarz der Schrift); 'var(--ContentFgColor)' = die Farbe, durch die die Schriftfarbe ersetzt werden soll (hier die Textfarbe des Artikel-Inhalts).</p>

<p>Anstelle des Dateipfades können auch die Bilddaten in Base64-Codierung angegeben werden, was den Vorteil hat, dass keine Bilddatei mit sensiblen Informationen auf dem Webserver liegt, die abgerufen werden könnte. Hierzu öffnet man ein neues Editor-Fenster, fügt dort den Dateipfad des Bildes ein und wendet das nachfolgend beschriebene Snippet "Base64-codieren" an. In der Vorschau rechts erscheint dann der Base-64-Code, den man mit dem "Kopieren"-Button in die Zwischenablage kopiert und dann einfach anstelle des Dateipfades in den ersten Parameter der PHP-Funktion PrintImageTable einfügt. Anschließend kann man das Bild wieder aus der Medienbibliothek löschen.</p>

<p>Hintergrund: Stehen Kontaktdaten im Klartext auf einer Webseite, können diese leicht von Suchmaschinen und Bots gefunden und verwertet werden. Fügt man sie als Grafik ein, sind sie etwas besser geschützt, jedoch kann auch hier die Bilddatei durch Bots gefunden und der enthaltene Text mittels OCR ausgelesen werden. Zudem müssen Kontaktinformationen im Impressum nach deutschem Recht (DSGVO) auch dann angezeigt werden, wenn im Browser die Anzeige von Bildern deaktiviert ist. Hier setzt das Snippet an: Es gibt keine Bilddatei, die gefunden oder gespeichert werden könnte, und das Bild wird auch bei deaktiviertem Laden von Bildern im Browser angezeigt.</p>

<p>Hundertprozentige Sicherheit gegen automatisiertes Auslesen der geschützten Informationen kann allerdings auch diese Methode nicht bieten, da Bots die Seite rendern und die Informationen weiterhin mittels OCR auslesen könnten. Um dies zu erschweren, kann man die zu schützenden Informationen zusätzlich mit Hilfe des Snippets "Absatz &gt; Schützen" in einen geschützten Absatz stecken, der nur sichtbar wird, wenn die Seite über einen internen Link aufgerufen wurde. Damit das funktioniert, muss die Seite mittels eines geschützten Links verlinkt werden (im Editor über "[Öffnen] &gt; Artikel auswählen &gt; Link (geschützt) &gt; [Einfügen]").</p>

<h4 id="image-to-base64">Base64-codieren</h4>

<p>Dieses Snippet erzeugt aus den Bilddaten einen Base64-String, den man z.B. anstelle des Dateipfades in einem Bild-Link (z.B. &lt;img src="data:image/png;base64,<span style="color: #0000FF;"><i>Base64-String</i></span>"&gt;) oder im vorherigen Snippet "Einzelnes Bild &gt; als Tabelle" angeben kann. Dies eignet sich für kleine Bilder wie z.B. Screenshots von Kontaktinformationen, die nicht öffentlich abrufbar sein sollen.</p>

<p>Dieses Snippet ist nicht dafür gedacht, in einem Artikel verwendet zu werden, sondern es ist eher so eine Art Hilfsmittel. Um es zu benutzen, öffnet man den Editor am besten in einem neuen Browser-Tab.</p>

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

media/dd.png

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

<p>Wenn alles geklappt hat, ist nun im Vorschaufenster rechts das Bild zu sehen, darunter ein "Kopieren"-Button, und darunter der Base64-Code. Durch Klick auf den Button wird der Code in die Zwischenablage kopiert und kann dann im Artikel an passender Stelle eingefügt werden. Anschließend kann das neue Browser-Tab wieder geschlossen und die Bilddatei gelöscht werden.</p>

<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 | 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>(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-popups">Popups</h3>

<p>Die hier grupperten Snippets fügen einen Popup-Link ein. Dies ist ein Link, der die angegebene Web-Adresse beim Anklicken nicht sofort öffnet, sondern zuerst ein kleines Info-Fenster mit zwei Buttons anzeigt. Erst nach Klick auf den Button "Link öffnen" wird der Link dann tatsächlich geöffnet. Durch Klick auf den Button "Schließen" oder auf einen Bereich außerhalb des Popups wird das Popup-Fenster geschlossen, ohne den Link aufzurufen. Eine Variante ist das Popup ohne Link, bei der nur ein Info-Text und der Schließen-Button angezeigt wird.</p>

<p>Ein Link wird zu einem Popup-Link, indem ihm die CSS-Klasse "popup" zugewiesen wird:</p>

<pre class="textbox">
&lt;a class=”<b>popup</b>” href=”<b>Link-Adresse</b>” title=”<b>anzuzeigender Text</b>”&gt;Linktext&lt;/a&gt;
</pre>

<p>Der im Popup anzuzeigende Text wird im title-Attribut des Links angegeben. Da hier keine HTML-Tags erlaubt sind, kann der Text ähnlich wie mit dem aus Foren bekannten <a href="https://de.wikipedia.org/wiki/BBCode" target="_blank" rel="noopener" title="">BBCode</a> formatiert werden:</p>

<ul>
	<li>Textstile: [b]<b>fett</b>[/b], [i]<i>kursiv</i>[/i], [s]<s>durchgestrichen</s>[/s], [u]<u>unterstrichen</u>[/u]</li>
	<li>[br]Text in neuer Zeile</li>
	<li>[p]Text in neuerm Absatz, linksbündig</li>
	<li>[right]Text in neuerm Absatz, rechtsbündig</li>
	<li>[center]Text in neuerm Absatz, zentriert</li>
	<li>Link: [url=https://www.beispiel.de/]Linktext[/url]</li>
	<li>Bild: [img]media/bild.jpg[/img]</li>
	<li>Bild mit Größenangabe: [img 50%]media/bild.jpg[/img]
	<br>(Die Angabe bezieht sich auf die Breite; es ist jede in CSS übliche Angabe möglich, z.B. auch 100px, 1em etc.)</li>
	<li>HTML-Inhalt aus einem unsichtbaren DIV mit ID: [id]ID[/id]</li>
</ul>

<p>Außerdem wird im Popup angezeigt, ob es sich um einen Link zu einer externen Seite oder zu einem internen Artikel handelt, und zu welchem Webserver der Link führt. Ist bei href ein Link zu einer Bibelstelle bei www.bibleserver.com angegeben, dann wird der Info-Text (sinvollerweise ein Bibelzitat) <i>"kursiv und zwischen Anführungszeichen"</i> angezeigt und darunter die Bibelstelle und die im Link verwendete Bibelübersetzung.</p>

<p>Zusätzlich zum Inhalt des title-Attributs kann auch beliebiger HTML-Inhalt im Popup angezeigt werden, wenn dieser zwischen &lt;template&gt; und &lt;/template&gt; angegeben wird:</p>

<pre class="textbox">
&lt;a class=”<b>popup</b>” href=”<b>Link-Adresse</b>” title=”<b>anzuzeigender Text</b>”&gt;Linktext&lt;template&gt;<b>HTML-Inhalt</b>&lt;/template&gt;&lt;/a&gt;
</pre>

<p>Der Inhalt zwischen &lt;template&gt; und &lt;/template&gt; wird immer <i>vor</i> dem Inhalt des title-Attributs angezeigt.</p>

<p>Folgende Snippets zum Einfügen von Popups stehen zur Verfügung:</p>

<h4 id="popup-link">Popup-Link intern</h4>

<p>Dieses Snippet fügt einen Popup-Link zu einem internen Artikel ein. Es werden 3 Angaben benötigt: Link-Text, Link-URL und der anzuzeugende Popup-Text.</p>

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

Hilfe
help
[img]media/green-header-image.jpg[/img][center][b]Hilfe[/b][p]Hier findest du alles Wissenswerte und noch viel mehr zu [i]Blog4u[/i].

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

<a class="popup" href="help" title="[img]media/green-header-image.jpg[/img][center][b]Hilfe[/b][p]Hier findest du alles Wissenswerte und noch viel mehr zu [i]Blog4u[/i].".">Hilfe</a>

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

<p>Dieses Snippet fügt einen Popup-Link zu einer externen Webseite ein. Externe Links werden in einem neuen Browser-Tab geöffnet. Es werden 3 Angaben benötigt: Link-Text, Link-URL und Popup-Text.</p>

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

Blog4u
https://www.stefanbion.de/ein-blog-fuer-dich
[center][b]Ein Blog für dich?[/b][p][img]https://www.stefanbion.de/media/blog4u/mein-blog.jpg[/img][p]Findest du WordPress mit all seinen Möglichkeiten und der detaillierten Benutzerverwaltung zwar ganz nett, aber es ist für dich eigentlich „Overkill“? Dann lade dir doch meine kleine Blog-Software herunter und installiere sie dir auf deinem eigenen Webspace!

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

<a class="popup" href="https://www.stefanbion.de/ein-blog-fuer-dich" target="_blank" rel="noopener" title="[center][b]Ein Blog für dich?[/b][p][img]https://www.stefanbion.de/media/blog4u/mein-blog.jpg[/img][p]Findest du WordPress mit all seinen Möglichkeiten und der detaillierten Benutzerverwaltung zwar ganz nett, aber es ist für dich eigentlich „Overkill“? Dann lade dir doch meine kleine Blog-Software herunter und installiere sie dir auf deinem eigenen Webspace!">Blog4u</a>

<p>Hier ein Beispiel mit Bibelzitat und Link zum ERF-BibleServer:</p>

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

Johannes 3,16
https://www.bibleserver.com/SLT/Johannes3,16
Denn so sehr hat Gott die Welt geliebt, dass er seinen eingeborenen Sohn gab, damit jeder, der an ihn glaubt, nicht verlorengeht, sondern ewiges Leben hat. (Johannes 3,16)

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

<a class="popup" href="https://www.bibleserver.com/SLT/Johannes3,16" target="_blank" rel="noopener" title="Denn so sehr hat Gott die Welt geliebt, dass er seinen eingeborenen Sohn gab, damit jeder, der an ihn glaubt, nicht verlorengeht, sondern ewiges Leben hat. (Johannes 3,16)">Johannes 3,16</a>

<p>Hinweis: Wenn ganz am Ende des Bibelzitats eine Bibelstelle (Versangabe) angegeben ist - entweder in runden Klammern oder mittels "|" oder " &ndash; " oder " &mdash; " vom Zitat getrennt -, dann wird diese Bibelstelle im Popup unterhalb des Bibelzitats aufgeführt (wie im Beispiel zu sehen).</p>

<h4 id="popup">Popup ohne Link</h4>

<p>Dieses Snippet fügt ein einfaches Popup ohne Link ein, das nur einen Infotext und einen Schließen-Button enthält. Es eignet sich zur Anzeige kurzer Hinweistexte oder Erläuterungen, die nicht direkt im Fließtext erscheinen sollen (statt Fußnoten oder Tooltips). Technisch gesehen handelt es sich einfach um einen Link ohne href-Attribut. Es werden 2 Angaben benötigt: Link-Text und Popup-Text.</p>

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

Blatt
[center][b]Was ist das für ein Blatt?[/b][center][img 40%]media/green-favicon.png[/img][p]Es handelt sich um ein vierblättriges Kleeblatt, das in der Natur nur sehr selten vorkommt (Kleeblätter sind üblicherweise dreiblättrig). Da es nur mit viel Glück zu finden ist, gilt es im Volksglauben als Glückssymbol, was aber natürlich abergläubischer Quatsch ist.

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

<a class="popup" title="[center][b]Was ist das für ein Blatt?[/b][center][img 40%]media/green-favicon.png[/img][p]Es handelt sich um ein vierblättriges Kleeblatt, das in der Natur nur sehr selten vorkommt (Kleeblätter sind üblicherweise dreiblättrig). Da es nur mit viel Glück zu finden ist, gilt es im Volksglauben als Glückssymbol, was aber natürlich abergläubischer Quatsch ist.">Blatt</a>

<h4 id="popup-id">Popup ohne Link (ID)</h4>

<p>Wie zuvor, jedoch zeigt das Popup beliebigem HTML-Inhalt an, der in einem unsichtbaren DIV-Block enthalten ist, der über seine ID referenziert wird. Der Inhalt des DIV-Blocks kann somit in mehreren Popups wiederverwendet werden. (Hinweis: Selbstverständlich kann die ID-Angabe innerhalb des title-Attributs auch für Popup-Links verwendet werden.) Es werden 2 Angaben benötigt: Der Link-Text und die ID des DIV-Blocks.</p>

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

Popup mit ID
popup-inhalt

<p>Und hier folgt noch der DIV-Block mit dem im Popup anzuzeigenden Inhalt (nur sichtbar im Quelltext):</p>

<p>(Beginn des DIV-Blocks)</p>

<div id="popup-inhalt" style="display: none;">
	<h2>Überschrift</h2>
	<p>Textinhalt</p>
	<div><figure><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschriftung</figcaption></figure></div>

	<figure>
		<table>
			<tr>
				<th>Spalte 1</th>
				<th>Spalte 2</th>
			</tr>
			<tr>
				<td>Zeile 1</td>
				<td>Zeile 1</td>
			</tr>
			<tr>
				<td>Zeile 2</td>
				<td>Zeile 2</td>
			</tr>
		</table>
		<figcaption>Tabelle</figcaption>
	</figure>
</div>

<p>(Ende des DIV-Blocks)</p>

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

<a class="popup" title="[id]popup-inhalt[/id]">Popup mit ID</a>

<h4 id="popup-template">Popup ohne Link (HTML)</h4>

<p>Hier wird der im Popup anzuzeigende HTML-Inhalt nicht in einem separaten, unsichtbaren DIV-Block angegeben, sondern in einem TEMPLATE-Block innerhalb des Links. Dies hat den Vorteil, dass keine ID angegeben werden muss. (Hinweis: Selbstverständlich kann der TEMPLATE-Block auch bei Popup-Links verwendet werden.) Es werden 2 Angaben benötigt: Der Link-Text und beliebig viele Zeilen mit HTML-Code.</p>

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

Popup mit HTML-Inhalt
<div><figure><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschriftung</figcaption></figure></div>

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

<a class="popup" title=" ">Popup mit HTML-Inhalt<template>
	<div><figure><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption>Bildbeschriftung</figcaption></figure></div>
</template></a>

<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>

<p>Der Link "Datenschutzhinweise" führt zum Abschnitt mit der id "#external-content" der Datenschutzerklärungs-Seite. Der Dateiname der Datenschutzerklärung wird aus der Systemdatei "lib/config.php" gelesen. Standardmäßig lautet er "datenschutz". Wenn die Seite anders benannt wurde, muss er daher auch in der config.php entsprechend angepasst werden (oder alternativ über das <a href="lib/setup" target="_blank" rel="noopener" title="">Setup-Script</a>).</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>

<h4 id="protect-section">Schützen</h4>

<p>Mit diesem Snippet kann Text vor allzu leichtem Auffinden und Abgreifen durch Suchmaschinen und Bots geschützt werden. Hierzu muss die Seite im Editor über "[Öffnen] &gt; Artikel auswählen &gt; Link (geschützt) &gt; [Einfügen]" verlinkt werden. Diese spezielle interne Verlinkungsmethode erkennt, ob die Seite innerhalb eines plausiblen Zeitraums über einen internen Link aufgerufen wurde oder nicht. Wenn ja, wird der Text des ersten angegebenen Textbausteins angezeigt; wenn nein, dann der des zweiten. Dieses Snippet eignet sich in Kombination mit dem Snippet "Einzelnes Bild &gt; als Tabelle" z.B. dazu, Kontaktinformationen ein einem Impressum zu schützen.</p>

<p>Zuerst erstellt man zwei Textbausteine und fügt dann deren Dateipfade über die Dateiverwaltung in den Editor ein. Dann markiert man beide Dateipfade und wendet das Snippet an.</p>

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

textblocks/beispiel-text-geschuetzt.htm
textblocks/beispiel-text-ungeschuetzt.htm

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

<?php
	if (TokenValid())
		include 'textblocks/beispiel-text-geschuetzt.htm';
	else
		include 'textblocks/beispiel-text-ungeschuetzt.htm';
?>

<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-specialchars">Sonderzeichen</h3>

<p>Diese Snippets dienen zum schnellen Zugriff auf einige häufiger benötigte Sonderzeichen wie typographische Anführungszeichen oder den langen Gedankenstrich, die nicht auf der normalen Computertastatur zu finden sind. Einige der Sonderzeichen-Snippets sind mit einer Tastenkombination versehen.</p>

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