- OD TEGO ZACZNIJ
HTML 5 – struktura i semantyka
Samo potrzebne mięso do egzaminu, nic więcej.
- Struktura dokumentu
- Semantyka
- Formularze
- Łączenie zasobów
Zbuduj solidną i logiczną strukturę swoich stron: twórz nagłówki, akapity, formularze i menu, które stanowią podstawę każdej witryny internetowej.
Czym jest HTML?
HTML, czyli HyperText Markup Language, to podstawowy język wykorzystywany do tworzenia i strukturyzowania stron internetowych. Jego główną rolą jest nadawanie treściom – takim jak teksty, obrazy, linki czy tabele – odpowiedniej struktury, dzięki czemu przeglądarka internetowa wie, jak je wyświetlić użytkownikowi. HTML działa jak szkielet każdej strony WWW – określa, gdzie mają znaleźć się nagłówki, akapity, listy, formularze czy multimedia, a także umożliwia łączenie różnych stron za pomocą hiperłączy.
Sam HTML nie odpowiada za wygląd (to zadanie CSS) ani za interaktywność (to rola JavaScript), ale bez niego żadna strona nie mogłaby istnieć – jest fundamentem, na którym buduje się całą resztę.
Ciekawostka
Pierwsza wersja HTML powstała w 1991 roku, a jej twórcą był Tim Berners-Lee, uznawany za ojca World Wide Web. Wtedy HTML miał zaledwie 18 znaczników, dziś w HTML5 jest ich ponad 140. Co więcej, pierwsza strona WWW stworzona przez Bernersa-Lee nadal jest dostępna pod oryginalnym adresem.
1. Struktura i podstawy
Informuje przeglądarkę, że dokument jest w HTML5.
<html lang="pl">
<!-- Zawartość strony -->
</html>
Atrybut lang określa język strony (ważne dla SEO i dostępności).
<head>
<meta charset="UTF-8">
<title>Tytuł strony</title>
<meta name="keywords" content="egzamin, html, kurs">
<meta name="description" content="Kurs przygotowujący do egzaminu INF.03">
<meta name="author" content="Jan Kowalski">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
</head>
Najważniejsze znaczniki w <head>:
<meta charset="UTF-8">– kodowanie polskich znaków<title>– tytuł strony<meta name="keywords">– słowa kluczowe<meta name="description">– opis strony<meta name="author">– autor<meta name="viewport">– responsywność<link rel="stylesheet" href="style.css">– podłączenie CSS<link rel="icon" href="favicon.ico">– ikona strony
2. Treść strony
2.1. Formatowanie tekstu
Nagłówki:
Od <h1> (najważniejszy) do <h6> (najmniej ważny).
Nagłówek 1
<h1>Nagłówek 1</h1>Nagłówek 2
<h2>Nagłówek 2</h2>Akapity i nowa linia:
<p>To jest akapit.</p>To jest akapit.
Tekst<br>Nowa liniaTekst
Nowa linia
Pogrubienie, kursywa, podkreślenie:
<b>Pogrubiony</b>Pogrubiony
<strong>Silne podkreślenie semantyczne</strong>Silne pogrubienie semantyczne
<i>Kursywa</i>Kursywa
<em>Podkreślenie ważności tekstu</em>Podkreślenie ważności tekstu
<u>Podkreślony</u>Podkreślony
Przekreślenie:
<s>Przekreślony tekst</s>
Przekreślony tekst
<del>Usunięty tekst</del>
Usunięty tekst
Indeks górny i dolny:
x<sup>2</sup>
x2
H<sub>2</sub>O
H2O
Cytaty:
<blockquote>Cytat blokowy</blockquote>
Cytat blokowy
<q>Krótszy cytat</q>
Krótszy cytat
2.2. Listy
Numerowana:
<ol type="A" start="3"> <li>Pierwszy</li> <li>Drugi</li> </ol>
- Pierwszy
- Drugi
Punktowana:
<ul type="square"> <li>Jabłko</li> <li>Gruszka</li> </ul>
- Jabłko
- Gruszka
Definicji:
<dl> <dt>HTML</dt> <dd>Język znaczników</dd> </dl>
- HTML
- Język znaczników
Listy zagnieżdżone:
<ul> <li>Pierwszy <ol> <li>Podpunkt</li> </ol> </li> </ul>
- Pierwszy
- Podpunkt
2.3. Tabele
Listy zagnieżdżone:
<table border="1" cellspacing="2" cellpadding="4"> <caption>Tabela przykładowa</caption> <thead> <tr> <th>Lp.</th> <th>Imię</th> <th>Nazwisko</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Jan</td> <td>Kowalski</td> </tr> <tr> <td>2</td> <td>Anna</td> <td>Nowak</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Podsumowanie</td> </tr> </tfoot> </table>
| Lp. | Imię | Nazwisko |
|---|---|---|
| 1 | Jan | Kowalski |
| 2 | Anna | Nowak |
| Podsumowanie | ||
Wybrane atrybuty:
border– ramka tabelicolspan, rowspan– łączenie komórekalign, valign– wyrównaniebgcolor– kolor tła
2.4. Obrazy i multimedia
Obraz:
<img src="logo.png" alt="Logo firmy" width="150" height="100">
alt– opis alternatywny (ważny dla SEO i dostępności)width, height– rozmiar
Obraz jako link:
<a href="https://www.onet.pl"> <img src="onet.png" alt="Onet"> </a>
Wstawianie wideo:
<video src="film.mp4" controls width="300"></video>
Wstawianie dźwięku:
<audio src="muzyka.mp3" controls></audio>
2.5. Odsyłacze (linki)
Do innej strony:
<a href="https://www.google.com" target="_blank">Google</a>
Do pliku:
<a href="dokument.pdf" download>Pobierz PDF</a>
Do miejsca na stronie:
<a href="#sekcja2">Przejdź do sekcji 2</a>
...
<h2 id="sekcja2">Sekcja 2</h2>
E-mail i telefon:
<a href="mailto:kontakt@firma.pl">Wyślij maila</a>
<a href="tel:+48123456789">Zadzwoń</a>
2.6. Bloki i sekcje
Blok ogólny:
<div class="blok">To jest blok div</div>
Sekcje semantyczne:
<header>Nagłówek strony</header>
<nav>Menu nawigacyjne</nav>
<main>Główna treść</main>
<section>Sekcja tematyczna</section>
<article>Artykuł</article>
<aside>Panel boczny</aside>
<footer>Stopka</footer>
Wyróżnianie fragmentów:
<span style="color: red;">Czerwony tekst</span>
2.7. Formularze
<form action="wyslij.php" method="post">
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie" required>
<br>
<label for="wiek">Wiek:</label>
<input type="number" id="wiek" name="wiek" min="1" max="100">
<br>
<input type="radio" id="mezczyzna" name="plec" value="M">
<label for="mezczyzna">Mężczyzna</label>
<input type="radio" id="kobieta" name="plec" value="K">
<label for="kobieta">Kobieta</label>
<br>
<input type="checkbox" name="zgoda" required> Akceptuję regulamin
<br>
<input type="submit" value="Wyślij">
</form>
Wybrane typy pól:
-
text, password, email, number, date, file, checkbox, radio, submit, reset<textarea>– pole tekstowe wielowierszowe<select> i <option>– lista rozwijana
2.8. Linie, odstępy, znaki specjalne
Pozioma linia:
<hr>
Odstępy:
– spacja<<,>>,&&,©©,€€ – znaki specjalne
3. Przykładowa strona HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykładowa strona HTML</title>
<meta name="description" content="Przykład kompletnej strony HTML z podstawowymi znacznikami.">
</head>
<body>
<header>
<h1>Moja pierwsza strona</h1>
<nav>
<a href="#o-mnie">O mnie</a> |
<a href="#kontakt">Kontakt</a>
</nav>
</header>
<main>
<section id="o-mnie">
<h2>O mnie</h2>
<p>Nazywam się <b>Jan Kowalski</b> i uczę się HTML.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Outdoors-man-portrait_%28cropped%29.jpg/1200px-Outdoors-man-portrait_%28cropped%29.jpghttps://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Outdoors-man-portrait_%28cropped%29.jpg/1200px-Outdoors-man-portrait_%28cropped%29.jpg" alt="Jan Kowalski" width="150">
</section>
<section>
<h2>Moje hobby</h2>
<ul>
<li>Programowanie</li>
<li>Sport</li>
<li>Muzyka</li>
</ul>
</section>
<section id="kontakt">
<h2>Kontakt</h2>
<form action="kontakt.php" method="post">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="wiadomosc">Wiadomość:</label>
<textarea id="wiadomosc" name="wiadomosc"></textarea>
<br>
<input type="submit" value="Wyślij">
</form>
</section>
</main>
<footer>
<hr>
© 2025 Jan Kowalski
</footer>
</body>
</html>
Moja pierwsza strona
O mnie
Nazywam się Jan Kowalski i uczę się HTML.
Moje hobby
- Programowanie
- Sport
- Muzyka
Kontakt
4. Najczęstsze błędy i dobre praktyki
- Zawsze zamykaj znaczniki.
- Używaj polskich znaków dzięki
<meta charset="UTF-8">. - Stosuj semantyczne znaczniki (
header, nav, main, section, footer). - Dodawaj atrybut
altdo obrazów. - Formularze zawsze powinny mieć etykiety (
<label>). - Unikaj przestarzałych znaczników (np.
<font>, <center>– lepiej użyć CSS).
Lecimy dalej?
