1. Fundamentalne znaczniki w dokumencie HTML
Stwórz minimalny dokument HTML z doctype, head (meta charset, title) oraz body z nagłówkiem i akapitem.
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Moja strona</title>
</head>
<body>
<h1>Tytuł</h1>
<p>Przykładowy tekst.</p>
</body>
</html>
2. Poprawne wypisywanie tekstów
Wstaw akapit z cytatem i słowem wyróżnionym (<strong> lub <em>). Użyj encji HTML dla znaków specjalnych.
<p>To jest przykład: & — znak ampersand. Cytat: <q>Ucz się codziennie</q>. <strong>Ważne!</strong></p>
3. Obrazy w HTML
Wstaw obraz z atrybutem alt i szerokością 300px. Dodaj podpis pod obrazem z <figure> i <figcaption>.
<figure>
<img src="https://placekitten.com/600/400" alt="Kot" width="300">
<figcaption>Kot w pudełku</figcaption>
</figure>
4. Hiperłącza
Utwórz link otwierający zewnętrzną stronę w nowej karcie i link do sekcji na tej samej stronie.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Zewnętrzny</a>
<a href="#sekcja1">Idź do sekcji 1</a>
5. Nagłówki h1-h6
Ułóż strukturę artykułu z h1 (tytuł), h2 (sekcje) i h3 (podsekcje).
<h1>Tytuł artykułu</h1>
<h2>Sekcja pierwsza</h2>
<h3>Podsekcja</h3>
<h2>Sekcja druga</h2>
6. Tworzenie tabel
Zbuduj tabelę z thead, tbody i tfoot. Dodaj 3 kolumny i 2 wiersze danych.
<table>
<thead><tr><th>Imię</th><th>Nazwisko</th><th>Wiek</th></tr></thead>
<tbody><tr><td>Jan</td><td>Kowalski</td><td>20</td></tr>
<tr><td>Anna</td><td>Nowak</td><td>22</td></tr></tbody>
<tfoot><tr><td colspan="3">Stopka</td></tr></tfoot>
</table>
7. Listy punktowane, numerowane i definicji
Utwórz ul, ol oraz dl z 2 pozycjami każda.
<ul><li>Jabłko</li><li>Gruszka</li></ul>
<ol><li>Pierwszy</li><li>Drugi</li></ol>
<dl><dt>HTML</dt><dd>Język znaczników</dd><dt>CSS</dt><dd>Stylowanie</dd></dl>
8. Formularz podstawowy
Stwórz formularz z input tekstowym, e-mail i przyciskiem submit.
<form>
<label>Imię: <input type="text"></label>
<label>Email: <input type="email"></label>
<button type="submit">Wyślij</button>
</form>
9. Atrybuty input
Dodaj inputy: password, number (min 1, max 10) i checkbox.
<input type="password">
<input type="number" min="1" max="10">
<input type="checkbox"> Zgoda
10. Style inline, internal i external
Przetestuj stylowanie elementu span inline, w head (internal) i przez plik CSS (external).
<span style="color:red">Inline</span>
<style>span.internal{color:blue}</style>
<span class="internal">Internal</span>
/* External w pliku style.css: span.external{color:green} */
<span class="external">External</span>
11. Selektory CSS podstawowe
Użyj selektorów: tag, class, id i pseudo-class hover.
p {color:yellow;}
.text {font-weight:bold;}
#main {background:#333;}
a:hover {text-decoration:underline;}
12. Kolory, fonty i tło
Ustaw kolor tekstu, font-family i tło dla div.
<div style="color:#fff; font-family:Arial; background:#444">Przykład</div>
13. Box model
Dodaj margines, padding i border do div, ustaw szerokość i wysokość.
<div style="width:200px; height:100px; margin:10px; padding:10px; border:2px solid red">Box</div>
14. Flexbox
Ułóż 3 divy w wierszu z równym odstępem przy użyciu flexbox.
<div style="display:flex; justify-content:space-between">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
15. Grid CSS
Stwórz grid 2x2 z 4 elementami, ustaw gap na 10px.
<div style="display:grid; grid-template-columns:1fr 1fr; gap:10px">
<div>A</div><div>B</div>
<div>C</div><div>D</div>
</div>
16. Pseudo-elementy ::before i ::after
Dodaj zawartość przed i po div przy użyciu CSS.
<style>
div::before {content:"Przed ";}
div::after {content:" Po";}
</style>
<div>Środek</div>
17. Media queries
Zmień tło div dla ekranów mniejszych niż 600px.
<style>
@media(max-width:600px){
div {background:red;}
}
</style>
<div>Responsive</div>
18. Linki wewnętrzne i zakładki
Utwórz 2 sekcje z linkami do nich z góry strony.
<a href="#sec1">Sekcja 1</a> | <a href="#sec2">Sekcja 2</a>
<h2 id="sec1">Sekcja 1</h2>
<h2 id="sec2">Sekcja 2</h2>
19. Formularz select i radio
Dodaj select z opcjami i zestaw radio buttonów.
<select>
<option>Opcja 1</option>
<option>Opcja 2</option>
</select>
<input type="radio" name="płeć"> M
<input type="radio" name="płeć"> K
20. Formularz textarea
Dodaj textarea z placeholder i ustaw wymiary 200x100px.
<textarea placeholder="Wpisz wiadomość" style="width:200px; height:100px"></textarea>
21. Audio i wideo
Dodaj element audio i video z kontrolkami.
<audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
<video controls width="300"><source src="video.mp4" type="video/mp4"></video>
22. Obrazy jako tło
Ustaw tło div jako obraz z CSS i powtórzenie no-repeat.
<div style="width:200px; height:100px; background:url('https://placekitten.com/200/100') no-repeat"></div>
23. Cienie i border-radius
Dodaj div z zaokrąglonymi rogami i cieniem.
<div style="width:100px; height:50px; border-radius:10px; box-shadow:2px 2px 5px #000"></div>
24. Animacje CSS
Utwórz animację przesuwającą div w prawo o 100px w 2s.
<style>
@keyframes moveRight { from{transform:translateX(0);} to{transform:translateX(100px);} }
div.animate { width:50px; height:50px; background:red; animation:moveRight 2s forwards;}
</style>
<div class="animate"></div>