<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T08:38:46+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "ar"
}
-->
# مهمة تدريب HTML: إنشاء نموذج مدونة

## الهدف

تصميم وكتابة هيكل HTML يدويًا لصفحة رئيسية لمدونة شخصية. سيساعدك هذا التمرين على ممارسة HTML الدلالي، تخطيط التصميم، وتنظيم الكود.

## التعليمات

1. **صمم نموذج مدونتك**
   - ارسم نموذجًا مرئيًا لصفحة المدونة الرئيسية الخاصة بك. قم بتضمين الأقسام الرئيسية مثل العنوان، التنقل، المحتوى الرئيسي، الشريط الجانبي، والتذييل.
   - يمكنك استخدام الورق ومسح الرسم ضوئيًا، أو استخدام أدوات رقمية (مثل Figma، Adobe XD، Canva، أو حتى PowerPoint).

2. **حدد عناصر HTML**
   - قم بإعداد قائمة بعناصر HTML التي تخطط لاستخدامها لكل قسم (مثل `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`، إلخ).

3. **اكتب تعليمات HTML**
   - قم بكتابة كود HTML يدويًا لنموذجك. ركز على الهيكل الدلالي وأفضل الممارسات.
   - قم بتضمين ما لا يقل عن 10 عناصر HTML مميزة.
   - أضف تعليقات لشرح اختياراتك وهيكل الكود.

4. **قدم عملك**
   - قم برفع الرسم/النموذج الخاص بك وملف HTML.
   - اختياريًا، قدم انعكاسًا موجزًا (2–3 جمل) حول قرارات التصميم الخاصة بك.

## معايير التقييم

| المعايير         | ممتاز                                                                                     | مقبول                                                                         | يحتاج إلى تحسين                                                               |
|------------------|------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
| النموذج المرئي    | نموذج واضح ومفصل مع أقسام مُعلمة وتخطيط مدروس                                             | نموذج أساسي مع بعض الأقسام المُعلمة                                            | نموذج بسيط أو غير واضح؛ يفتقر إلى علامات الأقسام                                |
| عناصر HTML       | استخدام 10+ عناصر HTML دلالية؛ يظهر فهمًا للهيكل وأفضل الممارسات                          | استخدام 5–9 عناصر HTML؛ بعض الهيكل الدلالي                                    | استخدام أقل من 5 عناصر؛ يفتقر إلى الهيكل الدلالي                               |
| جودة الكود        | كود منظم وقابل للقراءة مع تعليقات؛ يتبع معايير HTML                                       | كود منظم إلى حد ما؛ قليل من التعليقات                                          | كود غير منظم؛ يفتقر إلى التعليقات                                              |
| الانعكاس         | انعكاس عميق حول اختيارات التصميم والتحديات                                                | انعكاس أساسي                                                                 | لا يوجد انعكاس أو يفتقر إلى الصلة                                             |

## نصائح

- استخدم علامات HTML الدلالية لتحسين الوصول وتحسين محركات البحث.
- قم بتنظيم الكود باستخدام التباعد والتعليقات.
- راجع [مرجع عناصر HTML من MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) للحصول على الإرشادات.
- فكر في كيفية توسيع أو تصميم تخطيطك في المهام المستقبلية.

---

**إخلاء المسؤولية**:  
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.