InnoMarts logo
InnoMarts
Fast websites
← Back to course

Finalny Projekt HTML

Finalny Projekt HTML

Witaj ponownie.

Dotarłeś do ostatniej lekcji tego kursu HTML.

Gratulacje.

Przeglądarka przeżyła.

Klawiatura przeżyła.

A co najważniejsze, ty też przeżyłeś tajemniczy świat nawiasów kątowych.

W tej lekcji zbudujemy kompletną stronę HTML, używając wszystkiego, czego się nauczyłeś:

Na razie bez CSS.

Na razie bez JavaScriptu.

Tylko HTML.

Bo zanim udekorujemy dom, potrzebujemy ścian, drzwi, okien i dachu.

Inaczej malujemy powietrze.

Co Zbudujesz

Zbudujesz prostą osobistą stronę do nauki.

Strona będzie zawierać:

To nie jest tylko losowe ćwiczenie.

To twoja pierwsza kompletna strona HTML.

Mała?

Tak.

Prosta?

Tak.

Ważna?

Absolutnie.

Małe strony stają się dużymi witrynami.

Tak jak małe błędy stają się trzygodzinnymi przygodami z debugowaniem.

Setup Projektu

Stwórz folder projektu:

mkdir html-final-project
cd html-final-project
touch final-project.html
mkdir images

Włóż jeden obraz do folderu images.

Na przykład:

images/profile.jpg

Możesz użyć dowolnego obrazu:

Wszystko jest poprawne.

Podstawowa Struktura HTML

Otwórz final-project.html i zacznij od tego:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moja Strona do Nauki</title>
</head>
<body>

</body>
</html>

To jest fundament.

Jeszcze nie piękny.

Ale poprawny.

A poprawna struktura to pierwsze zwycięstwo.

Piękna, ale zepsuta strona nadal jest zepsuta.

Prosta i poprawna strona może rosnąć.

Header i Nawigacja

Wewnątrz body dodaj header:

<header id="top">
  <h1>Moja Strona do Nauki</h1>
  <p>Prosty projekt HTML budowany krok po kroku.</p>

  <nav>
    <a href="#about">O Projekcie</a>
    <a href="#lessons">Lekcje</a>
    <a href="#schedule">Plan</a>
    <a href="#contact">Kontakt</a>
  </nav>
</header>

header wprowadza stronę.

nav zawiera linki nawigacyjne.

Każdy link prowadzi do sekcji na tej samej stronie.

Na przykład:

<a href="#about">O Projekcie</a>

prowadzi do:

<section id="about">

Tak działa wewnętrzna nawigacja na stronie.

Mały szczegół.

Bardzo przydatny.

Jak mała winda wewnątrz strony.

Główna Treść

Po header dodaj main:

<main>

</main>

Element main zawiera główną treść strony.

Tutaj mieszka ważna zawartość.

Nie footer.

Nie powtarzana nawigacja.

Nie przypadkowy chaos w okularach przeciwsłonecznych.

Sekcja About

Wewnątrz main dodaj tę sekcję:

<section id="about">
  <h2>O Tym Projekcie</h2>

  <p>Ta strona jest moim finalnym projektem HTML. Używa wielu elementów HTML, których nauczyłem się podczas kursu.</p>

  <img src="images/profile.jpg" alt="Obraz profilowy dla projektu nauki" width="300">

  <p>Celem jest ćwiczenie struktury, treści, linków, obrazów, list, tabel, formularzy i semantycznego HTML.</p>
</section>

Ta sekcja używa:

To już sporo HTML.

Strona zaczyna się budzić.

Powoli.

Jak programista przed kawą.

Sekcja Lekcji

Teraz dodaj listę tego, czego się nauczyłeś:

<section id="lessons">
  <h2>Czego Się Nauczyłem</h2>

  <p>Podczas tego kursu nauczyłem się najważniejszych podstaw HTML.</p>

  <ul>
    <li>Struktura dokumentu HTML</li>
    <li>Nagłówki i akapity</li>
    <li>Listy i linki</li>
    <li>Obrazy i media</li>
    <li>Tabele i formularze</li>
    <li>Semantyczny HTML</li>
  </ul>
</section>

Lista jest tutaj właściwym elementem.

Dlaczego?

Bo to grupa powiązanych elementów.

HTML lubi, kiedy wybieramy właściwy element.

Przeglądarka się uspokaja.

Developer się uspokaja.

Wszyscy wygrywają.

Prawie.

Wyróżnione Lekcje

Teraz dodaj sekcję z artykułami:

<section>
  <h2>Wyróżnione Lekcje</h2>

  <article>
    <h3>Linki i Nawigacja</h3>
    <p>Ta lekcja wyjaśnia, jak strony łączą się ze sobą za pomocą linków.</p>
  </article>

  <article>
    <h3>Formularze i Dane Użytkownika</h3>
    <p>Ta lekcja wyjaśnia, jak użytkownicy mogą wysyłać informacje przez formularze.</p>
  </article>
</section>

Każdy article jest małym niezależnym blokiem treści.

Ma własny nagłówek.

Ma własne znaczenie.

Może istnieć samodzielnie.

Bardzo odpowiedzialnie.

W przeciwieństwie do niektórych layoutów CSS, które spotkamy później.

Tabela Planu

Teraz dodaj tabelę:

<section id="schedule">
  <h2>Plan Nauki</h2>

  <p>Ta tabela pokazuje prosty plan nauki.</p>

  <table>
    <caption>Tygodniowy Plan Ćwiczenia HTML</caption>

    <thead>
      <tr>
        <th>Dzień</th>
        <th>Temat</th>
        <th>Czas</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Poniedziałek</td>
        <td>Struktura HTML</td>
        <td>30 minut</td>
      </tr>
      <tr>
        <td>Środa</td>
        <td>Linki i Obrazy</td>
        <td>45 minut</td>
      </tr>
      <tr>
        <td>Piątek</td>
        <td>Formularze i Tabele</td>
        <td>45 minut</td>
      </tr>
    </tbody>
  </table>
</section>

To jest dobre użycie tabeli.

Wiersze.

Kolumny.

Dane strukturalne.

Bez zbrodni layoutowych.

Policja frontendowa może odpocząć.

Na razie.

Formularz Kontaktowy

Teraz dodaj formularz:

<section id="contact">
  <h2>Kontakt</h2>

  <p>Użyj tego formularza, aby wysłać prostą wiadomość.</p>

  <form action="#" method="post">
    <label for="name">Imię</label>
    <input id="name" name="name" type="text" required>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>

    <label for="topic">Temat</label>
    <select id="topic" name="topic">
      <option value="question">Pytanie</option>
      <option value="feedback">Opinia</option>
      <option value="project">Projekt</option>
    </select>

    <label for="message">Wiadomość</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Wyślij Wiadomość</button>
  </form>
</section>

Ten formularz nie wyśle jeszcze prawdziwego emaila.

Do tego potrzebny jest backend albo usługa formularzy.

Ale struktura HTML jest poprawna.

A poprawna struktura ma znaczenie.

Wiele stron w internecie pominęło ten etap i przeszło od razu do cierpienia.

Aside

Dodaj małą wskazówkę do nauki:

<aside>
  <h2>Wskazówka do Nauki</h2>
  <p>Ćwicz HTML, budując małe strony. Czytanie jest użyteczne, ale budowanie to moment, w którym mózg naprawdę się budzi.</p>
</aside>

aside zawiera dodatkowe powiązane informacje.

Nie jest główną treścią.

To notatka boczna.

Jak mądry przyjaciel stojący obok z kawą.

Footer

Po main dodaj footer:

<footer>
  <p>&copy; 2026 Moja Strona do Nauki</p>
  <p><a href="#top">Wróć na górę</a></p>
</footer>

Link wraca do:

<header id="top">

To prosta, ale przydatna funkcja.

Małe zwycięstwo.

Jak zamknięcie wszystkich kart przeglądarki po naprawieniu jednego błędu.

Pełny Kod Projektu

Oto kompletna strona:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moja Strona do Nauki</title>
</head>
<body>
  <header id="top">
    <h1>Moja Strona do Nauki</h1>
    <p>Prosty projekt HTML budowany krok po kroku.</p>

    <nav>
      <a href="#about">O Projekcie</a>
      <a href="#lessons">Lekcje</a>
      <a href="#schedule">Plan</a>
      <a href="#contact">Kontakt</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>O Tym Projekcie</h2>

      <p>Ta strona jest moim finalnym projektem HTML. Używa wielu elementów HTML, których nauczyłem się podczas kursu.</p>

      <img src="images/profile.jpg" alt="Obraz profilowy dla projektu nauki" width="300">

      <p>Celem jest ćwiczenie struktury, treści, linków, obrazów, list, tabel, formularzy i semantycznego HTML.</p>
    </section>

    <section id="lessons">
      <h2>Czego Się Nauczyłem</h2>

      <p>Podczas tego kursu nauczyłem się najważniejszych podstaw HTML.</p>

      <ul>
        <li>Struktura dokumentu HTML</li>
        <li>Nagłówki i akapity</li>
        <li>Listy i linki</li>
        <li>Obrazy i media</li>
        <li>Tabele i formularze</li>
        <li>Semantyczny HTML</li>
      </ul>
    </section>

    <section>
      <h2>Wyróżnione Lekcje</h2>

      <article>
        <h3>Linki i Nawigacja</h3>
        <p>Ta lekcja wyjaśnia, jak strony łączą się ze sobą za pomocą linków.</p>
      </article>

      <article>
        <h3>Formularze i Dane Użytkownika</h3>
        <p>Ta lekcja wyjaśnia, jak użytkownicy mogą wysyłać informacje przez formularze.</p>
      </article>
    </section>

    <section id="schedule">
      <h2>Plan Nauki</h2>

      <p>Ta tabela pokazuje prosty plan nauki.</p>

      <table>
        <caption>Tygodniowy Plan Ćwiczenia HTML</caption>

        <thead>
          <tr>
            <th>Dzień</th>
            <th>Temat</th>
            <th>Czas</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Poniedziałek</td>
            <td>Struktura HTML</td>
            <td>30 minut</td>
          </tr>
          <tr>
            <td>Środa</td>
            <td>Linki i Obrazy</td>
            <td>45 minut</td>
          </tr>
          <tr>
            <td>Piątek</td>
            <td>Formularze i Tabele</td>
            <td>45 minut</td>
          </tr>
        </tbody>
      </table>
    </section>

    <section id="contact">
      <h2>Kontakt</h2>

      <p>Użyj tego formularza, aby wysłać prostą wiadomość.</p>

      <form action="#" method="post">
        <label for="name">Imię</label>
        <input id="name" name="name" type="text" required>

        <label for="email">Email</label>
        <input id="email" name="email" type="email" required>

        <label for="topic">Temat</label>
        <select id="topic" name="topic">
          <option value="question">Pytanie</option>
          <option value="feedback">Opinia</option>
          <option value="project">Projekt</option>
        </select>

        <label for="message">Wiadomość</label>
        <textarea id="message" name="message" rows="5" required></textarea>

        <button type="submit">Wyślij Wiadomość</button>
      </form>
    </section>

    <aside>
      <h2>Wskazówka do Nauki</h2>
      <p>Ćwicz HTML, budując małe strony. Czytanie jest użyteczne, ale budowanie to moment, w którym mózg naprawdę się budzi.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Moja Strona do Nauki</p>
    <p><a href="#top">Wróć na górę</a></p>
  </footer>
</body>
</html>

Praktyka

Zbuduj własną wersję tej strony.

Zmień:

Nie tylko kopiuj.

Modyfikuj.

Trochę zepsuj.

Napraw.

Tak nauka staje się prawdziwa.

Mini Wyzwanie

Stwórz drugą stronę:

about.html

Dodaj:

Potem połącz ją z główną stroną projektu.

Teraz masz więcej niż jedną stronę.

Tak strona zaczyna rosnąć.

Jak roślina.

Ale z większą liczbą nawiasów kątowych.

Podsumowanie

Dzisiaj zbudowałeś kompletny projekt HTML.

Użyłeś:

To prawdziwa podstawa.

Nie wystylizowana.

Nie interaktywna.

Ale strukturalnie poprawna.

HTML jest szkieletem internetu.

CSS go ubierze.

JavaScript sprawi, że zatańczy.

Ale bez HTML nie ma czego ubrać i nie ma czego zmusić do tańca.

Kurs Ukończony

Gratulacje.

Ukończyłeś kurs HTML.

Teraz rozumiesz podstawową strukturę stron internetowych.

Następny krok?

CSS.

Bo teraz, kiedy strona istnieje, możemy w końcu sprawić, żeby wyglądała mniej jak zaprojektowana przez kalkulator.