Cel lekcji:

• utrwalenie zasad tworzenia stron HTML,
• poznanie sposobu wspólnej pracy nad projektem w chmurze,
• publikacja i analiza wyników pracy zespołowej.

Poniżej możesz zmodyfikować i przetestować swój kod on-line.

Wprowadzenie:

W poprzednich lekcjach poznaliśmy:

• zasady tworzenia stron internetowych,
• sposób edycji kodu HTML w Mini-kompilatorze HTML Live i Notepad++,
• budowę podstawowych znaczników (<h1>, <p>, <img>, <ul>, <li>).

Dziś łączymy te umiejętności w praktyce – stworzymy stronę informacyjną w chmurze OneDrive.
Każdy uczeń opracuje jedną stolicę Europy, a następnie wspólnie połączymy wszystkie strony w jeden projekt.

Instrukcja krok po kroku:

1️⃣ Wybór tematu

Wybierz jedną stolicę Europy (np. Paryż, Rzym, Berlin, Warszawa, Praga, Dublin…).

2️⃣ Nazwa pliku

Utwórz nowy plik HTML i nazwij go nazwa_stolicy.html, np.
paryz.html, berlin.html, rzym.html.

3️⃣ Edycja kodu

Otwórz plik w Notepad++ lub w Mini-kompilatorze HTML Live (na stronie lekcji).
Napisz kompletny kod HTML według wzoru:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Podróże po stolicach Europy – Paryż</title>
</head>
<body>

  <h1>Paryż – stolica Francji</h1>

  <p>Paryż to jedno z najpiękniejszych miast Europy. Znajduje się tu słynna Wieża Eiffla, Luwr oraz katedra Notre-Dame.</p>
  
  <h2>Najciekawsze miejsca</h2>
  <ul>
    <li>Wieża Eiffla</li>
    <li>Luwr</li>
    <li>Katedra Notre-Dame</li>
    <li>Pola Elizejskie</li>
  </ul>

  <img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Paris_Night.jpg" width="400" alt="Paryż nocą">

  <p>Paryż słynie z kultury, sztuki i romantycznych uliczek. To jedno z najczęściej odwiedzanych miast świata.</p>

</body>
</html>

Każdy plik musi zawierać wszystkie podstawowe elementy strony:

• tytuł strony (<title>),
• nagłówek (<h1>),
• akapit (<p>),
• nagłówek drugiego poziomu (<h2>),
• listę (<ul> lub <ol>),
• obrazek (<img>).

4️⃣ Zapis i publikacja w chmurze

Zapisz plik w folderze OneDrive:

OneDrive\WWW_Stolice\nazwa_stolicy.html

Udostępnij plik nauczycielowi.

5️⃣ Wspólny plik klasy: index.html

Po przygotowaniu indywidualnych stron cała klasa tworzy główny plik index.html, który łączy wszystkie stolice.
Przykład:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Podróże po stolicach Europy</title>
</head>
<body>

  <h1>Podróże po stolicach Europy</h1>
  <p>Witaj na naszej wspólnej stronie o stolicach Europy. Kliknij, aby poznać wybrane miasta:</p>

  <ul>
    <li><a href="paryz.html">Paryż</a></li>
    <li><a href="berlin.html">Berlin</a></li>
    <li><a href="rzym.html">Rzym</a></li>
    <li><a href="warszawa.html">Warszawa</a></li>
  </ul>

</body>
</html>

Analiza i omówienie

Podczas wspólnego spotkania online lub w klasie:

• przeglądamy wszystkie strony,
• analizujemy poprawność kodu i wygląd,
• sprawdzamy, czy wszystkie elementy działają,
• omawiamy, jak wygląda współpraca w chmurze i jak można ją ulepszyć.