|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T09:41:43+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "pl"
|
|
|
}
|
|
|
-->
|
|
|
# HTML Praktyczne Zadanie: Stwórz Makietę Bloga
|
|
|
|
|
|
## Cel
|
|
|
|
|
|
Zaprojektuj i ręcznie zakoduj strukturę HTML dla strony głównej osobistego bloga. To ćwiczenie pomoże Ci w praktyce z semantycznym HTML, planowaniem układu i organizacją kodu.
|
|
|
|
|
|
## Instrukcje
|
|
|
|
|
|
1. **Zaprojektuj Makietę Bloga**
|
|
|
- Naszkicuj wizualną makietę strony głównej bloga. Uwzględnij kluczowe sekcje, takie jak nagłówek, nawigacja, główna treść, pasek boczny i stopka.
|
|
|
- Możesz użyć papieru i zeskanować swój szkic lub skorzystać z narzędzi cyfrowych (np. Figma, Adobe XD, Canva, a nawet PowerPoint).
|
|
|
|
|
|
2. **Zidentyfikuj Elementy HTML**
|
|
|
- Sporządź listę elementów HTML, które planujesz użyć w każdej sekcji (np. `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` itd.).
|
|
|
|
|
|
3. **Napisz Kod HTML**
|
|
|
- Ręcznie zakoduj HTML dla swojej makiety. Skup się na semantycznej strukturze i najlepszych praktykach.
|
|
|
- Uwzględnij co najmniej 10 różnych elementów HTML.
|
|
|
- Dodaj komentarze, aby wyjaśnić swoje wybory i strukturę.
|
|
|
|
|
|
4. **Prześlij Swoją Pracę**
|
|
|
- Prześlij swój szkic/makietę oraz plik HTML.
|
|
|
- Opcjonalnie, napisz krótką refleksję (2–3 zdania) na temat swoich decyzji projektowych.
|
|
|
|
|
|
## Kryteria Oceny
|
|
|
|
|
|
| Kryterium | Wzorowe | Wystarczające | Wymaga Poprawy |
|
|
|
|------------------|---------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
|
|
|
| Wizualna Makieta | Jasna, szczegółowa makieta z oznaczonymi sekcjami i przemyślanym układem | Podstawowa makieta z kilkoma oznaczonymi sekcjami | Minimalna lub niejasna makieta; brak oznaczenia sekcji |
|
|
|
| Elementy HTML | Użycie 10+ semantycznych elementów HTML; zrozumienie struktury i najlepszych praktyk | Użycie 5–9 elementów HTML; częściowa semantyczna struktura | Użycie mniej niż 5 elementów; brak semantycznej struktury |
|
|
|
| Jakość Kodowania | Dobrze zorganizowany, czytelny kod z komentarzami; zgodność ze standardami HTML | W większości zorganizowany kod; niewiele komentarzy | Nieuporządkowany kod; brak komentarzy |
|
|
|
| Refleksja | Wnikliwa refleksja na temat wyborów projektowych i wyzwań | Podstawowa refleksja | Brak refleksji lub brak jej istotności |
|
|
|
|
|
|
## Wskazówki
|
|
|
|
|
|
- Używaj semantycznych znaczników HTML dla lepszej dostępności i SEO.
|
|
|
- Organizuj kod za pomocą wcięć i komentarzy.
|
|
|
- Odwiedź [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) jako źródło informacji.
|
|
|
- Pomyśl o tym, jak Twój układ może być rozszerzony lub stylizowany w przyszłych zadaniach.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Zastrzeżenie**:
|
|
|
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za źródło autorytatywne. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia. |
