ZAWODNIK

Jak działa strona WWW: klient, serwer, HTTP, URL i standardy

INF.03 · teoria
autor: redakcja · 07.09.2026 · aktualizacja: 08.09.2026
Jak przeglądarka i serwer wymieniają żądanie i odpowiedź, z czego składa się adres URL, czym HTTPS różni się od HTTP, kto ustala standardy HTML i dlaczego polskie znaki wymagają UTF-8. Lekcja 3.1 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: htmlĆwicz dział: html
Strona WWW to do­ku­ment HTML, który serwer wysyła prze­glą­dar­ce na żą­da­nie, a prze­glą­dar­ka rysuje na ekra­nie. Zanim na­pi­szesz pierw­szy znacz­nik, warto wie­dzieć, kto komu ten plik podaje i pod jakim ad­re­sem. Na eg­za­mi­nie pi­sem­nym wra­ca­ją z tego py­ta­nia o budowę adresu URL, o róż­ni­cę między HTTP a HTTPS, o kody od­po­wie­dzi ser­we­ra, o or­ga­ni­za­cję usta­la­ją­cą stan­dard HTML, o po­bie­ra­nie i wy­sy­ła­nie danych oraz o ko­do­wa­nie pol­skich znaków. W części prak­tycz­nej ta wiedza de­cy­du­je o dwóch rze­czach: gdzie po­ło­żyć plik index.html, żeby serwer go wi­dział, i jak go otwo­rzyć, żeby skrypt PHP na­praw­dę się wy­ko­nał.

Klient i serwer

Klient to pro­gram, który prosi o dane, serwer to pro­gram, który je wydaje. Klien­tem jest prze­glą­dar­ka (Chrome, Fi­re­fox, Edge), ser­we­rem WWW jest pro­gram cze­ka­ją­cy na po­łą­cze­nia i od­da­ją­cy pliki: naj­czę­ściej Apache, ten sam, który stoi w pa­kie­cie XAMPP obok MySQL i PHP (patrz lekcja o XAMPP i phpMyAdmin).
Roz­mo­wa ma zawsze dwie części. Żą­da­nie (request) idzie od klien­ta do ser­we­ra i mówi, o który zasób chodzi. Od­po­wiedź (response) wraca z ser­we­ra i niesie kod sta­tu­su oraz treść, czyli zwykle plik.
Przeglądarka wysyła do serwera żądanie HTTP z adresem rozbitym na części, a serwer odsyła kod 200 i plik HTML, po którym idą osobne żądania o arkusz CSS i obraz
Kod sta­tu­su to trzy­cy­fro­wa liczba, po której po­zna­jesz, jak poszło.
  • ›
    200 OK: zasób zna­le­zio­ny, w od­po­wie­dzi jest jego treść.
  • ›
    301 Moved Permanently (prze­nie­sio­ny na stałe): zasób ma nowy adres i prze­glą­dar­ka ma tam przejść.
  • ›
    403 Forbidden (za­bro­nio­ny): serwer plik widzi, ale od­ma­wia do­stę­pu.
  • ›
    404 Not Found (nie zna­le­zio­no): pod tym ad­re­sem nic nie ma, zwykle przez li­te­rów­kę w nazwie pliku.
  • ›
    500 Internal Server Error (we­wnętrz­ny błąd ser­we­ra): coś wy­sy­pa­ło się po stro­nie ser­we­ra, przy za­da­niu eg­za­mi­na­cyj­nym prawie zawsze błąd w skryp­cie PHP.
Jedno żą­da­nie to jeden plik. Prze­glą­dar­ka naj­pierw po­bie­ra do­ku­ment HTML, czyta go od góry i do­pie­ro z niego do­wia­du­je się, że po­trzeb­ny jest jesz­cze arkusz styl.css, obraz obrazy/mysz.jpg i skrypt. Po każdy z nich wysyła osobne żą­da­nie. Dla­te­go strona z trzy­dzie­sto­ma zdję­cia­mi ładuje się dłużej niż ta sama strona z trzema, choć kod HTML jest niemal tej samej dłu­go­ści.

Adres URL

URL (Uniform Resource Locator, ujed­no­li­co­ny lo­ka­li­za­tor zasobu) to pełny adres zasobu w sieci: mówi, jakim pro­to­ko­łem, z któ­re­go kom­pu­te­ra i który plik pobrać. Adres z ry­sun­ku roz­kła­da się na sześć części.
Część
W przy­kła­dzie
Znaczy
sche­mat
https://
jakim pro­to­ko­łem roz­ma­wiać
host
sklep.pl
z którym kom­pu­te­rem; nazwę za­mie­nia na adres IP usługa DNS
port
:443
który pro­gram na tym kom­pu­te­rze od­bie­ra po­łą­cze­nie
ścież­ka
/produkty/index.html
który plik w drze­wie ka­ta­lo­gów ser­we­ra
za­py­ta­nie
?kat=monitory
dane do­kle­jo­ne do adresu, pary nazwa i war­tość łą­czo­ne zna­kiem &
frag­ment
#cena
miej­sce w do­ku­men­cie, do któ­re­go prze­glą­dar­ka ma prze­wi­nąć
Port pisze się rzadko, bo każdy pro­to­kół ma do­myśl­ny: HTTP ko­rzy­sta z portu 80, HTTPS z portu
  • 1.
    Adresy https://sklep.pl/ i https://sklep.pl:443/ pro­wa­dzą do tego samego miej­sca.
Frag­ment jest jedyną czę­ścią, która do ser­we­ra w ogóle nie jedzie: ob­słu­gu­je go sama prze­glą­dar­ka po po­bra­niu strony.
We­wnątrz wi­try­ny pliki wska­zu­je się ścież­ka­mi i tu są dwa ro­dza­je. Ścież­ka względ­na liczy się od ka­ta­lo­gu, w którym leży bie­żą­cy plik: obrazy/mysz.jpg to plik w pod­ka­ta­lo­gu obok, ../styl.css to plik o poziom wyżej, a /index.html z uko­śni­kiem na po­cząt­ku liczy się od ko­rze­nia wi­try­ny. Ścież­ka bez­względ­na podaje adres pełny, od https:// albo od litery dysku.
Pu­łap­ka: ścież­ka C:\Strona\obrazy\mysz.jpg działa tylko na twoim kom­pu­te­rze, więc po wgra­niu wi­try­ny na serwer taki obraz się nie pokaże. W ar­ku­szu po­praw­ną od­po­wie­dzią jest ścież­ka względ­na, z uko­śni­ka­mi w prawo.

HTTP i HTTPS

HTTP (HyperText Transfer Protocol, pro­to­kół prze­sy­ła­nia hi­per­tek­stu) to zestaw reguł, według któ­rych prze­glą­dar­ka pyta, a serwer od­po­wia­da. Pra­cu­je na porcie 80 i prze­sy­ła wszyst­ko tek­stem jawnym: kto po drodze pod­słu­cha pa­kie­ty, prze­czy­ta hasło wpi­sa­ne w for­mu­larz.
HTTPS to ten sam pro­to­kół za­mknię­ty w szy­fro­wa­nym tunelu TLS (Transport Layer Security, war­stwa bez­piecz­nych po­łą­czeń; star­sza nazwa tego me­cha­ni­zmu to SSL). Pra­cu­je na porcie 443 i wymaga cer­ty­fi­ka­tu po­twier­dza­ją­ce­go, że serwer jest tym, za kogo się podaje, a prze­glą­dar­ka po­ka­zu­je przy ad­re­sie kłódkę. Szy­fro­wa­nie chroni dane w drodze, nie spraw­dza uczci­wo­ści strony: wi­try­na wy­łu­dza­ją­ca hasła też może mieć kłódkę. Numery portów po­zo­sta­łych usług zbiera na­rzę­dzie z pro­to­ko­ła­mi i por­ta­mi.
Każde żą­da­nie ma metodę. GET (POBIERZ) prosi o zasób i do­kle­ja ewen­tu­al­ne dane do adresu, więc widać je w polu adresu prze­glą­dar­ki i można je za­pi­sać w za­kład­ce. POST (WYŚLIJ) wkłada dane do treści żą­da­nia, gdzie ich nie widać, i nie ogra­ni­cza ich dłu­go­ścią adresu, dla­te­go hasła i dłuż­sze for­mu­la­rze idą metodą POST po HTTPS. Jak za­pi­sać to w kodzie, po­ka­zu­je lekcja o for­mu­la­rzach.
Ruch idzie w obie strony i każdy kie­ru­nek ma swoją nazwę. Po­bie­ra­nie (download) to prze­sy­ła­nie danych z ser­we­ra do klien­ta: otwar­cie strony, za­pi­sa­nie pliku PDF, obej­rze­nie filmu. Wy­sy­ła­nie (upload) to kie­ru­nek od­wrot­ny, od klien­ta do ser­we­ra: wy­sła­ny for­mu­larz, zdję­cie dodane do ga­le­rii, plik wrzu­co­ny do chmury. Domowe łącza są zwykle asy­me­trycz­ne, czyli mają wyższą pręd­kość po­bie­ra­nia niż wy­sy­ła­nia, bo prze­cięt­ny użyt­kow­nik więcej ogląda, niż nadaje. Gotową wi­try­nę też się wysyła: pliki HTML, CSS i obrazy ko­piu­je się na serwer ho­stin­gu pro­to­ko­łem FTP (File Transfer Protocol, pro­to­kół prze­sy­ła­nia plików), pro­gra­mem w ro­dza­ju FileZilli, i to jest wy­sy­ła­nie danych, nie po­bie­ra­nie.

Stan­dar­dy do­ku­men­tów hi­per­tek­sto­wych

Stan­dard to spi­sa­na umowa, jak wy­glą­da po­praw­ny do­ku­ment, żeby każda prze­glą­dar­ka ry­so­wa­ła go tak samo. Ustala go W3C (World Wide Web Consortium), or­ga­ni­za­cja za­ło­żo­na przez twórcę WWW; nad samym HTML pra­cu­je dziś razem z WHATWG (Web Hypertext Application Technology Working Group), które utrzy­mu­je HTML jako stan­dard stale ak­tu­ali­zo­wa­ny. W py­ta­niach po­ja­wia­ją się trzy wersje.
HTML 4.01 z 1999 roku miał trzy od­mia­ny (Strict, Transitional, Frameset) i długą de­kla­ra­cję typu do­ku­men­tu z ad­re­sem de­fi­ni­cji DTD. Do­pusz­czał znacz­ni­ki od wy­glą­du, takie jak <font> i <center>, oraz dzie­le­nie okna ram­ka­mi <frame>. W HTML5 tego nie ma: wygląd i po­dział ekranu robi CSS.
XHTML to ten sam HTML za­pi­sa­ny według reguł skład­ni XML. Znacz­ni­ki wy­łącz­nie małymi li­te­ra­mi, każdy otwar­ty musi zostać za­mknię­ty, znacz­ni­ki puste zamyka się uko­śni­kiem (<br />, <img src="mysz.jpg" alt="Mysz" />), war­to­ści atry­bu­tów zawsze w cu­dzy­sło­wie, a za­gnież­dże­nia nie mogą się krzy­żo­wać. Wa­li­da­tor XHTML zgła­sza błąd na <br> bez uko­śni­ka i do­kład­nie o to pytają star­sze za­da­nia.
HTML5 obo­wią­zu­je dzi­siaj. De­kla­ra­cja typu do­ku­men­tu skró­ci­ła się do <!DOCTYPE html>, doszły znacz­ni­ki sekcji (header, nav, main, section, article, aside, footer), mul­ti­me­dia bez wty­czek (audio, video), gra­fi­ka (svg, canvas) i nowe typy pól for­mu­la­rza. Zapis <br /> nadal jest do­pusz­czo­ny, ale w HTML5 pisze się <br>.
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Sklep komputerowy</title> </head> <body> </body> </html>
Cały szkie­let do­ku­men­tu, ele­ment po ele­men­cie, omawia lekcja o szkie­le­cie HTML5. Zgod­ność go­to­we­go pliku ze stan­dar­dem spraw­dza wa­li­da­tor W3C: wska­zu­je w kodzie miej­sca nie­zgod­ne z HTML5, na przy­kład brak <title> w sekcji na­głów­ko­wej. Wa­li­da­cja i te­sto­wa­nie mają w kursie osobny dział.

Ko­do­wa­nie znaków

Ko­do­wa­nie znaków to sposób za­mia­ny liter na liczby za­pi­sy­wa­ne w pliku. W pliku leżą bajty, nie litery, więc bez umowy, który bajt ozna­cza ą, pol­skie znaki roz­ja­dą się przy pierw­szym otwar­ciu na innym kom­pu­te­rze.
Stan­dard
Co obej­mu­je
ASCII
128 znaków: litery an­giel­skie, cyfry, znaki pod­sta­wo­we; pol­skich liter nie ma w ogóle
ISO-8859-2 (Latin-2)
jeden bajt na znak, al­fa­be­ty środ­ko­wo­eu­ro­pej­skie, w tym pełny polski
Win­dows-1250
jeden bajt na znak, win­dow­so­wy od­po­wied­nik Latin-2, kilka znaków pod innymi nu­me­ra­mi
UTF-8
zapis Uni­co­de, od jed­ne­go do czte­rech bajtów na znak, wszyst­kie al­fa­be­ty świata; dzi­siej­szy do­myśl­ny wybór
De­kla­ra­cja w do­ku­men­cie to jedna linia w sekcji na­głów­ko­wej: <meta charset="UTF-8">. Sama de­kla­ra­cja nie wy­star­czy, bo mówi tylko, jak plik ODCZYTAĆ. Plik trzeba jesz­cze w tym ko­do­wa­niu ZAPISAĆ, a to usta­wia edytor: w No­tat­ni­ku pole „Ko­do­wa­nie" w oknie zapisu, w No­te­pad++ menu „Ko­do­wa­nie", w VS Code przy­cisk z nazwą ko­do­wa­nia na dolnym pasku.
Pu­łap­ka: krzacz­ki w ro­dza­ju „ż" albo py­taj­ni­ki za­miast „ż" znaczą, że plik za­pi­sa­no w jednym ko­do­wa­niu, a od­czy­ta­no w drugim. Spraw­dza się wtedy dwie rzeczy: <meta charset="UTF-8"> w sekcji na­głów­ko­wej i ko­do­wa­nie pliku w edy­to­rze.
Arkusz CKE wymaga wprost „za­sto­so­wa­nia wła­ści­we­go stan­dar­du ko­do­wa­nia pol­skich znaków", więc jest to punk­to­wa­ny ele­ment za­da­nia, a nie ko­sme­ty­ka.

Na eg­za­mi­nie

Py­ta­nie pi­sem­ne z tej lekcji jest zwykle jed­noz­da­nio­we i spraw­dza jedną nazwę. Wra­ca­ją: or­ga­ni­za­cja usta­la­ją­ca stan­dard HTML (W3C, nie ISO ani NASK), zapis &lt; dający na stro­nie znak mniej­szo­ści, de­kla­ra­cja <!DOCTYPE html> jako in­for­ma­cja, że do­ku­ment jest w wersji 5 języka (a nie że znacz­ni­ki mają być pisane wiel­ki­mi li­te­ra­mi), po­praw­ny zapis de­kla­ra­cji ko­do­wa­nia (<meta charset="UTF-8">, nie <meta encoding="UTF-8">), róż­ni­ca między atry­bu­tem src, który wska­zu­je plik do wsta­wie­nia, na przy­kład gra­fi­kę, a atry­bu­tem href, który wska­zu­je cel od­no­śni­ka albo do­łą­cza­ny arkusz stylów, oraz na­rzę­dzie do wska­zy­wa­nia błędów skład­ni, czyli wa­li­da­tor, a nie kom­pi­la­tor, de­bug­ger czy in­ter­pre­ter. Osobno warto za­pa­mię­tać, że dane wi­docz­ne w ad­re­sie po wy­sła­niu for­mu­la­rza to metoda GET. Py­ta­nia o po­zy­cjo­no­wa­nie i off-page SEO (po­zy­ski­wa­nie linków ze­wnętrz­nych pro­wa­dzą­cych do strony) należą do działu o opty­ma­li­za­cji: tu wy­star­czy nie mylić wa­li­da­cji z po­zy­cjo­no­wa­niem.
W części prak­tycz­nej ta lekcja pil­nu­je trzech rzeczy. Plik strony ma leżeć w ka­ta­lo­gu, który ob­słu­gu­je serwer (w XAMPP jest to htdocs), pod nazwą i w pod­ka­ta­lo­gu po­da­nym w ar­ku­szu. Wi­try­nę otwie­ra się ad­re­sem w ro­dza­ju http://localhost/sklep/index.html, bo tylko wtedy serwer wykona skryp­ty PHP; plik otwar­ty po­dwój­nym klik­nię­ciem pokaże kod skryp­tu za­miast jego wyniku. Trze­cia rzecz to plik z nazwą prze­glą­dar­ki: część ar­ku­szy każe za­pi­sać w pliku tek­sto­wym (na przy­kład przegladarka.txt) nazwę prze­glą­dar­ki, w której spraw­dza­no wi­try­nę, i ten plik rów­nież jest oce­nia­ny.

Ściąga

Po­ję­cie
Znaczy
klient
prze­glą­dar­ka, wysyła żą­da­nie
serwer WWW
pro­gram od­da­ją­cy pliki, w XAMPP jest to Apache
części URL
sche­mat, host, port, ścież­ka, za­py­ta­nie, frag­ment
porty do­myśl­ne
80 dla HTTP, 443 dla HTTPS
200, 301
zasób oddany; zasób prze­nie­sio­ny na stałe
403, 404
dostęp za­bro­nio­ny; nie zna­le­zio­no zasobu
500
błąd po stro­nie ser­we­ra, zwykle w skryp­cie
GET
dane w ad­re­sie, wi­docz­ne, można za­pi­sać w za­kład­ce
POST
dane w treści żą­da­nia, w ad­re­sie nie­wi­docz­ne
po­bie­ra­nie (download)
dane z ser­we­ra do klien­ta
wy­sy­ła­nie (upload)
dane z klien­ta do ser­we­ra, także wgra­nie wi­try­ny przez FTP
W3C
or­ga­ni­za­cja usta­la­ją­ca stan­dar­dy WWW, w tym HTML
<!DOCTYPE html>
do­ku­ment w HTML5
<br />
zapis z XHTML, w HTML5 wy­star­czy <br>
<meta charset="UTF-8">
de­kla­ra­cja ko­do­wa­nia; plik trzeba też ZAPISAĆ w UTF-8
ścież­ka względ­na
obrazy/mysz.jpg, ../styl.css; na eg­za­mi­nie nigdy C:\
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: HTML na egzaminie INF.03następna: Szkielet dokumentu HTML5: doctype, head, meta, title, bodyspis działu: HTML

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (39)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.