Aby włączyć kod HTML na stronie internetowej, należy wprowadzić własny kod do odpowiedniej sekcji edytora lub kreatora strony. Dokładny sposób zależy od systemu, jakiego używasz (np. WordPress, dedykowany kreator czy edytor kodu). Poniżej prezentuję szczegółowy poradnik, omawiając różne metody wraz z przykładami zastosowań.
Wstawianie kodu HTML w kreatorach stron
W nowoczesnych kreatorach internetowych najczęściej znajdziesz specjalny element „Własny kod”.
Jak to zrobić –
- Wejdź do edytora swojej strony,
- odnajdź i kliknij ikonę „Dodaj elementy”,
- przeciągnij na stronę element „Własny kod”,
- kliknij wstawiony element, aby otworzyć jego właściwości,
- wklej/napisz kod HTML w wyznaczonym miejscu.
W ten sam sposób możesz wprowadzać również kod CSS (w tagu <style>) lub JavaScript (w tagu <script>).
Przykład użycia elementu „Własny kod”:
<!-- Prosty przycisk CTA -->
<button onclick="alert('Dziękujemy za kliknięcie!')">Kliknij mnie!</button>
Uwaga – kreatory często umożliwiają pozycjonowanie bezwzględne tego elementu, co pozwala przesuwać wstawiony kod w dowolne miejsce na stronie, jednak nie zawsze jest to zalecane ze względu na responsywność strony na urządzeniach mobilnych.
Dodawanie kodu HTML w WordPressie
W systemie WordPress możesz dodać własny kod HTML zarówno do wpisów, stron, jak i widżetów.
Blok „Niestandardowy HTML” (Gutenberg) –
- Przejdź do edycji strony lub wpisu,
- kliknij „+”, aby dodać nowy blok,
- wyszukaj blok „Niestandardowy HTML”,
- wklej kod HTML.
Przykład użycia w bloku:
<!-- Formularz kontaktowy -->
<form>
<input type="text" name="name" placeholder="Twoje imię">
<input type="email" name="email" placeholder="Twój e-mail">
<button type="submit">Wyślij</button>
</form>
Dodawanie HTML w widżetach –
- Przejdź do „Wygląd” > „Widżety”,
- dodaj widżet „Niestandardowy HTML”,
- wklej kod.
Wstawianie kodu HTML bezpośrednio w plikach strony
Zaawansowani użytkownicy mogą edytować pliki .html strony lub pliki szablonów w katalogu projektu. W tym przypadku kod HTML można umieszczać bezpośrednio w strukturze strony, modyfikując np. plik index.html lub header.php (w przypadku WordPressa).
Typowe zastosowania wstawiania kodu HTML
Oto przykłady najpopularniejszych zastosowań własnych fragmentów HTML na stronie internetowej:
- Dodanie elementów interaktywnych – własne przyciski, pola formularzy, odtwarzacze multimedialne;
- Osadzanie widgetów zewnętrznych – np. mapy Google, wideo z YouTube, okienka czatu, zewnętrzne formularze.
<!-- Osadzenie filmu z YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_FILMU" frameborder="0" allowfullscreen></iframe>
- Dodatkowe style i animacje – własny kod CSS może uzupełniać lub modyfikować wygląd wybranych elementów.
<style>
.podkreslony { text-decoration: underline; color: #0073e6; }
</style>
<p class="podkreslony">Ten tekst jest podkreślony i niebieski.</p>
- Integracja narzędzi analitycznych – np. skrypty Google Analytics czy Facebook Pixel w nagłówku lub stopce strony.
<!-- Przykład wstawienia kodu śledzenia Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-X');
</script>
Przydatne wskazówki
- Testuj wprowadzane fragmenty – nieprawidłowy kod HTML może zepsuć układ strony;
- Ostrożnie z JavaScriptem – niewłaściwie wstawiony kod może wpływać na bezpieczeństwo strony;
- Responsywność – wstawiając własny kod, zwróć uwagę, jak strona wygląda na smartfonach i tabletach. Możesz ukryć niektóre elementy na urządzeniach mobilnych za pomocą ustawień kreatora lub warunkowych stylów CSS.
Podsumowanie –
Dzięki funkcji dodawania własnego kodu HTML serwisy internetowe można rozszerzać o dowolne niestandardowe funkcje i integracje. Każdy system oferuje narzędzia umożliwiające łatwe wprowadzenie kodu, a praktyczne przykłady pokazują, jak elastycznie można budować nowoczesne strony internetowe.
