Kurs HTML i CSS · Moduł 2: Internet i elementy HTML
Historia i ewolucja internetu
W tej lekcji6
Wyobraź sobie, że stoisz u bram wielkiej Biblioteki Aleksandryjskiej - miejsca, które gromadziło całą wiedzę starożytnego świata. Internet jest współczesną wersją tej biblioteki, ale jego historia jest równie fascynująca jak dzieje samego Egiptu. Poznajmy ją razem!
Początki - ARPANET (1969)
Wszystko zaczęło się w 1969 roku, kiedy Departament Obrony USA stworzył sieć ARPANET. Była to pierwsza rozległa sieć z przełączaniem pakietów; na początek połączyła cztery ośrodki: trzy uniwersytety i instytut badawczy SRI. Pomyśl o tym jak o pierwszym szlaku handlowym między czterema miastami starożytnego Egiptu - niewielki, ale rewolucyjny!
ARPANET umożliwiał przesyłanie danych między odległymi komputerami. Pierwsza wiadomość wysłana przez sieć brzmiała "LO" - miało być "LOGIN", ale system się zawiesił po dwóch znakach. Mimo to był to ogromny krok naprzód.
Protokół TCP/IP (1983) - wspólny język
W 1983 roku wprowadzono protokół TCP/IP (Transmission Control Protocol / Internet Protocol). To jak wynalezienie hieroglifów - uniwersalnego języka, który pozwalał różnym sieciom komunikować się ze sobą.
TCP/IP określa, w jaki sposób dane są dzielone na pakiety, adresowane i przesyłane między komputerami. Dzięki niemu internet stał się prawdziwie globalną siecią, łączącą komputery na całym świecie.
1<!-- Kamienie milowe internetu -->
2<h2>Oś czasu internetu</h2>
3<ol>
4 <li><strong>1969</strong> - ARPANET: pierwsza rozległa sieć pakietowa</li>
5 <li><strong>1971</strong> - Pierwszy e-mail wysłany przez Raya Tomlinsona</li>
6 <li><strong>1983</strong> - TCP/IP: uniwersalny protokół komunikacji</li>
7 <li><strong>1991</strong> - WWW: World Wide Web Tima Bernersa-Lee</li>
8 <li><strong>1993</strong> - Mosaic: pierwsza popularna przeglądarka z obrazkami w tekście</li>
9</ol>World Wide Web (1991) - wiedza dla wszystkich
W 1989 roku Tim Berners-Lee zaproponował World Wide Web - system stron połączonych hiperłączami - a w 1991 roku udostępnił go światu. To był moment porównywalny z wynalezieniem papirusu - nagle wiedza stała się dostępna dla każdego!
Berners-Lee stworzył trzy fundamentalne technologie:
- HTML (HyperText Markup Language) - język do tworzenia stron
- URL (Uniform Resource Locator) - system adresowania zasobów
- HTTP (HyperText Transfer Protocol) - protokół komunikacji
1<h2>Trzy filary WWW</h2>
2<table border="1">
3 <tr>
4 <th>Technologia</th>
5 <th>Funkcja</th>
6 <th>Analogia egipska</th>
7 </tr>
8 <tr>
9 <td>HTML</td>
10 <td>Struktura stron</td>
11 <td>Hieroglify - sposób zapisu</td>
12 </tr>
13 <tr>
14 <td>URL</td>
15 <td>Adresy zasobów</td>
16 <td>Mapa świątyń</td>
17 </tr>
18 <tr>
19 <td>HTTP</td>
20 <td>Protokół komunikacji</td>
21 <td>Posłańcy faraona</td>
22 </tr>
23</table>Mosaic (1993) - obrazki w tekście
Pierwsza przeglądarka, WorldWideWeb, powstała pod koniec 1990 roku, ale obrazy otwierała w osobnych oknach, więc strony wyglądały jak kamienne tablice z samym tekstem. W 1993 roku przeglądarka Mosaic jako pierwsza pokazała obrazy bezpośrednio w tekście. To jak przejście od surowych inskrypcji do kolorowych fresków w grobowcach faraonów!
Mosaic była przełomem, ponieważ uczyniła internet wizualnym i dostępnym dla zwykłych ludzi. Wkrótce pojawiły się kolejne przeglądarki: Netscape Navigator (1994), Internet Explorer (1995) i wiele innych.
Web 2.0 (2004+) - era interaktywności
Około 2004 roku internet przeszedł kolejną rewolucję - Web 2.0. Użytkownicy przestali być tylko biernymi czytelnikami i zaczęli tworzyć treści:
- 2004 - Facebook: łączenie ludzi na całym świecie
- 2005 - YouTube: każdy może publikować filmy
- 2006 - Twitter: krótkie wiadomości w czasie rzeczywistym
- 2001 - Wikipedia: encyklopedia tworzona przez społeczność
To jak gdyby każdy Egipcjanin mógł dodawać swoje hieroglify na ścianach świątyni - demokratyzacja wiedzy!
Internet dziś i jutro
Współczesny internet to niesamowicie rozległa sieć łącząca miliardy urządzeń:
- IoT (Internet of Things) - lodówki, zegarki, samochody podłączone do sieci
- 5G - ultraszybkie połączenia mobilne
- AI - sztuczna inteligencja wspomagająca wyszukiwanie i tworzenie treści
- Cloud Computing - obliczenia w chmurze
Internet przeszedł drogę od czterech połączonych komputerów w 1969 roku do globalnej sieci łączącej ponad 5 miliardów użytkowników. To tak, jakby od małej osady nad Nilem wyrósł cały starożytny Egipt - z piramidami, świątyniami i szlakami handlowymi rozciągającymi się po cały znany świat!
Kod do tej lekcji: index.html
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <title>Historia internetu</title>
6</head>
7<body>
8 <h1>Historia internetu - Od ARPANET do IoT</h1>
9
10 <h2>Oś czasu internetu</h2>
11 <ol>
12 <li><strong>1969</strong> - ARPANET: pierwsza rozległa sieć pakietowa (4 komputery)</li>
13 <li><strong>1971</strong> - Pierwszy e-mail (Ray Tomlinson)</li>
14 <li><strong>1983</strong> - TCP/IP: uniwersalny protokół</li>
15 <li><strong>1991</strong> - WWW: Tim Berners-Lee tworzy strony</li>
16 <li><strong>1993</strong> - Mosaic: obrazki w tekście</li>
17 <li><strong>2004</strong> - Web 2.0: Facebook, YouTube, Wikipedia</li>
18 </ol>
19
20 <h2>Trzy filary WWW</h2>
21 <table border="1" cellpadding="8">
22 <tr>
23 <th>Technologia</th>
24 <th>Funkcja</th>
25 <th>Analogia egipska</th>
26 </tr>
27 <tr>
28 <td>HTML</td>
29 <td>Struktura stron</td>
30 <td>Hieroglify</td>
31 </tr>
32 <tr>
33 <td>URL</td>
34 <td>Adresy zasobów</td>
35 <td>Mapa świątyń</td>
36 </tr>
37 <tr>
38 <td>HTTP</td>
39 <td>Protokół komunikacji</td>
40 <td>Posłańcy faraona</td>
41 </tr>
42 </table>
43
44 <!-- Dodaj sekcję o współczesnym internecie -->
45 <!-- Opisz IoT, 5G, cloud computing -->
46</body>
47</html>Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Co robi znacznik <figcaption>?
2. Który format obrazu jest wektorowy (skalowalny bez utraty jakości)?
Zadania praktyczne w grze
- Edytor kodu
Stwórz stronę HTML z osią czasu rozwoju internetu w stylu egipskim. Dodaj nagłówek <h1> i co najmniej 4 wydarzenia z latami (np. 1969 - ARPANET), każde w osobnym akapicie <p> albo punkcie listy <li>.
- Klikanie w kolejności
Ułóż etapy renderowania strony po otrzymaniu odpowiedzi:
- Edytor kodu
Stwórz 3 eksponaty muzealne: Maska Tutanchamona, Kamień z Rosetty, Sfinks. Każdy umieść w <figure> z <img> i <figcaption>. Dodaj <hr> i stopkę.
- Układanie w pionie
Ułóż elementy figure w poprawnej kolejności od góry do dołu:
- Klikanie w kolejności
Ułóż atrybut określający szerokość obrazu:
- Edytor kodu
Stwórz portfolio z 2 projektami wykopalisk. Każdy z nagłówkiem, zdjęciem w <figure> z <figcaption>, opisem z <strong> i <em>, linkiem 'Czytaj więcej' i separatorem <hr>.
- Układanie w pionie
Uporządkuj chronologicznie kamienie milowe internetu: