(Od bitów do kolorów, od binarnych do heksadecymalnych)
1. WSTĘP: DLACZEGO KOMPUTERY LICZĄ INACZEJ NIŻ MY
Ty liczysz: 0, 1, 2, 3, 4, 5… aż do 9, potem zaczynasz od nowa: 10, 11…
To system dziesiętny — mamy 10 cyfr (0-9), bo mamy 10 palców.
Ale komputer ma tylko dwie „opcje”: prąd płynie (1) albo nie płynie (0).
Dlatego komputer liczy: 0, 1, 10, 11, 100, 101…
To system binarny — tylko 2 cyfry (0, 1).
W tym artykule dowiesz się:
- Jak liczyć w systemach: binarnym, ósemkowym, szesnastkowym
- Jak konwertować liczby między systemami
- Jak komputery kodują kolory, tekst i znaki specjalne
- Dlaczego programiści używają heksadecimalnego
2. PIERWSZE PYTANIE: CO TO JEST SYSTEM LICZBOWY?
System liczbowy to sposób reprezentowania liczb za pomocą cyfr.
Każdy system ma:
- Bazę — ile cyfr dostępnych (2, 10, 16…)
- Pozycję — każda cyfra ma znaczenie zależne od pozycji
Przykład: System dziesiętny (poznacie go dobrze)
textLiczba: 2024
Pozycja: tysiące | setki | dziesiątki | jedności
10³ | 10² | 10¹ | 10⁰
Cyfra: 2 | 0 | 2 | 4
Wartość: 2×10³ + 0×10² + 2×10¹ + 4×10⁰
= 2×1000 + 0×100 + 2×10 + 4×1
= 2000 + 0 + 20 + 4
= 2024
Kluczowa idea: Każda pozycja to potęga bazy!
Teraz zastosujemy to do innych systemów.
3. SYSTEM BINARNY (BINARNA) – JĘZYK MASZYNOWY
Baza: 2 (tylko cyfry 0 i 1)
3.1 Konwersja binarnej na dziesiętną
Każda pozycja to potęga 2:
textLiczba: 1011 (binarna)
Pozycja: 2³ | 2² | 2¹ | 2⁰
Cyfra: 1 | 0 | 1 | 1
Wartość: 1×2³ + 0×2² + 1×2¹ + 1×2⁰
= 1×8 + 0×4 + 1×2 + 1×1
= 8 + 0 + 2 + 1
= 11 (dziesiętnie)
Ćwiczenie: Co to jest 10010 w systemie dziesiętnym?
text1×2⁴ + 0×2³ + 0×2² + 1×2¹ + 0×2⁰
= 16 + 0 + 0 + 2 + 0
= 18
3.2 Konwersja dziesiętnej na binarną
Dzielimy przez 2, aż dojdziemy do 0, i zbieramy reszty:
textLiczba: 25 (dziesiętnie)
25 ÷ 2 = 12 reszta 1 ← ostatni bit
12 ÷ 2 = 6 reszta 0
6 ÷ 2 = 3 reszta 0
3 ÷ 2 = 1 reszta 1
1 ÷ 2 = 0 reszta 1 ← pierwszy bit
Wynik: 11001 (binarnie)
Weryfikacja: 1×16 + 1×8 + 0×4 + 0×2 + 1×1 = 25 ✓
3.3 Bajty i ich znaczenie
1 bajt = 8 bitów
textNajmniejsza możliwa wartość: 00000000 = 0
Największa możliwa wartość: 11111111 = 255
Przykład: 01000001 (binarnie) = 65 (dziesiętnie) = 'A' (w ASCII)
| Liczba bitów | Nazwa | Zakres |
|---|---|---|
| 8 | Bajt (Byte) | 0-255 |
| 16 | Słowo (Word) | 0-65535 |
| 32 | Słowo podwójne (DWord) | 0-4294967295 |
| 64 | Słowo czwórkowe (QWord) | Ogromne liczby |
4. SYSTEM SZESNASTKOWY (HEKSADECYMALNY) – ULUBIONY PROGRAMISTÓW
Baza: 16 (cyfry 0-9, litery A-F)
text:0 1 2 3 4 5 6 7 8 9 A B C D E F
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Dlaczego heksadecymalny? Bo 1 cyfra hex = 4 bity, czyli pół bajtu. To bardzo wygodnie!
4.1 Konwersja hex na dziesiętną
textLiczba: 2F4 (szesnastkowo)
Pozycja: 16² | 16¹ | 16⁰
Cyfra: 2 | F | 4
Wartość: 2×16² + F×16¹ + 4×16⁰
= 2×256 + 15×16 + 4×1
= 512 + 240 + 4
= 756 (dziesiętnie)
4.2 Konwersja dziesiętnej na hex
Dzielimy przez 16:
textLiczba: 756 (dziesiętnie)
756 ÷ 16 = 47 reszta 4 ← ostatnia cyfra
47 ÷ 16 = 2 reszta 15 (F)
2 ÷ 16 = 0 reszta 2 ← pierwsza cyfra
Wynik: 2F4 (heksadecymalnie)
4.3 Sztuczka: Binarna ↔ Heksadecymalna (bez kalkulatora!)
Ponieważ 4 bity = 1 cyfra hex, możesz konwertować bezpośrednio:
textBinarna: 1010 1111 0100
Heksadecym.: A F 4
Dlaczego?
1010 (binarna) = 1×8 + 0×4 + 1×2 + 0×1 = 10 = A (hex)
1111 (binarna) = 1×8 + 1×4 + 1×2 + 1×1 = 15 = F (hex)
0100 (binarna) = 0×8 + 1×4 + 0×2 + 0×1 = 4 = 4 (hex)
Ćwiczenie: Zamień 11000101 na hex (bez kalkulatora):
text:1100 = 12 = C
0101 = 5 = 5
Wynik: C5 (hex)
5. PRAKTYKA: KOLORY W GRAFICE (RGB HEX)
Teraz przejdziemy do najfajniejszej części — kodowania kolorów!
5.1 Model RGB (Red, Green, Blue)
Każdy kolor na ekranie to kombinacja trzech składników:
- R (Red) — 0-255
- G (Green) — 0-255
- B (Blue) — 0-255
5.2 RGB w heksadecymalnym — Kolory w CSS
W CSS i HTML używamy zapisu: #RRGGBB
text#FF0000 ← Czerwień
^^ ← FF = 255 (maksymalna czerwień)
^^ ← 00 = 0 (brak zieleni)
^^ ← 00 = 0 (brak błękitu)
Przykłady:
| Nazwa | RGB | Hex | Wygląd |
|---|---|---|---|
| Czarny | (0, 0, 0) | #000000 | ⬛ |
| Biały | (255, 255, 255) | #FFFFFF | ⬜ |
| Czerwień | (255, 0, 0) | #FF0000 | 🟥 |
| Zielony | (0, 255, 0) | #00FF00 | 🟩 |
| Niebieski | (0, 0, 255) | #0000FF | 🟦 |
| Żółty | (255, 255, 0) | #FFFF00 | 🟨 |
| Fioletowy | (128, 0, 128) | #800080 | 🟪 |
| Szary | (128, 128, 128) | #808080 | ⬜ |
5.3 Konwersja RGB (dziesiętne) → HEX (szesnastkowe)
textKolor: RGB(200, 100, 50)
Konwersja każdego składnika:
R: 200 (dziesiętnie)
200 ÷ 16 = 12 reszta 8 → C8 (heksadecymalnie)
G: 100 (dziesiętnie)
100 ÷ 16 = 6 reszta 4 → 64 (heksadecymalnie)
B: 50 (dziesiętnie)
50 ÷ 16 = 3 reszta 2 → 32 (heksadecymalnie)
Wynik: #C86432
Lub w Pythonie:
pythondef rgb_to_hex(r, g, b):
return f"#{r:02X}{g:02X}{b:02X}"
kolor = rgb_to_hex(200, 100, 50)
print(kolor) # #C86432
5.4 Konwersja HEX → RGB (dziesiętne)
text#C86432
Rozdzielamy:
C8 (hex) = 12×16 + 8 = 200 (R)
64 (hex) = 6×16 + 4 = 100 (G)
32 (hex) = 3×16 + 2 = 50 (B)
Wynik: RGB(200, 100, 50)
W Pythonie:
pythondef hex_to_rgb(hex_kolor):
hex_kolor = hex_kolor.lstrip('#')
return tuple(int(hex_kolor[i:i+2], 16) for i in (0, 2, 4))
rgb = hex_to_rgb('#C86432')
print(rgb) # (200, 100, 50)
6. ASCII – KODOWANIE ZNAKÓW
ASCII (American Standard Code for Information Interchange) — każdy znak ma liczbę.
6.1 Tablica ASCII (podstawowe znaki)
| Liczba (DEC) | Liczba (HEX) | Liczba (BIN) | Znak | Opis |
|---|---|---|---|---|
| 32 | 20 | 00100000 | (spacja) | Spacja |
| 33 | 21 | 00100001 | ! | Wykrzyknik |
| 48 | 30 | 00110000 | 0 | Cyfrę zero |
| 49 | 31 | 00110001 | 1 | Cyfrę jeden |
| 57 | 39 | 00111001 | 9 | Cyfrę dziewięć |
| 65 | 41 | 01000001 | A | Wielkie A |
| 66 | 42 | 01000010 | B | Wielkie B |
| 90 | 5A | 01011010 | Z | Wielkie Z |
| 97 | 61 | 01100001 | a | Małe a |
| 98 | 62 | 01100010 | b | Małe b |
| 122 | 7A | 01111010 | z | Małe z |
6.2 Rozszerzony ASCII (znaki specjalne)
| DEC | HEX | Znak | Opis |
|---|---|---|---|
| 169 | A9 | © | Copyright |
| 174 | AE | ® | Registered |
| 176 | B0 | ° | Stopień |
| 177 | B1 | ± | Plus-minus |
| 181 | B5 | µ | Mikro |
| 215 | D7 | × | Mnożenie |
| 247 | F7 | ÷ | Dzielenie |
| 185 | B9 | ¹ | Superscript 1 |
| 178 | B2 | ² | Superscript 2 |
| 179 | B3 | ³ | Superscript 3 |
6.3 Praktyka: Kodowanie tekstu
Słowo „AB” w ASCII:
textA: 65 (DEC) = 41 (HEX) = 01000001 (BIN)
B: 66 (DEC) = 42 (HEX) = 01000010 (BIN)
Tekst "AB" w pamięci:
01000001 01000010 (2 bajty)
W Pythonie:
python# Zmień znak na liczbę
ord('A') # 65
ord('é') # 233
# Zmień liczbę na znak
chr(65) # 'A'
chr(169) # '©'
chr(8364) # '€' (Euro)
7. UNICODE – ZNAKI Z CAŁEGO ŚWIATA
ASCII pokrywał tylko 128 znaków (rozszerzony do 256).
To wystarczało dla języka angielskiego, ale nie dla reszty świata.
Brakowało liter z ogonkami, cyrylicy, chińskich znaków, emoji i tysięcy symboli używanych w nauce i kulturze.
Dlatego powstał Unicode – uniwersalny system kodowania, który przypisuje unikalny numer (kod punktowy) każdemu znakowi w dowolnym języku.
7.1 Jak działa Unicode
Każdy znak ma numer zapisany w formacie U+XXXX,
gdzie XXXX to liczba w systemie szesnastkowym.
Przykłady:
| Znak | Kod Unicode | Opis |
|---|---|---|
| A | U+0041 | Wielka litera A |
| a | U+0061 | Mała litera a |
| Ł | U+0141 | Polska litera Ł |
| € | U+20AC | Symbol euro |
| 😀 | U+1F600 | Emoji „uśmiech” |
7.2 Unicode a UTF-8
Unicode to „słownik” wszystkich znaków,
a UTF-8 to sposób ich zapisu w bajtach.
W UTF-8:
- znaki ASCII (0–127) zajmują 1 bajt,
- inne europejskie litery (np. ą, ł, é) – 2 bajty,
- emoji i znaki azjatyckie – 3–4 bajty.
To bardzo wydajny system, dlatego UTF-8 jest dziś standardem Internetu.
W HTML i Pythonie domyślnie używa się właśnie UTF-8.
7.3 Unicode w Pythonie
Python używa Unicode automatycznie:
print("Ala ma kota 🐱")
print(ord('🐱')) # 128049 – numer Unicode
print(chr(128049)) # 🐱
Każdy tekst to ciąg znaków Unicode, niezależny od języka.
7.4 Podsumowanie kodowania znaków
| System | Zakres | Przykład | Użycie |
|---|---|---|---|
| ASCII | 128 znaków | A, B, C, 0–9 | stare systemy |
| ISO-8859-2 | 256 znaków | ą, ć, ł, ź, ż | polski Windows 98 |
| Unicode / UTF-8 | ponad 140 000 znaków | 🌍, €, 漢, ❤️ | Internet, Python, nowoczesne systemy |
8. PODSUMOWANIE
Komputer widzi świat jako ciąg zer i jedynek,
ale dzięki systemom liczbowym i kodowaniu znaków potrafi z tych zer zbudować cyfry, litery, kolory i obrazy.
Znając te podstawy:
- zrozumiesz, jak komputer „myśli”,
- nauczysz się czytać dane binarne i heksadecymalne,
- i docenisz prostotę języka, którym posługuje się cały świat IT.
9. ĆWICZENIA DLA UCZNIA
Napisz w Pythonie funkcję, która dla dowolnego tekstu wypisze kody binarne jego znaków.
Zamień liczbę 110101 na dziesiętną.
Zamień 255 dziesiętnie na binarnie i szesnastkowo.
Jak wygląda kolor o zapisie #00FFFF w RGB?
Zapisz literę „Ł” w postaci: kodu Unicode i w systemie szesnastkowym.