Aktualności Tutoriale Chleb DuzyZajac 29 października 2025 0 Komentarze

Złoty Chleb – krok po kroku – tutorial

Szczegółowa instrukcja krok po kroku

Poniżej znajdziesz dokładne, praktyczne kroki — od utworzenia struktury plików, przez zawartość index.html i style.css, aż po testowanie i walidację. Zrób wszystko w podanej kolejności.

1. Przygotuj folder projektu
1. Utwórz nowy folder, np. zloty-chleb.
2. W środku stwórz dwa pliki: index.html i style.css.
3. Dodaj folder images (opcjonalnie) i wrzuć tam plik obrazu chleb.jpg (np. images/chleb.jpg).
  Struktura przykładowa:

2. Zawartość pliku `index.html`

Skopiuj i wklej poniższy kod do pliku index.html. Zwróć uwagę na poprawny DOCTYPE, atrybut lang="pl", semantyczne elementy HTML5 oraz alt dla obrazka.

<!doctype html>
<html lang=”pl”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>Złoty Chleb</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<header>
<h1>Złoty Chleb</h1>
</header>

<main>
<section>
<p>
Witaj w piekarni Złoty Chleb — specjalizujemy się w tradycyjnym chlebie na zakwasie, pieczonym według rodzinnych receptur.
</p>
</section>

<section>
<h2>Nasze wypieki</h2>
<ul>
<li>Chleb żytni na zakwasie</li>
<li>Chleb pszenny rustykalny</li>
<li>Bułki maślane</li>
</ul>
</section>

<footer>
<p>© 2025 Złoty Chleb</p>
</footer>
</body>
</html>

3. Zawartość pliku `style.css`

Skopiuj i wklej ten kod do style.css. Zawiera wszystkie wymagane style plus parę drobnych udogodnień (np. responsywność obrazka).

/* Podstawowe resetowanie marginesów */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Tło strony */
body {
background-color: #fff8e1;
font-family: system-ui, -apple-system, „Segoe UI”, Roboto, „Helvetica Neue”, Arial, sans-serif;
color: #5d4037; /* domyślny kolor tekstu zbliżony do akapitów */
line-height: 1.5;
padding: 20px;
}

/* Nagłówek */
header h1 {
color: #795548;
text-align: center;
margin-bottom: 16px;
}

/* Akapit — ustawienie czcionki i koloru */
p {
font-family: Arial, sans-serif;
color: #5d4037;
margin-bottom: 12px;
}

/* Lista wypieków */
ul {
list-style: none; /* bez kropek */
padding: 10px; /* margines wewnętrzny 10px */
margin-bottom: 16px;
}

/* Opcjonalne style dla elementów listy */
ul li {
padding: 6px 0;
}

/* Obrazek chleba */
img {
width: 300px;
max-width: 100%; /* responsywność na mniejszych ekranach */
border: 2px solid #795548;
border-radius: 10px;
display: block;
margin: 12px auto; /* wycentrowanie obrazka */
}

/* Stopka */
footer {
text-align: center;
background-color: #d7ccc8;
padding: 10px;
margin-top: 24px;
border-radius: 6px;
}

4. Testowanie strony w przeglądarce

Otwórz menedżer plików, przejdź do folderu zloty-chleb.
Dwuklik na index.html — strona otworzy się w domyślnej przeglądarce.
Sprawdź:
- Czy tło ma kolor #fff8e1.
- Czy nagłówek jest brązowy i wyśrodkowany.
- Czy akapit używa czcionki Arial i ma kolor #5d4037.
- Czy lista nie ma kropek i ma padding 10px.
- Czy obrazek ma szerokość 300px, ramkę i zaokrąglone rogi.
- Czy stopka wycentrowana i tło #d7ccc8 oraz zawiera „© 2025 Złoty Chleb”.

5. Walidacja i dobre praktyki

Walidacja HTML: odwiedź validator W3C (validator.w3.org) i wklej/swój plik, żeby upewnić się, że jest poprawny HTML5.
Walidacja CSS: użyj narzędzia W3C CSS Validator (jigsaw.w3.org/css-validator) lub rozszerzenia edytora.
Dostępność: sprawdź, czy obraz ma opisowy alt. Upewnij się, że kontrast tekstu na tle jest czytelny.
Responsywność: przetestuj zmniejszając szerokość okna przeglądarki — obraz ma max-width:100%, więc powinien się dopasować.
SEO / semantyka: jeśli chcesz, możesz dodać meta description oraz uporządkować nagłówki (h2 dla sekcji).