Ćwiczenia podsumowujące

Prosta, kompletna strona z tabelami, formularzami i multimediami

Przykład kompletnej strony HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Moja strona</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    th { background-color: #f0f0f0; }
    form { margin-top: 20px; }
    label { display: block; margin-top: 10px; }
  </style>
</head>
<body>

<h1>Przykładowa strona</h1>

<h2>Tabela danych</h2>
<table>
  <thead>
    <tr>
      <th>Imię</th>
      <th>Wiek</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Jan</td><td>30</td></tr>
    <tr><td>Anna</td><td>25</td></tr>
  </tbody>
</table>

<h2>Formularz kontaktowy</h2>
<form action="#" method="post">
  <label for="name">Imię:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Wiadomość:</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <input type="submit" value="Wyślij">
</form>

<h2>Multimedia</h2>
<img src="obrazek.jpg" alt="Przykładowy obrazek" width="300">

</body>
</html>

Ćwiczenia do wykonania: