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

` التي ستحتوي على صور. ### الصور علامة 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). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.