Najprościej: połącz pliki, dodając w HTML zewnętrzny arkusz stylów i skrypt JS. W sekcji head linkujesz CSS, a tuż przed zamknięciem body dołączasz JavaScript.
Jak to zrobić (minimalny przykład):
-
Struktura projektu:
-
index.html
-
style.css
-
app.js
-
index.html:
-
W head dodaj styl:
-
Przed końcem body dodaj skrypt:
-
Alternatywy:
-
Osadzony CSS: wstaw
w sekcji head (dobre do małych fragmentów).
-
Osadzony JS: wstaw w body lub head (małe skrypty, prototypy).
Co można tam “załatwić” (czyli jakie funkcje ogarniesz w takim projekcie):
- HTML: struktura treści (nagłówki, sekcje, formularze, tabele).
- CSS: styl i layout (kolory, typografia, siatki, responsywność, animacje).
- JavaScript: interakcje i logika (walidacja formularzy, obsługa zdarzeń, dynamiczne modyfikacje DOM, komunikacja z API, zapisy w localStorage).
Dobre praktyki integracji:
- Umieszczaj skrypt na końcu body, by nie blokować renderowania.
- Trzymaj CSS i JS w osobnych plikach (lepsza organizacja i cache).
- Formatuj i utrzymuj spójny styl kodu narzędziami typu Prettier (obsługuje HTML, CSS, JS).
Inne formy kontaktu na stronie:
- Link do e‑maila: Napisz do nas
- Link telefoniczny (na mobile): +48 11 222 33 44
- Linki do mediów społecznościowych: Facebook i analogicznie dla innych
- Formularz kontaktowy (HTML + JS do walidacji; opcjonalnie wysyłka przez backend lub usługę zewnętrzną).
- Odnośniki do zewnętrznych stron/zasobów (pełny adres URL, gdy wychodzisz poza domenę).
Przykładowe “gołe” pliki:
-
index.html
Kontakt Email: [email protected]
Telefon: +48 123 456 789
WWW: twojadomena.pl
-
style.css body { font-family: system-ui, sans-serif; margin: 0 auto; max-width: 720px; padding: 16px; } input, textarea { display: block; width: 100%; margin: 8px 0; padding: 8px; }
-
app.js const form = document.getElementById(’contact-form’); form.addEventListener(’submit’, (e) => { e.preventDefault(); // Prosta walidacja const data = Object.fromEntries(new FormData(form)); if (!data.name || !data.email || !data.message) { alert(’Uzupełnij wszystkie pola.’); return; } // Tu: wyślij do backendu lub usługi zewnętrznej (fetch) console.log(’Wiadomość:’, data); alert(’Dzięki! Skontaktujemy się wkrótce.’); form.reset(); });
Gdzie dalej pójść:
- Jeśli chcesz celować w mobile (Android/iOS) z HTML/CSS/JS, rozważ podejścia hybrydowe i frameworki — to pozwala użyć web stacku w aplikacjach mobilnych, z kompromisami wydajności/dostępu do funkcji natywnych.
- Utrzymuj czytelność/formatowanie kodu narzędziami typu Prettier, które obsługują HTML, CSS i JS.
