Lekcja 17 - Tworzenie stron WWW - HTML

📚

Teoria

▼

Czym jest HTML?

HTML (HyperText Markup Language) to jezyk znacznikow uzywany do tworzenia stron internetowych. Nie jest to jezyk programowania - jest to jezyk opisu struktury dokumentu. HTML mowi przegladarce, jakie elementy znajduja sie na stronie (naglowki, akapity, obrazy, linki) i jak sa ze soba powiazane.

                    HTML to szkielet strony internetowej! Jezeli porownamy strone do czlowieka: HTML to kosci (struktura), CSS to skora i ubranie (wyglad), a JavaScript to miesnie (zachowanie i interaktywnosc).
                

Historia i standardy HTML

1991 - Tim Berners-Lee tworzy pierwsza wersje HTML
1995 - HTML 2.0 - pierwszy oficjalny standard
1999 - HTML 4.01 - dlugoletnio uzywany standard
2000 - XHTML - bardziej rygorystyczna wersja
2014 - HTML5 - aktualny standard, obsluga multimediow, semantyka

Standardy HTML sa opracowywane przez organizacje W3C (World Wide Web Consortium) i WHATWG (Web Hypertext Application Technology Working Group).

Struktura dokumentu HTML5

Kazdy dokument HTML5 powinien miec nastepujaca strukture:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tytul strony</title>
</head>
<body>
    <h1>Witaj na mojej stronie!</h1>
    <p>To jest akapit tekstu.</p>
</body>
</html>

Wyjasnienie elementow struktury

<!DOCTYPE html> - deklaracja typu dokumentu, mowi przegladarce ze to HTML5
<html lang="pl"> - element glowny, atrybut lang okresla jezyk strony
<head> - sekcja naglowkowa (metadane, tytul, polaczenia z CSS)
<meta charset="UTF-8"> - kodowanie znakow (obsluga polskich liter)
<title> - tytul wyswietlany na karcie przegladarki
<body> - cialo dokumentu, widoczna tresc strony

Podstawowe znaczniki HTML

<h1> do <h6> - naglowki (h1 najwazniejszy, h6 najmniej wazny)
<p> - akapit tekstu
<br> - przejscie do nowej linii (znacznik samozamykajacy)
<hr> - linia pozioma (separator)
<a href="url"> - hiperlacie (link)
<img src="obraz.jpg" alt="opis"> - obraz
<strong> - tekst pogrubiony (wazny semantycznie)
<em> - tekst pochylony (emfaza)
<div> - kontener blokowy (do grupowania elementow)
<span> - kontener liniowy (do stylizacji fragmentow tekstu)

Znaczniki semantyczne HTML5

HTML5 wprowadzil znaczniki, ktore opisuja znaczenie tresci:

<header> - naglowek strony lub sekcji
<nav> - nawigacja
<main> - glowna tresc strony
<article> - niezalezny artykul
<section> - sekcja tematyczna
<aside> - tresc poboczna (sidebar)
<footer> - stopka strony

Edytory kodu

Do pisania kodu HTML mozna uzyc:

Visual Studio Code - darmowy, rozszerzalny, najpopularniejszy
Notepad++ - lekki edytor dla Windows
Notatnik - najprostszy (ale bez podswietlania skladni)
CodePen / JSFiddle - edytory online do nauki

✏️

Zadania

▼

Latwe

Zadanie 1: Moja pierwsza strona HTML

Otworz edytor tekstu (np. Notatnik, VS Code) i stworz plik index.html z poprawna struktura HTML5. Strona powinna zawierac: tytul "Moja pierwsza strona", naglowek h1, dwa akapity tekstu o sobie, linie pozioma i stopke z Twoim imieniem. Otworz plik w przegladarce.

Pokaz przykladowe rozwiazanie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja pierwsza strona</title>
</head>
<body>
    <h1>Witaj na mojej stronie!</h1>
    <p>Nazywam sie Jan Kowalski i ucze sie
    w liceum.</p>
    <p>Interesuje sie informatyka
    i programowaniem.</p>
    <hr>
    <p>&copy; Jan Kowalski 2026</p>
</body>
</html>

Latwe

Zadanie 2: Znaczniki semantyczne

Przepisz ponizszy kod, zastepujac znaczniki <div> odpowiednimi znacznikami semantycznymi HTML5 (header, nav, main, article, footer):

<div id="naglowek">Moj blog</div>
<div id="menu">Strona glowna | O mnie | Kontakt</div>
<div id="tresc">
    <div class="wpis">Pierwszy wpis na blogu...</div>
</div>
<div id="stopka">(c) 2026</div>

Srednie

Zadanie 3: Strona z linkami i obrazami

Stworz strone HTML "Moje ulubione strony internetowe" zawierajaca: naglowek h1, krotki opis (akapit), 5 linkow do ulubionych stron (kazdy w nowym akapicie z opisem), obraz (moze byc z Internetu - uzyj atrybutu src z adresem URL) oraz link do swojego adresu e-mail (mailto:).

Trudne

Zadanie 4: Walidacja kodu HTML

Wejdz na strone validator.w3.org i sprawdz poprawnosc swojego kodu HTML z Zadania 1 i 3. Popraw wszystkie znalezione bledy. Zapisz raport z walidacji (ile bledow bylo na poczatku, jakie to bledy, jak je naprawiles).

🎥

Materialy wideo

▼

Rozpoczynamy pracę z kodem! Technik informatyk. Egzamin EE.09 / E.14

Pasja informatyki

Samouczek HTML dla początkujących | Konfiguracja VS Code + objaśnienie stylów CSS

LearnAwesome

🎧

Podcasty

▼

✔️

Quiz - sprawdz sie!

▼

Lekcja 17: Tworzenie stron WWW - HTML, standardy, struktura