Zahlensysteme und Farben – H5P interaktive Lerninhalte

Wie lassen sich mit einem Computer einfach alle Farben darstellen, die es gibt? Wie könnt ihr damit eine eigene Homepage gestalten?

Dafür werden komische Farbcodes verwendet wie #000000, #A1B2F1 oder #FFFFFF

Wie das funktioniert, erfahrt ihr im Folgenden.

Bisher haben wir schon 2 Zahlensystem kennengelernt. Das Dezimalsystem kennt ihr schon, seit dem ihr Zahlen kennt und ihr arbeitet täglich damit. Das Binärsystem nutzen digitale Computer für ihre Arbeit. Es gibt aber noch viele weitere Systeme, mit spannenden Einsatzmöglichkeiten. Mit denen wollen wir uns heute beschäftigen.

Bevor wir mit den neuen Systemen starten, wiederholen wir noch einmal kurz die bekannten Systeme. Das Binärsystem hat die 2 Ziffern 0 und 1. Deshalb ist die Basis 2. Von der Basis 2 können wir die Stellenwerte ableiten: 16, 8, 4, 2, 1. Diese können wir mit der Basis berechnen 2⁴, 2³, 2², 2¹, 2⁰. Kennen wir die Stellenwerte, so können wir die Zahlen aus verschiedenen Zahlensystemen ineinander umwandeln.

Zur Erinnerung:

Binärsystem in Dezimalsystem: 1010₂ = 1•8 + 0•4 + 1•2 + 0•1 = 8 + 2 = 10₁₀ (die tiefgestellten Zahlen geben die Basis des Zahlensystems an).

Stelle	3	2	1	0
Stellenwert	2³=8	2²=4	2¹=2	2⁰=1
Ziffer	1	0	1	0

Es muss jede Ziffer mit dem Stellenwert multipliziert werden.

Dezimalsystem in Binärsystem: 9₁₀ = 1001₂.

Du weist, dass im Binärsystem jede Stelle immer doppelt so viel Wert ist wie die davor:

Stelle	4	3	2	1
Stellenwert	2³=8	2²=4	2¹=2	2⁰=1

Wenn wir eine Dezimalzahl umwandeln wollen, überlegen wir uns zunächst den größten Stellenwert, der in die Zahl hinein passt. Sicher siehst du ihn schon 😊

Passt die 16 (Stellenwert der 4. Stelle) in die 9 → Nein 😕

Passt die 8 (Stellenwert der 3. Stelle) in die 9? → JA! 🥳

Danach Teilen wir die Zahl immer wieder durch unseren Stellenwert und notieren den Rest: Danach Teilen wir durch den nächst niedrigeren Stellen und notieren ebenfalls den Rest. bis wir bei der niedrigsten Stelle angekommen sind:

Rechnung	Quotient	Rest
9:8	1	1
1:4	0	1
1:2	0	1
1:1	1	0

Nun lesen wir die Ergebnisse der Divisionen (die Quotienten in der zweiten Spalte) von Oben nach unten ab und schon haben wir die Umrechnung 9₁₀ = 1001₂. ✔

Aufgabe 1: Kopiert folgende Tabelle unter der Überschrift Zahlensysteme in euren Hefter und füllt die fehlenden Lücken.

Markiere die Tabelle mit der Maus.
- Gehe dafür in die linke obere Ecke, drücke die linke Maustaste, halte sie gedrückt und fahre bis in die rechte untere Ecke. Lasse die linke Maustaste dann los
Kopiere den markierten Bereich
- Entweder mit der Maus Rechtsklick → kopieren
- oder mit der Tastatur: STRG + C
Füge das Kopierte in deinen Hefter ein
- entweder mit der Maus Rechtsklick → einfügen
- oder mit der Tastatur STRG + V

Name	Basis	Ziffern	Stellenwerte	Beispielzahl
Binärsystem	2	0,1	8,4,2,1
Vierersystem		0,1,2,3
Oktalsystem	8	0,1,2,3,4,5,6,7	512,64,8,1	17₈
Dezimalsystem				41235₁₀
Hexadezimal		0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F	4096,256,16,1	FF₁₆

Dieses Hexadezimalsystem sieht aber komisch aus. Buchstaben als Ziffern.

Lassen wir uns dieses Zahlensystem doch einmal genauer erklären (nur bis Minute 3:15!)

Wer immer noch nur Bahnhof versteht, findet hier noch eine kurze Erklärung (https://www.youtube.com/watch?v=2d86hVEKano)

Um ein bisschen warm mit den Hexadezimalzahlen zu werden, wandeln wir mal ein paar Dezimalzahlen in Hexadezimalzahlen um.

1₁₀ = 1₁₆

5₁₀ = 5₁₆

10₁₀ = A₁₆ (sieht komisch aus, aber Buchstaben sind jetzt Ziffern)

11₁₀ = B₁₆

12₁₀ = C₁₆

13₁₀ = D₁₆

14₁₀ = E₁₆

15₁₀ = F₁₆

Jetzt wird es spannend. Was ist denn die 16₁₀ im Hexadezimalsystem. Ganz einfach. Da wir mit einer einstelligen Hexadezimal nur bis zur 15₁₀ zählen können, brauch wir jetzt eine neue Stelle.

16₁₀ = 10₁₆ da 1 • 16 + 0 • 1

Stelle	3	2	1
Stellenwert	16²=256	16¹=16	16⁰=1

Wie bei der Umrechnung Dezimal in Binär suchen wir uns zunächst den größten Stellenwert, der in unsere Zahl gerade noch so hinein passt.

Rechnung	Quotient	Rest
16:256	0	16
16:16	1	0
0:1	0	0

Jetzt lesen wir wieder einfach die Quotientenspalte von oben nach unten und haben das Ergebnis der Umrechnung: 16₁₀ = 010₁₆
(Wie im Dezimalsystem auch, kannst du die „führende Nullen“ oft weglassen. 010 ist das gleiche wie 10)

Jetzt gucken wir mal, wie gut du es wirklich verstanden hast:

Wozu jetzt das ganze. Man kann mit Hexadezimal Farben darstellen. Lassen wir uns das mal erklären

Farben können also im Hexadezimalsystem dargestellt werden.

Aufgabe 1

Probieren wir nochmal spielerisch aus. Ihr müsst einfach die Farbe erraten, die sich hinter dem angezeigten Code verbirgt: http://www.hexinvaders.com/

Aufgabe 2

Fülle die Tabelle mit den richtigen Hexadezimalzahlen: Mache einen Screenshot und kopiere ihn in deinen Hefter!

Drücke Windows Taste + Shift + Buchstaben S gleichzeitig und ziehe ein Rechteck

https://www.sporcle.com/games/drhbball14/hexnumbers?t=hexadecimal

Farben und HTML

Die Farben von Nationalflaggen sind so toll, sodass wir eine eigene Homepage über sie erstellt haben. Allerdings fehlen noch die Farben.

Aufgabe

Öffnet die Datei flaggen_fehlerhaft.html. (Herunterladen: Rechtsklick => Ziel Speichern unter)
Recherchiert, wie die Flaggen farblich gestaltet sind.
Öffnet die Datei mit dem Programm BlueGriffon. Findet die Farbcodes in den Daten. Diese beginnen alle mit einem ‚#‘-Zeichen.
Ändert die Farbcodes, sodass die Flaggen korrekt dargestellt werden.
Zusatz für Experten: Füge weitere Flaggen hinzu.