` لإنشاء العناصر المنفصلة في الصفحة. سنقوم بإنشاء سلسلة من عناصر `

` التي ستحتوي على صور. ### الصور إحدى علامات HTML التي لا تحتاج إلى علامة إغلاق هي علامة ``، لأنها تحتوي على عنصر `src` الذي يتضمن كل المعلومات التي تحتاجها الصفحة لعرض العنصر. قم بإنشاء مجلد في تطبيقك باسم `images` وأضف فيه جميع الصور الموجودة في [مجلد كود المصدر](../../../../3-terrarium/solution/images)؛ (هناك 14 صورة للنباتات). ### المهمة أضف صور النباتات هذه إلى عمودين بين علامات ``: ```html

``` > ملاحظة: الفرق بين Spans و Divs. تعتبر Divs عناصر "كتل"، بينما تعتبر Spans "عناصر خطية". ماذا سيحدث إذا قمت بتحويل هذه divs إلى spans؟ مع هذا الترميز، تظهر النباتات الآن على الشاشة. يبدو الأمر سيئًا، لأنها لم تُنسق بعد باستخدام CSS، وسنقوم بذلك في الدرس التالي. كل صورة تحتوي على نص بديل يظهر حتى إذا لم تتمكن من رؤية الصورة أو عرضها. هذا عنصر مهم يجب تضمينه لتحسين الوصول. تعرف على المزيد حول الوصول في الدروس المستقبلية؛ في الوقت الحالي، تذكر أن السمة alt توفر معلومات بديلة للصورة إذا لم يتمكن المستخدم لسبب ما من عرضها (بسبب اتصال بطيء، أو خطأ في سمة src، أو إذا كان المستخدم يستخدم قارئ شاشة). ✅ هل لاحظت أن كل صورة تحتوي على نفس النص البديل؟ هل هذا ممارسة جيدة؟ لماذا أو لماذا لا؟ هل يمكنك تحسين هذا الكود؟ --- ## الترميز الدلالي بشكل عام، من الأفضل استخدام "الدلالات" ذات المعنى عند كتابة HTML. ماذا يعني ذلك؟ يعني أنك تستخدم علامات HTML لتمثيل نوع البيانات أو التفاعل الذي صُممت من أجله. على سبيل المثال، النص الرئيسي في صفحة ما يجب أن يستخدم علامة `

`. أضف السطر التالي مباشرةً أسفل علامة الفتح ``: ```html

My Terrarium

``` استخدام الترميز الدلالي مثل وجود العناوين كـ `

` والقوائم غير المرتبة كـ `
` يساعد قارئات الشاشة على التنقل عبر الصفحة. بشكل عام، يجب كتابة الأزرار كـ `

` الأخيرة: ```html

``` ✅ على الرغم من أنك أضفت هذا الترميز إلى الشاشة، إلا أنك لا ترى أي شيء يظهر. لماذا؟ --- ## 🚀التحدي هناك بعض العلامات "القديمة" في HTML التي لا تزال ممتعة للتجربة، على الرغم من أنه لا يجب استخدام العلامات المهملة مثل [هذه العلامات](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) في ترميزك. مع ذلك، هل يمكنك استخدام العلامة القديمة `` لجعل عنوان h1 يتحرك أفقيًا؟ (إذا قمت بذلك، لا تنسَ إزالته بعد ذلك). ## اختبار ما بعد المحاضرة [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/16) ## المراجعة والدراسة الذاتية HTML هو نظام بناء "مجرب وصحيح" ساعد في بناء الويب كما نعرفه اليوم. تعرف قليلاً على تاريخه من خلال دراسة بعض العلامات القديمة والجديدة. هل يمكنك معرفة سبب إهمال بعض العلامات وإضافة أخرى؟ ما العلامات التي قد يتم تقديمها في المستقبل؟ تعرف على المزيد حول بناء المواقع للويب والأجهزة المحمولة في [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). ## الواجب [تمرن على HTML: قم ببناء نموذج مدونة](assignment.md) **إخلاء المسؤولية**: تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.