Masz zapisany dokument z rozszerzeniem .html, ale po dwukrotnym kliknięciu otwiera się nie w tym programie, którego potrzebujesz? Pokażę Ci, jak otworzyć plik html w przeglądarce, jak podejrzeć jego kod oraz kiedy zwykłe otwarcie z dysku nie wystarczy. Dodaję też rozwiązania typowych problemów z rozszerzeniem .html, kodowaniem znaków i plikami CSS lub JavaScript.
Plik HTML można otworzyć jako stronę albo kod
- Przeglądarka pokaże gotowy efekt strony.
- Edytor kodu pozwoli zmieniać znaczniki HTML.
- Najprościej użyć menu Otwórz za pomocą albo przeciągnąć plik do okna przeglądarki.
- Rozszerzenie .html nie może zostać przypadkowo zapisane jako .txt.
- Przy bardziej złożonych projektach przyda się lokalny serwer.
Najprostszy sposób to przeglądarka
Jeśli chcesz tylko zobaczyć stronę, nie potrzebujesz specjalistycznego programu. Plik HTML otworzysz w przeglądarce takiej jak Chrome, Edge, Firefox albo Safari, ponieważ to właśnie ona interpretuje znaczniki i wyświetla ich efekt wizualny.
Na komputerze z Windows kliknij plik prawym przyciskiem myszy, wybierz Otwórz za pomocą i wskaż wybraną przeglądarkę. Możesz też przeciągnąć dokument z Eksploratora plików bezpośrednio do otwartego okna Chrome lub Edge. To mój ulubiony sposób przy szybkim sprawdzaniu pojedynczego dokumentu, bo nie wymaga zmiany ustawień systemowych.
- Znajdź plik z końcówką
.htmllub.htm. - Kliknij go dwukrotnie albo wybierz opcję Otwórz za pomocą.
- Wskaż przeglądarkę internetową.
- Po zapisaniu zmian w kodzie odśwież stronę skrótem Ctrl + R lub Cmd + R na macOS.
| System | Najwygodniejsza metoda | Przydatny skrót |
|---|---|---|
| Windows | Prawy przycisk myszy i „Otwórz za pomocą” | Ctrl + O w przeglądarce |
| macOS | Kliknięcie pliku z wciśniętym klawiszem Control i wybór programu | Cmd + O w przeglądarce |
| Linux | Otworzenie dokumentu w menedżerze plików lub przeciągnięcie go do przeglądarki | Ctrl + O w przeglądarce |
Jeżeli przeglądarka wyświetla pustą stronę, nie musi to oznaczać uszkodzenia pliku. Dokument może po prostu zawierać niewiele treści albo błędny kod, dlatego przydatne będzie otwarcie go również w edytorze.
Podgląd strony i edycja kodu to dwie różne rzeczy
Przeglądarka pokazuje rezultat działania HTML, ale nie jest wygodnym miejscem do zmieniania pliku. Gdy wybierzesz Wyświetl źródło strony albo użyjesz narzędzi deweloperskich, oglądasz kod, lecz zwykle nie zapisujesz w ten sposób zmian w oryginalnym dokumencie.
Do edycji użyj programu tekstowego. Na początek wystarczy systemowy Notatnik, choć przy dłuższym kodzie znacznie lepiej sprawdzi się Visual Studio Code, Notepad++ lub inny edytor z kolorowaniem składni. Kolorowanie nie zmienia kodu, ale pozwala szybciej zauważyć brakujący cudzysłów, zamknięty znacznik albo literówkę.
Jak otworzyć kod HTML w Windows
Kliknij plik prawym przyciskiem, wybierz Otwórz za pomocą, a potem Notatnik lub edytor kodu. Jeśli chcesz ustawić stały program, zaznacz opcję używania go zawsze dla plików tego typu. Przy okazji sprawdź, czy system pokazuje rozszerzenia nazw plików, ponieważ bez tego łatwo pomylić dokument strona.html z plikiem strona.html.txt.
Jak zrobić to na macOS
W Finderze kliknij dokument z wciśniętym klawiszem Control, wybierz Otwórz za pomocą i wskaż przeglądarkę albo edytor. W przypadku TextEdit trzeba pracować w trybie zwykłego tekstu, a nie sformatowanego dokumentu. Inaczej program może dodać własne elementy formatowania i zapisać plik w sposób, którego przeglądarka nie odczyta prawidłowo.
Ja rozdzielam te zastosowania bardzo konsekwentnie. Przeglądarka służy do testowania wyglądu, a edytor do poprawiania kodu. Dzięki temu nie próbuję naprawiać strony w narzędziu, które tylko pokazuje jej wynik.
Co sprawdzić, gdy plik nie działa
Najczęściej problem nie leży w samej przeglądarce, lecz w sposobie zapisania dokumentu albo w odwołaniach do dodatkowych plików. Poniższe przypadki rozwiązują większość kłopotów początkujących osób.
| Problem | Możliwa przyczyna | Rozwiązanie |
|---|---|---|
| Otwiera się Notatnik zamiast strony | Nieprawidłowe skojarzenie pliku | Wybierz przeglądarkę przez „Otwórz za pomocą” |
| Widać kod zamiast gotowej strony | Plik ma rozszerzenie .txt albo został zapisany jako tekst | Włącz widoczność rozszerzeń i zmień nazwę na .html |
| Brakuje polskich znaków | Niewłaściwe kodowanie dokumentu | Zapisz plik jako UTF-8 |
| Nie ma stylów lub obrazów | Błędna ścieżka do pliku CSS albo grafiki | Sprawdź nazwy folderów, rozszerzenia i wielkość liter |
| Zmiany nie są widoczne | Przeglądarka pokazuje starszą wersję | Odśwież stronę, a w razie potrzeby użyj twardego odświeżenia |
Rozszerzenie .html.txt
To jeden z najbardziej podstępnych błędów. Windows może ukrywać znane rozszerzenia, więc plik wyglądający jak index.html w rzeczywistości bywa zapisany jako index.html.txt. W Eksploratorze plików włącz wyświetlanie rozszerzeń nazw, a potem usuń końcówkę .txt, jeśli rzeczywiście się pojawiła.
Przeczytaj również: Mail HTML: Jak stworzyć e-mail, który działa wszędzie? Poradnik
Obrazy, style i skrypty
HTML często korzysta z innych plików. Jeżeli dokument odwołuje się do style.css, plik CSS powinien znajdować się w miejscu zgodnym ze ścieżką wpisaną w kodzie. To samo dotyczy grafik i skryptów JavaScript. Jedna różnica w nazwie folderu lub wielkości liter może wystarczyć, aby element nie pojawił się na stronie.
Po każdej poprawce zapisz dokument i odśwież widok. Gdy rezultat nadal wygląda tak samo, wykonaj twarde odświeżenie albo zamknij kartę i otwórz plik ponownie. Przeglądarka potrafi przechowywać starszą wersję arkusza stylów, zwłaszcza podczas pracy nad projektem.
Kiedy zwykłe otwarcie z dysku nie wystarczy
Prosty dokument z nagłówkiem, tekstem i obrazkiem zwykle działa bez dodatkowej konfiguracji. Problemy zaczynają się przy funkcjach korzystających z modułów JavaScript, żądań fetch, danych zapisanych w przeglądarce albo zasad bezpieczeństwa wymagających połączenia przez lokalny serwer, a nie bezpośredniego pliku.
W takiej sytuacji zamiast otwierania dokumentu jako file:// uruchamiasz mały serwer na własnym komputerze. Możesz skorzystać z rozszerzenia Live Server w edytorze Visual Studio Code albo z wbudowanego serwera Pythona, uruchamiając w folderze projektu polecenie python -m http.server 8000. Na części komputerów z Windows zadziała również wariant py -m http.server 8000.
Po uruchomieniu serwera otwierasz wskazany lokalny adres z portem 8000 w przeglądarce. To rozwiązanie nie publikuje strony w internecie, lecz tworzy jej bezpieczny podgląd na Twoim komputerze. W codziennej pracy nad większym projektem różnica jest odczuwalna, bo obrazy, arkusze stylów i skrypty są ładowane podobnie jak na prawdziwym hostingu.
Jak bezpiecznie otwierać nieznane dokumenty
Sam plik HTML może zawierać skrypty JavaScript i odwołania do zewnętrznych zasobów. Dlatego nie otwieram bez zastanowienia dokumentów pobranych z przypadkowych wiadomości, forów czy załączników. Najpierw sprawdzam nazwę pliku, źródło i zawartość w edytorze, szczególnie gdy dokument nie był przeze mnie utworzony.
Podgląd lokalnego HTML w przeglądarce jest zwykle bezpieczny dla prostych plików, ale nie oznacza, że każdy dokument jest godny zaufania. Nie uruchamiaj nieznanego kodu z uprawnieniami administratora i nie wpisuj danych logowania na stronie, której pochodzenia nie znasz. Przy wątpliwościach pracuj na kopii i odłącz niepotrzebne dodatki lub dostęp do wrażliwych danych.
Dobry nawyk po otwarciu pliku HTML
Do szybkiego podglądu wystarczy przeciągnięcie dokumentu do przeglądarki. Do zmian wybierz edytor kodu, pilnuj rozszerzenia .html, zapisuj pliki w UTF-8 i sprawdzaj ścieżki do CSS, obrazów oraz JavaScriptu.
Jeśli projekt zaczyna korzystać z modułów lub komunikacji z serwerem, uruchom lokalny serwer zamiast otwierać dokument bezpośrednio z dysku. Taki prosty podział oszczędza czas i od początku przyzwyczaja do pracy bliższej temu, jak strona działa po publikacji.
