HTML - struktura stron (INF.03)

Pierwsza lekcja HTML. Trzy warstwy strony, jak przeglądarka czyta HTML, znaczniki i HTML5.

DOCTYPE, html, head, body - każda strona ma tę samą podstawową strukturę. Zagnieżdżanie i wcięcia.

Co trafia do head: title, meta charset, meta viewport, meta description. Poprawna kolejność.

Komentarze HTML, zasady poprawnego zagnieżdżania, znaczniki samozamykające, walidator W3C.

Sześć poziomów nagłówków (h1–h6), akapity <p>, łamanie linii <br> i tematyczny separator <hr>.

Semantyczne (strong, em) i wizualne (b, i) formatowanie. Wyróżnienia mark, small, sub, sup.

Cytaty blokowe blockquote, cytaty inline q, tytuły dzieł cite. Kod inline code i bloki pre.

Encje zastępcze: &amp;lt;, &amp;gt;, &amp;amp;, &amp;nbsp;, &amp;copy;. Kiedy i dlaczego ich używać.

Listy punktowane <ul> i numerowane <ol>. Elementy <li>, zagnieżdżanie list, atrybuty start/type/reversed.

Słowniczki i zestawienia pojęć: <dl>, <dt> (termin) i <dd> (definicja). Kiedy stosować zamiast ul/ol.

Tworzenie linków: atrybut href, otwieranie w nowej karcie (target="_blank"), kotwice (#id), mailto i tel.

Wstawianie obrazów: src, alt (dostępność!), width/height, formaty plików. Semantyczny <figure> z <figcaption>.

Osadzanie dźwięku (<audio>) i wideo (<video>). Atrybut controls, src, poster. Wiele źródeł przez <source>.

Budowanie tabel: kontener <table>, wiersze <tr>, komórki danych <td> i nagłówkowe <th>. Atrybut scope dla dostępności.

Podział tabeli na sekcje: nagłówek, ciało i stopka. <caption> jako opis tabeli - semantyka i dostępność.

Łączenie komórek w poziomie (colspan) i pionie (rowspan). Jak liczyć komórki po scaleniu - typowe błędy.

Kiedy używać tabeli, a kiedy CSS. Dlaczego layout na tabelach to zły pomysł. Wzorcowa tabela z caption i scope.

Kontener formularza <form>, atrybuty action i method. Kiedy używać GET, kiedy POST. Most do kursu PHP.

Typy pól tekstowych: text, email, password, number, tel, url. Wieloliniowe <textarea> - różnice i zastosowania.

Etykieta <label> z atrybutem for/id. Dlaczego każde pole powinno mieć etykietę - dostępność i użyteczność.

Przyciski radio (jeden z wielu), checkboxy (wiele naraz), lista rozwijana <select>/<option>. Grupowanie, value, checked.

Typy przycisków: submit, reset, button. Różnica między <button> a <input type="submit">. Atrybut disabled.

Kluczowe atrybuty pól: placeholder, required, value, name, maxlength, minlength, disabled, readonly. Różnica disabled vs readonly.

Specjalne typy: date, range, color, file, hidden. Grupowanie pól w <fieldset> z tytułem <legend>.

Znaczniki semantyczne HTML5 i ich rola: header, nav, main, section, article, aside, footer. Dlaczego semantyka pomaga w SEO i dostępności. Typowy szkielet strony.

Różnica między elementami blokowymi (div) i liniowymi (span). Kiedy używać div/span, a kiedy semantycznych znaczników. Unikanie div soup.

Atrybuty dostępne na każdym elemencie HTML: id (unikalny), class (wielokrotny), title (tooltip), lang (język treści), data-* (własne dane dla JS).

Podstawy dostępności HTML: atrybut alt dla obrazów, label dla pól formularzy, prawidłowa hierarchia nagłówków h1–h6, podstawy atrybutów aria-label i aria-hidden.

Brak alt na obrazkach, niezamknięte znaczniki, złe zagnieżdżanie, layout na tabelach - cztery błędy, które najczęściej kosztują punkty na egzaminie INF.03. Lista kontrolna do sprawdzenia przed oddaniem pracy.

Strategia rozwiązywania zadania praktycznego: analiza makiety, budowanie szkieletu, wypełnianie blokami od góry do dołu, zarządzanie czasem. Typowe fragmenty makiet z egzaminów CKE i ich kod HTML.