Od zera: jak działa strona internetowa

Ta lekcja jest dla Ciebie, jeśli nigdy nie robiłeś strony internetowej. Zanim napiszemy pierwszy znacznik, musisz zrozumieć, co się właściwie dzieje, gdy wpisujesz adres w przeglądarce. Bez tego HTML, CSS, PHP i SQL to cztery osobne, niezrozumiałe języki. Z tym – układają się w jedną, logiczną całość.

Strona internetowa to… zwykłe pliki tekstowe

To najważniejsze zdanie tej lekcji. Strona to pliki z tekstem zapisane w folderze – dokładnie takie, jakie możesz napisać w Notatniku. Różnią się tylko rozszerzeniem (końcówką nazwy):

Budowanie strony to jak budowanie domu

Na egzaminie INF.03 zbudujesz dokładnie taki „dom”: HTML + CSS + (PHP z bazą albo JavaScript).

Co się dzieje, gdy wpisujesz adres strony

Przeglądarka i serwer rozmawiają jak klient i kelner w restauracji:

  TY (przeglądarka)                                  SERWER (np. Apache z XAMPP)
  ─────────────────                                  ───────────────────────────
  1. „Poproszę stronę gry.php”      ───────────▶
                                                     2. Uruchamia PHP. PHP pyta bazę
                                                        danych o listę gier i wkleja
                                                        ją do HTML-a.
                                     ◀───────────   3. Odsyła GOTOWY HTML
  4. Czyta HTML od góry do dołu.
     Widzi <link href="styl.css">:
     „Poproszę też styl.css”         ───────────▶
                                     ◀───────────   5. Odsyła plik CSS
     Widzi <img src="logo.png">:
     „Poproszę logo.png”             ───────────▶
                                     ◀───────────   6. Odsyła obraz
  7. Składa wszystko i rysuje stronę na ekranie

Wnioski, które przydadzą Ci się w każdej lekcji:

• HTML przychodzi pierwszy, a w nim są „zamówienia” na kolejne pliki (CSS, obrazy, skrypty). Jeśli w HTML wpiszesz złą nazwę pliku CSS – przeglądarka zamówi plik, którego nie ma, i strona będzie bez wyglądu.
• PHP działa na serwerze, zanim strona dotrze do Ciebie. Przeglądarka nigdy nie widzi kodu PHP – dostaje gotowy HTML. Dlatego plik .php musi być otwarty przez serwer (http://localhost/...), a nie podwójnym kliknięciem.
• JavaScript działa w przeglądarce, już po załadowaniu strony. Dlatego działa nawet z pliku otwartego dwuklikiem.
• Baza danych nie rozmawia z przeglądarką. Rozmawia tylko z PHP na serwerze.

Adres strony (URL) – z czego się składa

http://localhost/egzamin/gry.php?id=5
└─┬─┘  └───┬───┘ └──┬──┘ └──┬──┘ └┬─┘
  │        │        │       │     └─ parametr (dane dla skryptu PHP)
  │        │        │       └─ nazwa pliku
  │        │        └─ folder na serwerze
  │        └─ serwer (localhost = Twój własny komputer)
  └─ protokół (sposób rozmowy: http lub https)

Na Twoim komputerze z XAMPP: http://localhost/egzamin/gry.php to plik C:\xampp\htdocs\egzamin\gry.php. Folder htdocs to „początek” serwera.

Otworzenie pliku: dwuklik czy localhost?

Podejrzyj, jak to działa naprawdę

Na dowolnej stronie wciśnij F12 (narzędzia deweloperskie):

• zakładka Elements / Elementy – HTML, który dostała przeglądarka (po PHP zostaje tu tylko gotowy HTML!),
• zakładka Network / Sieć – odśwież stronę (F5) i zobaczysz listę wszystkich zamówionych plików: HTML, CSS, obrazy. Plik na czerwono ze statusem 404 = przeglądarka go nie znalazła (zła nazwa lub ścieżka),
• zakładka Console / Konsola – błędy JavaScriptu.

To Twoje główne narzędzie do szukania błędów – będziemy z niego korzystać w całym kursie.

Słowniczek na start

Sprawdź się

Zaznacz odpowiedzi i kliknij „Sprawdź wynik”. Przy każdej błędnej odpowiedzi zobaczysz, dlaczego jest zła i która jest poprawna.