Zadanie - karta bohatera
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
Zadanie: „Interaktywna Wizytówka Bohatera”
Cel: Stwórz prostą stronę WWW, która zaprezentuje wybranego bohatera. Strona musi zawierać opis, dane techniczne w tabeli oraz formularz kontaktowy do fanklubu.
1. Struktura HTML (Treść)
Strona powinna zawierać:
Nagłówki:
<h1>dla imienia postaci,<h2>dla sekcji.Tekst:
<p>z krótką historią bohatera,<strong>dla ważnych cech.Obraz:
<img>przedstawiający postać (pamiętaj o atrybuciealt!).Link:
<a>prowadzący do Wiki o tej postaci.Tabela:
<table>z dwiema kolumnami: „Cecha” (np. Siła, Inteligencja) i „Wartość”.Formularz:
<form>z polami:input(typ text i email) orazbuttondo wysłania.
2. Stylizacja CSS (Wygląd)
Plik CSS powinien zawierać:
Kolory: Zmiana koloru tła strony (
background-color) oraz koloru tekstu.Model pudełkowy (Box Model): * Dodanie
paddingwewnątrz tabeli i formularza, aby treść nie „dotykała” krawędzi.Dodanie
margindla obrazka i akapitów, aby oddzielić je od siebie.
Obraz: Ustawienie stałej szerokości (
width), by obraz nie zajął całego ekranu.
Krótkie przypomnienie zagadnień:
Margin vs Padding: Wyobraź sobie, że element to obraz w ramce. Padding to wolne miejsce między obrazkiem a ramką (wewnątrz). Margin to odstęp między Twoją ramką a innymi obrazami na ścianie (na zewnątrz).
Tabele (
<table>): Pamiętaj o hierarchii:table->tr(wiersz) ->td(komórka) lubth(nagłówek komórki).Formularze: Atrybut
placeholderw znacznikuinputpodpowiada użytkownikowi, co ma wpisać, zanim zacznie pisać.Linki: Zawsze używaj atrybutu
href, aby wskazać cel podróży.
Przykład rozwiązania:
Przykładowy kod:
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Wizytówka Bohatera</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
background-color: white;
padding: 20px;
margin: 50px auto;
width: 50%;
border-radius: 10px;
}
img {
width: 200px;
margin-bottom: 20px;
}
td {
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class=”container”>
<h1>Wiedźmin Geralt</h1>
<img src=”http://it-lekcje.pl/wp-content/uploads/2026/03/geralt.png” alt=”Portret bohatera”>
<p>Geralt z Rivii to <strong>płatny zabójca potworów</strong>.</p>
<table>
<tr>
<th>Cecha</th>
<th>Poziom</th>
</tr>
<tr>
<td>Siła</td>
<td>9/10</td>
</tr>
</table>
<h3>Zapisz się do fanklubu</h3>
<form>
<input type=”text” placeholder=”Twoje imię”>
<input type=”email” placeholder=”Email”>
<button type=”submit”>Wyślij</button>
</form>
<p>Więcej info: <a href=”https://google.com”>Kliknij tutaj</a></p>
</div>
</body>
</html>
