4 sytuacje, w których dwuklik na index.html otwiera stronę, a nie edytor
Zacznij od pytania, czy dana treść ma sens w oderwaniu od reszty strony. Wpis na blogu, komentarz użytkownika, recenzja produktu czy pojedynczy post na forum to article. Rozdział w artykule, sekcja z pytaniami i odpowiedziami albo blok z danymi kontaktowymi to section. Praktyczna zasada: article może mieć własny nagłówek, autora i datę, a section dziedziczy kontekst po rodzicu.<br>
<br>
<br>
<br>
Pierwszy typowy błąd to zapisywanie grafiki z ostrymi krawędziami (tekst, logotypy, ikony) w formacie JPEG. Ten format nie nadaje się do takich obrazów. Nawet przy wysokiej jakości (np. 90–95) na krawędziach pojawią się artefakty, bo algorytm zawsze coś odrzuci. Drugi błąd: zbyt mocna redukcja jakości „na oko" – patrzysz na cały obraz, a nie na powiększenie krawędzi. Trzeci: wielokrotne zapisywanie tego samego pliku JPEG. Każdy zapis to kolejna strata, a krawędzie degradują się lawinowo.<br>
<br>
<br>
<br>
Najczęstszy błąd to liczenie na palcach sumy marginesów i wpisywanie wartości, które i tak się zapadną. Zamiast zgadywać, ustawiaj odstęp tylko z jednej strony — na przykład wyłącznie margines dolny akapitu — i konsekwentnie się tego trzymaj. Drugi typowy problem to mieszanie marginesów z paddingiem w nadziei, że oba się dodadzą. Padding nigdy się nie zapada i zawsze powiększa obszar elementu, więc jego rola jest inna. Trzeci błąd to walka z zapadaniem za pomocą ujemnych marginesów bez zrozumienia, że przy dwóch wartościach ujemnych wynik nadal będzie ujemny.<br>
<br>
<br>
<br>
Elementy article i section wyglądają podobnie w kodzie, ale mają różne zadania. Article opisuje samodzielną całość, którą można wyjąć z kontekstu i opublikować gdzie indziej bez utraty sensu. Section to tematyczny fragment większej całości, który bez kontekstu traci znaczenie. Jeśli zamieniasz je bezrefleksyjnie, roboty wyszukiwarek i czytniki ekranu dostają mylące informacje o strukturze treści.<br>
<br>
<br>
<br>
Podobnie dzieje się na dole: margines ostatniego dziecka może wyjść poza rodzica, gdy ten nie ma dolnego obramowania, wypełnienia ani niczego po dziecku. Jeśli zależy na trzymaniu odstępu wewnątrz, stosuje się te same techniki. Warto pamiętać, że elementy pływające oraz pozycjonowane absolutnie nie biorą udziału w zapadaniu — ich marginesy zachowują się inaczej niż w zwykłym przepływie.<br>
<br>
<br>
<br>
Gdy układ przestaje być przewidywalny, sprawdź w narzędziach deweloperskich, który margines faktycznie wygrywa. Podświetlenie elementu pokazuje, gdzie kończy się jeden blok, a zaczyna drugi, i od razu widać, czy odstęp pochodzi z marginesu, czy z wypełnienia. W nowoczesnych układach opartych na flexboxie i gridzie zapadanie nie występuje między elementami potomnymi — tam odstępy ustawia się przez gap, co bywa prostsze i mniej zaskakujące. Jeśli więc projekt na to pozwala, rozważ rezygnację z marginesów pionowych na rzecz jednolitego odstępu w kontenerze.<br>
<br>
<br>
<br>
Kiedy dwuklik nie wystarcza i trzeba lokalnego serwera Drugi przypadek to strona, która wygląda dobrze, ale nie działa. Dzieje się tak przy plikach ładowanych przez JavaScript, na przykład danych z pliku JSON, modułów ES czy zapytań do plików lokalnych. Przeglądarki blokują takie operacje dla adresów file:// ze względów bezpieczeństwa. Objawia się to błędem w konsoli o blokadzie CORS albo pustą sekcją, która powinna być wypełniona danymi. Wtedy dwuklik nie pomoże — potrzebny jest lokalny serwer HTTP. Można go uruchomić jednym poleceniem w terminalu z katalogu projektu, a przeglądarka otworzy stronę pod adresem lokalnym. Dopiero wtedy JavaScript działa tak, jak na prawdziwym hostingu.<br>
<br>
<br>
<br>
Plik index.html na dysku to zwykły plik tekstowy, ale system widzi w nim stronę internetową, bo rozpoznaje rozszerzenie .html. Dwuklik nie „uruchamia" serwera ani nie kompiluje kodu — przekazuje po prostu ścieżkę pliku do domyślnej przeglądarki. Adres w pasku zaczyna się wtedy od file://, a nie od http://, i to jest najważniejsza różnica, którą trzeba zrozumieć, zanim zacznie się szukać błędów.<br>
<br>
<br>
<br>
Trzeci częsty błąd to praca na pliku z rozszerzeniem .txt albo bez rozszerzenia. System nie rozpozna go jako strony i otworzy w notatniku. Zmiana nazwy na index.html załatwia sprawę, ale trzeba pamiętać, że sam dwuklik nie odświeży już otwartej karty — po każdej zmianie w kodzie wciśnij F5 lub Ctrl+R, żeby zobaczyć efekt. Przy edycji wielu plików warto trzymać je w jednym folderze i otwierać index.html z tego samego miejsca, inaczej ścieżki relatywne przestaną się zgadzać.<br>
<br>
<br>
<br>
Uwaga na ścieżki. Gdy plik index.html leży w podfolderze, a odwołania do stylów i skryptów zaczynają się od ukośnika, przeglądarka szuka ich od korzenia dysku, a nie od folderu projektu. Dlatego lokalnie lepiej używać ścieżek relatywnych, takich jak style.css czy skrypt.js, bez początkowego ukośnika. Po wgraniu na serwer można je zmienić, jeśli hosting wymaga innego układu. Sprawdzenie konsoli przeglądarki pod klawiszem F12 pokaże brakujące pliki i błędy wczytywania.