Wprowadzenie do HTML i CSS

1. Nagłówki i akapity

Utwórz stronę z nagłówkiem h1 i dwoma akapitami tekstu.

<h1>Witaj na mojej stronie</h1>
<p>To jest pierwszy akapit.</p>
<p>To jest drugi akapit.</p>
      

2. Listy

Stwórz listę numerowaną 3 kroków oraz listę nienumerowaną z 3 ulubionymi potrawami.

<ol>
  <li>Krok 1</li>
  <li>Krok 2</li>
  <li>Krok 3</li>
</ol>

<ul>
  <li>Pizza</li>
  <li>Spaghetti</li>
  <li>Pierogi</li>
</ul>
      

3. Linki

Dodaj link do strony https://informatyk.edu.pl.

<a href="https://informatyk.edu.pl" target="_blank">Odwiedź portal</a>

4. Obrazy

Wstaw obrazek z internetu i ustaw jego szerokość na 200px.

5. Formularze

Stwórz formularz z polem tekstowym, polem hasła i przyciskiem „Wyślij”.

<form>
  <input type="text" placeholder="Login"><br>
  <input type="password" placeholder="Hasło"><br>
  <button type="submit">Wyślij</button>
</form>
      

6. Selektory

Pokoloruj wszystkie nagłówki h1 na niebiesko.

<style>
  h1 { color: blue; }
</style>
      

7. Marginesy

Dodaj elementowi div margines zewnętrzny 20px i wewnętrzny 10px.

<style>
  div {
    margin: 20px;
    padding: 10px;
  }
</style>
      

8. Kolory RGBA

Ustaw tło na półprzezroczysty czerwony.

<style>
  body { background-color: rgba(255,0,0,0.5); }
</style>
      

9. Flexbox

Ustaw 3 divy obok siebie w jednym wierszu przy użyciu flexbox.

<style>
  .container { display: flex; }
  .box { background: #4CAF50; color:#fff; margin:5px; padding:20px; }
</style>

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>
      

10. Pozycjonowanie

Ustaw element absolutnie w prawym dolnym rogu strony.

<style>
  .fixed-box {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: #333;
    color: #fff;
    padding: 10px;
  }
</style>

<div class="fixed-box">Jestem w rogu</div>
      

11. Prosta strona wizytówka

Stwórz stronę z nagłówkiem, akapitem, obrazkiem i stopką. Ostyluj wszystko w CSS: kolor nagłówka, marginesy akapitu, obrazek wyśrodkowany, stopka przyklejona do dołu.

<!DOCTYPE html>
<html>
<head>
<style>
  body { margin:0; font-family: Arial; }
  header { background:#4CAF50; color:#fff; text-align:center; padding:20px; }
  main { padding:20px; }
  img { display:block; margin:0 auto; }
  footer { background:#222; color:#fff; text-align:center; padding:10px; position:fixed; bottom:0; width:100%; }
</style>
</head>
<body>
  <header><h1>Moja wizytówka</h1></header>
  <main>
    <p>Nazywam się Jan Kowalski i uczę się HTML i CSS.</p>
    <img src="https://placekitten.com/300/200" alt="Zdjęcie">
  </main>
  <footer>&copy; 2025 Jan Kowalski</footer>
</body>
</html>
      

Wprowadzenie do HTML i CSS – Ćwiczenia

Ćwiczenia HTML