Lekcja 8 - Projekt strony WWW - planowanie

📚

Teoria

▼

Etapy tworzenia strony WWW

Profesjonalne tworzenie strony internetowej sklada sie z kilku etapow. W ramach projektu na 3 lekcje przejdziemy przez caly proces:

Lekcja 8 (dzis): Planowanie - cel, grupa docelowa, struktura, wireframe
Lekcja 9: Implementacja - pisanie kodu HTML i CSS
Lekcja 10: Publikacja - testowanie, optymalizacja, prezentacja

Planowanie projektu

Zanim napiszesz pierwsza linijke kodu, odpowiedz na kluczowe pytania:

Cel strony - Czemu ma sluzyc? (informacja, sprzedaz, portfolio, blog)
Grupa docelowa - Kto bedzie odwiedzac strone?
Tresc - Jakie informacje chcesz przekazac?
Struktura - Ile podstron? Jaka nawigacja?
Inspiracje - Jakie strony Ci sie podobaja i dlaczego?

Mapa witryny (Sitemap)

Mapa witryny to schemat pokazujacy hierarchie podstron:

Strona glowna (index.html)
|-- O mnie (about.html)
|-- Projekty (projects.html)
|   |-- Projekt 1
|   |-- Projekt 2
|-- Kontakt (contact.html)

Wireframe - szkic strony

Wireframe to uproszczony szkic ukladu strony (bez kolorow i grafik). Pokazuje rozmieszczenie elementow:

Naglowek (header) z logo i nawigacja
Sekcja glowna (hero) z tytulem i przyciskiem CTA
Tresc glowna - sekcje z tekstem i obrazami
Stopka (footer) z danymi kontaktowymi

Struktura HTML5 - semantyczne znaczniki

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja strona</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">Strona glowna</a>
            <a href="about.html">O mnie</a>
            <a href="contact.html">Kontakt</a>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>Witaj na mojej stronie!</h1>
            <p>Opis strony...</p>
        </section>

        <section class="content">
            <article>
                <h2>Tytul artykulu</h2>
                <p>Tresc...</p>
            </article>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Imie Nazwisko</p>
    </footer>
</body>
</html>

                    Znaczniki semantyczne (header, nav, main, section, article, footer) informuja przegladarke i wyszukiwarki o strukturze tresci. To wazne dla SEO (pozycjonowania) i dostepnosci (czytniki ekranowe dla osob niewidomych).
                

✏️

Zadania

▼

Latwe

Zadanie 1: Brief projektu

Wypelnij brief (opis) swojego projektu strony WWW. Temat: strona o Twoim hobby, portfolio szkolne, lub strona informacyjna o wybranym temacie. Okresl: cel strony, grupe docelowa, 3-5 podstron, liste tresci na kazdej podstronie, 3 strony-inspiracje (podaj linki i napisz co Ci sie w nich podoba).

Srednie

Zadanie 2: Mapa witryny i wireframe

Narysuj mape witryny (schemat podstron) i wireframe strony glownej. Mozesz uzyc kartki i dlugopisu, programu graficznego lub narzedzia online (np. Figma, draw.io). Wireframe powinien zawierac: header z nawigacja, sekcje hero, sekcje tresci, footer.

Srednie

Zadanie 3: Struktura HTML

Na podstawie wireframe'a stworz plik index.html z kompletna struktura strony glownej. Uzyj znacznikow semantycznych HTML5. Na razie nie dodawaj CSS - skup sie na poprawnej strukturze tresci. Dodaj co najmniej: naglowek z nawigacja, sekcje hero, 2-3 sekcje tresci, stopke.

Trudne

Zadanie 4: Podstrony i nawigacja

Stworz pliki HTML dla wszystkich zaplanowanych podstron. Dodaj dzialajaca nawigacje miedzy nimi (linki). Zadbaj o spojnosc struktury - kazda podstrona powinna miec ten sam header i footer. Przetestuj wszystkie linki.

🎥

Materialy wideo

▼

Podstawy HTML & CSS | Tworzenie stron internetowych

Technic Cup

Kreator Stron HTML | Pokaż Elementy na Wszystkich Stronach na Wix

wixmypage

🎧

Podcasty

▼

✔️

Quiz - sprawdz sie!

▼

Lekcja 8: Projekt strony WWW - planowanie i struktura (1/3)