Projektowanie stron internetowych

Zaczniemy od podstaw, a krok po kroku przejdziemy przez trzy najważniejsze technologie: HTML, CSS i JavaScript.
Na końcu zbudujesz prawdziwy projekt: aplikację offline, która pozwoli zarządzać grami i drużynami – jak na escape roomie.

📚 Czego się nauczysz?

  • Jak działa strona internetowa
  • Jak napisać swoją pierwszą stronę w HTML
  • Jak nadać jej wygląd dzięki CSS
  • Jak sprawić, by reagowała na kliknięcia – za pomocą JavaScript
  • Jak tworzyć listy drużyn i przyznawać punkty
  • Jak zapisywać dane na stałe w przeglądarce
  • Jak stworzyć gotowy projekt do używania i pokazania innym

podstawowy_szkielet_strony.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Moja Pierwsza Strona</title>
  <style>
    /* CSS – styl strony */
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      padding: 20px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }

    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>

  <h1>Witaj na stronie!</h1>
  <p>To najprostszy szkielet HTML + CSS + JS w jednym pliku.</p>
  <button onclick="pokazPowitanie()">Kliknij mnie</button>

  <script>
    // JavaScript – co się dzieje po kliknięciu
    function pokazPowitanie() {
      alert("Cześć! To działa :)");
    }
  </script>

</body>
</html>

📎 Otwórz kod w JSBin

🔷 Temat 1 – Co to jest HTML?

Nauczysz się:

  • Z czego zbudowana jest strona internetowa
  • Jak tworzy się tytuł, nagłówki, teksty, pola i przyciski

Zadanie: Utwórz prostą stronę z nagłówkiem i przyciskiem:

<h1>Panel Gier</h1>
<p>Logowanie administratora</p>
<input placeholder="Wpisz kod dostępu">
<button>Zaloguj się</button>

🎨 Temat 2 – Dodajemy kolory i wygląd (CSS)

Nauczysz się:

  • Jak zmienić kolor tła i przycisków
  • Jak dodać czcionki, marginesy i ładny wygląd

Przykład:

<style>
  body {
    background-color: #eef;
    font-family: Arial, sans-serif;
  }
  button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
  }
</style>

Zadanie: zmień kolory na swoje ulubione 🎨

📝 Temat 3 – Formularz: dodajemy drużynę

Nauczysz się:

  • Jak stworzyć formularz, w którym wpiszesz dane drużyny

Zadanie: Dodaj pola do formularza:

<input placeholder="Nazwa drużyny">
<input placeholder="Przywódca drużyny">
<input placeholder="Członkowie (np. Ala, Olek)">
<input placeholder="Punkty startowe" type="number">
<input placeholder="Escape room">
<button>Dodaj drużynę</button>

⚙️ Temat 4 – Reakcje na kliknięcie (JavaScript)

🎯 Czego się nauczysz:

  • Jak strona może reagować na kliknięcia
  • Czym jest funkcja onclick
  • Jak używać alert() i prompt() do komunikacji z użytkownikiem

🧠 Krótkie wprowadzenie

HTML buduje strukturę strony, CSS ją upiększa, a JavaScript (JS) sprawia, że strona żyje – reaguje na użytkownika.

💡 Przykład 1 – wyświetl komunikat

<script>
  function powitanie() {
    alert("Witaj na stronie Panelu Gier!");
  }
</script>

<button onclick="powitanie()">Kliknij mnie</button>

🔍 Co tu się dzieje?

  • Funkcja powitanie() wyświetla okienko z wiadomością.
  • onclick="powitanie()" oznacza: uruchom to po kliknięciu przycisku.

💡 Przykład 2 – zapytaj użytkownika o imię

<script>
  function zapytajImie() {
    let imie = prompt("Jak masz na imię?");
    alert("Miło Cię widzieć, " + imie + "!");
  }
</script>

<button onclick="zapytajImie()">Podaj imię</button>

📝 Zadanie do wykonania

  1. Stwórz dwa przyciski: jeden z alert, drugi z prompt.
  2. Wymyśl swoje własne komunikaty, np. „Czy chcesz rozpocząć grę?”

📋 Temat 5 – Dodawanie drużyn i tworzenie listy

🎯 Czego się nauczysz:

  • Jak zapisać dane użytkownika do zmiennej
  • Jak wyświetlić nowe dane na stronie
  • Jak stworzyć listę drużyn

🧠 Potrzebujemy:

  • Formularz z polami (nazwa drużyny, lider, pokój, punkty)
  • Przycisk „Dodaj drużynę”
  • Skrypt JS, który zapisze dane i pokaże je na stronie

💡 Przykład

<input id="teamName" placeholder="Nazwa drużyny">
<input id="teamLeader" placeholder="Przywódca">
<button onclick="dodajDruzyne()">Dodaj drużynę</button>

<div id="listaDruzyn"></div>

<script>
  let druzyny = [];

  function dodajDruzyne() {
    let nazwa = document.getElementById("teamName").value;
    let lider = document.getElementById("teamLeader").value;

    druzyny.push({ nazwa: nazwa, lider: lider });

    pokazDruzyny();
  }

  function pokazDruzyny() {
    let div = document.getElementById("listaDruzyn");
    div.innerHTML = "";
    druzyny.forEach(function(d) {
      div.innerHTML += "<p><strong>" + d.nazwa + "</strong> – Lider: " + d.lider + "</p>";
    });
  }
</script>

📝 Zadanie do wykonania

  1. Rozszerz formularz o dodatkowe pole: escape room.
  2. Zmieniaj zawartość listy po każdym dodaniu.

💾 Temat 6 – Zapamiętywanie danych z localStorage

🎯 Czego się nauczysz:

  • Jak zapisać dane na stałe w przeglądarce
  • Co to jest localStorage
  • Jak wczytać i nadpisać dane drużyn

💡 Przykład

<script>
  // Wczytaj dane z pamięci przeglądarki
  let druzyny = JSON.parse(localStorage.getItem("druzyny")) || [];

  function zapiszDoPamieci() {
    localStorage.setItem("druzyny", JSON.stringify(druzyny));
  }

  function dodajDruzyne() {
    let nowa = { nazwa: "Smoki", lider: "Kuba" };
    druzyny.push(nowa);
    zapiszDoPamieci();
  }
</script>

<button onclick="dodajDruzyne()">Dodaj i zapisz drużynę</button>

📝 Zadanie do wykonania

  1. Wczytaj dane przy uruchomieniu strony.
  2. Dodaj przycisk „Resetuj dane” i powiąż go z localStorage.clear().

🔚 Temat 7 – Projekt końcowy i widok gracza

🎯 Czego się nauczysz:

  • Jak utworzyć osobny widok z wynikami drużyn
  • Jak posortować dane
  • Jak przefiltrować wyniki po pokoju

💡 Przykład (JS)

function renderTeams(filter = "") {
  const teams = JSON.parse(localStorage.getItem("druzyny")) || [];
  let container = document.getElementById("wyniki");
  container.innerHTML = "";

  let filtrowane = filter ? teams.filter(t => t.room === filter) : teams;

  filtrowane.forEach(t => {
    container.innerHTML += `<p>${t.nazwa} – ${t.punkty} pkt – Pokój: ${t.room}</p>`;
  });
}

📄 HTML dla widoku gracza

<h2>Wyniki drużyn</h2>
<select onchange="renderTeams(this.value)">
  <option value="">Wszystkie</option>
  <option value="Zamek">Zamek</option>
  <option value="Dżungla">Dżungla</option>
</select>

<div id="wyniki"></div>

📝 Zadanie do wykonania

  1. Przygotuj plik play.html i podłącz kod.
  2. Sprawdź, jak działają filtry.
  3. Przetestuj z danymi z localStorage.

🧪 Dane testowe

Po otwarciu panel_admin_offline.html i wpisaniu kodu 001 zobaczysz przykładowe drużyny:

  • Kaktusy – 50 pkt – Pokój: Dżungla
  • Rakiety – 30 pkt – Pokój: Kosmos
  • Smoki – 40 pkt – Pokój: Zamek

💡 Na każdej lekcji nauczysz się czegoś nowego, ale wszystko będzie się łączyło w jeden spójny projekt!

html_szkielet.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Panel Gier – Admin</title>
</head>
<body>
  <h1>Panel Gier</h1>
  <p>Logowanie administratora</p>
  <input placeholder="Wpisz kod dostępu">
  <button>Zaloguj się</button>
</body>
</html>

📎 Otwórz kod w JSBin

panel_admin_offline.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Panel administratora</title>
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f9f9f9; }
    input, button { padding: 10px; margin: 10px 0; width: 300px; }
    .team { background: #fff; padding: 10px; margin: 10px 0; border: 1px solid #ccc; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <h2>Logowanie administratora</h2>
  <input id="accessCode" placeholder="Kod dostępu (np. 001)">
  <button onclick="login()">Zaloguj</button>
  <p id="error" style="color: red;"></p>

  <div id="adminPanel" class="hidden">
    <h2>Dodaj drużynę</h2>
    <input id="teamName" placeholder="Nazwa drużyny">
    <input id="teamLeader" placeholder="Przywódca">
    <input id="teamMembers" placeholder="Członkowie">
    <input id="teamPoints" type="number" placeholder="Punkty" value="0">
    <input id="teamRoom" placeholder="Escape room">
    <button onclick="addTeam()">Dodaj drużynę</button>

    <div id="teams"></div>
  </div>

  <script>
    let teams = JSON.parse(localStorage.getItem("teams")) || [];

    function login() {
      const code = document.getElementById("accessCode").value;
      if (code === "001" || code === "002") {
        document.getElementById("adminPanel").classList.remove("hidden");
        renderTeams();
      } else {
        document.getElementById("error").textContent = "Niepoprawny kod.";
      }
    }

    function addTeam() {
      const t = {
        name: document.getElementById("teamName").value,
        leader: document.getElementById("teamLeader").value,
        members: document.getElementById("teamMembers").value,
        points: parseInt(document.getElementById("teamPoints").value),
        room: document.getElementById("teamRoom").value,
        history: []
      };
      teams.push(t);
      localStorage.setItem("teams", JSON.stringify(teams));
      renderTeams();
    }

    function adjustPoints(i, val) {
      const reason = prompt("Podaj powód:");
      if (!reason) return;
      teams[i].points += val;
      teams[i].history.push((val > 0 ? "+" : "") + val + " pkt: " + reason);
      localStorage.setItem("teams", JSON.stringify(teams));
      renderTeams();
    }

    function renderTeams() {
      const out = document.getElementById("teams");
      out.innerHTML = "";
      teams.forEach((t, i) => {
        const div = document.createElement("div");
        div.className = "team";
        div.innerHTML = `<strong>${t.name}</strong> (${t.points} pkt)<br>
        Przywódca: ${t.leader}<br>Pokój: ${t.room}<br>
        <button onclick="adjustPoints(${i}, 10)">+10 pkt</button>
        <button onclick="adjustPoints(${i}, -10)">-10 pkt</button>
        <details><summary>Historia</summary>${t.history.join("<br>")}</details>`;
        out.appendChild(div);
      });
    }

    if (teams.length === 0) {
      teams = [
        { name: "Kaktusy", leader: "Ola", members: "Ala, Ela", points: 50, room: "Dżungla", history: ["+50 pkt: start"] },
        { name: "Rakiety", leader: "Kuba", members: "Jasiek, Franek", points: 30, room: "Kosmos", history: ["+30 pkt: start"] },
        { name: "Smoki", leader: "Kasia", members: "Zosia, Wojtek", points: 40, room: "Zamek", history: ["+40 pkt: start"] }
      ];
      localStorage.setItem("teams", JSON.stringify(teams));
    }
  </script>
</body>
</html>

📎 Otwórz kod w JSBin

play_offline.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Wyniki drużyn</title>
  <style>
    body { font-family: sans-serif; padding: 20px; background: #eef; }
    .team { background: #fff; padding: 10px; margin: 10px 0; border: 1px solid #ccc; }
  </style>
</head>
<body>
  <h2>Wyniki drużyn – Escape Challenge</h2>
  <label>Filtruj po pokoju:</label>
  <select id="filterRoom"><option value="">Wszystkie</option></select>
  <div id="teams"></div>

  <script>
    const teams = JSON.parse(localStorage.getItem("teams")) || [];

    function render(filter = "") {
      const list = document.getElementById("teams");
      list.innerHTML = "";
      const filtered = filter ? teams.filter(t => t.room === filter) : teams;
      filtered.sort((a,b) => b.points - a.points).forEach(t => {
        const div = document.createElement("div");
        div.className = "team";
        div.innerHTML = `<strong>${t.name}</strong> – ${t.points} pkt<br>Pokój: ${t.room}<br>Przywódca: ${t.leader}`;
        list.appendChild(div);
      });
    }

    function populateFilter() {
      const select = document.getElementById("filterRoom");
      const rooms = [...new Set(teams.map(t => t.room))];
      rooms.forEach(r => {
        const option = document.createElement("option");
        option.value = r;
        option.textContent = r;
        select.appendChild(option);
      });
    }

    document.getElementById("filterRoom").addEventListener("change", (e) => {
      render(e.target.value);
    });

    populateFilter();
    render();
  </script>
</body>
</html>

📎 Otwórz kod w JSBin

🧰 Środowiska do testowania stron internetowych (HTML, CSS, JS)

💻 Programy do pobrania (na komputer)

🔹 Notepad++ (dla Windows)

  • Lekki edytor kodu idealny na początek
  • Koloruje składnię HTML, CSS, JS
  • Można od razu zapisać jako .html i otworzyć w przeglądarce

🔗 Pobierz: https://notepad-plus-plus.org/downloads/

🔹 Visual Studio Code (VS Code)

  • Bardziej zaawansowany edytor dla chętnych
  • Obsługuje podpowiedzi, rozszerzenia i podgląd na żywo

🔗 Pobierz: https://code.visualstudio.com/

🌐 Narzędzia online – bez instalowania

🔹 CodePen – kod + podgląd

  • Bardzo przyjazny interfejs
  • Zapisz swój „pen” i pokaż innym

🔗 https://codepen.io/pen

🔹 JSBin – alternatywa z bardzo prostym układem

  • Podobnie jak JSFiddle, idealny do szybkiego testu kodu

🔗 https://jsbin.com

Przykład uruchomienia aplikacji w JSBin.

🔸 Zakładka HTML

<h1>Panel Gier</h1>
<p>Logowanie administratora</p>
<input placeholder="Wpisz kod dostępu">
<button onclick="powitanie()">Zaloguj się</button>

🔸 Zakładka CSS

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  padding: 20px;
}

button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

🔸 Zakładka JavaScript

function powitanie() {
  alert("Witaj w Panelu Gier!");
}

📎 Otwórz kod w JSBin

Opublikowano

w

przez

admin

Tagi: