Web-Generierungstoolchen Code-Generierung mit Templates

:: Generiere HTML5-Code für Webseite

Infos

Dies ist ein Lehrbeispiel, das als Ausgangspunkt für eigene Entwicklungen genommen werden kann.

Der Quelltext für das 1. Beispiel zeigt den HTML5-Template-Text, der in die textarea "TA0" kommt.
In den "Parameter-Lücken" steht stellvertretend für den einzufügenden Text ein "ErsetzungsTOKEN".
In die textarea "TA1" kommt der aktuelle Ersetzungstext für das ErsetzungsTOKEN.
Durch [Erstellen] wird der Quelltext der HTML5-Seite zusammen gemischt und in die textarea "TA2" geschrieben.
Mit [Vorschau] ist eine Browser-Vorschau gemeint.
In den nächsten Beispielen werden komplexere Templates in "TA0" und komplexere ErsetzungsTOKEN in "TA1" geladen.


 Lehrbeispiel 1
 | 
 Lehrbeispiel 2
 | 
 Lehrbeispiel 3

1. HTML5-Template ( mit TOKEN-Platzhalter ) Folge von Artikeln

2. Ersetzungstexte ( ErsetzungsTOKEN ) Folge von Artikeln

*H1_TEXT: HTML5 erstellt mit Template
*HEADER_TEXT: Dieser HTML5-Quelltext wurde mit Template erstellt

*FOLGE_VON_ARTIKELN: 
 ARTIKEL_AUFBAU
 ARTIKEL_AUFBAU

*ARTIKEL_AUFBAU:
<article><header>
  <h2> ARTIKEL_TITEL </h2>
</header>
<section> 
  ARTIKEL_TEXT 
</section>
</article>

*VERWENDE_FUNKTION: replace_1

*ARTIKEL_TITEL: titel1
*ARTIKEL_TEXT: text1

*ARTIKEL_TITEL: titel2
*ARTIKEL_TEXT: text2

*VERWENDE_FUNKTION: replace_all trim

*META_IM_HEADER:
<meta charset="UTF-8">
<meta name="robots" content="noindex" />
*STYLE_IM_HEADER:
<style>
html,body,section,article,a { background-color:#191999;color:#fff;}
header,article {background-color:inherit;color:#fff;}

body    {margin:0;padding:32px;}
header  {margin:10px;padding:5px;}
section {padding:5px;}
article {margin:10px;border:1px solid #eff;padding:5px;}
footer  {margin-top:10px;padding:5px;}

p {background-color:inherit;color:#fff;}
h1 {text-align:center;background-color:#aae;color:#ffa;border:4px solid #ccc; border-radius:10px;}
</style>

3. Erstelle HTML5-Quelltext ( Folge von Artikeln ) Vorschau + Validierung

Vorschau

:: Generiere Code für seiten-mittiges Bild Infos

Infos


 Lehrbeispiel 1
 |

1. HTML5-Template ( mit TOKEN-Platzhalter ) Bild mittig

2. Ersetzungstexte ( ErsetzungsTOKEN ) Bild mittig

3. Erstelle HTML5-Quelltext ( Bild mittig ) Vorschau + Validierung

Vorschau