Zahlensysteme und Farben

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 24, 23, 22, 21, 20. Kennen wir die Stellenwerte, so können wir die Zahlen aus verschiedenen Zahlensystemen ineinander umwandeln.

Zur Erinnerung:

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

Stelle3210
Stellenwert23=822=421=220=1
Ziffer1010
Es muss jede Ziffer mit dem Stellenwert multipliziert werden.

Dezimalsystem in Binärsystem: 910 = 10012.

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

Stelle4321
Stellenwert23=822=421=220=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:

RechnungQuotientRest
9:811
1:401
1:201
1:110

Nun lesen wir die Ergebnisse der Divisionen (die Quotienten in der zweiten Spalte) von Oben nach unten ab und schon haben wir die Umrechnung 910 = 10012. ✔

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
NameBasisZiffernStellenwerteBeispielzahl
Binärsystem20,18,4,2,1
Vierersystem0,1,2,3
Oktalsystem80,1,2,3,4,5,6,7512,64,8,1178
Dezimalsystem4123510
Hexadezimal0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F4096,256,16,1FF16

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.

110 = 116

510 = 516

1010 = A16 (sieht komisch aus, aber Buchstaben sind jetzt Ziffern)

1110 = B16

1210 = C16

1310 = D16

1410 = E16

1510 = F16

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

1610 = 1016 da 1 • 16 + 0 • 1

Stelle321
Stellenwert162=256161=16160=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.

RechnungQuotientRest
16:256016
16:1610
0:100

Jetzt lesen wir wieder einfach die Quotientenspalte von oben nach unten und haben das Ergebnis der Umrechnung: 1610 = 01016
(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.

Zusatz: für die Schnellen: http://www.hexinvaders.com/

Ähnliche Beiträge