Aby wyświetlić kod HTML na stronie internetowej, kluczowe jest rozróżnienie między dwoma potrzebami: chęcią podejrzenia kodu źródłowego istniejącej strony oraz prezentacją kodu HTML innym użytkownikom w formie czytelnego fragmentu na stronie (np. w kursach i poradnikach). W tym poradniku szczegółowo omówimy oba przypadki, podając praktyczne przykłady i zastosowania.
Podgląd kodu HTML istniejącej strony
Na komputerze (desktop)
Aby obejrzeć kod HTML dowolnej strony internetowej, możesz użyć narzędzi wbudowanych w przeglądarkę. Oto najczęstsze sposoby:
- Google Chrome, Mozilla Firefox, Microsoft Edge –
- Kliknij prawym przyciskiem myszy na stronie,
- wybierz opcję „Wyświetl źródło strony” lub „Zbadaj element” (w Chrome i Firefox opcja ta może nazywać się „Inspect Element” lub „Zbadaj” zależnie od wersji językowej przeglądarki),
- po wybraniu „Wyświetl źródło strony” zobaczysz pełny kod HTML danej strony w nowej karcie,
- po wybraniu „Zbadaj element” otworzy się panel deweloperski, gdzie możesz dynamicznie przeglądać strukturę HTML oraz zmieniać zawartość na bieżąco.
- Skrót klawiaturowy –
- w większości przeglądarek: Ctrl + U (Windows) lub Cmd + U (Mac) – otwiera źródło strony HTML,
- Ctrl + Shift + I (Windows) lub Cmd + Option + I (Mac) – otwiera narzędzia deweloperskie.
Na telefonie (mobile)
Przeglądarki mobilne także oferują podobną funkcjonalność, choć często jest ona mniej dostępna dla zwykłych użytkowników lub wymaga dodatkowych narzędzi. Najczęściej:
- skorzystaj z menu głównego przeglądarki (np. trzy kropki w Chrome), znajdź sekcję „Narzędzia dla deweloperów” lub analogiczne opcje,
- niektóre przeglądarki oraz aplikacje mobilne umożliwiają wpisanie przed adresem strony „view-source:”, np.
view-source:https://twojastrona.pl, by zobaczyć surowy kod HTML.
Wyświetlanie kodu HTML jako treści na stronie
Często celem jest zaprezentowanie fragmentów kodu HTML czytelnikom (np. w poradnikach, dokumentacji, kursach). Przy próbie wklejenia instrukcji typu <h1>Przykład</h1> bezpośrednio do kodu strony, przeglądarka zinterpretuje to jako znacznik HTML, a nie pokaże jako tekst. Aby przedstawić kod dosłownie, zastosuj jeden z poniższych sposobów:
Znaczniki pre i code
Używaj znaczników <pre> oraz <code> do prezentowania fragmentów kodu. Takie podejście sprawia, że tekst wyświetlany jest w stałej szerokości znaków i nie jest interpretowany jako kod HTML.
<pre><code><h1>To jest nagłówek</h1>
<p>Oto akapit tekstu HTML</p>
</code></pre>
Efekt na stronie –
<h1>To jest nagłówek</h1>
<p>Oto akapit tekstu HTML</p>
Wszystkie znaki „<" i ">” zamieniono na encje specjalne: < oraz >, aby przeglądarka nie interpretowała ich jako kod znaczników.
Encje HTML
Jeśli pokazujesz krótki fragment kodu w linii tekstu, użyj encji znaków:
Aby utworzyć nagłówek, użyj: <h1>Twój nagłówek</h1> Wyświetlanie: Aby utworzyć nagłówek, użyj: <h1>Twój nagłówek</h1>
Wtyczki i frameworki
Na systemach typu WordPress lub podczas korzystania z frameworków front-endowych dostępne są liczne wtyczki oraz biblioteki do podświetlania składni (np. highlight.js, Prism.js). Takie rozwiązania nie tylko poprawiają czytelność kodu, ale także umożliwiają automatyczną zamianę znaków specjalnych.
Zastosowanie CSS do prezentacji kodu
Dodając style CSS do znaczników <pre><code>, można dodatkowo podnieść estetykę prezentacji kodu:
pre code {
background-color: #f4f4f4;
padding: 10px;
display: block;
border-radius: 5px;
font-size: 16px;
color: #222;
}
Przykładowe zastosowania
- Kursy HTML/CSS – prezentacja instrukcji krok po kroku;
- Dokumentacja techniczna – pokazanie kodu do kopiowania;
- Poradniki na blogach – fragmenty kodu do edycji przez czytelników;
- Fora dla programistów – szybka wymiana fragmentów kodu.
Wiedząc, jak wyświetlić kod HTML na stronie oraz jak go zaprezentować czytelnie innym użytkownikom w formie treści poradnika, można tworzyć lepsze kursy, dokumentacje i publikacje edukacyjne w internecie. Najważniejsze jest stosowanie znaczników <pre>, <code> oraz poprawnych encji znaków, aby uniknąć niepożądanej interpretacji kodu przez przeglądarkę i zapewnić czytelność dla odbiorców.
