HTML i CSS: strony responsywne

Część A, lekcja 1

Struktura dokumentu HTML5 i elementy semantyczne

HTML (HyperText Markup Language) to język znaczników opisujący strukturę i znaczenie treści strony. Wygląd zapewnia CSS, a zachowanie JavaScript. Przeglądarka pobiera plik HTML, buduje z niego drzewo DOM i dopiero wtedy wyświetla stronę.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Moja pierwsza strona</title>
  <link rel="stylesheet" href="styl.css">
</head>
<body>
  <h1>Witaj w serwisie</h1>
  <p>To jest akapit tekstu.</p>
</body>
</html>

Elementy semantyczne

Elementy semantyczne nazywają rolę fragmentu strony, więc ułatwiają dostępność (nawigacja czytnikiem ekranu) i pozycjonowanie. Zamiast samych <div> stosujemy:

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

<html lang="">
<head>
    <meta charset="">
    <title>Moja strona</title>
</head>
<body>
</body>
</html>

<>Nagłówek serwisu</>
<>Menu</>
<>Treść główna</>
<>Stopka</>

Część A, lekcja 2

Tekst, nagłówki, listy i odnośniki

Nagłówki <h1>–<h6> budują hierarchię treści. Na stronie jest zwykle jeden <h1>, a kolejne poziomy nie powinny być pomijane (po h2 następuje h3, nie h5). Nagłówków nie używamy do powiększania tekstu – od tego jest CSS.

Listy

<ul>                      <!-- lista nieuporządkowana (punktowana) -->
  <li>HTML</li>
  <li>CSS</li>
</ul>
<ol type="1" start="3">   <!-- lista uporządkowana (numerowana) -->
  <li>Trzeci krok</li>
  <li>Czwarty krok</li>
</ol>
<dl>                      <!-- lista definicji -->
  <dt>HTML</dt><dd>język znaczników</dd>
</dl>

Odnośniki

<a href="kontakt.html">Kontakt</a>                    <!-- względny -->
<a href="https://mti.edu.pl" target="_blank" rel="noopener">Szkoła</a>  <!-- bezwzględny, nowa karta -->
<a href="#cennik">Przejdź do cennika</a>               <!-- kotwica w tej samej stronie -->
<a href="mailto:biuro@firma.pl">Napisz do nas</a>      <!-- program pocztowy -->
<a href="tel:+48221234567">Zadzwoń</a>

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

<h1>Przepisy</h1>
<>Składniki: <strong>mąka</strong> i <>cukier</em>.</p>
<>
    <>Wymieszaj</li>
    <li>Upiecz</li>
</ol>

< ="kontakt.html" ="_blank">Kontakt</a>
<a href="jan@example.pl">Napisz do nas</a>

Część A, lekcja 3

Obrazy i multimedia

<img src="img/kot.jpg" alt="Szary kot śpi na parapecie" width="400" height="300">

<figure>
  <img src="img/wykres.png" alt="Wykres sprzedaży w 2025 roku">
  <figcaption>Rys. 1. Sprzedaż w 2025 roku</figcaption>
</figure>

<picture>
  <source media="(min-width: 800px)" srcset="img/baner-duzy.jpg">
  <img src="img/baner-maly.jpg" alt="Baner reklamowy">
</picture>

• alt – tekst alternatywny, obowiązkowy: czytany przez czytniki ekranu i wyświetlany, gdy obraz się nie załaduje. Obrazy czysto ozdobne dostają alt="".
• width i height – rezerwują miejsce, więc strona nie „skacze” podczas ładowania.
• <figure> + <figcaption> – obraz z podpisem.
• <picture>, srcset – różne pliki dla różnych ekranów.

Formaty plików graficznych na stronach

Dźwięk, wideo i osadzanie

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

<audio controls src="nagranie.mp3"></audio>

<iframe src="https://www.youtube.com/embed/ID" title="Film instruktażowy" width="560" height="315" allowfullscreen></iframe>

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

< ="img/rower.jpg" ="Rower górski" width="300">

<>
    <img src="img/rzym.jpg" alt="Koloseum">
    <>Koloseum w Rzymie</>
</>

<video  width="400">
    < src="film.mp4" type="video/mp4">
</video>

Część A, lekcja 4

Tabele

<table>
  <caption>Plan lekcji – poniedziałek</caption>
  <thead>
    <tr><th scope="col">Godzina</th><th scope="col">Przedmiot</th><th scope="col">Sala</th></tr>
  </thead>
  <tbody>
    <tr><td>8:00</td><td>Bazy danych</td><td>12</td></tr>
    <tr><td>8:55</td><td colspan="2">Zajęcia wychowawcze</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">Zmiany planu na stronie szkoły</td></tr>
  </tfoot>
</table>

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

<>
    <>
        <>Imię</th>
        <th>Wiek</th>
    </tr>
    <tr>
        <>Anna</td>
        <td>17</td>
    </tr>
</table>

<tr><th ="2">Dane</th></tr>
<tr><td ="2">Anna</td><td>17</td></tr>

Część A, lekcja 5

Formularze HTML i walidacja po stronie przeglądarki

<form action="rejestracja.php" method="post">
  <fieldset>
    <legend>Dane konta</legend>

    <label for="imie">Imię</label>
    <input type="text" id="imie" name="imie" required minlength="2" maxlength="40">

    <label for="mail">E-mail</label>
    <input type="email" id="mail" name="mail" required placeholder="jan@szkola.pl">

    <label for="wiek">Wiek</label>
    <input type="number" id="wiek" name="wiek" min="16" max="99">

    <label for="miasto">Miasto</label>
    <select id="miasto" name="miasto">
      <option value="">— wybierz —</option>
      <option value="waw">Warszawa</option>
      <option value="rad">Radom</option>
    </select>

    <label><input type="checkbox" name="regulamin" required> Akceptuję regulamin</label>

    <label for="opis">Krótki opis</label>
    <textarea id="opis" name="opis" rows="4" cols="40"></textarea>

    <button type="submit">Zarejestruj</button>
    <button type="reset">Wyczyść</button>
  </fieldset>
</form>

Metody GET i POST

Walidacja HTML5

• required – pole wymagane,
• pattern="[0-9]{2}-[0-9]{3}" – wyrażenie regularne (np. kod pocztowy),
• min, max, minlength, maxlength – zakresy,
• type="email" – sprawdza format adresu.

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

< ="dodaj.php" method="post">
    < ="imie">Imię:</label>
    <input type="" id="imie" name="imie" >
    <input type="submit" value="Wyślij">
</form>

< name="kraj">
    < value="pl">Polska</option>
    <option value="de">Niemcy</option>
</select>
<input type="radio" ="rozmiar" value="s"> S
<input type="radio" ="rozmiar" value="m"> M

Część B, lekcja 6

Składnia CSS i selektory

CSS (Cascading Style Sheets) opisuje wygląd elementów HTML. Reguła składa się z selektora (do czego) i deklaracji (jakie właściwości i wartości):

selektor {
  właściwość: wartość;
  inna-właściwość: wartość;
}

h1 { color: navy; font-size: 2rem; }

Pseudoklasy i pseudoelementy

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

 {
    : navy;
}
lista { margin: 0; }
menu { padding: 10px; }

nav  { color: red; }
ul  li { color: blue; }
a { color: green; }

< ="stylesheet" ="styl.css">

Część B, lekcja 7

Kaskada, dziedziczenie i specyficzność

Style można podłączyć na trzy sposoby:

Gdy kilka reguł dotyczy tego samego elementu, o wyniku decyduje kaskada: najpierw ważność (!important), potem specyficzność selektora, a przy równej specyficzności – kolejność (późniejsza reguła wygrywa).

Dziedziczenie: niektóre właściwości przechodzą z elementu nadrzędnego na potomne (np. color, font-family, line-height, text-align), a inne nie (np. margin, border, background). Wymusić dziedziczenie można wartością inherit.

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

body {
    : #333;
    : Arial, sans-serif;
}

a { color: blue; }
a { color: red; }

p { color: red ; }

Część B, lekcja 8

Model pudełkowy i jednostki

Każdy element HTML jest dla CSS prostokątnym pudełkiem. Od środka na zewnątrz tworzą je: content (treść), padding (wypełnienie), border (obramowanie) i margin (margines, odstęp od sąsiadów).

* { box-sizing: border-box; }   /* width obejmuje padding i border */

.karta {
  width: 300px;
  padding: 16px;                  /* wszystkie strony */
  border: 2px solid #1d4ed8;
  margin: 12px auto;              /* góra/dół 12px, lewo/prawo auto (wyśrodkowanie) */
}
/* skróty: margin: góra prawo dół lewo;  margin: pion poziom; */

Jednostki i kolory

Kolor zapisujemy nazwą (navy), szesnastkowo (#1d4ed8, skrót #fff), jako rgb(29, 78, 216), z przezroczystością rgba(29,78,216,.5) lub hsl(224, 76%, 48%).

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

div {
    : 10px;
    : 15px;
    : 1px solid black;
    box-sizing: ;
}

#strona {
    width: 800px;
    margin: 0 ;
}

p { font-size: 1.2; }
.kolumna { width: 50; }
.okno { height: 100; }

Część B, lekcja 9

Tekst, tło, czcionki i efekty

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;   /* lista zastępcza */
  font-size: 1rem;
  line-height: 1.6;              /* odstęp między wierszami */
  color: #1f2937;
  background: #f8fafc url("tlo.png") no-repeat center / cover;
}
h1 { text-align: center; text-transform: uppercase; letter-spacing: .05em; }
a { color: #1d4ed8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* własna czcionka */
@font-face {
  font-family: "MojaCzcionka";
  src: url("fonts/moja.woff2") format("woff2");
  font-display: swap;
}
/* z Google Fonts w HTML:
   <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> */
body { font-family: "MojaCzcionka", sans-serif; }

• Kroje: szeryfowe (Times – do druku), bezszeryfowe (Arial, Roboto – do ekranu), monospace (Courier – kod).
• Używaj listy zastępczej czcionek, a na końcu rodziny ogólnej (sans-serif).
• Dbaj o kontrast tekstu z tłem (WCAG: min. 4,5:1 dla zwykłego tekstu).

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

p {
    font-family: Arial, ;
    text-align: ;
    text-decoration: ;
    line-height: 1.5;
}

div {
    background-: #eee;
    background-image: ("tlo.jpg");
    background-size: ;
}

div {
    : 8px;
    : 2px 2px 5px gray;
}

Część B, lekcja 10

Układ strony: Flexbox

Flexbox układa elementy w jednym wymiarze (wiersz lub kolumna). Włączamy go na kontenerze przez display: flex, a jego dzieci stają się elementami elastycznymi.

nav ul {
  display: flex;
  justify-content: space-between;   /* wzdłuż osi głównej */
  align-items: center;              /* w poprzek */
  gap: 16px;
  list-style: none;
  padding: 0;
}
.kolumny { display: flex; flex-wrap: wrap; gap: 20px; }
.kolumny > .karta { flex: 1 1 250px; }  /* rośnie, kurczy się, bazowo 250px */

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

nav {
    display: ;
    justify-content: ;
    align-items: ;
}

div {
    display: flex;
    flex-direction: ;
    flex-wrap: ;
    : 10px;
}

main { : 1; }

Część B, lekcja 11

Układ strony: Grid i pozycjonowanie

CSS Grid układa elementy w dwóch wymiarach (wiersze i kolumny jednocześnie). Jest idealny do układu całej strony.

.strona {
  display: grid;
  grid-template-columns: 220px 1fr;          /* stała kolumna + elastyczna */
  grid-template-areas:
    "naglowek naglowek"
    "menu     tresc"
    "stopka   stopka";
  gap: 16px;
  min-height: 100vh;
}
header { grid-area: naglowek; }
nav    { grid-area: menu; }
main   { grid-area: tresc; }
footer { grid-area: stopka; }

.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

Jednostka fr oznacza ułamek wolnego miejsca. repeat(3, 1fr) tworzy trzy równe kolumny.

Pozycjonowanie

Kolejność nakładania ustawia z-index (działa na elementach pozycjonowanych). Dawny sposób układu, float, zostaje do opływania obrazów tekstem; czyścimy go clear.

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

.galeria {
    display: ;
    grid-template-columns: ;
    gap: 10px;
}

#ramka { position: ; }
#znaczek {
    position: ;
    top: 0;
    right: 0;
}

.szeroki { grid-column: ; }
#pasek { position: ; bottom: 0; }

Część B, lekcja 12

Responsywność i media queries

Strona responsywna dopasowuje układ do szerokości ekranu (telefon, tablet, komputer). Opiera się na trzech filarach: elastyczny układ (jednostki względne, Flexbox/Grid), elastyczne obrazy i media queries. Warunkiem jest znacznik <meta name="viewport" content="width=device-width, initial-scale=1">.

/* styl bazowy: telefon – jedna kolumna */
.kolumny { display: grid; grid-template-columns: 1fr; gap: 16px; }
img { max-width: 100%; height: auto; }      /* obrazy nie wychodzą poza kontener */

/* tablet */
@media (min-width: 600px) {
  .kolumny { grid-template-columns: repeat(2, 1fr); }
}
/* komputer */
@media (min-width: 992px) {
  .kolumny { grid-template-columns: repeat(3, 1fr); }
  nav ul { flex-direction: row; }
}
/* druk i preferencje użytkownika */
@media print { nav, footer { display: none; } }
@media (prefers-color-scheme: dark) { body { background: #111; color: #eee; } }

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

<meta name="" content="width=, initial-scale=1">

 (: 600px) {
    .menu { display: none; }
}

img {
    max-width: ;
    height: ;
}

Część B, lekcja 13

Zmienne CSS, przejścia i animacje

:root {
  --kolor-glowny: #1d4ed8;
  --odstep: 1rem;
}
.przycisk { background: var(--kolor-glowny); padding: var(--odstep); }

.przycisk {
  transition: background .25s ease, transform .25s ease;
}
.przycisk:hover { background: #1e40af; transform: translateY(-2px); }

@keyframes pulsuj {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.alarm { animation: pulsuj 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

 { : #0a5; }
a { color: (--kolor); }

button { : background 0.3s ease; }
button:hover {
    background: orange;
    transform: (1.1);
}

 znikaj {
     { opacity: 1; }
     { opacity: 0; }
}
.komunikat { : znikaj 2s infinite; }

Część C, lekcja 14

Bootstrap: siatka i gotowe komponenty

Bootstrap to najpopularniejszy framework CSS (z częścią JavaScript). Dostarcza gotową siatkę 12-kolumnową, komponenty (menu, przyciski, karty, formularze, okna modalne) i klasy pomocnicze. Podłączamy go z CDN lub z plików lokalnych:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Kolumna 1</div>
    <div class="col-12 col-md-6 col-lg-4">Kolumna 2</div>
    <div class="col-12 col-md-12 col-lg-4">Kolumna 3</div>
  </div>
</div>

<button class="btn btn-primary">Zapisz</button>
<div class="alert alert-warning">Uwaga!</div>

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

<div class="">
    <div class="">
        <div class="">Lewa</div>
        <div class="col-md-6">Prawa</div>
    </div>
</div>

<button class="">Zapisz</button>
<nav class=" navbar-expand-lg"></nav>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" ="stylesheet">

Część C, lekcja 15

Dobre praktyki, walidacja i organizacja plików

• Rozdzielaj strukturę (HTML), wygląd (CSS) i zachowanie (JS) – w osobnych plikach.
• Nazwy plików: małe litery, bez spacji i polskich znaków (oferta-lato.html), kodowanie UTF-8.
• Struktura katalogów: index.html, css/, js/, img/, fonts/.
• Klasy nazywaj według roli (.karta-oferty), nie wyglądu (.czerwony-duzy).
• Stosuj wcięcia i komentarze (<!-- --> w HTML, /* */ w CSS).
• Optymalizuj obrazy (właściwy format i rozmiar), minimalizuj liczbę plików i zapytań.

Walidacja i testowanie

Ćwiczenia interaktywne: uzupełnij i popraw kod

Wpisz brakujące fragmenty w polach albo popraw kod w oknie i kliknij „Sprawdź”. Białe znaki, rodzaj cudzysłowu i kolejność atrybutów HTML nie mają znaczenia. Rozwiązane ćwiczenia zapisują się na koncie i liczą się do odznak.

<html ="pl">
<img src="a.jpg" ="Opis zdjęcia">
 koniec sekcji -->

<link rel="stylesheet" href="">
<img src="" alt="Logo">