Zadanie — GIMP (animacja)

Wejdź w instrukcję wideo i wykonaj zadanie krok po kroku:

Co masz zrobić:

Otwórz program GIMP i wykonaj animację zgodnie z instrukcją z filmu.
Zapisz efekt pracy (np. jako GIF lub plik projektu XCF – jeśli instrukcja tego wymaga).
Nazwij plik: klasa_nazwisko_imie_gimp (np. 6a_kowalski_jan_gimp.gif).
Wyślij gotowy plik na serwer przez formularz poniżej.

Czym jest GIMP?

GIMP (GNU Image Manipulation Program) to darmowy, otwarto-źródłowy program do edycji obrazów. Zajmuje się głównie grafiką rastrową, czyli zdjęciami i obrazami złożonymi z pikseli (np. JPG, PNG, GIF). Używa się go m.in. do retuszu zdjęć, tworzenia grafik, pracy na warstwach i przygotowania prostych animacji. :contentReference[oaicite:0]{index=0}

Zadanie na dziś (HTML, klasa 6)

Prześlij swoją stronę WWW w pliku .zip

Twoim zadaniem jest przygotowanie własnej strony internetowej, zapisanie jej na komputerze, skompresowanie do jednego pliku .zip i przesłanie przez formularz.

Instrukcja krok po kroku

Zapisz swoją stronę WWW
Umieść wszystkie pliki projektu (HTML, obrazki, CSS) w jednym folderze.
Skompresuj folder do ZIP
Kliknij prawym przyciskiem → Wyślij do → Folder skompresowany (zip).
Nazwij plik według wzoru:
strona_klasa_imie_nazwisko.zip
np. strona_6c_jan_kowalski.zip
Prześlij swoją pracę przez formularz:
➤ Kliknij tutaj, aby otworzyć formularz przesyłania

Przed wysłaniem upewnij się, że strona poprawnie działa i wszystkie pliki znajdują się w ZIP-ie.

Zadanie na dziś (HTML, klasa 7)

Skopiuj kod, zapisz jako .html i edytuj

Twoim celem jest stworzenie własnej strony na podstawie gotowego szablonu. Na końcu masz mieć stronę z tytułem, tekstem oraz 3 obrazkami z podpisami.

Instrukcja krok po kroku

1) Skopiuj kod

Poniżej jest pole z kodem. Kliknij w pole, a potem: Ctrl + A (zaznacz wszystko) → Ctrl + C (kopiuj).

2) Wklej do Notatnika

Otwórz Notatnik (Windows) → wklej kod: Ctrl + V.

3) Zapisz jako plik HTML

W Notatniku: Plik → Zapisz jako
• Nazwa pliku: moja_strona.html (ważne: końcówka .html lub .htm)
• Typ: wybierz Wszystkie pliki (*.*)
• Kodowanie: najlepiej UTF-8
Kliknij Zapisz.

4) Otwórz stronę w przeglądarce

Znajdź plik moja_strona.html na komputerze i otwórz go w Chrome/Edge.

5) Edytuj stronę (co zmienić?)

W kodzie zamień:

Tytuł strony → wpisz własny tytuł.
Krótki opis → wpisz 2–3 zdania o temacie.
Tekst w sekcji Wprowadzenie → wpisz swój tekst.
Listę w Najważniejsze punkty → wpisz swoje punkty.
W miejscu TU_WKLEJ_LINK_DO_OBRAZKA_1.jpg (i 2, 3) wklej link do zdjęcia lub nazwę pliku zdjęcia.
Podpisy pod ilustracjami → wpisz własne podpisy.

Po zmianach: Zapisz plik (Ctrl+S) i odśwież stronę w przeglądarce (F5).

Uwaga: Nie usuwaj znaków < > ani cudzysłowów " ". Zmieniaj tylko treść i linki.

Kod do skopiowania

Kliknij w pole → Ctrl+A → Ctrl+C → wklej do Notatnika.

<div style="max-width:1100px;margin:0 auto;font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#111827;padding:18px;">

  <!-- HERO (kolorystyka jak we wzorze: niebieski gradient + żółta belka UWAGA) -->
  <div style="
    background: linear-gradient(135deg, #0b6bff, #28a9ff);
    padding: 32px 28px;
    border-radius: 24px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(17,24,39,.12);
    margin-bottom: 16px;
  ">

    <!-- UWAGA / INFO -->
    <div style="
      background:#ffe36e;
      color:#111827;
      padding: 8px 14px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 900;
      display: inline-block;
      margin-bottom: 14px;
    ">
      UWAGA: Uczeń zmienia tytuł, treść, linki i wkleja własne ilustracje.
    </div>

    <!-- TYTUŁ -->
    <!-- ZMIANA: wpisz swój tytuł zamiast "Tytuł strony" -->
    <div style="font-size:34px;line-height:1.15;font-weight:900;margin:0 0 8px 0;">
      Tytuł strony
    </div>

    <!-- OPIS -->
    <div style="font-size:16px;opacity:.95;max-width:900px;">
      Krótki opis (2–3 zdania): o czym jest praca, co pokazuje i dlaczego temat jest ważny.
    </div>

    <!-- NAWIGACJA DO 3 PODSTRON -->
    <div style="margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;">
      <!--
        JAK WKLEIĆ LINKI (DOKŁADNIE):
        1) Link wklejasz w miejsce po href="..."
        2) Jeśli to podstrona w tym samym folderze/pliku: wpisz np. href="podstrona1.html"
        3) Jeśli to link internetowy: wklej pełny adres, np. href="https://..."
        4) NIE USUWAJ cudzysłowów "" i nie dodawaj spacji w środku adresu.
      -->
      <a href="TU_WKLEJ_LINK_DO_STRONY_GLOWNEJ.html" style="
        text-decoration:none;
        background: rgba(255,255,255,.18);
        color:#fff;
        padding:10px 14px;
        border-radius:14px;
        font-weight:800;
        border: 1px solid rgba(255,255,255,.24);
        display:inline-block;
      ">Strona główna</a>

      <a href="TU_WKLEJ_LINK_DO_PODSTRONY_1.html" style="
        text-decoration:none;
        background: rgba(255,255,255,.18);
        color:#fff;
        padding:10px 14px;
        border-radius:14px;
        font-weight:800;
        border: 1px solid rgba(255,255,255,.24);
        display:inline-block;
      ">Podstrona 1</a>

      <a href="TU_WKLEJ_LINK_DO_PODSTRONY_2.html" style="
        text-decoration:none;
        background: rgba(255,255,255,.18);
        color:#fff;
        padding:10px 14px;
        border-radius:14px;
        font-weight:800;
        border: 1px solid rgba(255,255,255,.24);
        display:inline-block;
      ">Podstrona 2</a>
    </div>
  </div>

  <!-- KARTA 1 -->
  <div style="
    background:#ffffff;
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: 0 10px 22px rgba(17,24,39,.07);
    border:1px solid rgba(17,24,39,.06);
    margin-bottom: 14px;
  ">
    <div style="font-size:20px;font-weight:900;margin-bottom:10px;">Wprowadzenie</div>
    <div>
      Tu uczeń wpisuje własny tekst: definicje, najważniejsze informacje, krótkie wyjaśnienia, ciekawostki.
      (1–3 akapity).
    </div>
    <div style="margin-top:10px;color:#6b7280;font-size:13px;">
      Wskazówka: pisz prostymi zdaniami i dodaj przykład.
    </div>
  </div>

  <!-- KARTA 2 -->
  <div style="
    background:#ffffff;
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: 0 10px 22px rgba(17,24,39,.07);
    border:1px solid rgba(17,24,39,.06);
    margin-bottom: 14px;
  ">
    <div style="font-size:20px;font-weight:900;margin-bottom:10px;">Najważniejsze punkty</div>

    <!-- Możesz zostawić tekst lub listę -->
    <div style="margin-bottom:10px;">
      Tu uczeń może wypisać 3–5 kluczowych informacji.
    </div>

    <div style="
      background:#f3f6fb;
      border:1px solid rgba(17,24,39,.08);
      border-radius:16px;
      padding:14px 16px;
    ">
      <div style="font-weight:800;margin-bottom:8px;">Przykładowa lista (można zmienić lub usunąć):</div>
      <ul style="margin:0;padding-left:18px;">
        <li>Punkt 1 – krótko i konkretnie.</li>
        <li>Punkt 2 – ważna informacja.</li>
        <li>Punkt 3 – przykład lub ciekawostka.</li>
      </ul>
    </div>
  </div>

  <!-- GALERIA 3 ILUSTRACJI NA DOLE -->
  <div style="
    background:#ffffff;
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: 0 10px 22px rgba(17,24,39,.07);
    border:1px solid rgba(17,24,39,.06);
  ">
    <div style="font-size:20px;font-weight:900;margin-bottom:10px;">Ilustracje do tematu</div>
    <div style="color:#6b7280;font-size:13px;margin-bottom:12px;">
      Uczeń wkleja własne obrazy i podpisy.
    </div>

    <div style="display:flex;gap:14px;flex-wrap:wrap;">

      <!-- OBRAZEK 1 -->
      <div style="
        flex:1 1 300px;
        border-radius:18px;
        overflow:hidden;
        border:1px solid rgba(17,24,39,.06);
        box-shadow: 0 10px 22px rgba(17,24,39,.06);
        background:#fff;
      ">
        <img src="TU_WKLEJ_LINK_DO_OBRAZKA_1.jpg" alt="Opis obrazka 1" style="width:100%;height:220px;object-fit:cover;display:block;background:#e5e7eb;">
        <div style="padding:12px 14px;font-weight:900;">Podpis pod ilustracją 1</div>
      </div>

      <!-- OBRAZEK 2 -->
      <div style="
        flex:1 1 300px;
        border-radius:18px;
        overflow:hidden;
        border:1px solid rgba(17,24,39,.06);
        box-shadow: 0 10px 22px rgba(17,24,39,.06);
        background:#fff;
      ">
        <img src="TU_WKLEJ_LINK_DO_OBRAZKA_2.jpg" alt="Opis obrazka 2" style="width:100%;height:220px;object-fit:cover;display:block;background:#e5e7eb;">
        <div style="padding:12px 14px;font-weight:900;">Podpis pod ilustracją 2</div>
      </div>

      <!-- OBRAZEK 3 -->
      <div style="
        flex:1 1 300px;
        border-radius:18px;
        overflow:hidden;
        border:1px solid rgba(17,24,39,.06);
        box-shadow: 0 10px 22px rgba(17,24,39,.06);
        background:#fff;
      ">
        <img src="TU_WKLEJ_LINK_DO_OBRAZKA_3.jpg" alt="Opis obrazka 3" style="width:100%;height:220px;object-fit:cover;display:block;background:#e5e7eb;">
        <div style="padding:12px 14px;font-weight:900;">Podpis pod ilustracją 3</div>
      </div>

    </div>

    <div style="margin-top:12px;text-align:center;color:#6b7280;font-size:13px;">
      Szablon edukacyjny – uczeń uzupełnia tytuł, treść, linki i ilustracje.
    </div>
  </div>

</div>

Po wykonaniu: wyślij plik moja_strona.html zgodnie z poleceniem nauczyciela.

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!