BITEDU.PL

HTML + CSS – jak zbudować stronę „Mój bohater – IRON MAN”

1. WSTĘP – PO CO NAM HTML?

HTML to język, którym opisujemy „co jest na stronie”: nagłówki, akapity, listy, obrazki, linki. Gdy wpisujesz adres w przeglądarce, ona pobiera kod HTML i na jego podstawie buduje drzewo elementów. To trochę jak instrukcja składania mebli: HTML mówi, które części są blatami, a które nogami. Bez HTML przeglądarka nie ma pojęcia, co wyświetlać i jak to logicznie ułożyć.

Strony WWW to dokumenty tekstowe z dołączonymi stylami (CSS) i skryptami (JavaScript). Ale fundamentem jest zawsze HTML, bo to on niesie treść. Nawet jeśli włączysz supernowoczesne biblioteki, na końcu i tak lądujesz przy znacznikaсh <h1>, <p>, <img>, <a>. Z punktu widzenia egzaminu, znajomość podstaw HTML to pewne punkty – polecenia typu „dodaj obrazek z alternatywnym opisem” pojawiają się regularnie.

Żeby było obrazowo: HTML to szkielety i organy strony. CSS to ubranie i makijaż. JavaScript to układ nerwowy i mięśnie (ruch, logika, interakcje). Jeśli uczeń zapamięta tę metaforę, rozumie, dlaczego osobno mówimy o strukturze i o wyglądzie.

W praktyce nauczysz się czytać i pisać HTML szybciej, niż myślisz. To bardzo logiczny język: elementy zagnieżdżają się w sobie, mają znaczenie semantyczne i kilka prostych atrybutów. Do pracy wystarczy zwykły edytor tekstu i przeglądarka.

2. HTML vs CSS – dwie różne technologie

HTML odpowiada za strukturę i treść: tytuły, akapity, listy cech, obraz bohatera, odsyłacze do źródeł. Znaczniki mówią „co to jest”: nagłówek, artykuł, sekcja, stopka. Dzięki temu czytniki ekranu, roboty wyszukiwarek i Twoi uczniowie widzą sens, a nie tylko ładne pudełko. Im lepsza semantyka, tym łatwiejsza nawigacja i lepsze SEO.

CSS odpowiada za prezentację: kolory, czcionki, odległości, układ kolumn, cienie, wersję mobilną. To w CSS decydujesz, czy Iron Man ma ciemne tło, złote akcenty i jak zachowa się strona na telefonie. Ten podział pracy jest święty: dzięki niemu możesz wymienić „skin” bez ruszania treści.

Ten sam HTML bez CSS będzie wyglądał „surowo”, ale nadal będzie poprawny i czytelny. To ważny punkt matury: ocenia się poprawność struktury, poprawność znaczników, semantykę i dostępność (np. alt przy obrazku), a dopiero potem warstwę estetyczną. Często zadanie brzmi: „Na podstawie opisu uzupełnij HTML, a potem dodaj prosty CSS”.

Na koniec: CSS jest kaskadowy. Styl zapisany „wyżej” może nadpisywać style „niżej”. Kolejność i specyficzność selektorów (np. #id > .klasa > tag) ma znaczenie. To bardzo maturalne pytanie: „dlaczego mój nagłówek nie zmienił koloru?”. Odpowiedź zwykle leży w kolejności i specyficzności.

3. Podstawowa struktura pliku HTML

html

<!DOCTYPE html>  <!-- Deklaracja typu dokumentu -->
<html lang="pl">  <!-- Główny znacznik, lang="pl" oznacza język polski -->
<head>  <!-- Sekcja z metadanymi, niewidoczna na stronie -->
    <title>Tytuł strony</title>  <!-- Tytuł wyświetlany w zakładce przeglądarki -->
    <meta charset="UTF-8">  <!-- Kodowanie znaków, np. dla polskich liter -->
</head>
<body>  <!-- Sekcja z widoczną treścią strony -->
    <!-- Tu umieszczamy elementy strony -->
</body>
</html>

Każda strona zaczyna się od deklaracji <!DOCTYPE html> – to znak dla przeglądarki: „renderuj po nowemu, nie w trybie muzealnym”. Potem mamy element korzeń <html lang="pl">, który zawiera dwie części: <head> i <body>. W head trzymamy metadane (kodowanie, tytuł, opis, link do CSS), a w body – właściwą treść.

W head absolutna podstawa to <meta charset="utf-8">, bo bez tego polskie znaki mogą być „krzaczkami”. Warto dodać <meta name="viewport" content="width=device-width, initial-scale=1">, żeby strona była responsywna – to też często sprawdzane. Tytuł strony <title> pojawia się na karcie przeglądarki i w wynikach wyszukiwania.

W body umieścisz całą stronę Iron Mana: nagłówek z logo/tytułem, nawigację, sekcje z opisem, galerię, ciekawostki i stopkę. Struktura powinna być logiczna i hierarchiczna: nagłówek najwyższego poziomu jest jeden (<h1>), pod nim mniejsze nagłówki (<h2>, <h3>) porządkują treść.

Minimalny szablon dla matury: poprawny doctype, atrybut lang, kompletne <head> z meta-tagami, czytelny <body> z nagłówkiem i przynajmniej jedną sekcją treści. To często jest już 60–70% punktów w zadaniu z HTML-a.

4. Najważniejsze znaczniki HTML

Nagłówki <h1>–<h6> tworzą spis treści strony. <h1> to tytuł całej strony („Mój bohater – IRON MAN”), niższe poziomy dzielą treść („Pancerze”, „Ciekawostki”). Nigdy nie używaj nagłówków tylko do „większej czcionki”; od tego jest CSS.

Akapit <p> to podstawowa porcja tekstu. Każda myśl – oddzielny akapit. Ułatwia to czytanie i dostępność. Przeglądarka automatycznie dodaje odstęp wokół paragrafu, ale ten wygląd i tak potem ustawisz w CSS.

Link <a href=""> łączy dokumenty i strony. Atrybut href wskazuje adres, a tekst między znacznikami jest klikalny. Dbaj o zrozumiały tekst linku (np. „Oficjalna strona Marvel” zamiast „kliknij tutaj”). To też punktowane w zadaniach: „dostępność”.

Obraz <img src="" alt=""> potrzebuje dwóch rzeczy: adresu pliku (src) i opisu alternatywnego (alt). Alt czyta czytnik ekranu i pokazuje się, jeśli obraz się nie wczyta. To częsty punkt w poleceniach: „uzupełnij obraz o opis alternatywny”.

Listy: nieuporządkowana (<ul> <li>) do wypunktowań, uporządkowana (<ol> <li>) do list numerowanych, kroków, rankingów. W stronach o bohaterach świetnie się sprawdzi lista atrybutów, pancerzy, filmów.

Kontener <div> grupuje elementy, gdy nie ma lepszego semantycznego znacznika. Używaj z klasą (class="sekcja") i rozsądnie. Dla struktury ogólnej lepsze są semantyczne odpowiedniki: <section>, <article>, <aside>.

Proste formatowanie: <strong> (ważne treści, semantyczne „pogrubienie”), <em> (podkreślenie ważności, „kursywa”), <br> (złamanie linii – tylko gdy naprawdę potrzebne, np. w adresie). Na maturze „czym się różni <b> od <strong>?” – strong ma znaczenie, b to tylko wygląd.

5. Struktura nowoczesnej strony: tagi semantyczne HTML5

html

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Przykład struktury</title>
</head>
<body>
    <header>  <!-- Nagłówek strony, np. logo i menu -->
        <h1>Moja Strona</h1>
        <nav>  <!-- Nawigacja, menu z linkami -->
            <ul>
                <li><a href="#glowna">Główna</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    
    <main>  <!-- Główna treść strony -->
        <section>  <!-- Sekcja, np. część z artykułem -->
            <h2>Sekcja 1</h2>
            <p>Treść sekcji.</p>
        </section>
        
        <article>  <!-- Artykuł, samodzielna treść -->
            <h2>Artykuł</h2>
            <p>To jest niezależny artykuł.</p>
        </article>
        
        <aside>  <!-- Boczny panel, np. reklamy lub dodatkowe info -->
            <p>Dodatkowe informacje.</p>
        </aside>
    </main>
    
    <footer>  <!-- Stopka, np. prawa autorskie, kontakt -->
        <p>© 2025 Moja Strona. Wszelkie prawa zastrzeżone.</p>
    </footer>
</body>
</html>

Wyjaśnienie elementów struktury:

<header> zawiera tytuł strony, logo, czasem krótkie motto. Nie mylić z nagłówkiem tabeli. Zwykle mamy jeden główny header na stronie, a wewnątrz artykułów mogą być nagłówki lokalne.

<nav> to nawigacja: menu z linkami do sekcji. Czytniki ekranu mogą dzięki temu przeskoczyć od razu do menu. Jeśli masz jedno główne menu, umieść je w jednym <nav>. To poprawia strukturę i SEO.

<main> trzyma główną, unikatową treść strony (powinien być jeden). W naszych zajęciach to opis Iron Mana, sekcje o pancerzach, ciekawostkach, galerii. Wyszukiwarki rozumieją, że to najważniejsza część.

<section> i <article> porządkują treść. section to logiczna część strony z nagłówkiem (np. „Biografia”, „Pancerze”), article to samodzielny artykuł, który mógłby istnieć osobno (np. „Recenzja filmu Iron Man 1”). Na maturze często proszą o „użycie odpowiednich znaczników semantycznych” – dokładnie o to chodzi.

<aside> to treść poboczna: ramka z cytatem, skrót, ciekawostka, odnośniki. <footer> to stopka: autor, licencja, link do źródeł, kontakt. Te elementy ułatwiają nawigację i dostosowanie stylów, a także są punktowane w zadaniach.

6. Atrybuty znaczników

class i id służą do stylowania (CSS) i programowania (JS). id powinno być unikalne w dokumencie (np. id="bohater"), class można powtarzać (np. class="karta" dla wielu boksów). Na maturze łatwo zdobyć punkty, dodając czytelne klasy i stylując je w pliku CSS.

alt w <img> to dostępność w praktyce. Opisz co jest na obrazku („Portret Iron Mana w pancerzu Mark III”), nie „obrazek1.jpg”. Czytniki ekranu czytają ten tekst, a przeglądarka pokaże go, gdy plik się nie załaduje.

Inne przydatne atrybuty: lang w <html> (np. lang="pl"), title (krótki dymek z opisem, ale nie nadużywać), rel="noopener noreferrer" przy linkach z target="_blank" (bezpieczeństwo), aria-* (dostępność – zaawansowane, ale warto znać nazwę).

Warto też pamiętać o atrybucie loading="lazy" dla <img> – opóźnia ładowanie obrazów poza ekranem, przyspieszając wczytanie strony. Coraz częściej pojawia się to w praktyce szkolnej i zadaniach z optymalizacji.

7. Walidacja i poprawność kodu – dobry styl HTML

Walidacja to sprawdzenie, czy HTML jest zgodny ze standardem. Oficjalny walidator W3C wyłapie niezamknięte tagi, złe zagnieżdżenie, nieprawidłowe atrybuty. Warto przejść przez walidację przed oddaniem zadania – kilka kliknięć ratuje punkty.

Najczęstsze błędy: brak alt przy obrazku, wielokrotne <h1>, puste linki (<a href="#"> bez sensu), używanie <br> do robienia odstępów zamiast marginesów w CSS. Często też uczniowie mieszają <b> i <strong> – pamiętaj, strong ma znaczenie, b tylko wygląd.

Poprawna hierarchia nagłówków to złoto: najpierw <h1>, potem <h2>, nie przeskakuj z <h2> na <h4>. Czytniki i roboty wyszukiwarek traktują nagłówki jak spis treści. Na maturze potrafią dać polecenie „napraw kolejność nagłówków”.

Dobrą praktyką jest też trzymanie CSS w osobnym pliku i unikanie stylów „inline”. Dzięki temu kod jest czytelny, łatwo go modyfikować, a w zadaniu można szybciej znaleźć miejsce na zmiany.

8. Podstawy CSS – jak „ubrać” stronę

CSS podpinamy w <head> przez <link rel="stylesheet" href="style.css">. Można też doraźnie użyć <style> lub atrybutu style="" w znaczniku, ale na maturze i w realnym świecie preferujemy osobny plik. To wspólny nawyk: struktura (HTML) nie miesza się z prezentacją (CSS).

Reguła CSS ma postać: selektor → właściwości. Na przykład:

h1 { color: #c71515; margin-bottom: .5rem; }
.card { background: #111; border-radius: 12px; }

Selektor wybiera elementy, a właściwości mówią, co z nimi zrobić. Kolejność ma znaczenie – reguły późniejsze mogą nadpisać wcześniejsze (kaskada).

Podstawowe właściwości na start: color, background, font-family, font-size, line-height, margin, padding, border, display, gap. Do układów wykorzystaj Flexbox (display: flex;) albo Grid. Na maturze coraz częściej pojawia się polecenie „ułóż dwie kolumny w CSS” – Flex rozwiązuje to w trzech linijkach.

Responsywność to dopasowanie do telefonu. Najprościej przez media queries:

@media (max-width: 768px) { nav ul { flex-direction: column; } }

To też bywa w zadaniach: „spraw, by menu w pionie było na małych ekranach”.

Szczegółowy opis CSS czyli języka, który służy do określania wyglądu i layoutu stron internetowych znajdziemy w innym artykule na mojej stronie.

9. Praca praktyczna – przykładowy dokument HTML+CSS

„Mój bohater – IRON MAN”

9.1 Plik index.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mój bohater – IRON MAN</title>
  <meta name="description" content="Strona o Iron Manie: biografia, pancerze, ciekawostki i galeria.">
  <!-- Podpięcie zewnętrznego arkusza stylów -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Główny nagłówek strony -->
  <header class="site-header">
    <h1>Mój bohater – <span class="accent">IRON MAN</span></h1>
    <p class="tagline">Geniusz. Miliarder. Filantrop. Superbohater.</p>
    <!-- Nawigacja strony -->
    <nav aria-label="Główne menu">
      <ul class="menu">
        <li><a href="#bio">Biografia</a></li>
        <li><a href="#armors">Pancerze</a></li>
        <li><a href="#facts">Ciekawostki</a></li>
        <li><a href="#gallery">Galeria</a></li>
        <li><a href="#links">Źródła</a></li>
      </ul>
    </nav>
  </header>

  <!-- Główna treść strony -->
  <main id="content">
    <!-- Sekcja: Biografia -->
    <section id="bio" class="section">
      <h2>Biografia</h2>
      <p>Tony Stark to wynalazca i właściciel Stark Industries. Po dramatycznych wydarzeniach
         konstruuje pancerz, który ratuje mu życie i zmienia sposób, w jaki broni świata – tak powstaje Iron Man.</p>
      <p>Jego historia to ciągły rozwój technologii: od prototypu w jaskini po zaawansowane kombinezony
         sterowane sztuczną inteligencją. To opowieść o odpowiedzialności za własne wynalazki.</p>
      <figure class="hero">
        <img src="ironman_mark3.jpg" alt="Iron Man w pancerzu Mark III w locie">
        <figcaption>Iron Man – pancerz Mark III (materiały promocyjne)</figcaption>
      </figure>
    </section>

    <!-- Sekcja: Pancerze -->
    <section id="armors" class="section">
      <h2>Pancerze (wybór)</h2>
      <ol class="armors">
        <li><strong>Mark I</strong> – surowy prototyp, ale kluczowy dla ucieczki i narodzin bohatera.</li>
        <li><strong>Mark III</strong> – kultowa czerwień i złoto, pełne uzbrojenie i lot.</li>
        <li><strong>Mark L (50)</strong> – nanotechnologia, błyskawiczne formowanie broni.</li>
      </ol>
      <aside class="note">
        <p><strong>Nota:</strong> W komiksach i filmach istnieje kilkadziesiąt wariantów pancerza.
           To idealna lista do ćwiczeń z HTML: można zrobić tabelę, siatkę kart lub akordeon.</p>
      </aside>
    </section>

    <!-- Sekcja: Ciekawostki -->
    <section id="facts" class="section">
      <h2>Ciekawostki</h2>
      <ul>
        <li>Inspiracją postaci byli m.in. Howard Hughes i współcześni wizjonerzy technologii.</li>
        <li>Kolorystyka pancerza (czerwień + złoto) stała się ikoną popkultury i identyfikacji marki.</li>
        <li>Wersje pancerza różniły się nie tylko uzbrojeniem, ale i systemami zasilania reaktora łukowego.</li>
      </ul>
    </section>

    <!-- Sekcja: Galeria -->
    <section id="gallery" class="section gallery">
      <h2>Galeria</h2>
      <div class="grid">
        <figure class="card">
          <img src="mark1.jpg" alt="Pancerz Mark I – stalowy prototyp">
          <figcaption>Mark I</figcaption>
        </figure>
        <figure class="card">
          <img src="mark3.jpg" alt="Pancerz Mark III – czerwono-złoty">
          <figcaption>Mark III</figcaption>
        </figure>
        <figure class="card">
          <img src="mark50.jpg" alt="Pancerz Mark 50 – nanotechnologiczny">
          <figcaption>Mark L (50)</figcaption>
        </figure>
      </div>
    </section>

    <!-- Sekcja: Odnośniki -->
    <section id="links" class="section">
      <h2>Źródła i linki</h2>
      <p>Więcej informacji znajdziesz na
        <a href="https://www.marvel.com/" target="_blank" rel="noopener noreferrer">oficjalnej stronie Marvel</a>
        oraz w materiałach prasowych filmów z serii <em>Iron Man</em> i <em>Avengers</em>.</p>
    </section>
  </main>

  <!-- Stopka strony -->
  <footer class="site-footer">
    <p>Strona edukacyjna – HTML/CSS • Autor: Klasa INF • Licencja: do użytku szkolnego</p>
  </footer>
</body>
</html>

9.2 Plik style.css

/* Podstawy: kolory, typografia, reset */
:root{
  --bg: #0e0f13;        /* ciemne tło jak w warsztacie Starka */
  --card: #151824;
  --accent: #d22;       /* czerwony akcent */
  --gold: #c9a227;      /* złote detale */
  --text: #e7e7e7;
  --muted: #a4a8b3;
}

*{ box-sizing: border-box; }
html{ font-size: 16px; }
body{
  margin: 0;
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #1a1f2c 0%, #0e0f13 60%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial, sans-serif;
  line-height: 1.6;
}

/* Nagłówek i menu */
.site-header{
  padding: 2rem 1rem 1rem;
  text-align: center;
  border-bottom: 1px solid #232737;
}
h1{
  margin: 0 0 .25rem;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  letter-spacing: .5px;
}
.accent{ color: var(--accent); }
.tagline{ color: var(--muted); margin: .2rem 0 1rem; }

nav .menu{
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
}
nav a{
  display: inline-block;
  padding: .5rem .8rem;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  background: #1a1f2b;
  border: 1px solid #21263a;
}
nav a:hover{ background: #22283a; border-color: #2c3350; }

/* Układ sekcji */
.section{
  padding: 2rem 1rem;
  max-width: 1000px;
  margin: 0 auto;
}
.section h2{
  margin-top: 0;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--gold);
  letter-spacing: .3px;
}

/* Figura główna */
.hero{
  margin: 1rem 0;
  text-align: center;
}
.hero img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #232737;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.hero figcaption{
  color: var(--muted);
  font-size: .9rem;
  margin-top: .5rem;
}

/* Listy i treść */
ol.armors li + li{ margin-top: .4rem; }
.note{
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: #121522;
  border: 1px solid #22273a;
  border-radius: 10px;
}

/* Galeria */
.gallery .grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
.card{
  background: var(--card);
  border: 1px solid #232737;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.card img{ width: 100%; display: block; }
.card figcaption{
  padding: .6rem .8rem;
  color: var(--muted);
  border-top: 1px solid #232737;
}

/* Stopka */
.site-footer{
  padding: 1.2rem 1rem 2rem;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid #232737;
}

/* Responsywność */
@media (max-width: 900px){
  .gallery .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  nav .menu{ flex-direction: column; align-items: center; }
  .gallery .grid{ grid-template-columns: 1fr; }
}

Co uczeń widzi po uruchomieniu? Dobrze zorganizowaną, semantyczną stronę z nawigacją, sekcjami i responsywną galerią kart. W kodzie są komentarze i najlepsze praktyki: alt, rel="noopener", media queries, kolory jako zmienne CSS. To jest dokładnie to, czego oczekuje matura: poprawna struktura + proste, czytelne style.

10. Typowe zadania maturalne

Zidentyfikuj błąd w kodzie HTML. Najczęściej: niezamknięty znacznik, literówka w nazwie (np. <imq>), brak alt, skok z <h2> na <h4>, kilka <h1> na jednej podstronie. Rozwiązanie: przejdź walidację W3C, popraw hierarchię nagłówków, dodaj alt, zamknij tagi.

Zaprojektuj szablon zgodnie z opisem. Opisz strukturę semantyczną: header + nav + main (sectiony) + footer. Wstaw sensowne nagłówki, listy, obrazki z alt. Dla punktów bonusowych – użyj klas i stylów w zewnętrznym pliku.

Dodaj styl CSS (kolor, rozmiar, układ). W head dodaj <link rel="stylesheet" href="style.css">. W pliku CSS: ustaw typografię, odstępy, kolory nagłówków, zrób dwie kolumny Flexem lub Gridem. Wyjaśnij w komentarzach, co robi dana reguła – to doceni egzaminator.

Znajdź i popraw semantykę. Zamień div-spaghetti na: header, nav, main, section, article, aside, footer. Przenieś dekoracyjne <b>/<i> na strong/em tam, gdzie to ma sens. Pamiętaj: semantyka = punkty za dostępność i SEO.

Wstaw grafikę lub link zgodnie z poleceniem. Grafika: <img src="mark3.jpg" alt="Iron Man w pancerzu Mark III">. Link: <a href="https://www.marvel.com/" target="_blank" rel="noopener noreferrer">Marvel</a>. Jeśli polecą „link wewnętrzny do sekcji”, zrób <a href="#gallery">Galeria</a> i id="gallery" w sekcji.

Wyjaśnij podział na HTML i CSS. Jedno zdanie: „HTML opisuje strukturę i znaczenie treści, a CSS odpowiada za wygląd i układ – rozdzielamy je, by strona była dostępna, łatwa do modyfikacji i zgodna ze standardami”.

11. Podsumowanie

Zapamiętaj krótko: HTML = szkielet, CSS = wygląd, JS = interakcja. Najpierw projektujesz treść i strukturę, dopiero później „ubierasz” stronę. Egzamin sprawdza, czy piszesz poprawnie i semantycznie, a CSS ma pokazać, że rozumiesz podstawowe reguły i responsywność.

Pracuj w prostym edytorze (VS Code, nawet Notatnik) i testuj w przeglądarce. Otwórz narzędzia deweloperskie (F12), podejrzyj drzewo DOM, poeksperymentuj ze stylami. To najlepsze ćwiczenie na zrozumienie „co, jak i dlaczego”.

Na koniec – praktyka wygrywa. Weź powyższy szablon Iron Mana i przerób go na innego bohatera lub postać historyczną. Zmieniasz tylko treść i obrazki – struktura i CSS zostają. I to jest piękno weba.

12. Ćwiczenia dla ucznia

  1. Szablon powitalny: utwórz stronę „Witaj na mojej stronie” z header, nav, main, footer. Dodaj jeden obraz z alt, jedną listę i link do zewnętrznej strony.
  2. HTML vs CSS: wypisz 5 elementów HTML (do czego służą) i 5 właściwości CSS (co zmieniają).
  3. Styluj: podłącz style.css i zmień: kolor nagłówków, rozmiar akapitów, odstępy list, tło sekcji, wygląd linków. Dodaj regułę @media na telefony.
  4. Znajdź błędy: dostajesz plik z literówkami w znacznikach, brakiem alt, br używanym do odstępów – popraw i krótko uzasadnij.
  5. <b> vs <strong>, <i> vs <em>: wyjaśnij różnicę semantyczną i pokaż po jednym przykładzie użycia w zdaniu (np. podkreślenie ważnego fragmentu cytatu).