1. Übersicht über die Blockelemente
In diesem Dokument werden die verschiedenen vordefinierten Blockelemente präsentiert und kommentiert. Prinzipiell kann von hier ein Block kopiert und dann inhaltlich angepasst werden. Dieses Vorgehen wird zukünftig ein Programm übernehmen, um den Prozess zu beschleunigen.
Das Inhaltsverzeichnis ist so aufgebaut, dass immer nur das aktuelle Kapitel sichtbar ist, d.h. "1. Übersicht über die Blockelemente" ist das erste Kapitel und alle Unterüberschriften (1.1 bis 1.14) sind auf dieser Seite. Alle anderen Kapitel werden hier angezeigt, sind aber nur Links zu den entsprechenden Kapitelseiten (in dieser Demo nicht funktional).
1.1 Überschriften
Die Kapitelüberschriften sind mit dem ⟨h2⟩-Tag formatiert und die Unterüberschriften mit dem <h3>-Tag. Des Weiteren sind sie von einem <div>-Tag umgeben, welches die Klasse "heading-block" verwendet. Per id wird dann die Navigationsleiste zur Sprungliste.
Für neue Überschriften müssen folgende Schritte getan werden:- <div>-Tag kopieren
- id vergeben
- Eintrag in Navigationsleiste hinzufügen
- Überschrift im <h3>-Tag anpassen
1.2 Text-Blöcke
Dies ist ein einfacher Textblock. Auch unter den letzten beiden Überschriften wurden Text-Blöcke verwendet.
Prinzipiell kann hier Text in mehreren Abschnitten (mit dem <p>-Tag abgegrenzt) Geschrieben werden. Prinzipiell kann auch einfacher HTML-Code verwendet werden, jedoch sind bisher nur noch die sortierte (<ol>-Tag) und die unsortierte (<ul>-Tag) formatiert.
1.3 Definitionsblock
Der folgende Block ist ein Defintionsblock. Das Symbol ist fest und es sind nur drei Informationen zu befüllen:
- "prefix" (hier: "Definition:") -> könnte auch "Hinweis", "Beachte", o.ä. sein
- term-practical -> Dies bestimmt die Farbe des Blocks. statt practical kann applied, theoretical, partner, technical oder lehrplan stehen
- die eigentliche Definition kommt in den "definition-body" und sollte normaler Text sein
Die objektorientierte Programmierung (OOP) ist ein Programmierparadigma, das auf dem Konzept von „Objekten“ basiert. Diese Objekte können Daten in Form von Feldern (oft als Attribute oder Eigenschaften bezeichnet) und Code in Form von Prozeduren (oft als Methoden bezeichnet) enthalten. Dieser Text sollte nun um das größere Icon herumfließen.
Wichtige Konzepte der OOP sind:
- Kapselung
- Vererbung
- Polymorphie
1.4 Codeblock
Der Codeblock kann Programmcode farbig hervorheben, dies ist je nach Sprache voreingestellt. Außerdem ist es möglich, den Code auf den Button "kopieren" in die Zwischenablage zu kopieren. Die folgenden Informationen sind einzugeben:
- im <span>-Tag vom "code-header": Überschrift des Codeblocks
- code class="language-java" -> hier kann die Sprache eingestellt werden, verfügbar sind java, python, html, pascal, markup, css, javascript und prolog
- wenn nach der Sprache noch "line-numbers" hinzugefügt wird, dann werden die Zeilennummern angezeigt (werden nicht mit kopiert)
- innerhalb des <code>-Tags wird der eigentliche Programmcode geschrieben, beachte: Tabs und Leerzeichen werden hier berücksichtigt (nicht wie im sonstigen HTML-Code)
public class HelloWorld {
public static void main(String[] args) {
// Print a message
System.out.println("Hello, Java!"); // Output
}
}
# Ein Kommentar
def greet(name):
"""Greets the user."""
message = f"Hello, {name}!"
print(message)
greet("Python")
Beim Programmcode ist darauf zu achten, dass Sonderzeichen ggf. mit HTML-Code angegeben werden müssen, wie zum Beispiel spitze Klammern, da diese sonst als Tag interpretiert werden. Gerade bei HTML ist dies sehr aufwendig, daher habe ich ein kleines Tool geschrieben, welches HTML-Symbole maskiert. Es kann hier heruntergeladen werden: 
<!DOCTYPE html>
<html lang="de">
<head>
<title>Titel</title>
</head>
<body>
<h1>Hallo Welt</h1>
</body>
</html>
1.5 Aufgabenblock
Der Aufgabenblock kann verwendet werden, um Aufgaben für Schüler bereitzustellen. Die Lösungen sind nur sichtbar, wenn man als Lehrer angemeldet ist.
Die folgenden Felder sind zu befüllen:
- im äußersten div-Tag: "task-block practical" -> Rahmenfarbe je nach EingabeDies bestimmt die Farbe des Blocks. statt practical kann applied, theoretical, partner, technical oder lehrplan stehen
- im task-header: prefix (z.B. Übung) und title (Thema der Übung)
- für jede Aufgabe muss ein "task-item" Tag erstellt werden
- innerhalb des "task-item" wird eine "teacher-content solution-box" eingefügt (Lösungen nur für Lehrer sichtbar)
Der Inhalt von "task-item" und "teacher-content solution-box" ist HTML-Code, im einfachsten Fall einfacher Text. Es können aber auch alle definierten Blöcke innerhalb dieser Tags verwendet werden, wie z.B. der Code-Block.
Aufgabe 1: Klasse vs. Objekt
Beschreiben Sie den Unterschied zwischen einer Klasse und einem Objekt anhand eines Beispiels aus dem Alltag (z.B. Auto, Fahrrad, Haus).
Lösung
Eine Klasse ist der Bauplan (z.B. "Bauplan für ein Fahrrad"). Sie definiert allgemeine Merkmale (Attribute wie Farbe, Anzahl Gänge) und Fähigkeiten (Methoden wie fahren, bremsen).
Ein Objekt ist eine konkrete Ausprägung (Instanz) dieses Bauplans (z.B. "mein grünes Mountainbike"). Es hat spezifische Werte für die Attribute (Farbe ist 'grün', Anzahl Gänge ist 21).
Beispiel Auto:
- Klasse: Auto
- Attribute: marke, modell, farbe, anzahlTueren
- Methoden: starten(), beschleunigen(wert), hupen()
- Objekt 1: Roter Ferrari (marke="Ferrari", farbe="rot", ...)
- Objekt 2: Blauer VW Golf (marke="VW", farbe="blau", ...)
Aufgabe 2: Java Datentypen
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:
int anzahlSchueler = 25;
char note = 'B';
double preis = 19.99;
boolean isAn = true;
Aufgabe 1: Definition
Definieren Sie formal einen deterministischen endlichen Automaten (DEA).
Aufgabe 2: Automat zeichnen
Zeichnen Sie einen DEA, der die Sprache aller Wörter über dem Alphabet {a, b} erkennt, die mit 'a' beginnen und auf 'b' enden.
1.6 Kleiner Exkurs
Die beiden Exkurs-Blöcke bieten die Option, dass sie ausklappbar, bzw. einklappbar sind. Der kleine Exkurs ist standardmäßig eingeklappt, denn dessen Inhalt soll komplett auf der Seite sein. Da dies ggf. zu lang zum überspringen ist, macht es Sinn, diesen nur auszuklappen, wenn er gebraucht wird. Solch ein Exkurs kann eine inhaltliche Ergänzung oder eine weiterführende Aufgaben sein.
Die folgenden Felder sind zu befüllen:
- im äußersten div-Tag: "collapsible-task-block practical" -> Rahmenfarbe je nach EingabeDies bestimmt die Farbe des Blocks. statt practical kann applied, theoretical, partner, technical oder lehrplan stehen
- im "title": Titel des Exkurses, dieser steht im Kopf (auch bereits vor dem Ausklappen)
- im "collapsible-content": Inhalt, der zunächst eingeklappt ist, das kann wiederum alles sein, was definiert wurde (Text-Block, Code-Block, ...)
Dies ist der Inhalt des einklappbaren Blocks. Er wird standardmäßig nicht angezeigt und kann durch Klicken auf den Header ausgeklappt werden.
print("Dieser Code ist im einklappbaren Block")Weitere Informationen oder Aufgaben...
1.7 Großer Exkurs
Die beiden Exkurs-Blöcke bieten die Option, dass sie ausklappbar, bzw. einklappbar sind. Der große Exkurs ist standardmäßig ausgeklappt, denn dessen Inhalt ist nur ein Link auf eine separate Seite mit den entsprechenden Inhalten, sowie eine kurze Information dazu.
Die folgenden Felder sind zu befüllen:
- im äußersten div-Tag: "collapsible-task-block practical active" -> Rahmenfarbe je nach Eingabe Dies bestimmt die Farbe des Blocks. statt practical kann applied, theoretical, partner, technical oder lehrplan stehen
- der Zusatz "active" im äßeren Tag sorgt dafür, dass der Block beim Laden der Seite sofort sichtbar ist -> so lassen!
- im "title": Titel des Exkurses, dieser steht im Kopf (bleibt auch beim Einklappen)
- im "collapsible-content": Inhalt, der zunächst eingeklappt ist, das kann wiederum alles sein, was definiert wurde, sollte aber nur etwas Text und ein Link sein.
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 Exkurs1.8 Testaufgaben
Die Testaufgaben enthalten im Vergleich zu Übungsaufgaben die Musterlösungen als ausklappbare Bereiche. Es ist also nicht nötig, sich als Lehrer anzumelden, um die Lösungen zu sehen. Dies kann genutzt werden, um Schüler selbstständig üben zu lassen, denn hier können sie ihre Lösungen selbstständig überprüfen. Alternativ können auch Tipps ausgeklappt werden.
Die folgenden Felder sind zu befüllen:
- im äußersten div-Tag: "test-block practical" -> Rahmenfarbe je nach Eingabe, dies bestimmt die Farbe des Blocks (statt practical kann applied, theoretical, partner, technical oder lehrplan stehen)
- Für jede Aufgabe muss ein div-Tag "test-item" erstellt werden. Darin kann die Aufgabe angegeben werden
- Innerhalb von "test-item": "solution-toggle" -> kleiner Pfeil zum Ausklappen der Lösung
- Innerhalb von "test-item", unter "solution-toggle" : "solution-content" -> Lösungen zu den Aufgaben
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
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.
Hier ist die Lösung zur zweiten Aufgabe:
String schulname = "Albert- Einstein-Gymnasium";schulname = "Albert-Einstein-Gymnasium"1.9 Videoblock
Es gibt zwei Möglichkeiten, Videos einzubetten. Die erste Möglichkeit ist, externe Videos, z.B. bei Youtube einzubetten. Dafür ist zu beachten, dass nicht die Video-URL kopiert wird, sondern tatsächlich der Einbettungscode verwendet werden muss. Man klickt dazu unter dem Video auf "Teilen" und dann auf "Einbetten".
Die Videos sind ausgeblendet und der Block ist so programmiert, dass das Video erst geladen wird, wenn der Block ausklappt, dies verbessert die Ladezeiten der Seite.
Die folgenden Felder sind zu befüllen:
- im äußersten div-Tag: "video-block practical" -> Rahmenfarbe je nach Eingabe, dies bestimmt die Farbe des Blocks (statt practical kann applied, theoretical, partner, technical oder lehrplan stehen)
- der "title" -> Titel des Videos, ist auch vor dem Ausklappen sichtbar
- der "video-container" -> enthält den iFrame, also den Einbettungscode von dem Video
- über und unter dem Video kann noch ergänzend Text stehen
Dieser Text erscheint unter dem Video, wenn der Block aufgeklappt ist.
Dieses Video wird aus einer lokalen Datei geladen. Derzeit ist kein Beispiel verfügbar.
1.10 Text mit Bild links
Oftmals werden Bilder zum Text benötigt, hierfür gibt es zwei Möglichkeiten zur Umsetzung:
- Das Bild wird links oben angeordnet und der Text umfließt dieses Bild
- Das Bild wird rechts oben angeordnet und der Text umfließt dieses Bild
Wenn der Text mehrere Bilder besitzen soll, do müssen mehrere dieser Text-mit-Bild-Blöcke verwendet werden.
Die folgenden Felder sind zu befüllen:
-
das img-Tag für das jeweilige Bild
- src= Pfad zum Bild
- alt=Beschreibung wenn Bild fehlt
- width=Größe des Bildes (bitte 10%,25%,50% verwenden) - Text, der das Bild umfließen soll (Absätze mit p-Tag erlaubt)
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:
- Erster Stichpunkt
- Zweiter Stichpunkt
- Erster Stichpunkt
- Zweiter Stichpunkt
1.11 Text mit Bild rechts
Dies ist die zweite Variante, die zu befüllenden Stellen sind die gleichen, das Umfließen ist im img-Tag integriert.
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.
1.12 Bilderreihe
Wenn mehrere Bilder nebeneinander dargestellt werden sollen, kann die Bilderreihe verwendet werden. Die Bilder werden dabei so skaliert, dass sie die ganze Breite ausnutzen. Optional kann jedes Bild mit einer Bildunterschrift versehen werden (z.B. für Titel des Bildes oder Quellen)
Die folgenden Felder sind zu befüllen:
- für jedes Bild wird ein figure-Tag benötigt
- je Bild muss das img-Tag befüllt werden
- für eine Bildunterschrift fügt man ein figcaption-Tag mit dem entsprechenden Text unter das img-Tag ein.
Beispiel für eine Bildreihe mit drei Bildern:
Beispiel für eine Bildreihe mit nur einem Bild:
1.13 Galerie
Wenn viele Bilder benötigt werden oder eine Schrittfolge dargestellt werden soll, so bietet sich die Galerie an. Hier können beliebig viele Bilder eingefügt werden, wobei immer nur eines sichtbar ist. Mit den Pfeilen links und rechts kann man die Bilder durchschalten oder man verwendet die grauen Punkte unter den Bildern.
Die folgenden Felder sind zu befüllen:
- für jedes Bild wird ein "gallery-image-slide" benötigt
- je Bild muss das img-Tag befüllt werden
- für eine Bildunterschrift fügt man ein figcaption-Tag mit dem entsprechenden Text unter das img-Tag ein.
1.14 Tabellen
Tabellen können flexibel eingesetzt werden. Es sind mehrere Optionen vordefiniert, je nachdem, welche Klassen man anspricht, werden die Tabellen angepasst. Außer der Klasse handelt es sich um Standard-HTML für Tabellen, also die Tags table, thead, body, tr und td.
Diese Optionen gibt es:
- "table-block" -> Tabelle ohne Rahmenlinien
- "table-block bordered" -> Tabelle mit Rahmenlinien
- "table-block header-highlight" -> Tabelle mit hervorgehobener Kopfzeile
- "table-block bordered header-highlight" -> Tabelle mit Rahmen und hervorgehobener Kopfzeile
- "table-block bordered header-highlight shaded" -> Tabelle mit Rahmen, hervorgehobener Kopfzeile und leicht dunklerem Hintergrund im Tabellenkörper
- prinzipiell: "bordered", "header-highlight" und "shaded" können beliebig kombiniert werden
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 |
1.15 Downloadlinks
Wenn Dateien zum Download angeboten werden sollen, so kann dies mit diesem Block umgesetzt werden.
Es gibt zwei Umsetzungen: Ein einfacher Downloadpfeil und eine Box mit dem Schriftzug "Download". Empohlen wird die zweite Variante, sollte es beser in den Textfluss passen, kann auch die erste sinnvoll sein.
Angaben bei Variante 1:
- Text innerhalb des a-Tag, direkt nach dem img-Tag -> anklickbarer Text
- Pfad zu der Datei (href=...)
- downloadname (download=...)
Bei Variante 2 entfällt der Text nach dem img-Tag und das verlinkte Bild ist ein anderes
Text mit einfachem Download-Icon und optionalen Download-Schriftzug:
Hier bekommst du das Bild als
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:
1.16 Interaktive Übung
Für interaktive Übungen gibt es zwei Möglichkeiten. Die erste ist ein extra Block mit einem farbigen Rand und einem optionalen Titel (wenn kein Titel gewünscht ist, einfach den kompletten div-Tag löschen). Der Rand kann wieder mit dem Themen-Bezeichner (lehrplan, theretical, ...) eingefärbt werden.
Die Alternative ist ein Text-Block, in dem das iframe direkt eingefügt wird.