Dla ucznia – tworzenie stron lokalnie

Jak napisać dobry prompt do ChatGPT

Proste wskazówki, dzięki którym sztuczna inteligencja napisze dla Ciebie czytelny kod HTML i CSS.

💡Co to jest prompt?

Prompt to Twoje polecenie wpisane do ChatGPT. Im dokładniej opiszesz, czego potrzebujesz, tym lepszy kod strony otrzymasz.

pisz konkretnie

podaj temat strony

dodaj wymagania techniczne

poproś o wyjaśnienie kodu

1️⃣Napisz, czego dokładnie potrzebujesz

Zamiast krótkiego: „Napisz stronę”, napisz bardziej konkretnie:

jaki to typ strony (np. wizytówka, strona z zadaniem, portfolio ucznia),
jaki jest temat (np. „Moje hobby”, „Mój ulubiony sport”, „Jesienna prezentacja”),
czy potrzebujesz tylko HTML, czy też HTML + CSS.

2️⃣Napisz, że tworzysz stronę lokalnie

Dodaj, że jesteś uczniem i że zapisujesz plik na swoim komputerze (np. w Notatniku lub Visual Studio Code) i otwierasz go w przeglądarce:

„Jestem uczniem szkoły podstawowej, tworzę prostą stronę lokalnie na komputerze. Chcę zapisać plik jako .html i otworzyć go w przeglądarce.”

3️⃣Określ wymagania techniczne

poproś o czysty HTML i CSS (bez Bootstrap, React, itp.),
poproś o jeden plik HTML gotowy do zapisania jako moja_strona.html,
poproś o komentarze w kodzie, które wyjaśnią najważniejsze fragmenty.

4️⃣Poproś o wyjaśnienie kodu

Po kodzie poproś o krótkie wyjaśnienie, co robią najważniejsze elementy strony. Dzięki temu łatwiej będzie Ci się uczyć:

„Po kodzie wyjaśnij krok po kroku, jak działa ta strona.”

5️⃣Przykładowy prompt do skopiowania

Możesz skopiować ten wzór i tylko zmienić temat strony:

Przykładowy prompt do ChatGPT (skopiuj, wklej i edytuj):

Napisz prostą stronę internetową w czystym HTML i CSS.
Jestem uczniem szkoły podstawowej i tworzę stronę lokalnie na komputerze.
Chcę zapisać plik jako .html i otworzyć go w przeglądarce.

Temat strony: „Moje hobby – piłka nożna”.

Zrób:
– nagłówek z tytułem strony,
– krótki opis w akapicie,
– listę wypunktowaną z trzema powodami, dlaczego lubię to hobby,
– prostą nawigację u góry (np. linki: Strona główna, O mnie, Kontakt),
– sekcję „Kontakt” na dole strony.

Wymagania techniczne:
– użyj tylko HTML i CSS w jednym pliku,
– dodaj proste, stonowane kolory tła i czytelną czcionkę,
– nie używaj zewnętrznych bibliotek,
– dodaj komentarze w kodzie wyjaśniające ważniejsze fragmenty.

Po kodzie wyjaśnij krótko krok po kroku, jak działa ta strona,
tak żebym jako uczeń mógł się z tego uczyć.

6️⃣Poprawiaj i doprecyzowuj

Jeśli kod nie wygląda tak, jak chcesz, napisz kolejny prompt i doprecyzuj swoje wymagania, np.:

„Zmień kolory na jaśniejsze i powiększ czcionkę w nagłówkach. Dodaj też trochę większe odstępy między sekcjami.”

🇵🇱 Klasa 7 — projekt HTML (AI dozwolone)

Statyczna strona WWW: „Odzyskanie niepodległości”

Czas: 1–2 lekcje • Forma oddania: plik ZIP • Wysyłka: Formularz Jotform

Limit plików graficznych: w całym projekcie użyj maksymalnie 2 obrazów (rozmiar ZIP).

Wymagania projektu

Strony: index.html (start), hymn.html (Hymn Polski), historia.html (krótki opis drogi do niepodległości).
Menu: identyczne na wszystkich stronach (3 linki względne).
Obrazy: ≤ 2 szt., w folderze zdjecia/, z atrybutem alt.
Technologia: czysty HTML + (opcjonalnie) wbudowany CSS. Bez JS i bibliotek.
AI: możesz użyć AI do planu, pisania, a nawet wygenerować gotową stronę i wkleić kod — ale musisz poprawnie zaplanować witrynę i ułożyć pliki w katalogach.
Dostępność: sensowne nagłówki, czytelny kontrast, opisy obrazów.

Struktura katalogów (obowiązkowa)

Katalog główny nazwij swoim nazwiskiem (bez polskich znaków), np. Kowalski.

NAZWISKO/
├─ index.html
├─ hymn.html
├─ historia.html
└─ zdjecia/
   ├─ obraz1.jpg   (opcjonalnie)
   └─ obraz2.jpg   (opcjonalnie)

Krok po kroku — co masz zrobić

Zaplanowanie witryny (na kartce lub w pliku TXT).
1. Wypisz nazwy trzech stron i ich główne nagłówki (po 2–4 sekcje na stronę).
2. Ustal elementy menu: Strona główna, Hymn Polski, Historia niepodległości.
3. Zdecyduj, gdzie ewentualnie wstawisz maks. 2 obrazy (np. na stronie głównej i historii).
Utworzenie katalogów i plików.
1. Utwórz folder NAZWISKO (np. Nowak).
2. W środku utwórz folder zdjecia.
3. W folderze głównym utwórz pliki: index.html, hymn.html, historia.html.
Pozyskanie treści z pomocą AI (dopuszczone gotowce).
1. Możesz poprosić AI o gotowy szablon HTML z nagłówkami, menu i sekcjami (bez JS). Jeśli generuje jedną stronę — poproś o trzy pliki.
2. Skopiuj kod do swoich plików i dostosuj treść (nagłówki, akapity, podpisy).
3. Dodaj w <head> każdego pliku meta: <meta charset="UTF-8">.
Menu i linki względne.
1. W każdym pliku umieść to samo menu: linki do index.html, hymn.html, historia.html.
2. Sprawdź, czy nazwy linków są dokładnie takie jak nazwy plików (ważna wielkość liter!).
Hymn Polski.
1. Do hymn.html wstaw tekst „Mazurka Dąbrowskiego” (domena publiczna).
2. Jeśli chcesz, dodaj link zewnętrzny do oficjalnego nagrania (bez plików audio w ZIP).
Obrazy (maks. 2 sztuki).
1. Wgraj pliki do folderu zdjecia/ (np. orzel.jpg).
2. W HTML odwołuj się ścieżką: src="zdjecia/nazwa.jpg"; dodaj opisowy alt.
3. Zadbaj o kompresję (ok. 1200 px szerokości, 200–400 kB).
Test lokalny i porządki.
1. Otwórz index.html w przeglądarce i przeklikaj całe menu.
2. Popraw literówki, kontrast, ułożenie nagłówków (h1–h3).
3. Usuń zbędne pliki (np. „.DS_Store”, „Thumbs.db”).
Paczka ZIP.
1. Windows: kliknij prawym na folderze NAZWISKO → Wyślij do → Folder skompresowany (zip).
2. macOS: kliknij prawym na folderze NAZWISKO → Kompresuj „NAZWISKO”.
3. Zmień nazwę archiwum na: NAZWISKO_Niepodleglosc_7.zip (np. Nowak_Niepodleglosc_7.zip).
Wysyłka przez formularz.
1. Wejdź na: formularz Jotform.
2. Załącz swój plik ZIP i wyślij. Zapisz potwierdzenie (zrzut ekranu lub e-mail).

Kryteria oceniania

Obszar	Opis	Waga
Plan i mapa witryny	Wypisane sekcje, sensowne nagłówki i menu	15%
Struktura plików	Poprawny układ katalogów i nazwy	15%
Nawigacja	Działające linki na każdej stronie	20%
Treść	Zrozumiałość i poprawność (AI dopuszczalne, ale użyte mądrze)	25%
Dostępność/estetyka	Nagłówki, alt, kontrast, czytelny układ	15%
Oddanie	ZIP poprawnie nazwany i wysłany	10%

Lista kontrolna przed wysyłką

Folder główny nazwany Twoim nazwiskiem (bez polskich znaków).
W folderze są: index.html, hymn.html, historia.html + zdjecia/.
W projekcie ≤ 2 obrazy (skompresowane) i każdy ma alt.
Menu działa na wszystkich stronach (3 linki względne).
W <head> każdego pliku jest <meta charset="UTF-8">.
Nazwa paczki: NAZWISKO_Niepodleglosc_7.zip.
ZIP wysłany przez Jotform, potwierdzenie zachowane.

Najczęstsze problemy

Link nie działa: nazwa pliku w href różni się literą lub wielkością — popraw na identyczną.
Obraz się nie wyświetla: plik nie leży w zdjecia/ albo zła ścieżka src.
ZIP za duży: usuń zbędne pliki, skompresuj obrazy, nie dodawaj multimediów — podaj link zewnętrzny.
Polskie znaki „krzaczą się”: brak <meta charset="UTF-8"> w <head>.

AI wolno: możesz wkleić gotowy kod wygenerowany przez AI — ważne, abyś samodzielnie zaplanował strony, poprawnie nazwał pliki i ułożył katalogi. Powodzenia!