Kurs HTML i CSS · Moduł 2: Internet i elementy HTML

Jak działa internet - Podstawy

2 min czytania
W tej lekcji6

Internet to globalna sieć połączonych komputerów, które komunikują się ze sobą za pomocą ustalonych reguł (protokołów). Mohamed porównuje internet do starożytnej sieci dróg handlowych Egiptu - tak jak karawany przemierzały szlaki między miastami, tak dane podróżują między komputerami na całym świecie.

Jak wyświetla się strona internetowa?

Kiedy wpisujesz adres strony w przeglądarce i naciskasz ENTER, uruchamiasz fascynujący proces:

  1. Wpisanie adresu URL - np. https://www.example.com/strona?lang=pl
  2. DNS Lookup - system DNS tłumaczy nazwę domeny na adres IP serwera
  3. Połączenie z serwerem - przeglądarka nawiązuje połączenie
  4. Żądanie HTTP - przeglądarka wysyła zapytanie: "Daj mi tę stronę!"
  5. Odpowiedź serwera - serwer odsyła pliki HTML, CSS, JavaScript
  6. Renderowanie - przeglądarka składa wszystko w gotową stronę

Adres URL - Mapa do zasobów

URL (Uniform Resource Locator) to adres zasobu w internecie. Składa się z kilku części:

  • Protokół: https:// - jak rodzaj drogi (bezpieczna vs zwykła)
  • Domena: www.example.com - nazwa "miasta" w internecie
  • Ścieżka: /strona - konkretna lokalizacja w serwisie
  • Parametry: ?lang=pl - dodatkowe informacje

DNS - Księga adresowa internetu

Komputery komunikują się za pomocą adresów IP (np. 93.184.216.34), ale ludzie łatwiej pamiętają nazwy jak example.com. DNS (Domain Name System) działa jak tłumacz - przeglądarka pyta serwer DNS: "Jaki jest IP dla example.com?", a DNS odpowiada adresem.

Mohamed mówi: "DNS to jak strażnik świątyni, który wskazuje drogę do właściwej komnaty!"

HTTP - Język komunikacji

HTTP (HyperText Transfer Protocol) to protokół, którym przeglądarka rozmawia z serwerem. Każda komunikacja składa się z żądania (request) i odpowiedzi (response).

Najważniejsze kody odpowiedzi HTTP:

  • 200 OK - Sukces! Strona znaleziona
  • 301 - Strona przeniesiona na stałe
  • 404 Not Found - Nie znaleziono strony
  • 500 - Błąd serwera

Serwer - Magazyn stron

Serwer to komputer, który przechowuje pliki stron internetowych i udostępnia je innym komputerom. Gdy przeglądarka wysyła żądanie, serwer szuka odpowiedniego pliku i odsyła go. Mohamed porównuje serwer do Biblioteki Aleksandryjskiej - ogromnego magazynu wiedzy dostępnego dla wszystkich.

World Wide Web

WWW (World Wide Web) to system dokumentów połączonych hiperłączami, działający w internecie. Zaproponował go Tim Berners-Lee w 1989 roku, a w 1991 roku WWW zostało udostępnione publicznie. WWW to nie to samo co internet - WWW to jedna z usług działających w sieci, tak jak e-mail czy transfer plików.

Spójrz na przykładową stronę HTML - to właśnie taki kod serwer wysyła, a przeglądarka wyświetla:

Kod do tej lekcji: index.html
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Jak działa internet</title>
6</head>
7<body>
8    <h1>Jak działa internet?</h1>
9
10    <h2>Proces wyświetlania strony</h2>
11    <ol>
12        <li>Wpisanie adresu URL w przeglądarce</li>
13        <li>DNS tłumaczy domenę na adres IP</li>
14        <li>Przeglądarka łączy się z serwerem</li>
15        <li>Serwer wysyła pliki HTML, CSS, JS</li>
16        <li>Przeglądarka renderuje stronę</li>
17    </ol>
18
19    <h2>Budowa adresu URL</h2>
20    <p><strong>https://</strong> - protokół (bezpieczny)</p>
21    <p><strong>www.example.com</strong> - domena</p>
22    <p><strong>/strona</strong> - ścieżka</p>
23    <p><strong>?lang=pl</strong> - parametry</p>
24
25    <h2>Kody odpowiedzi HTTP</h2>
26    <ul>
27        <li><strong>200</strong> - OK, sukces!</li>
28        <li><strong>404</strong> - Nie znaleziono strony</li>
29        <li><strong>500</strong> - Błąd serwera</li>
30    </ul>
31</body>
32</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. 1. Czym jest internet?

  2. 2. Co oznacza WWW?

  3. 3. Kto stworzył World Wide Web?

  4. 4. Co to jest protokół HTTP?

  5. 5. Co to jest adres URL?

  6. 6. Co to jest serwer?

Zadania praktyczne w grze

  • Klikanie w kolejności

    Ułóż elementy pełnego adresu URL:

  • Edytor kodu

    Stwórz stronę HTML, która rozbiera adres https://www.google.com/search?q=starożytny+egipt na części pierwsze. Użyj nagłówków <h2> dla każdej sekcji (Protokół, Domena, Ścieżka, Parametry) i wyjaśnij w <p>, co każda część oznacza. Dodaj też drugi przykład z egipską stroną muzeum. Cel: Strona powinna wyglądać jak starożytna mapa z opisami tras!

  • Układanie w pionie

    Uporządkuj etapy komunikacji między przeglądarką a serwerem:

  • Układanie w pionie

    Ułóż etapy odpowiedzi serwera na żądanie HTTP:

Przydatne artykuły