2. Übersicht und Code zum Kopieren

In diesem Dokument werden die Codeblöcke als Vorlagen zum Kopieren bereitgestellt. Es wird immer ein Beispiel und darunter der zugehörige Code angezeigt. Zusätzlich gibt es Minimal-Versionen, um das Einfügen zu beschleunigen (es muss hinterher weniger Code entfernt werden). Der Code kann mit den Kopieren-Buttons in die Zwischenablage kopiert werden. Die Erklärungen zu den einzelnen Blöcken sind im 1. Kapitel zu finden

2.1 Überschriften

Vorschau

3.5 Demoüberschrift(Hauptüberschriften)

3.5.1 Demo-Unterüberschrift(Unterüberschrift)
Link zur Erklärung
zur Erklärung Überschriften
Beispielcode
HTML-Code für Hauptüberschriften 

<div class="heading-block" id="Demoüberschrift">
    <h3>3.5 Demoüberschrift(Hauptüberschriften)</h3>
</div>
HTML-Code für Unterüberschriften 

<div class="heading-block" id="Demoüberschrift2">
    <h4>3.5.1 Demo-Unterüberschrift(Unterüberschrift)</h4>
</div>

2.2 Text-Blöcke

Vorschau

Im Textblock steht üblicherweise einfacher Text und einfache Aufzählungen

Es ist möglich, mehrere Absätze in einem Block zu definieren.

Aufzählungen müssen außerhalb der <p>-Tags stehen:
  1. Erster Punkt
  2. Zweiter Punkt
  • Erster Punkt
  • Zweiter Punkt
Link zur Erklärung
zur Erklärung Textblöcken
Beispielcode
HTML-Code für Text-Blöcke (Beispiel) 

<div class="text-block">
    <p>
        Im Textblock steht üblicherweise einfacher Text und einfache Aufzählungen
	</p>
	<p>
      	Es ist möglich, mehrere Absätze in einem Block zu definieren.
	</p>
    Aufzählungen müssen außerhalb der <p>-Tags stehen:
    <ol>
       	 <li>Erster Punkt</li>
       	 <li>Zweiter Punkt</li>
	</ol>
    <ul>
        <li>Erster Punkt</li>
        <li>Zweiter Punkt</li>
	</ul>        
</div>
HTML-Code für Text-Blöcke (Minimal-Code) 

<div class="text-block">
    <p>
        [Absatz]
	</p>      
</div>

2.3 Definitionsblock

Vorschau
Definition
Definition: Zu definierender Begriff

Hier steht die eigentliche Definition. Es handelt sich um einfachen Text und beinhaltet keine weiteren Formatierungen, außer das Umfließen des Logos. Es sind auch hier Absätze und Aufzählungen möglich.

Das icon ist fest und sollte nicht geändert werden um ein einheitliches Design sicherzustellen.

Die Farbe des definierten Begriffs in der Überschrift ist im Beispiel über "term-practical" definiert. Die Alternativen sind:

  • "term-applied" für angewandte Informatik
  • "term-theoretical" für theoretische Informatik
  • "term-technical" für technische Informatik
  • "term-partner" für externe Partner und Links
  • "term-lehrplan" für Lehrpläne

Die Rahmenfarbe wird direkt im äußersten Tag definiert, indem man nach class="definition-block practical" für "practical" folgendes einsetzt:

  • "applied" für angewandte Informatik
  • "theoretical" für theoretische Informatik
  • "technical" für technische Informatik
  • "partner" für externe Partner und Links
  • "lehrplan" für Lehrpläne
Link zur Erklärung
zur Erklärung Definitionsblöcke
Beispielcode
HTML-Code für Definitions-Blöcke (Beispiel) 

<div class="definition-block practical">
    <img src="../../Bilder/Symbol-Defintion.png" alt="Definition" class="definition-icon-floated">

    <div class="definition-header">
        <div class="title-content">
            <span class="prefix">Definition:</span>
            <span class="term-practical">Zu definierender Begriff</span>
        </div>
    </div>

    <div class="definition-body">
        <p>
            Hier steht die eigentliche Definition. Es handelt sich um einfachen Text 
            und beinhaltet keine weiteren Formatierungen, außer das Umfließen des Logos. 
            Es sind auch hier Absätze und Aufzählungen möglich.
        </p>
        <p>
            Das icon ist fest und sollte nicht geändert werden um ein einheitliches Design
            sicherzustellen.
        </p>
        <p>
            Die Farbe des Blocks ist im Beispiel über "term-practical" definiert. 
            Die Alternativen sind:
        </p>
        <ul>
            <li>"term-applied" für angewandte Informatik</li>
            <li>"term-theoretical" für theoretische Informatik</li>
            <li>"term-technical" für technische Informatik</li>
            <li>"term-partner" für externe Partner und Links</li>
            <li>"term-lehrplan" für Lehrpläne</li>
        </ul>
    </div>
</div>
HTML-Code für Definitions-Blöcke (Minimal-Code) 

<div class="definition-block practical">
    <img src="../../Bilder/Symbol-Defintion.png" alt="Definition" class="definition-icon-floated">

    <div class="definition-header">
        <div class="title-content">
            <span class="prefix">Definition:</span>
            <span class="term-practical">Zu definierender Begriff</span>
        </div>
    </div>

    <div class="definition-body">
        <p>
            [Definitionstext]
        </p>
        
    </div>
</div>

2.4 Codeblock

Vorschau
Beispielcode für Java (ohne Zeilennummern) 

public class HelloWorld {
    public static void main(String[] args) {
        // Print a message
        System.out.println("Hello, Java!"); // Output
        int a=0;
        int b=2;
        if(a<b){
            a=a+b;
        }
    }
}
Beispielcode für Python (mit Zeilennummern) 

# Ein Kommentar
def greet(name):
    """Greets the user."""
    message = f"Hello, {name}!"
    print(message)

greet("Python")
Link zur Erklärung
zur Erklärung Codeblöcke
Beispielcode
HTML-Code für Java-Codecontainer 
                             
<!-- Beispiel für Java-Codecontainer --> 
<div class="code-container">
    <div class="code-header">
        <span>Beispielcode für Java</span>
        <button class="copy-button">Kopieren</button>
    </div>
    <pre><code class="language-java">
public class HelloWorld {
    public static void main(String[] args) {
        // Print a message
        System.out.println("Hello, Java!"); // Output
    }
}
    </code></pre>
</div>
HTML-Code für Python-Codecontainer 
                            
<!-- Beispiel für Python-Codecontainer -->  
<div class="code-container">
    <div class="code-header">
        <span>Beispielcode für Python</span>
        <button class="copy-button">Kopieren</button>
    </div>
    <pre><code class="language-python line-numbers">
# Ein Kommentar
def greet(name):
    """Greets the user."""
    message = f"Hello, {name}!"
    print(message)

greet("Python")
    </code></pre>
</div>
HTML-Code für Java-Codecontainer (minmal-Code) 
                             
<!-- Beispiel für Java-Codecontainer --> 
<div class="code-container">
    <div class="code-header">
        <span>[Titel des Codeblocks]</span>
        <button class="copy-button">Kopieren</button>
    </div>
    <pre><code class="language-java">
[Java-Code]
    </code></pre>
</div>
HTML-Code für Python-Codecontainer (Minimal-Code) 
                            
<!-- Beispiel für Python-Codecontainer -->  
<div class="code-container">
    <div class="code-header">
        <span>[Titel des Codeblocks]</span>
        <button class="copy-button">Kopieren</button>
    </div>
    <pre><code class="language-python line-numbers">
[Python-Code]
    </code></pre>
</div>

2.5 Übungen Block

Vorschau
Übung
Übung - Titel der Übung

Aufgabe 1: Kurze Überschrift der Aufgabe

Der Aufgabentext sollte wieder nur einfacher Fließtext, ggf. mit Aufzählungen sein.

Die Lösungen sind nur sichtbar, wenn man als Lehrer angemeldet ist.

Die Farbe des Blocks ist im Beispiel über "task-block practical" definiert. Die Alternativen sind:

  • "task-block applied" für angewandte Informatik
  • "task-block theoretical" für theoretische Informatik
  • "task-block technical" für technische Informatik
  • "task-block partner" für externe Partner und Links
  • "task-block lehrplan" für Lehrpläne
Lösung (nur für Lehrer sichtbar)

Hier würde dann die Läsung für den Lehrer stehen. Für Hervorhebung von einzelnen Wörtern wird das <strong>-Tag empfohlen.

Aufgabe 2: Kurze Überschrift der Aufgabe

Beispiel: Welchen primitiven Java-Datentyp würden Sie für die Speicherung der folgenden Informationen verwenden?

  • Anzahl der Schüler in einer Klasse
  • Ein einzelner Buchstabe (z.B. für eine Note)
  • Der Preis eines Artikels in Euro
  • Ob ein Schalter ein- oder ausgeschaltet ist
Lösung
  • Anzahl Schüler: `int`
  • Einzelner Buchstabe: `char`
  • Preis in Euro: `double` (oder `float`)
  • Schalterzustand: `boolean`

Beispiel-Deklarationen:

Java Deklarationen

int anzahlSchueler = 25;
char note = 'B';
double preis = 19.99;
boolean isAn = true;
Link zur Erklärung
zur Erklärung Aufgaben-Block
Beispielcode
HTML-Code für Übung-Blöcke (Beispiel-Code) 

<div class="task-block practical">
    <img src="../../Bilder/Symbol-Aufgabe.png" alt="Übung" class="task-icon-floated">
    <div class="task-header">
        <span class="prefix">Übung -</span>
        <span class="title">Titel der Übung</span>
    </div>
    <div class="task-body">
        <div class="task-item">
            <h4>Aufgabe 1: Kurze Überschrift der Aufgabe</h4>
            <p>
                Der Aufgabentext sollte wieder nur einfacher Fließtext, ggf. mit 
                Aufzählungen sein.
            </p>
            <p>
                Die Lösungen sind nur sichtbar, wenn man als Lehrer angemeldet ist.
            </p>
            <p>
                Die Farbe des Blocks ist im Beispiel über "task-block practical" 
                definiert. Die Alternativen sind:
            </p>
            <ul>
                <li>"task-block applied" für angewandte Informatik</li>
                <li>"task-block theoretical" für theoretische Informatik</li>
                <li>"task-block technical" für technische Informatik</li>
                <li>"task-block partner" für externe Partner und Links</li>
                <li>"task-block lehrplan" für Lehrpläne</li>
            </ul>
            <div class="teacher-content solution-box">
                <h5>Lösung (nur für Lehrer sichtbar)</h5>
                <p>
                    Hier würde dann die Läsung für den Lehrer stehen. Für 
                    Hervorhebung von einzelnen <strong>Wörtern</strong> 
                    wird das &rt;strong&lt;-Tag empfohlen.
                </p>
            </div>
        </div>
        <div class="task-item">
            <h4>Aufgabe 2: Kurze Überschrift der Aufgabe</h4>
            <p>Beispiel: Welchen primitiven Java-Datentyp würden Sie für die 
            Speicherung der folgenden Informationen verwenden?</p>
            <ul>
                <li>Anzahl der Schüler in einer Klasse</li>
                <li>Ein einzelner Buchstabe (z.B. für eine Note)</li>
                <li>Der Preis eines Artikels in Euro</li>
                <li>Ob ein Schalter ein- oder ausgeschaltet ist</li>
            </ul>
            <div class="teacher-content solution-box">
                <h5>Lösung</h5>
                <ul>
                    <li>Anzahl Schüler: `int`</li>
                    <li>Einzelner Buchstabe: `char`</li>
                    <li>Preis in Euro: `double` (oder `float`)</li>
                    <li>Schalterzustand: `boolean`</li>
                </ul>
                <p>Beispiel-Deklarationen:</p>
                <div class="code-container">
                    <div class="code-header">Java Deklarationen</div>
                    <pre><code class="language-java">
int anzahlSchueler = 25;
char note = 'B';
double preis = 19.99;
boolean isAn = true;
</code></pre>
                </div>
            </div>
        </div>
    </div>
</div>
HTML-Code für Übung-Blöcke (Minimal-Code mit Überschrift) 

<div class="task-block practical">
    <img src="../../Bilder/Symbol-Aufgabe.png" alt="Übung" class="task-icon-floated">
    <div class="task-header">
        <span class="prefix">Übung -</span>
        <span class="title">[Titel der Übung]</span>
    </div>
    <div class="task-body">
        <!-- Aufgabe 1 --> 
        <div class="task-item">
            <h4>Aufgabe 1: [Kurze Überschrift der Aufgabe]</h4>
            <p>
                [Aufgabentext]
            </p>
            
            <div class="teacher-content solution-box">
                <h5>Lösung</h5>
                <p>
                   [Lehrerlösung]
                </p>
            </div>     
        </div>
        <!-- Aufgabe 2 -->
    </div>
</div>
HTML-Code für Übung-Blöcke (Minimal-Code ohne Kopfzeile) 

<div class="task-block practical">
    <img src="../../Bilder/Symbol-Aufgabe.png" alt="Übung" class="task-icon-floated">
    <div class="task-body">
        <!-- Aufgabe 1 --> 
        <div class="task-item">
            <h4>Aufgabe 1: [Kurze Überschrift der Aufgabe]</h4>
            <p>
                [Aufgabentext]
            </p>
            
            <div class="teacher-content solution-box">
                <h5>Lösung</h5>
                <p>
                   [Lehrerlösung]
                </p>
            </div>     
        </div>
        <!-- Aufgabe 2 -->
    </div>
</div>
HTML-Code für Übung-Blöcke (Minimal-Code ohne Kopfzeile und ohne Lehrerlösung) 

<div class="task-block practical">
    <img src="../../Bilder/Symbol-Aufgabe.png" alt="Übung" class="task-icon-floated">
    <div class="task-body">
        <!-- Aufgabe 1 --> 
        <div class="task-item">
            <h4>Aufgabe 1: [Kurze Überschrift der Aufgabe]</h4>
            <p>
                [Aufgabentext]
            </p>    
        </div>
        <!-- Aufgabe 2 -->
    </div>
</div>

2.6 Kleiner Exkurs

Das Ein- und Ausklappen erfolgt mithilfe eines zusätzlichen Eigenschaft, ohne diese ist der Block standardmäßig eingeklappt (so wie hier).

Vorschau
Icon Beschreibung
Titel des Exkurses

Dies ist der Inhalt des einklappbaren Blocks. Er wird standardmäßig nicht angezeigt und kann durch Klicken auf den Header ausgeklappt werden.

Der Inhalt kann alles sen, auch wieder definierte Blöcke, wie Tabellen, Code oder Bilder.

Beispielcode für einen kleinen Exkurs 
print("Dieser Code ist im einklappbaren Block")
Link zur Erklärung
zur Erklärung kleiner Exkurs
Beispielcode
HTML-Code für Kleiner-Exkurs-Blöcke (Beispiel) 

<div class="collapsible-task-block practical">
    <img src="../../Bilder/Symbol-Exkurs.png" alt="Icon Beschreibung" class="collapsible-icon-floated">
    <div class="collapsible-header">
        <span class="title">Titel des Exkurses</span>
        <i class="fas fa-chevron-up toggle-icon"></i>
    </div>
    <div class="collapsible-content">
        <div class="text-block">
            <p>
                Dies ist der Inhalt des einklappbaren Blocks. Er wird standardmäßig 
                nicht angezeigt und kann durch Klicken auf den Header ausgeklappt 
                werden.
            </p>
            <p>
                Der Inhalt kann alles sen, auch wieder definierte Blöcke, wie 
                Tabellen, Code oder Bilder.
            </p>
            <div class="code-container">
                <div class="code-header">Beispiel Code
                </div>
                <pre><code class="language-python">
                    print("Dieser Code ist im einklappbaren Block")
                </code></pre>
            </div>
        </div>
    </div>
</div>
HTML-Code für Kleiner-Exkurs-Blöcke (Minimal-Code) 

<div class="collapsible-task-block practical">
    <img src="../../Bilder/Symbol-Exkurs.png" alt="Icon Beschreibung" class="collapsible-icon-floated">
    <div class="collapsible-header">
        <span class="title">[Titel des Exkurses]</span>
        <i class="fas fa-chevron-up toggle-icon"></i>
    </div>
    <div class="collapsible-content">
        <div class="text-block">
            <p>
                [Text]
            </p>
        </div>
    </div>
</div>

2.7 Großer Exkurs

Vorschau
Icon Beschreibung
Großer Exkurs (standardmäßig ausgeklappt)

Dies ist der Inhalt des einklappbaren Blocks. Er wird standardmäßig angezeigt und kann durch Klicken auf den Header versteckt werden.

Hier geht es zum Exkurs "Bilder für Greenfoot selbst erstellen und einfügen".

zum Exkurs
Link zur Erklärung
zur Erklärung großer Exkurs
Beispielcode
HTML-Code für Großer-Exkurs-Blöcke (Beispielcode) 
                            
<div class="collapsible-task-block active practical">
    <img src="../../Bilder/Symbol-Exkurs.png" alt="Icon Beschreibung" class="collapsible-icon-floated">
    <div class="collapsible-header">
        <span class="title">Großer Exkurs (standardmäßig ausgeklappt)</span>
        <i class="fas fa-chevron-up toggle-icon"></i>
    </div>
    <div class="collapsible-content">
        <p>
            Dies ist der Inhalt des einklappbaren Blocks. Er wird standardmäßig 
            angezeigt und kann durch  Klicken auf den Header versteckt werden.</p>
        <p>
            Hier geht es zum Exkurs "Bilder für Greenfoot selbst erstellen 
            und einfügen".
        </p>
        <a href="dummyseite.html">zum Exkurs</a>
    </div>
</div>
HTML-Code für Großer-Exkurs-Blöcke (Minimal-Code) 
                            
<div class="collapsible-task-block active practical">
    <img src="../../Bilder/Symbol-Exkurs.png" alt="Icon Beschreibung" class="collapsible-icon-floated">
    <div class="collapsible-header">
        <span class="title">[Titel des Exkurses]</span>
        <i class="fas fa-chevron-up toggle-icon"></i>
    </div>
    <div class="collapsible-content">
        <p>
           [Text]
        </p>
        
        <a href="[Seitenpfad]">[Linktext]</a>
    </div>
</div>

2.8 Testaufgaben

Vorschau
Test Icon

Test zu Variablen und Datentypen

Aufgabe 1: Datentypen zuordnen

Welchen primitiven Java-Datentyp würden Sie für die Speicherung der folgenden Informationen verwenden?

  • Anzahl der Planeten im Sonnensystem
  • Der Buchstabe 'C'
  • Der exakte Wert von Pi (π)
  • Ob ein Licht eingeschaltet ist oder nicht
Lösung anzeigen

Hier ist die Lösung zur ersten Aufgabe:

  • Anzahl Planeten: int
  • Buchstabe 'C': char
  • Wert von Pi: double
  • Lichtzustand: boolean

Aufgabe 2: Variablendeklaration

Schreiben Sie den Code, um eine Variable namens schulname zu deklarieren und ihr den Wert "Albert-Einstein-Gymnasium" zuzuweisen.

Lösung anzeigen

Hier ist die Lösung zur zweiten Aufgabe:

Java Beispiel
String schulname = "Albert-    Einstein-Gymnasium";
Python Beispiel
schulname = "Albert-Einstein-Gymnasium"
Link zur Erklärung
zur Erklärung Testaufgaben
Beispielcode
HTML-Code für Test-Blöcke (Beispielcode) 
                            
<div class="test-block practical">
    <img src="../../Bilder/Symbol-Test-Fragen.png" alt="Test Icon" class="test-icon-floated">
    <h3>Test zu Variablen und Datentypen</h3>
         <!-- Aufgabe 1 --> 
        <div class="test-item">
            <h4>Aufgabe 1: Datentypen zuordnen</h4>
            <p>
                Welchen primitiven Java-Datentyp würden Sie für die 
                Speicherung der folgenden Informationen verwenden?
            </p>
            <ul>
                <li>Anzahl der Planeten im Sonnensystem</li>
                <li>Der Buchstabe 'C'</li>
                <li>Der exakte Wert von Pi (π)</li>
                <li>Ob ein Licht eingeschaltet ist oder nicht</li>
            </ul>
            <!-- Lösung Aufgabe 1 -->
            <div class="solution-toggle">Lösung anzeigen
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
    
            <div class="solution-content">
                <p>Hier ist die Lösung zur ersten Aufgabe:</p>
                <ul>
                    <li>Anzahl Planeten: <code>int</code></li>
                    <li>Buchstabe 'C': <code>char</code></li>
                    <li>Wert von Pi: <code>double</code></li>
                    <li>Lichtzustand: <code>boolean</code></li>
                </ul>
            </div>
        </div>
         <!-- Aufgabe 2 --> 
        <div class="test-item">
            <h4>Aufgabe 2: Variablendeklaration</h4>
            <p>
                Schreiben Sie den Code, um eine Variable namens 
                <code>schulname</code> zu deklarieren und ihr den 
                Wert "Albert-Einstein-Gymnasium" zuzuweisen.
            </p>
            <!-- Lösung Aufgabe 2 -->
            <div class="solution-toggle">Lösung anzeigen
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>

            <div class="solution-content">
                <p>Hier ist die Lösung zur zweiten Aufgabe:</p>
                <div class="code-container">
                    <div class="code-header">Java Beispiel</div>
                    <pre><code class="language-java">String schulname =
                    "Albert-Einstein-Gymnasium";</code></pre>
                </div>
                <div class="code-container">
                <div class="code-header">Python Beispiel</div>
                <pre><code class="language-python">schulname = 
                "Albert-Einstein-Gymnasium"</code></pre>
            </div>
        </div>
    </div>
</div>
HTML-Code für Test-Blöcke (Minimal-Code) 
                            
<div class="test-block practical">
    <img src="../../Bilder/Symbol-Test-Fragen.png" alt="Test Icon" class="test-icon-floated">
    <h3>[Titel des Tests]</h3>
        <!-- Aufgabe 1 --> 
        <div class="test-item">
            <h4>Aufgabe 1: [Titel der Aufgabe]</h4>
            <p>
                [Aufgabentext]
            </p>
            <!-- Lösung Aufgabe 1 --> 
            <div class="solution-toggle">Lösung anzeigen
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
    
            <div class="solution-content">
                <p>[Lösungstext]</p>
            </div>
        </div>
         <!-- Aufgabe 2 --> 
    </div>
</div>

2.9 Videoblock

Vorschau
Video Icon
Video über Plattformer mit Scratch (externes Video bei Youtube)

Dieser Text erscheint unter dem Video, wenn der Block aufgeklappt ist.

Video Icon
Lokales Video Beispiel

Dieses Video wird aus einer lokalen Datei geladen. Derzeit ist kein Beispiel verfügbar.
Link zur Erklärung
zur Erklärung Videoblock
Beispielcode
HTML-Code für Video-Blöcke 
                             
 <div class="video-block practical">
    <img src="../../Bilder/Symbol-Video.png" alt="Video Icon" class="video-icon-floated">
    <div class="video-block-toggle">
        <span class="title">Video über Plattformer mit Scratch (externes 
        Video bei Youtube)</span>
        <i class="fas fa-chevron-down toggle-icon"></i>
    </div>

    <div class="video-block-content">
        <div class="video-container">
                <iframe data-src="https://www.youtube.com/embed/D16hTnDGweo?si=
                an5un8kEKmeJV15I"frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
                                gyroscope; picture-in-picture"
                                allowfullscreen>
                </iframe>
        </div>
        <p>Dieser Text erscheint unter dem Video, wenn der Block 
        aufgeklappt ist.</p>
    </div>
</div>

<div class="video-block theoretical">
    <img src="../../Bilder/Symbol-Video.png" alt="Video Icon" class="video-icon-floated">
    <div class="video-block-toggle">
        <span class="title">Lokales Video Beispiel</span>
        <i class="fas fa-chevron-down toggle-icon"></i>
    </div>

    <div class="video-block-content">
        <div class="video-container">
            <video controls data-src="Pfad/zu/deinem/lokalen/video.mp4"></video>
        </div>
        <p>Dieses Video wird aus einer lokalen Datei geladen. Derzeit ist 
        kein Beispiel verfügbar.</p>
    </div>
</div>

2.10 Text mit Bild links

Vorschau
Bild Beschreibung

Dies ist der Textinhalt, der das Bild auf der linken Seite umfließt. Die Größe des Bildes (10% der Boxbreite) wird direkt im HTML-Attribut gesteuert. Der Text fließt um das Bild herum. Es kann sinnvoll sein, den Text in mehrere Abschnitte zu unterteilen.

Es sind auch Aufzählungen usw. möglich:

  1. Erster Stichpunkt
  2. Zweiter Stichpunkt
  • Erster Stichpunkt
  • Zweiter Stichpunkt
Link zur Erklärung
zur Erklärung Text mit Bild links
Beispielcode
HTML-Code für Text-mit-Bild-links-Blöcke (Beispiel) 
                                     
<div class="text-image-block">
    <img src="../../Bilder/LIfT_Head_Symbol.png" alt="Bild Beschreibung" 
    class="image-float-left" width="10%">
    <p>
        Dies ist der Textinhalt, der das Bild auf der linken Seite umfließt. 
        Die Größe des Bildes (10% der Boxbreite) wird direkt im HTML-Attribut 
        gesteuert. Der Text fließt um das Bild herum. 
        Es kann sinnvoll sein, den Text in mehrere Abschnitte zu unterteilen.
    </p>
    <p>
        Es sind auch Aufzählungen usw. möglich:
    </p>
    <ol>
        <li>
            Erster Stichpunkt
        </li>
        <li>
            Zweiter Stichpunkt
        </li>
    </ol>
    <ul>
        <li>
            Erster Stichpunkt
        </li>
        <li>
            Zweiter Stichpunkt
        </li>
    </ul>
</div>
HTML-Code für Text-mit-Bild-links-Blöcke (Minimal-Code) 
                                     
<div class="text-image-block">
    <img src="[Bildpfad]" alt="[Bild Beschreibung]" 
    class="image-float-left" width="10%">
    <p>
        [Umfließender Text]
    </p>
</div>

2.11 Text mit Bild rechts

Vorschau
Bild Beschreibung

Dies ist der Textinhalt, der das Bild auf der rechten Seite umfließt. Die Größe des Bildes (10% der Boxbreite) wird nun direkt im HTML-Attribut gesteuert. Der Text fließt um das Bild herum. Dies ist ein längerer Textabsatz, der ein Bild auf der rechten Seite umfließt und es optisch nach unten schiebt. Das Bild floatet nach rechts und der Text fließt links daneben und darunter. Bei ausreichend Textinhalt wird das Bild im unteren Bereich des Blocks sichtbar sein.
Link zur Erklärung
zur Erklärung Text mit Bild rechts
Beispielcode
HTML-Code für Text-mit-Bild-rechts-Blöcke (Beispielcode) 
                            
<div class="text-image-block">
    <img src="../../Bilder/LIfT_Head_Symbol.png" alt="Bild Beschreibung" 
    class="image-float-right" width="10%">
    <p>
        Dies ist der Textinhalt, der das Bild auf der rechten Seite umfließt. 
        Die Größe des Bildes (10% der Boxbreite) wird nun direkt im HTML-Attribut 
        gesteuert. Der Text fließt um das Bild herum. Dies ist ein längerer 
        Textabsatz, der ein Bild auf der rechten Seite umfließt und es optisch nach 
        unten schiebt. Das Bild floatet nach rechts und der Text fließt links daneben
        und darunter. Bei ausreichend Textinhalt wird das Bild im unteren Bereich des 
        Blocks sichtbar sein.
    </p>
</div>
HTML-Code für Text-mit-Bild-rechts-Blöcke (Mnimal-Code) 
                            
<div class="text-image-block">
    <img src="[Bildpfad]" alt="[Bildbeschreibung]" 
    class="image-float-right" width="10%">
    <p>
       [Umfließender Text]
    </p>
</div>

2.12 Bilderreihe

Vorschau
Bilderreihe mit mehreren Bildern
Bild 1 Beschreibung
Bild 1 Unterschrift (Optional)
Bild 2 Beschreibung
Bild 3 Beschreibung
Bild 3 Quelle
Bilderreihe mit nur einem Bild
Bild 1 Beschreibung
Bild 1 Unterschrift (Optional)
Link zur Erklärung
zur Erklärung Bilderreihe
Beispielcode
HTML-Code für Bilderreihe-Blöcke (Beispielcode) 
                            
Bilderreihe mit mehreren Bildern        
<div class="image-row-block">
    <div class="image-row-container">
        <!-- Bild 1 --> 
        <figure>
            <img src="../../Bilder/LIfT_Head_Symbol.png" alt="Bild 1 Beschreibung">
            <figcaption>Bild 1 Unterschrift (Optional)</figcaption>
        </figure>
        <!-- Bild 2 --> 
        <figure>
            <img src="../../Bilder/LIfT_Head_Symbol.png" alt="Bild 2 Beschreibung">
        </figure>
        <!-- Bild 3 --> 
        <figure>
            <img src="../../Bilder/LIfT_Head_Symbol.png" alt="Bild 3 Beschreibung">
            <figcaption>Bild 3 Quelle</figcaption>
        </figure>
    </div>
</div>
Bilderreihe mit nur einem Bild
<div class="image-row-block">
    <div class="image-row-container">
        <figure>
            <img src="../../Bilder/LIfT_Head_Symbol.png" alt="Bild 1 Beschreibung">
            <figcaption>Bild 1 Unterschrift (Optional)</figcaption>
        </figure>
    </div>
</div>
HTML-Code für Bilderreihe-Blöcke (Minimal-Code) 
                                  
<div class="image-row-block">
    <div class="image-row-container">
        <!-- Bild 1 --> 
        <figure>
            <img src="[Bildpfad]" alt="[Bildbeschreibung]">
            <figcaption>[Bildunterschrift (optional)]</figcaption>
        </figure>
        <!-- Bild 2 --> 
    </div>
</div>

2.13 Galerie

Vorschau
Bild 1
Galerie Bild 1 Unterschrift
Bild 2
Bild 3
Galerie Bild 3 Quelle
Link zur Erklärung
zur Erklärung Galerie-Block
Beispielcode
HTML-Code für Galerie-Blöcke (Beispielcode) 
                            
<div class="gallery-block">
    <div class="gallery-container">
        <div class="gallery-images-container">
            <!-- Bild 1 --> 
            <div class="gallery-image-slide">
                <figure>
                    <img src="../../Bilder/Symbol-Aufgabe.png" alt="Bild 1">
                    <figcaption>Galerie Bild 1 Unterschrift</figcaption>
                </figure>
            </div>
            <!-- Bild 2 --> 
            <div class="gallery-image-slide">
                <figure>
                    <img src="../../Bilder/Symbol-Defintion.png" alt="Bild 2">
                </figure>
            </div>
            <!-- Bild 3 --> 
            <div class="gallery-image-slide">
                <figure>
                    <img src="../../Bilder/Symbol-Exkurs.png" alt="Bild 3">
                    <figcaption>Galerie Bild 3 Quelle</figcaption>
                </figure>
            </div>
        </div>
        <!-- Navigationspfeile --> 
        <div class="gallery-nav">
            <div class="gallery-arrow arrow-left">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div class="gallery-arrow arrow-right">
                <i class="fas fa-chevron-right"></i>
            </div>
        </div>
    </div>
    <!-- Navigationspunkte -->
    <div class="gallery-dots">
    </div>
</div>
HTML-Code für Galerie-Blöcke (Minimal-Code) 
                            
<div class="gallery-block">
    <div class="gallery-container">
        <div class="gallery-images-container">
            <!-- Bild 1 --> 
            <div class="gallery-image-slide">
                <figure>
                    <img src="[Bildpfad]" alt="[Bildbeschreibung]">
                    <figcaption>[Bildunterschrift]</figcaption>
                </figure>
            </div>
            <!-- Bild 2 --> 
            
        <!-- Navigationspfeile --> 
        <div class="gallery-nav">
            <div class="gallery-arrow arrow-left">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div class="gallery-arrow arrow-right">
                <i class="fas fa-chevron-right"></i>
            </div>
        </div>
    </div>
    <!-- Navigationspunkte -->
    <div class="gallery-dots">
    </div>
</div>

2.14 Tabellen

Vorschau

Tabelle ohne Linien, ohne Hintergrundfarbe und ohne Header

Spaltenkopf 1 Spaltenkopf 2
Daten 1a Daten 1b
Daten 2a Daten 2b

Tabelle mit Linien, ohne Hintergrundfarbe und ohne Header

Spaltenkopf 1 Spaltenkopf 2
Daten 1a Daten 1b
Daten 2a Daten 2b

Tabelle ohne Linien, ohne Hintergrundfarbe und mit Header

Spaltenkopf 1 Spaltenkopf 2
Daten 1a Daten 1b
Daten 2a Daten 2b

Tabelle mit Linien, mit Hintergrundfarbe und mit Header

Spaltenkopf 1 Spaltenkopf 2
Daten 1a Daten 1b
Daten 2a Daten 2b
Link zur Erklärung
zur Erklärung Tabellen-Block
Beispielcode
HTML-Code für Tabellen-Blöcke (Tabelle ohne Linien, ohne Hintergrundfarbe und ohne Header) 
                            
<div class="table-block">
    <table>
        <thead>
            <tr>
                <th>Spaltenkopf 1</th>
                <th>Spaltenkopf 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Daten 1a</td>
                <td>Daten 1b</td>
            </tr>
            <tr>
                <td>Daten 2a</td>
                <td>Daten 2b</td>
            </tr>
        </tbody>
    </table>
</div>
HTML-Code für Tabellen-Blöcke (Tabelle mit Linien, ohne Hintergrundfarbe und ohne Header) 
                                      
<div class="table-block bordered">
    <table>
        <thead>
            <tr>
                <th>Spaltenkopf 1</th>
                <th>Spaltenkopf 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Daten 1a</td>
                <td>Daten 1b</td>
            </tr>
            <tr>
                <td>Daten 2a</td>
                <td>Daten 2b</td>
            </tr>
        </tbody>
    </table>
</div>
HTML-Code für Tabellen-Blöcke (Tabelle ohne Linien, ohne Hintergrundfarbe und mit Header) 
                                      
<div class="table-block header-highlight">
    <table>
        <thead>
            <tr>
                <th>Spaltenkopf 1</th>
                <th>Spaltenkopf 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Daten 1a</td>
                <td>Daten 1b</td>
            </tr>
            <tr>
                <td>Daten 2a</td>
                <td>Daten 2b</td>
            </tr>
        </tbody>
    </table>
</div>
HTML-Code für Tabellen-Blöcke (Tabelle mit Linien, mit Hintergrundfarbe und mit Header) 
                                      
<div class="table-block bordered header-highlight shaded">
    <table>
        <thead>
            <tr>
                <th>Spaltenkopf 1</th>
                <th>Spaltenkopf 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Daten 1a</td>
                <td>Daten 1b</td>
            </tr>
            <tr>
                <td>Daten 2a</td>
                <td>Daten 2b</td>
            </tr>
        </tbody>
    </table>
</div>

2.15 Downloadlinks

Vorschau

Text mit einfachem Download-Icon und optionalen Download-Schriftzug:

Hier bekommst du das Bild als Download Symbol Datei zum Herunterladen. Bitte klicken Sie auf das Symbol oder den Link.

Text mit Downloadsymbol ohne extra Link:

Sie können die Übungsaufgaben als PDF herunterladen: Download PDF

Link zur Erklärung
zur Erklärung Download-Block
Beispielcode
HTML-Code für Text-Blöcke (Beispielcode) 
                             
<div class="text-block">
    <p>Text mit einfachem Download-Icon und optionalen Download-Schriftzug:</p>
</div>

<p>Hier bekommst du das Bild als 
    <a href="../../Bilder/Symbol-Download.png" download="Dateiname.pdf">
        <img src="../../Bilder/Symbol-Download.png" alt="Download Symbol" class="download-icon"> 
        Datei zum Herunterladen.
    </a>
    Bitte klicken Sie auf das Symbol oder den Link.
</p>

<div class="text-block">
    <p>Text mit Downloadsymbol ohne extra Link:</p>
</div>
            
<p>Sie können die Übungsaufgaben als PDF herunterladen:
    <a href="../../Bilder/Symbol-Download2.png" download="Uebungsaufgaben.pdf">
        <img src="../../Bilder/Symbol-Download2.png" alt="Download PDF" class="download-icon"> </a>
</p>
HTML-Code für Text-Blöcke (Minimalcode Symbol mit Link) 
                             
<p>
    [Text]
    <a href="[Dateipfad]" download="[Dateiname beim Download]">
        <img src="../../Bilder/Symbol-Download.png" alt="Download Symbol" class="download-icon"> 
        [Linktext]
    </a>
</p>
HTML-Code für Text-Blöcke (Minimalcode Symbolblock) 
                             
<p>
    [Text]
    <a href="[Dateipfad]" download="[Dateiname bei download]">
        <img src="../../Bilder/Symbol-Download2.png" alt="Download PDF" class="download-icon"> </a>
</p>

2.16 Interaktive Übung

Vorschau
Beispiel mit Block: Aufbau eines Computers

Beispiel in Textbox
Link zur Erklärung
zur Erklärung Interaktive Übung
Beispielcode
HTML-Code für Interaktive Übungen (Beispielcode mit Box) 

<div class="interactive-exercise-block lehrplan">

    <div class="interactive-header">
            <span class="title">Beispiel mit Block: Aufbau eines Computers</span>
    </div>
    <div class="iframe-container">
        <iframe src="https://learningapps.org/watch?app=1975203" 
            title="Computeraufbau" style="border:0px;width:100%;height:500px" allowfullscreen="true" 
            webkitallowfullscreen="true" 
            mozallowfullscreen="true">
        </iframe>
    </div>
</div>
HTML-Code für Interaktive Übungen (Beispielcode ohne Box) 

<div class="text-block">
    <h4>Beispiel in Textbox</h4>   
    <iframe src="https://learningapps.org/watch?app=1975203" 
        title="Computeraufbau" style="border:0px;width:100%;height:500px" allowfullscreen="true" 
        webkitallowfullscreen="true" 
        mozallowfullscreen="true">
    </iframe>
</div>