HTML podstawy dla programistów backend

TL;DR: HTML to język znaczników definiujący strukturę stron internetowych. Każdy programista backend powinien znać podstawowe tagi jak <div>, <p>, <form>, <table> bo często generuje HTML w aplikacjach. HTML składa się z tagów w nawiasach ostrych, które mają otwierający <tag> i zamykający </tag>.

Dlaczego programista backend musi znać HTML?

Jako programista backend codziennie tworzysz aplikacje które generują HTML – czy to przez template engines jak Thymeleaf w Spring Boot, JSP, czy przez REST API które zwracają dane do frontendu. Bez podstawowej znajomości HTML nie zrozumiesz jak działa komunikacja między backendem a przeglądarką.

Co się nauczysz:

Czym jest HTML i jak wygląda podstawowa struktura strony
Najważniejsze tagi HTML które musisz znać jako backend developer
Jak działają formularze HTML i jak odbierać dane w aplikacji
Podstawy tabel HTML do wyświetlania danych z bazy
Jak tworzyć linki i nawigację między stronami

Wymagania wstępne: Podstawowa znajomość programowania, umiejętność pracy z edytorem tekstu. Nie musisz znać CSS ani JavaScript.

Czym jest HTML?

HTML (HyperText Markup Language) – język znaczników używany do tworzenia struktury stron internetowych. To nie język programowania, ale sposób opisywania treści za pomocą tagów.

HTML to jak szkielet dla strony internetowej. Podobnie jak programista backend definiuje strukturę klasy w Javie, HTML definiuje strukturę strony używając tagów:

<!DOCTYPE html>
<html>
<head>
    <title>Moja pierwsza strona</title>
</head>
<body>
    <h1>Witaj świecie!</h1>
    <p>To jest mój pierwszy paragraf.</p>
</body>
</html>

HTML to jak instrukcja montażu mebla. Każdy tag to element który mówi przeglądarce „tutaj umieść nagłówek”, „tutaj zrób paragraf”, „tutaj wstaw tabelę”. Przeglądarka czyta te instrukcje i renderuje stronę.

Podstawowa struktura HTML

Każda strona HTML ma tę samą podstawową strukturę:

<!DOCTYPE html>              <!-- Deklaracja typu dokumentu -->
<html lang="pl">             <!-- Element główny -->
<head>                       <!-- Metadane niewidoczne dla użytkownika -->
    <meta charset="UTF-8">   <!-- Kodowanie znaków -->
    <title>Tytuł strony</title>
</head>
<body>                       <!-- Treść widoczna dla użytkownika -->
    <!-- Tutaj umieszczasz treść strony -->
</body>
</html>

Sekcja <head> zawiera informacje o stronie (tytuł, kodowanie), a <body> zawiera treść którą widzi użytkownik. To jak klasa Java – head to metadane klasy, body to implementacja.

Najważniejsze tagi dla programisty backend

Tekst i nagłówki

<h1>Główny nagłówek</h1>          <!-- Największy nagłówek -->
<h2>Podtytuł</h2>               <!-- Mniejszy nagłówek -->
<h3>Sekcja</h3>                <!-- Jeszcze mniejszy -->

<p>To jest paragraf tekstu.</p>  <!-- Zwykły tekst -->
<div>Kontener na inne elementy</div> <!-- Uniwersalny kontener -->
<span>Kawałek tekstu</span>      <!-- Inline element -->

Listy – idealne do wyświetlania danych z bazy

<!-- Lista nieuporządkowana (bullet points) -->
<ul>
    <li>Pierwszy element</li>
    <li>Drugi element</li>
    <li>Trzeci element</li>
</ul>

<!-- Lista uporządkowana (numerowana) -->
<ol>
    <li>Krok pierwszy</li>
    <li>Krok drugi</li>
    <li>Krok trzeci</li>
</ol>

Pro tip: Listy są świetne do generowania w pętlach na backendzie. W Spring Boot z Thymeleaf możesz iterować po List<User> i generować <li> dla każdego usera.

Formularze – komunikacja z backendem

Formularze to najważniejszy element dla programisty backend, bo przez nie przychodzą dane od użytkowników:

<form action="/submit-user" method="POST">
    <label for="username">Nazwa użytkownika:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="password">Hasło:</label>
    <input type="password" id="password" name="password" required>
    
    <button type="submit">Zarejestruj się</button>
</form>

Uwaga: Atrybut name w input to klucz pod którym dane dotrą do backendu. W Spring Boot to będzie nazwa parametru w metodzie kontrolera.

Najważniejsze typy input

<input type="text">         <!-- Zwykły tekst -->
<input type="email">        <!-- Email z walidacją -->
<input type="password">     <!-- Hasło (ukryte znaki) -->
<input type="number">       <!-- Tylko liczby -->
<input type="date">         <!-- Data -->
<input type="checkbox">     <!-- Pole wyboru -->
<input type="radio">        <!-- Opcja do wyboru -->
<input type="file">         <!-- Upload pliku -->
<input type="hidden">       <!-- Ukryte pole (np. CSRF token) -->

Tabele – wyświetlanie danych z bazy

Tabele to podstawowe narzędzie do pokazywania danych z bazy użytkownikom:

<table>
    <thead>                      <!-- Nagłówki tabeli -->
        <tr>
            <th>ID</th>
            <th>Nazwa użytkownika</th>
            <th>Email</th>
            <th>Akcje</th>
        </tr>
    </thead>
    <tbody>                      <!-- Dane tabeli -->
        <tr>
            <td>1</td>
            <td>jan.kowalski</td>
            <td>jan@example.com</td>
            <td>
                <a href="/edit/1">Edytuj</a>
                <a href="/delete/1">Usuń</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>anna.nowak</td>
            <td>anna@example.com</td>
            <td>
                <a href="/edit/2">Edytuj</a>
                <a href="/delete/2">Usuń</a>
            </td>
        </tr>
    </tbody>
</table>

Typowy błąd: Używanie tabeli do layoutu strony. Tabele są tylko do danych – do layoutu używa się CSS i div-ów.

Linki i nawigacja

<!-- Link do innej strony -->
<a href="/users">Lista użytkowników</a>

<!-- Link z parametrem -->
<a href="/user/123">Profil użytkownika</a>

<!-- Link zewnętrzny -->
<a href="https://example.com" target="_blank">Zewnętrzna strona</a>

<!-- Prosta nawigacja -->
<nav>
    <ul>
        <li><a href="/">Strona główna</a></li>
        <li><a href="/users">Użytkownicy</a></li>
        <li><a href="/products">Produkty</a></li>
        <li><a href="/contact">Kontakt</a></li>
    </ul>
</nav>

Praktyczny przykład – kompletna strona

Oto przykład prostej strony administracyjnej jaką mógłbyś generować z backendu:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Panel administracyjny</title>
</head>
<body>
    <h1>Panel administracyjny</h1>
    
    <nav>
        <ul>
            <li><a href="/admin">Dashboard</a></li>
            <li><a href="/admin/users">Użytkownicy</a></li>
            <li><a href="/logout">Wyloguj</a></li>
        </ul>
    </nav>
    
    <div>
        <h2>Dodaj nowego użytkownika</h2>
        <form action="/admin/users" method="POST">
            <div>
                <label for="username">Nazwa:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <button type="submit">Dodaj użytkownika</button>
        </form>
    </div>
    
    <div>
        <h2>Lista użytkowników</h2>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nazwa</th>
                    <th>Email</th>
                    <th>Akcje</th>
                </tr>
            </thead>
            <tbody>
                <!-- Tutaj backend wygeneruje wiersze dla każdego użytkownika -->
            </tbody>
        </table>
    </div>
</body>
</html>

Czy muszę znać CSS żeby używać HTML?

Nie, HTML działa bez CSS. CSS tylko poprawia wygląd. Jako backend developer możesz generować funkcjonalny HTML i pozwolić frontend developerowi dodać stylowanie.

Jak HTML łączy się z moją aplikacją Spring Boot?

Przez template engines jak Thymeleaf. Tworzysz kontroler który zwraca nazwe template-u, a Spring Boot renderuje HTML z danymi z twojego modelu.

Dlaczego używa się div zamiast konkretnych tagów?

Div to uniwersalny kontener. Używaj konkretnych tagów gdy mają znaczenie semantyczne (nav, table, form), a div gdy potrzebujesz tylko kontenera do grupowania.

Jak odbierać dane z formularzy w Spring Boot?

Używając @RequestParam lub @ModelAttribute w metodzie kontrolera. Nazwa parametru musi odpowiadać atrybutowi 'name’ w HTML input.

Co to znaczy że HTML jest „semantyczny”?

Znaczy że tagi mają znaczenie, nie tylko wygląd. <nav> oznacza nawigację, <table> dane tabelaryczne, <form> formularz. To pomaga przeglądarkom i czytnikcom ekranu zrozumieć treść.

Następne kroki:

Przydatne zasoby:

🚀 Zadanie dla Ciebie

Stwórz prostą stronę HTML z formularzem rejestracji zawierającym:

Pole na imię i nazwisko (text)
Pole na email (email)
Pole na hasło (password)
Checkbox z akceptacją regulaminu
Przycisk submit

Dodaj też tabelę z przykładowymi danymi użytkowników (3-4 wiersze). Przetestuj czy formularz wysyła dane pod właściwy adres.

Czy już generujesz HTML w swoich aplikacjach backend? Jakie template engine używasz – Thymeleaf, JSP, czy może coś innego? Podziel się swoimi doświadczeniami!