HTML i CSS w pigułce przed egzaminem INF.03

Egzamin zawodowy INF.03 (Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych) sprawdza wiedzę z HTML i CSS na dwóch płaszczyznach:

  1. Teoretycznej (test 40 pytań jednokrotnego wyboru) – szczegółowa znajomość specyfikacji, właściwości CSS, semantyki, selektorów, formatów plików i standardów W3C.
  2. Praktycznej (zadanie przy komputerze) – odwzorowanie makiety z arkusza egzaminacyjnego, implementacja semantycznego szkieletu HTML5, poprawne podpięcie arkusza stylów, ostylowanie bloków, formularzy, tabel i multimediów zgodnie z drobiazgowymi wytycznymi w kluczu oceniania CKE.

Poniższy wpis stanowi wyczerpujące zestawienie wszystkich zagadnień, reguł, pułapek i wzorców projektowych wymaganych na egzaminie.

1. Kluczowe pułapki i różnice pojęciowe (Pewniaki testowe CKE)

Zanim przejdziesz do szczegółów, opanuj zestawienie pojęć, na których najczęściej konstruowane są pytania podchwytliwe w części pisemnej:

Pojęcie A Pojęcie B Kluczowa różnica na egzaminie
colspan="n" rowspan="n" colspan łączy kolumny (w poziomie). rowspan łączy wiersze (w pionie).
display: none; visibility: hidden; display: none całkowicie usuwa element z przepływu strony (przestrzeń po nim się zapada). visibility: hidden ukrywa element wizualnie, ale pozostawia pustą przestrzeń o jego wymiarach.
alt w <img> title w <img> alt to tekst alternatywny dla czytników i przy braku załadowania (obowiązkowy w HTML5). title to dymek podpowiedzi (tooltip) po najechaniu myszą.
id class id (w CSS: #) musi być unikalny w całym dokumencie. class (w CSS: .) może być przypisana do wielu elementów.
em rem em zależy od wielkości fontu elementu nadrzędnego (rodzica). rem (root em) zależy wyłącznie od fontu elementu głównego <html> (domyślnie 16px).
radio checkbox radio pozwala wybrać tylko jedną opcję z grupy (wymaga identycznego atrybutu name dla wszystkich opcji!). checkbox to pole wielokrotnego wyboru.
GET POST GET przekazuje dane jawnie w adresie URL (długość ograniczona, zapis w historii przeglądarki). POST przekazuje dane w ciele żądania HTTP (bezpieczny dla haseł, brak limitu rozmiaru, obsługa plików).
Potomek (A B) Dziecko (A > B) A B wybiera każdy element B wewnątrz A (nawet na dnie drzewa DOM). A > B wybiera wyłącznie element B będący bezpośrednim dzieckiem A.

2. HTML – Semantyka, struktura i znaczniki

2.1. Szkielet dokumentu i sekcja <head>

Każdy arkusz egzaminacyjny weryfikuje poprawność szkieletu dokumentu. Brak deklaracji typu dokumentu lub kodowania znaków skutkuje utratą punktów za walidację.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Opis strony do wyszukiwarki">
    <meta name="keywords" content="portal, wiadomości, kurs">
    <meta name="author" content="Egzaminator">
    <title>Strona główna - INF.03</title>
    <!-- Dołączenie zewnętrznego arkusza stylów -->
    <link rel="stylesheet" href="styl.css">
    <!-- Dołączenie ikony witryny (favicon) -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- Treść strony -->
    <script src="skrypt.js"></script>
</body>
</html>

2.2. Semantyka HTML5 (Struktura strony)

W kluczach egzaminacyjnych CKE za zastosowanie znaczników semantycznych zamiast uniwersalnych znaczników <div> przyznawane są dedykowane punkty.

+-------------------------------------------------------------+
|                          <header>                           |
+-------------------------------------------------------------+
|                           <nav>                             |
+------------------------------+------------------------------+
|            <main>            |           <aside>            |
|  +------------------------+  | (panel boczny, reklamy,      |
|  |       <section>        |  |  linki, informacje dodatkowe)|
|  |  +------------------+  |  |                              |
|  |  |    <article>     |  |  |                              |
|  |  +------------------+  |  |                              |
|  +------------------------+  |                              |
+------------------------------+------------------------------+
|                          <footer>                           |
+-------------------------------------------------------------+
<figure>
    <img src="schemat.png" alt="Schemat sieci LAN">
    <figcaption>Rysunek 1. Topologia gwiazdy.</figcaption>
</figure>

2.3. Tabele danych i scalanie komórek

Tabele na egzaminie INF.03 służą do prezentacji danych pobranych z bazy MySQL lub do statycznych zestawień.

Tagi strukturalne tabeli:

Scalanie komórek – schemat działania:

<table border="1">
    <thead>
        <tr>
            <!-- Scalenie dwóch kolumn w poziomie -->
            <th colspan="2">Dane osobowe</th>
            <th>Rola</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- Scalenie dwóch wierszy w pionie -->
            <td rowspan="2">Jan Kowalski</td>
            <td>Programista</td>
            <td>Admin</td>
        </tr>
        <tr>
            <td>Tester</td>
            <td>Użytkownik</td>
        </tr>
    </tbody>
</table>

Zasada liczenia komórek w wierszu: Jeśli w pierwszym wierszu użyjesz <td rowspan="2">, komórka ta zajmuje miejsce w wierszu pierwszym oraz w wierszu bezpośrednio pod nim. W drugim wierszu musisz zdefiniować o jedną komórkę <td> mniej!

2.4. Formularze i kontrolki wejściowe

Formularze to stały element każdego zadania praktycznego, stanowiący bramę do skryptów PHP lub JS.

<form action="rejestracja.php" method="POST" enctype="multipart/form-data">
    <!-- Etykieta powiązana z polem przez atrybut for == id -->
    <label for="nazwisko">Nazwisko:</label>
    <input type="text" id="nazwisko" name="nazwisko" required placeholder="np. Nowak" maxlength="40">

    <label for="haslo">Hasło:</label>
    <input type="password" id="haslo" name="haslo" pattern=".{8,}" title="Minimum 8 znaków">

    <label for="wiek">Wiek:</label>
    <input type="number" id="wiek" name="wiek" min="18" max="99" step="1" value="18">

    <label for="poziom">Ocena (suwak):</label>
    <input type="range" id="poziom" name="poziom" min="0" max="10">

    <label for="kolor">Wybierz kolor:</label>
    <input type="color" id="kolor" name="kolor" value="#ff0000">

    <!-- Grupa Radio - ten sam name="plec" wymusza pojedynczy wybór -->
    <p>Płeć:</p>
    <input type="radio" id="k" name="plec" value="k" checked>
    <label for="k">Kobieta</label>
    <input type="radio" id="m" name="plec" value="m">
    <label for="m">Mężczyzna</label>

    <!-- Pola wyboru Checkbox -->
    <p>Zgody:</p>
    <input type="checkbox" id="regulamin" name="regulamin" required>
    <label for="regulamin">Akceptuję regulamin</label>

    <!-- Lista rozwijana Select -->
    <label for="woj">Województwo:</label>
    <select id="woj" name="wojewodztwo">
        <optgroup label="Północ">
            <option value="pom">Pomorskie</option>
        </optgroup>
        <optgroup label="Południe">
            <option value="mlp" selected>Małopolskie</option>
            <option value="sl">Śląskie</option>
        </optgroup>
    </select>

    <!-- Obszar tekstowy Textarea -->
    <label for="uwagi">Uwagi:</label>
    <textarea id="uwagi" name="uwagi" rows="4" cols="30"></textarea>

    <!-- Przyciski formularza -->
    <button type="submit">Zapisz dane</button>
    <button type="reset">Wyczyść formularz</button>
</form>

Kluczowe atrybuty kontrolek formularza:

2.5. Listy i formatowanie tekstu

1. Listy

2. Znaczniki tekstu (Semantyka vs Wygląd)

3. Odsyłacze (Linki)

2.6. Multimedia i formaty plików graficznych

Osadzanie audio i wideo (HTML5):

<video width="640" height="360" controls poster="okladka.jpg">
    <source src="film.mp4" type="video/mp4">
    <source src="film.webm" type="video/webm">
    Twoja przeglądarka nie obsługuje znacznika wideo.
</video>

<audio controls loop>
    <source src="dzwiek.mp3" type="audio/mpeg">
    <source src="dzwiek.ogg" type="audio/ogg">
</audio>

Porównanie formatów graficznych (Pytania z teorii INF.03):

Format Typ grafiki Kompresja Obsługa przezroczystości Zastosowanie
JPEG / JPG Rastrowa Stratna Brak Zdjęcia, bogate przejścia tonalne, krajobrazy
PNG Rastrowa Bezstratna Tak (pełny kanał alfa 8-bit) Logotypy, ikony, grafiki wymagające idealnych krawędzi i przezroczystości
GIF Rastrowa Bezstratna (max 256 kolorów) Tak (indeksowana 1-bit: 0 lub 100%) Proste animacje, bardzo proste piktogramy
SVG Wektorowa (XML) Bezstratna (kod matematyczny) Tak Ikony, wykresy, logo – skalowanie bez utraty jakości
WebP Rastrowa Stratna lub bezstratna Tak Nowoczesny format internetowy łączący zalety JPG i PNG

3. CSS – Kaskadowość, selektory, właściwości i układ

3.1. Sposoby dołączania i specyficzność (waga selektorów)

1. Metody dołączania stylów:

  1. Zewnętrzny arkusz stylów (rekomendowany na egzaminie praktycznym):
    <link rel="stylesheet" href="styl.css">
  2. Wewnętrzny arkusz stylów (w sekcji <head>):
    <style> body { background-color: #f0f0f0; } </style>
  3. Styl lokalny / liniowy (inline):
    <h1 style="color: red; font-size: 20px;">Tytuł</h1>
  4. Import wewnątrz pliku CSS:
    @import url("dodatkowe.css");

2. Kaskada i obliczanie specyficzności selektorów:

Gdy do jednego elementu odnosi się kilka sprzecznych reguł CSS, przeglądarka oblicza wagę reguły na podstawie 4 liczb (A, B, C, D):

Reguła !important nadpisuje wszystkie powyższe wagi, o ile nie napotka innego !important o wyższej specyficzności.

Przykład obliczeniowy:
/* Waga: 0,0,0,1 */
p { color: black; }

/* Waga: 0,0,1,1 (klasa + znacznik) */
p.wazny { color: blue; }

/* Waga: 0,1,0,0 (identyfikator) */
#komunikat { color: green; }

/* Waga: 0,1,1,2 (#id + .klasa + 2 znaczniki) */
div#glowny ul li.element { color: orange; }

Dla elementu <p id="komunikat" class="wazny"> tekst będzie zielony, ponieważ #komunikat ma wagę (0,1,0,0), a p.wazny ma (0,0,1,1).

3.2. Pełny przegląd selektorów i kombinatorów

Selektor Typ selektora Działanie
* Uniwersalny Wybiera absolutnie każdy element w dokumencie
p Elementu (typu) Wybiera wszystkie akapity <p>
.klasa Klasy Wybiera elementy posiadające atrybut class="klasa"
#identyfikator Identyfikatora Wybiera element z id="identyfikator"
div p Potomka (spacja) Wybiera wszystkie <p> leżące wewnątrz <div> (na dowolnym poziomie zagnieżdżenia)
div > p Dziecka (>) Wybiera tylko te <p>, które są bezpośrednimi dziećmi <div>
h2 + p Sąsiedni (przyległy) (+) Wybiera pierwszy <p> występujący bezpośrednio po znaczniku <h2>
h2 ~ p Rodzeństwa (~) Wybiera wszystkie elementy <p> występujące po <h2> na tym samym poziomie rodzica
input[type="text"] Atrybutu dokładnego Elementy <input> z atrybutem type równym dokładnie "text"
a[href^="https"] Początku atrybutu (^=) Linki, których atrybut href zaczyna się od ciągu "https"
a[href$=".pdf"] Końca atrybutu ($=) Linki, których atrybut href kończy się na ".pdf"
a[href*="szkola"] Zawierania fragmentu (*=) Linki, których atrybut href zawiera ciąg "szkola" w dowolnym miejscu

3.3. Pseudoklasy i pseudoelementy

Pseudoklasy (stan elementu lub relacja w strukturze – jeden dwukropek :):

Pseudoelementy (tworzenie wirtualnych fragmentów – dwa dwukropki ::):

/* Wstawienie ikony lub znaku przed linkiem */
a.pobierz::before {
    content: "📁 ";
}

/* Wstawienie kropki czyszczącej floaty (tzw. clearfix) */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

3.4. Model pudełkowy (Box Model) i jednostki

Każdy prostokątny element w CSS opisywany jest przez cztery warstwy:

+-------------------------------------------------+
|                   MARGIN (margines zewn.)       |
|  +-------------------------------------------+  |
|  |                BORDER (obramowanie)       |  |
|  |  +-------------------------------------+  |  |
|  |  |             PADDING (dopełnienie)   |  |  |
|  |  |  +-------------------------------+  |  |  |
|  |  |  |        CONTENT (zawartość)    |  |  |  |
|  |  |  |        szerokość / wysokość   |  |  |  |
|  |  |  +-------------------------------+  |  |  |
|  |  +-------------------------------------+  |  |
|  +-------------------------------------------+  |
+-------------------------------------------------+

Właściwość box-sizing:

Jednostki w CSS:

  1. Bezwzględne:
    • px – piksele ekranowe.
    • pt – punkty typograficzne (1 pt = 1/72 cala).
    • cm, mm – centymetry, milimetry (używane w stylach wydruku @media print).
  2. Względne:
    • % – procent wartości odpowiedniej cechy rodzica.
    • em – mnożnik bieżącego rozmiaru fontu (2em = 2 razy większa czcionka niż u rodzica).
    • rem – mnożnik fontu znacznika bazowego html (zapewnia spójną skalę w całym projekcie).
    • vw (viewport width) – 1vw = 1% szerokości okna przeglądarki.
    • vh (viewport height) – 1vh = 1% wysokości okna przeglądarki.

3.5. Typy wyświetlania (display) i pozycjonowanie (position)

Typy wyświetlania (display):

Pozycjonowanie (position):

3.6. Flexbox w zadaniach praktycznych

Od kilku sesji egzaminacyjnych CKE dopuszcza i promuje Flexbox jako nowoczesną alternatywę dla przestarzałych floatów (float: left).

.kontener-flex {
    display: flex;
    /* Kierunek układu: row (poziomo) lub column (pionowo) */
    flex-direction: row;
    /* Wyrównanie wzdłuż OSI GŁÓWNEJ (poziomej przy row): */
    justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around */
    /* Wyrównanie wzdłuż OSI POPRZECZNEJ (pionowej przy row): */
    align-items: center; /* flex-start | flex-end | center | stretch */
    /* Zawijanie do nowego wiersza, gdy brak miejsca */
    flex-wrap: wrap;
    /* Nowoczesny odstęp między elementami */
    gap: 20px;
}

.element-dziecko {
    flex: 1; /* Równomierne rozciąganie elementów */
}

3.7. Typografia, kolory, tła i responsywność (RWD)

1. Typografia

2. Formaty zapisu kolorów w zadaniach CKE

  1. Nazwy słowne: red, navy, gold.
  2. Format szesnastkowy (Hex):
    • #RRGGBB – np. #00FF00 (zielony), #FFFFFF (biały), #000000 (czarny).
    • Skrócony #RGB – np. #F00 to to samo co #FF0000.
  3. Format RGB: rgb(255, 0, 0) (zakres 0–255 dla każdego kanału).
  4. Format RGBA (z kanałem alfa): rgba(0, 0, 0, 0.5) – czarny z 50% przezroczystością.
  5. Format HSL: hsl(hue, saturation, lightness) – barwa (0–360), nasycenie (0–100%), jasność (0–100%).

3. Właściwości tła

body {
    background-color: #2c3e50;
    background-image: url("tlo.png");
    background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat */
    background-position: center top;
    background-size: cover; /* cover (wypełnia cały kontener) | contain (mieści cały obrazek) */
    background-attachment: fixed; /* tło nieruchome podczas przewijania */
}

4. Responsywne projektowanie (RWD) i Media Queries

Reguły @media pozwalają dostosować wygląd strony do wielkości ekranu urządzenia:

/* Domyślny styl dla komputerów */
.kolumna {
    width: 50%;
    float: left;
}

/* Reguła dla ekranów o szerokości 768px i mniejszych (tablety i telefony) */
@media screen and (max-width: 768px) {
    .kolumna {
        width: 100%;
        float: none;
    }
    nav {
        display: flex;
        flex-direction: column;
    }
}

4. Wzorzec zadania praktycznego INF.03 (Gotowy szablon)

Na egzaminie praktycznym arkusz zazwyczaj zawiera schemat blokowy układu strony. Poniższy kod przedstawia klasyczny, wzorcowy układ strony typu Baner + Panel Lewy + Panel Prawy + Stopka, zrealizowany w pełnej semantyce HTML5 i ostylowany zgodnie z częstymi wymaganiami klucza egzaminacyjnego.

Plik: index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal informacyjny</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>

    <header>
        <h1>Witamy w portalu informatycznym</h1>
    </header>

    <nav>
        <a href="index.html">Strona główna</a>
        <a href="uslugi.html">Usługi</a>
        <a href="kontakt.html">Kontakt</a>
    </nav>

    <div id="kontener">
        <aside id="lewy">
            <h2>Nawigacja boczna</h2>
            <ul>
                <li>Sprzęt komputerowy</li>
                <li>Oprogramowanie</li>
                <li>Bazy danych</li>
            </ul>
        </aside>

        <main id="prawy">
            <h2>Rejestracja użytkownika</h2>
            <form action="index.html" method="POST">
                <label for="login">Login:</label><br>
                <input type="text" id="login" name="login" required><br>

                <label for="haslo">Hasło:</label><br>
                <input type="password" id="haslo" name="haslo" required><br>

                <label for="kurs">Wybierz kurs:</label><br>
                <select id="kurs" name="kurs">
                    <option value="html">HTML i CSS</option>
                    <option value="js">JavaScript</option>
                    <option value="php">PHP i MySQL</option>
                </select><br><br>

                <input type="submit" value="Zarejestruj">
            </form>
        </main>
    </div>

    <footer>
        <p>Autor strony: <strong>PESEL_ZDAJACEGO</strong></p>
    </footer>

</body>
</html>

Plik: styl.css

/* Reset marginesów i dopełnień dla całego dokumentu */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FAFAFA;
    color: #333333;
}

/* Baner główny */
header {
    background-color: #2E4053;
    color: white;
    text-align: center;
    padding: 30px;
}

/* Pasek nawigacji */
nav {
    background-color: #34495E;
    text-align: center;
    padding: 10px;
}

nav a {
    color: #ECF0F1;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
}

nav a:hover {
    background-color: #1ABC9C;
    color: white;
}

/* Układ dwukolumnowy z wykorzystaniem Flexbox */
#kontener {
    display: flex;
    min-height: 500px;
}

#lewy {
    background-color: #D5D8DC;
    width: 30%;
    padding: 20px;
}

#lewy ul {
    margin-left: 20px;
    margin-top: 10px;
}

#prawy {
    background-color: #EAEDED;
    width: 70%;
    padding: 20px;
}

/* Stylizacja formularza */
form {
    margin-top: 15px;
    background-color: white;
    padding: 20px;
    border: 1px solid #BDC3C7;
    border-radius: 5px;
    max-width: 400px;
}

input[type="text"],
input[type="password"],
select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #BDC3C7;
    border-radius: 4px;
}

input[type="submit"] {
    background-color: #2E4053;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
}

input[type="submit"]:hover {
    background-color: #1ABC9C;
}

/* Stopka */
footer {
    background-color: #2E4053;
    color: white;
    text-align: center;
    padding: 15px;
    clear: both;
}

Wskazówka egzaminacyjna: Jeśli arkusz narzuca zastosowanie właściwości opływania zamiast Flexboxa: Dla #lewy stosujesz float: left; width: 30%;, dla #prawy stosujesz float: left; width: 70%;, a w selektorze footer bezwzględnie dopisujesz regułę clear: both;!

5. Przykładowe pytania testowe z wyjaśnieniem

Pytanie 1 (Selektory rodzeństwa):

Jaki fragment tekstu zostanie objęty kolorem czerwonym po zastosowaniu reguły:

h2 + p { color: red; }

A) Wszystkie akapity w dokumencie.
B) Wszystkie akapity znajdujące się wewnątrz znacznika <h2>.
C) Wyłącznie pierwszy akapit występujący bezpośrednio po dowolnym znaczniku <h2>.
D) Wszystkie akapity występujące po znacznikach <h2>.

Prawidłowa odpowiedź: C
Wyjaśnienie: Znak + to selektor sąsiedztwa bezpośredniego. Oznacza dokładnie jeden element wskazanego typu leżący bezpośrednio za elementem poprzedzającym na tym samym poziomie drzewa DOM.

Pytanie 2 (Wymiary i Model Pudełkowy):

Dla elementu zdefiniowano:

div.pudelko {
    width: 250px;
    padding: 15px;
    border: 5px solid red;
    margin: 20px;
    box-sizing: content-box;
}

Całkowita szerokość zajmowana przez to pudełko w oknie przeglądarki (bez marginesów) wynosi:

A) 250 px
B) 290 px
C) 330 px
D) 270 px

Prawidłowa odpowiedź: B
Wyjaśnienie: Przy box-sizing: content-box do szerokości treści dodajemy obustronny padding oraz obustronne obramowanie:
250px + (2 × 15px) + (2 × 5px) = 250 + 30 + 10 = 290px.
Margines (margin: 20px) tworzy zewnętrzny odstęp wokół pudełka i nie wlicza się w wymiary samego elementu.

Pytanie 3 (Semantyka HTML5):

Który znacznik jest najbardziej odpowiedni do wydzielenia niezależnego komentarza użytkownika na forum internetowym?

A) <aside>
B) <article>
C) <section>
D) <div>

Prawidłowa odpowiedź: B
Wyjaśnienie: Zgodnie ze specyfikacją W3C, znacznik <article> służy do oznaczania samodzielnych, kompletnych treści, które mogą funkcjonować niezależnie od reszty strony – w tym komentarzy użytkowników, postów czy wpisów blogowych.

Pytanie 4 (Obsługa formularzy):

W jaki sposób należy zmodyfikować znacznik formularza, aby umożliwić przesyłanie plików graficznych na serwer za pomocą kontrolki <input type="file">?

A) Dodać atrybut method="GET".
B) Dodać atrybut enctype="multipart/form-data" oraz method="POST".
C) Dodać atrybut type="file-upload".
D) Dodać atrybut action="upload.xml".

Prawidłowa odpowiedź: B
Wyjaśnienie: Przesyłanie plików binarnych wymaga metody POST oraz typu kodowania multipart/form-data, który dzieli dane na części z osobnymi nagłówkami MIME.

6. Checklista zdającego INF.03

Przed oddaniem pracy na egzaminie praktycznym: