diff --git a/src/main/webapp/com/ardublock/reference/loop.html b/src/main/webapp/com/ardublock/reference/loop.html
index 8cf004c868ce2637dbd026e3e94f438896755a81..e83d0163353164d03b2c91c0dcc33f49287d445e 100644
--- a/src/main/webapp/com/ardublock/reference/loop.html
+++ b/src/main/webapp/com/ardublock/reference/loop.html
@@ -1,6 +1,84 @@
-<html>
-<img style="-webkit-user-select: none" src="loop.png" alt="image" ></br>
-<font color=red>info Text</font> </br>
-<font color=blue>Bild</font></br>
-<font size=-2>Troubleshooting</font></br>
-</html>
+<!DOCTYPE html>
+<html>
+ <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+ <div style="border: #284a66; border-style: solid; border-width: 5px;">
+ <nav>
+ <li id="beschreibung">Block-Referenz</li>
+ <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+ <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+ </nav>
+ </div>
+
+<div>
+ <section>
+ <div id="ueberschrift">
+ <p>Steuerung / Hauptschleifen</p>
+ <h1 style="font-size: 220%;">wiederhole fortlaufend</h1>
+ </div>
+ <div>
+ <div>
+ <figure>
+ <img id="block_bild" src = "loop.png" alt="wiederholeFortlaufend-Block"></img>
+ <figcaption id="caption"></figcaption>
+ </figure>
+ </div>
+
+ </div>
+ </section>
+</div>
+
+<article>
+ <div>
+ <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+ <p>
+ Der <code>wiederhole fortlaufend</code> Block ist ein wichtiger Bestandteil eines Arduinoprogramms. Alle Programme müssen eine Hauptschleife besitzen, um auf den Arduino
+ hochgeladen werden zu können. Der <code>wiederhole fortlaufend</code> Block ist einer von zwei möglichen Hauptschleifen. Wie der Name bereits aussagt, wird jede Operation die in diesen Block eingefügt wird unendlich
+ oft abgearbeitet. Man spricht auch von einer Schleife. Hier handelt es sich speziell um eine Endlosschleife, da sie keine Abbruchbedingung besitzt, welche die endlose
+ Ausführung unterbrechen würde.
+ </p>
+ <h2 class="unterueberschrift">mache</h2>
+ <p>
+ Dem Block können im <code>mache</code> Feld verschiedene beliegig viele weitere Blöcke zugeordnet werden.
+ In der Reihenfolge, in welcher diese in angeordnet sind, werden sie auch vom Arduino ausgeführt.
+ Dabei kann es sich um Bausteine handeln, welche eine bestimmte Zeit verzögern, einen Ausgang setzen, einen Eingang auslesen oder sogar um weitere Schleifen.
+ Um einen Block hinzuzufügen muss dieser mit der Maus an die entsprechende Stelle gezogen werden. Wenn der Block dann erkannt wird ist ein klicken zu hören und der neue Block rastet an dem Vorherigen ein und verbindet sich mit diesem.
+ So können mehrere Blöcke untereinander platziert werden.
+ </p>
+ <h2 class="unterueberschrift">Beispiel</h2>
+ <p>
+ Ein anschauliches und einfaches Beispiel wäre ein "Bink" Programm.
+ Hier wird eine LED über einen Vorwiderstand an einen digitalen Pin des Arduinos angeschlossen. In diesem Beispiel an Pin 2. Dieser wird dann jeweils eine Sekunde auf 5 Volt und anschließend eine Sekunde
+ auf 0 Volt geschaltet. Dadurch leuchtet die LED eine Sekunde und erlischt danach für eine Sekunde. Diese Operationen werden dann unendlich oft wiederholt.
+ <br><br>
+ Dazu benötigt man einen <code>wiederhole fortlaufend</code> Block, zwei <code>digitalWrite</code> Blöcke und zwei <code>warte Millisekunden</code> Blöcke.
+ Im ersten <code>digitalWrite</code> Block wird der Pin 2 auf <code>HIGH</code> gesetzt, dann wird die Wartezeit des ersten <code>warte Millisekunden</code> Blocks auf 1000 Millisekunden
+ gesetzt was einer Sekunde entspricht.
+ <br>
+ Im zweiten <code>digitalWrite</code> Block wird der Pin 2 auf <code>LOW</code> gesetzt und im folgenden <code>warte Millisekunden</code> Block wieder 1000 Millisekunden gewartet.
+ <br>
+ Dann fängt das Programm wieder von Vorn an. So könnte das Beispiel in ArduBlock aussehen.
+ <br><br>
+ <img src="loop-beispiel.png" alt="loop_beispiel" style="padding-left: 20px;">
+ <h2 class="unterueberschrift">Code</h2>
+ <p>
+ Im Code für den Arduino wird der Baustein mit der Funktion <code>void loop(){mache}</code> umgesetzt.
+ Die auszuführenden Operationen werden dann zwischen die beiden geschweiften Klammern <i>{}</i> geschrieben.
+ <br><br>
+ Im Code würde das Beispiel dann folgendermaßen aussehen:
+ <br><br>
+ <code>void loop() { <br>
+   digitalWrite( 2 , HIGH ); <br>
+   delay( 1000 ); <br>
+   digitalWrite( 2 , LOW ); <br>
+   delay( 1000 ); <br>
+ }</code> <br>
+ </p>
+ </p>
+ </div>
+
+</article>
+
+</body>
+</html>
diff --git a/src/main/webapp/com/ardublock/reference/loop.png b/src/main/webapp/com/ardublock/reference/loop.png
index 557e15745689ff62d67732c87d2310aaedc5dcf0..1ff362f2a49271d51443b8858b802781835db95e 100644
Binary files a/src/main/webapp/com/ardublock/reference/loop.png and b/src/main/webapp/com/ardublock/reference/loop.png differ
diff --git a/src/main/webapp/com/ardublock/reference/program_comment.html b/src/main/webapp/com/ardublock/reference/program_comment.html
index 3fef8b052b72428b7e5ecb5e3841e220d3507b02..06f814eab7639fca5dbcee9ed3ce0c9ac2f8301c 100644
--- a/src/main/webapp/com/ardublock/reference/program_comment.html
+++ b/src/main/webapp/com/ardublock/reference/program_comment.html
@@ -1,7 +1,127 @@
-<html>
-<img style="-webkit-user-select: none" src="program_comment.png" alt="image" ></br>
-<font size=+2>program_comment</font></br>
-<font color=red>info Text</font> </br>
-<font color=blue>Bild</font></br>
-<font size=-2>Troubleshooting</font></br>
-</html>
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+ <div style="border: #284a66; border-style: solid; border-width: 5px;">
+ <nav>
+ <li id="beschreibung">Block-Referenz</li>
+ <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+ <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+ </nav>
+ </div>
+
+<div>
+ <section>
+ <div id="ueberschrift">
+ <p>Kommentare/Code</p>
+ <h1 style="font-size: 220%;">Programmkopf</h1>
+ </div>
+ <div>
+ <div>
+ <figure>
+ <img id="block_bild" src = "program_comment.png" usemap="#blockmap" alt="größer-gleich-block"></img>
+ <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+ </figure>
+ </div>
+ <map name="blockmap">
+ <area shape="rect" coords="20, 20, 157, 260" href="#block_beschreibung" title="Block"></area>
+ <area shape="rect" coords="186, 20, 612, 60" href="#dateiname" title="Dateiname des Programms"></area>
+ <area shape="rect" coords="212, 60, 500, 90" href="#autor" title="Autor(en) des Programms"></area>
+ <area shape="rect" coords="162, 98, 650, 130" href="#beschreibung" title="Kurze Beschreibung der Funktion des Programms"></area>
+ <area shape="rect" coords="215, 192, 418, 224" href="#datum" title="Datum der letzten Versionsänderung"></area>
+ <area shape="rect" coords="198, 231, 350, 260" href="#version" title="Aktuelle Version des Programms"></area>
+ </map>
+ </div>
+ </section>
+</div>
+
+<article>
+ <div>
+ <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+ <p>
+ Der <code>Programmkopf</code> Block hat keine Auswirkungen auf den Ablauf des Programmes. Seine Funktion ist es lediglich eine
+ Information über das Programm zu geben.
+ Wenn man mehrere Programme hat oder diese längere Zeit nicht genutzt hat, dann kann man schnell den Überblick verlieren
+ welche Funktionalitäten wo eingefügt wurden
+ und muss sich diese Informationen falls möglich aus dem Code selbst herauslesen, was nicht immer einfach und schnell ist.
+ Die Kommentarfunktion ist daher eine sehr nützliche Anwendung und wird in der Softwareentwicklung überall eingesetzt.
+ <br><br>
+ Der Kommentar, der mit diesem Block geschrieben wird, kann allerdings nicht mitten im Text eingefügt werden.
+ Im generierten Code werden diese Informationen bereits <b>vor</b> den ersten Befehlen eingefügt.
+ </p>
+ <h2 class="unterueberschrift" id="">Dateiname</h2>
+ <p>
+ Hier wird der Name der Datei eingetragen.
+ Dieser sollte bereits den Code sehr knapp beschreiben.
+ <br>
+ Das heißt nicht einfach nur "Datei_1, Datei_2, Datei_3...", sondern zum Beispiel "LED_blink" oder "roboter_steuerung".
+ <p>
+ <h2 class="unterueberschrift" id="">Autor</h2>
+ <p>
+ Hier wird der Name von einer oder mehreren Personen eingetragen, die am Programm mitgearbeitet werden.
+ Besonders bei größeren Projekten, an denen mehrere Entwicklerinnen oder Entwickler mitwirken, ist dies notwendig.
+ <p>
+ <h2 class="unterueberschrift" id="">Beschreibung</h2>
+ <p>
+ Hier wird die Funktion des Programms in 2 bis 3 kurzen Sätzen zusammengefasst.
+ Nützlich ist es auch in einem Satz die Änderungen zu beschreiben, die zur letzten Version gemacht wurden.
+ <p>
+ <h2 class="unterueberschrift" id="">Datum</h2>
+ <p>
+ Hier kann das Datum des letzten Bearbeitungstages eingetragen werden.
+ <p>
+ <h2 class="unterueberschrift" id="">Version</h2>
+ <p>
+ Hier wird die aktuelle Programmversion eingetragen, falls mehrere Versionen erstellt und gespeichert wurden.
+ <p>
+ <h2 class="unterueberschrift" id="">Code</h2>
+ <p>
+ Obwohl der <code>Programmkopf</code> Block keine direkte logische Funktion im Code besitzt, kommt er darin
+ jedoch sehr wohl vor.
+ <br><br>
+ Kommentare in der Arduino IDE, die in einer Zeile eingefügt werden sollen beginnen mit zwei "Slashs" (<code>//</code>).
+ Die ganze Zeile, die rechts von diesen Symbolen steht wird in grauer Farbe dargestellt und beim Programmablauf ignoriert.
+ Sie dient nur als Hinweis für den Programmierer oder die Programmiererin.
+ Als Kommentar kann alles Denkbare in Textform eingetragen werden.
+ <br><br>
+ <b>Beispiel:</b> In einer Zeile soll der Kommentar "Hier wird die Variable xy um 1 hochgezählt" eingefügt werden.
+ Das würde im Code so aussehen:
+ <br><br>
+ <code>
+ //Hier wird die Variable xy um 1 hochgezählt
+ </code>
+ <br><br>
+ Es sind auch ganze Kommentarblöcke möglich.
+ Als ein solcher Block wird auch der <code>Programmkopf</code> Block realisiert.
+ Hier wird der Kommentar mit einem Slash und einem Sternchen eingeleitet (<code>/*</code>) und mit einem Stern und einem Slash abgeschlossen (<code>*/</code>).
+ Alles was dazwischen steht wird im Programmablauf ignoriert.
+ Auch hier kann auch wieder alles mögliche in Textform geschrieben werden.
+ <br><br>
+ Hier ein <b>Beispiel</b> dazu wie ein ausgefüllter <code>Programmkopf</code> Block im Code ausgeführt wird:
+ <br>
+ Block:
+ <br><br>
+ <img src="program_comment-beispiel.png" alt="">
+ <br><br>
+ Code:
+ <br><br>
+ <code>
+ /** <br>
+  * file: blink_programm <br>
+  * author: Max Mustermann <br>
+  * <br>
+  * description: <br>
+  * Dieses Programm bringt eine LED am digitalen Pin 1 zum blinken <br>
+  * Sie ist immer eine Sekunde an und 0,5 Sekunden aus <br>
+  * <br>
+  * date: 01.01.2021 <br>
+  * version: 1.0 <br>
+ */ <br>
+ </code>
+ <p>
+ </div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/program_comment.png b/src/main/webapp/com/ardublock/reference/program_comment.png
index 0124bd608c1edcddead3f9c1c348036e8fe2828e..0abaa7291c61a92de672f1279bb86e3cbd1a763d 100644
Binary files a/src/main/webapp/com/ardublock/reference/program_comment.png and b/src/main/webapp/com/ardublock/reference/program_comment.png differ