Plik HTML zwykle nie wymaga specjalnego programu, żeby go wyświetlić. Wystarczy przeglądarka, ale sposób otwarcia zależy od tego, czy chcesz tylko zobaczyć gotową stronę, czy również podejrzeć i zmienić kod. Pokażę, jak otworzyć plik HTML na komputerze i telefonie, co zrobić przy błędach oraz kiedy przyda się lokalny serwer.

Najprostszy sposób na otwarcie pliku HTML

Jeżeli chcesz zobaczyć stronę tak, jak interpretuje ją przeglądarka, znajdź plik z rozszerzeniem .html lub .htm i kliknij go dwukrotnie. System uruchomi program ustawiony jako domyślna przeglądarka. Do prostych dokumentów to zazwyczaj najszybsza i najlepsza metoda.

Gdy plik otwiera się w niewłaściwej aplikacji, kliknij go prawym przyciskiem myszy i wybierz „Otwórz za pomocą”. Wskaż Chrome, Microsoft Edge, Firefox, Safari albo inną przeglądarkę. Możesz też przeciągnąć plik bezpośrednio do otwartego okna przeglądarki.

Jeśli przeglądarka jest już uruchomiona, możesz użyć skrótu Ctrl+O w Windowsie i Linuksie albo Command+O na macOS. Wybierz dokument z dysku, a program wyświetli go jako lokalną stronę, często z adresem zaczynającym się od file://.

Jak otworzyć kod HTML do edycji

Przeglądarka pokazuje efekt końcowy, ale nie służy do wygodnego pisania kodu. Aby zobaczyć znaczniki, kliknij plik prawym przyciskiem i wybierz „Otwórz za pomocą”, a następnie Notatnik, Notepad++ lub Visual Studio Code.

W edytorze zobaczysz między innymi znaczniki takie jak

Najczęstszy problem pojawia się podczas zapisywania dokumentu w Notatniku. W polu typu pliku wybierz „Wszystkie pliki”, wpisz nazwę na przykład index.html i ustaw kodowanie UTF-8. Jeżeli zapiszesz dokument jako index.html.txt, system może ukrywać końcówkę nazwy i plik nie będzie działał tak, jak oczekujesz.

  
  


  
Działa

W praktyce polecam edytor kodu zamiast zwykłego Notatnika. Kolorowanie składni, numerowanie wierszy i podpowiedzi szybko pokazują brakujący cudzysłów albo zamknięcie znacznika, czyli błędy, których początkujący często szukają godzinami.

Co zrobić, gdy strona HTML wyświetla się nieprawidłowo

Sam dokument może otworzyć się poprawnie, a mimo to wyglądać inaczej niż oczekujesz. Najczęściej winne są błędne ścieżki do plików, brak arkusza CSS albo obraz zapisany w innym folderze.

Sprawdź strukturę folderów

Jeżeli kod zawiera , plik graficzny powinien znajdować się w podfolderze images obok dokumentu HTML. Podobnie działa odwołanie do arkusza stylów, na przykład css/style.css. Przeniesienie samego pliku HTML bez pozostałych elementów często powoduje zniknięcie obrazów i stylów.

Odśwież stronę po zapisaniu zmian

Po każdej edycji zapisz plik i odśwież widok. Jeśli przeglądarka pokazuje starą wersję, użyj twardego odświeżenia Ctrl+F5 w Windowsie lub Command+Option+R na macOS. Zwykłe przeładowanie czasem korzysta z zapisanej wcześniej kopii arkusza CSS albo skryptu.

Przeczytaj również: Strony HTML: Przykłady, kod i nauka krok po kroku

Rozróżnij podgląd od uruchamiania aplikacji

Prosta strona z tekstem, obrazami i stylami zwykle działa bez internetu oraz bez serwera. Problemy mogą pojawić się przy funkcjach korzystających z modułów JavaScript, żądań do API, lokalnych plików danych albo mechanizmów bezpieczeństwa przeglądarki. Wtedy otwarcie dokumentu przez file:// może nie wystarczyć.

Czy plik HTML można otworzyć na telefonie

Na Androidzie najczęściej trzeba znaleźć dokument w aplikacji Pliki, wybrać „Otwórz za pomocą” i wskazać przeglądarkę lub aplikację do podglądu HTML. Efekt zależy od producenta telefonu, wersji systemu i miejsca, w którym zapisano plik.

Na iPhonie i iPadzie otwieranie lokalnych dokumentów bywa bardziej ograniczone. Najwygodniej zapisać plik w aplikacji Pliki i wybrać podgląd, ale nie każda strona z dodatkowymi skryptami zadziała identycznie jak na komputerze. Do samego sprawdzenia tekstu lub prostego układu zazwyczaj to wystarczy.

Jeżeli dokument zawiera kilka folderów, obrazów i arkuszy CSS, pojedyncze przesłanie pliku na telefon może nie dać dobrego rezultatu. Trzeba przenieść cały katalog projektu albo udostępnić stronę przez serwer, inaczej przeglądarka nie znajdzie plików zależnych.

Kiedy warto uruchomić lokalny serwer

Lokalny serwer nie jest potrzebny do każdego pliku HTML. Przydaje się wtedy, gdy projekt korzysta z modułów JavaScript, pobiera dane, używa routingu albo ma zachowywać się podobnie do strony umieszczonej w internecie.

Jedną z prostych metod jest otwarcie terminala w folderze projektu i uruchomienie polecenia:

python -m http.server 8000

Następnie stronę otwiera się w przeglądarce pod adresem lokalnym z portem 8000. Nie trzeba tego robić przy jednorazowym podglądzie wizytówki czy prostego ćwiczenia z HTML. Przy większym projekcie lokalny serwer ogranicza jednak liczbę niespodzianek przed publikacją.

Warto też pamiętać, że lokalny serwer nie publikuje strony w internecie. Działa tylko na Twoim komputerze, dopóki proces jest uruchomiony, więc jest bezpiecznym środowiskiem do testów i nauki.

Co sprawdzić przed przeniesieniem pliku na inny komputer

Przed wysłaniem strony komuś innemu sprawdź, czy główny dokument ma poprawne rozszerzenie i czy wszystkie pliki zależne znajdują się w jednym katalogu projektu. Ja zwykle testuję stronę po skopiowaniu całego folderu do innej lokalizacji, bo szybko pokazuje to odwołania zapisane przypadkiem jako ścieżki absolutne.

• Upewnij się, że nazwa pliku kończy się na .html, a nie .html.txt.
• Sprawdź wielkość liter w nazwach plików i folderów.
• Dołącz obrazy, arkusze CSS oraz skrypty JavaScript.
• Otwórz stronę w co najmniej dwóch przeglądarkach, jeśli ma działać u innych osób.
• Przetestuj linki i przyciski po przeniesieniu całego folderu.

Najkrótsza odpowiedź brzmi więc tak: do oglądania wybierz przeglądarkę, a do poprawiania kodu użyj edytora. Gdy dokument korzysta z bardziej zaawansowanych funkcji, uruchom lokalny serwer i trzymaj wszystkie elementy projektu w jednej, uporządkowanej strukturze.