Jak działa strona internetowa: przeglądarka, serwer, adres

Przez najbliższe tygodnie będziesz robić w kółko to samo: zapisujesz plik, odświeżasz przeglądarkę, patrzysz na wynik. Jeśli wiesz, co się dzieje między zapisem a wynikiem, sama znajdziesz połowę swoich błędów. Bez tego zostaje zgadywanie.

Strona internetowa to plik z tekstem. Przeglądarka czyta ten tekst i na jego podstawie rysuje to, co widzisz na ekranie.

Cała droga ma trzy etapy:

1. Adres. Wpisujesz wiedzmin.pl i mówisz przeglądarce, czego chcesz.
2. Serwer. To komputer, który stoi gdzieś w szafie i cały czas czeka na pytania. Dostaje pytanie, odsyła plik.
3. Przeglądarka. Dostaje plik, czyta go od góry do dołu i rysuje stronę na ekranie.

Adres też ma budowę. Zobacz:

https://www.thewitcher.com/pl/witcher3
└─┬──┘  └──────┬───────────┘└────┬─────┘
protokół    domena          ścieżka

Protokół to język rozmowy, https znaczy „po szyfrowanym połączeniu". Domena to nazwa serwera, czyli adres szafy. Ścieżka to wskazanie konkretnego pliku na tym serwerze. Ostatni człon zapamiętaj, bo folder z plikami zbudujesz sobie w lekcji 5 i ścieżki będą tam działać dokładnie tak samo.

Przykład

Tak wygląda plik, który serwer wysyła przeglądarce. To cała strona, kompletna:

<h1>Wiedźmin 3: Dziki Gon</h1>
<p>Ostatnia gra o Geralcie z Rivii.</p>

Przeglądarka czyta te dwie linijki i rysuje duży, gruby napis, a pod nim mniejszy akapit. W pliku jest sam opis treści. Wygląd przeglądarka dokłada z własnych domyślnych ustawień.

Drugi przykład, bliższy prawdy:

<h1>Wiedźmin 3: Dziki Gon</h1>
<p>Ostatnia gra o Geralcie z Rivii.</p>
<img src="img/hero-keyart.jpg" alt="Geralt na tle gór">

Doszła linijka ze zdjęciem. Zwróć uwagę na img/hero-keyart.jpg. To nie jest zdjęcie, to adres zdjęcia. Przeglądarka przeczyta tę linijkę, wróci na serwer i poprosi o kolejny plik. Jedna strona to zwykle kilkanaście osobnych pobrań.

Z tego jednego zdania bierze się najczęstszy błąd na starcie.

Skoro img/hero-keyart.jpg to adres, a nie zdjęcie, to wystarczy przenieść plik do innego folderu i zamiast zdjęcia zobaczysz połamaną ikonkę. Nic się nie zepsuło. Przeglądarka poszła pod podany adres, nic tam nie zastała i pokazała to uczciwie. Twoim zadaniem będzie poprawić adres, nie zdjęcie.

Ta sama zasada wróci przy plikach CSS, przy podstronach i przy ikonie w karcie przeglądarki. Zawsze chodzi o to samo: przeglądarka wie tylko tyle, ile jej napiszesz.

Otwórz folder wiedzmin3-demo i kliknij dwa razy na plik index.html. Otworzy się w przeglądarce.

To jest cała strona, którą zbudujesz do końca kursu, łącznie z galerią, tabelą i formularzem.

Poklikaj po niej chwilę:

• Kliknij pozycję w górnym menu. Strona przeskoczy do sekcji, adres na górze się zmieni.
• Zjedź na sam dół i wróć na górę. Zobacz, że pasek z menu zostaje przyklejony.
• Najedź kursorem na zdjęcie w galerii. Powiększy się.
• Zwęź okno przeglądarki, przeciągając jego prawą krawędź. Układ się przestawi.

Wszystko, co widzisz, siedzi w plikach z tekstem, które da się otworzyć w notatniku. Żadnych gotowych szablonów ani wtyczek. Każdą z tych rzeczy napiszesz sama.

Uwaga na to

Adres zaczyna się od file:///, nie od https://. Tak ma być. Otworzyłaś plik z dysku, nie z internetu. Serwera w tym momencie nie ma, przeglądarka wzięła plik prosto z folderu. Od lekcji 4 będziesz używać Live Servera i adres zmieni się na http://127.0.0.1:5500.

Zdjęcia się nie wyświetlają. Prawie zawsze znaczy to, że folder img został gdzieś po drodze zgubiony albo strona została skopiowana bez niego. Sprawdź, czy index.html i folder img leżą obok siebie.

Podsumowanie

• Strona to plik z tekstem, a nie obrazek ani program.
• Serwer odsyła plik, przeglądarka go czyta i rysuje.
• Adres składa się z protokołu, domeny i ścieżki.
• Zdjęcia i inne pliki są tylko adresowane z pliku strony, każdy pobiera się osobno.
• Zły adres to najczęstsza przyczyna „nie działa", zanim jeszcze zaczniesz pisać kod.