🎯 Ćwiczenia z HTML – Kreatywne Projekty

🧠 Zadanie 1: Stwórz swoją kartę bohatera Marvela/DC!

Cel: Ćwiczenie znaczników <h1>, <p>, <img>, <ul>, <strong>.

<!DOCTYPE html>
<html>
<head>
  <title>Captain Shadow</title>
</head>
<body style="background-color: black; color: white;">

  <h1>Captain Shadow</h1>
  <img src="/img/captain.jpg" alt="Captain Shadow">
  <p><strong>Opis:</strong> Tajemniczy bohater z mocy cienia, walczący z przestępczością w nocy.</p>

  <ul>
    <li>Znikanie w cieniu</li>
    <li>Teleportacja</li>
    <li>Czytanie w myślach</li>
  </ul>

  <blockquote>"Cień nie zawsze oznacza zło."</blockquote>

</body>
</html>

🔍 Rezultat:

🕹️ Zadanie 2: Moje ulubione gry – TOP 3!

Cel: Ćwiczenie list numerowanych i osadzania obrazków/linków.

<!DOCTYPE html>
<html>
<head>
  <title>Top 3 Gry</title>
</head>
<body style="background-color: #1a1a1a; color: white;">

  <h1>Moje ulubione gry</h1>
  <ol>
    <li>
      Minecraft
      <br><img src="/img/minecraft.jpg" alt="Minecraft">
      <br><a href="https://www.minecraft.net" target="_blank">Oficjalna strona</a>
    </li>
    <li>
      Cyberpunk 2077
      <br><img src="/img/i-cyberpunk.jpg" alt="Cyberpunk">
      <br><a href="https://www.cyberpunk.net" target="_blank">Oficjalna strona</a>
    </li>
    <li>
      Fortnite
      <br><img src="/img/fortnite.jpg" alt="Fortnite">
      <br><a href="https://www.epicgames.com/fortnite" target="_blank">Oficjalna strona</a>
    </li>
  </ol>

</body>
</html>

🔍 Rezultat:

📸 Zadanie 3: Galeria moich marzeń

Cel: Ćwiczenie znacznika <img>, atrybutów width i alt, a także wyrównania zdjęć.

<!DOCTYPE html>
<html>
<head>
  <title>Galeria marzeń</title>
</head>
<body style="background-color: #222; color: white; text-align: center;">

  <h1>Moje miejsca marzeń 🌍</h1>
  <img src="/img/image2.jpg" alt="Góry" width="200">
  <img src="/img/image2.jpg" alt="Plaża" width="200">
  <img src="/img/image2.jpg" alt="Miasto nocą" width="200">

</body>
</html>

🔍 Rezultat: