4.2 KiB
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
-
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).
-
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.).
- Sporządź listę elementów HTML, które planujesz użyć w każdej sekcji (np.
-
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ę.
-
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 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. 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.