Ćwiczenie: Stworzenie statycznej strony HTML o algorytmie Euklidesa
Cel zadania
Uczniowie przygotują prostą stronę internetową w HTML i CSS, która:
-
przedstawia definicję i działanie algorytmu Euklidesa,
-
zawiera przykładowe objaśnienie kroków działania,
-
wykorzystuje stylizację CSS (kolory, czcionki, tło),
-
jest zapisana i uruchomiona lokalnie w Visual Studio Code.
Wymagania techniczne
-
Środowisko pracy: Visual Studio Code
-
Pliki do stworzenia:
-
index.html– struktura strony, -
style.css– arkusz stylów.
-
Zawartość strony – wymagane sekcje
1. Nagłówek strony
-
Tytuł: Algorytm Euklidesa
-
Podtytuł (opcjonalnie): np. „Jak znaleźć NWD dwóch liczb?”
Wskazówka
Skorzystaj z Emmet-a
2. Sekcja definicji algorytmu
Na podstawie artykułu https://wiedza.lalewicz.eu/algorytm-euklidesa/ wyjaśnij:
-
czym jest algorytm Euklidesa (algorytm do obliczania największego wspólnego dzielnika dwóch liczb);
-
na jakiej zasadzie działa (kolejne dzielenia z resztą);
3. Przykład działania
Dodaj przykładowe obliczenie NWD(15, 9) krok po kroku:
-
15 mod 9 = 6 → nowa para: 9 i 6
-
9 mod 6 = 3 → nowa para: 6 i 3
-
6 mod 3 = 0 → NWD = 3
Pokaż to jako listę lub tabelę.
4. Stopka
Możesz dodać własne imię, datę wykonania oraz informację skąd pochodzi temat.
Stylizacja CSS – minimalne wymagania
Styl CSS powinien zawierać:
- inny kolor tła dla całej strony (
body) - stylizację nagłówków (
h1,h2) - stylizację akapitów (
p) - oddzielne style dla sekcji lub ramki z przykładem
Uruchomienie w VS Code
-
Otwórz folder z projektem w VS Code
-
Upewnij się, że plik HTML ładuje
style.css(np.<link rel="stylesheet" href="style.css">) -
Otwórz
index.htmlw przeglądarce (kliknij „Open with Live Server” lub bezpośrednio)
Przykładowy szkielet pliku HTML
Zadania dodatkowe
- Dodaj ilustrację lub ikonę algorytmu
- Użyj kolorów kontrastowych dla przykładu obliczeniowego
- Zrób przycisk „Powrót do góry strony”
Przydatne linki:
Was this helpful?
0 / 0