الدرس 12
عرض الصور وفهم المسار والنص البديل
معنى أسماء العناصر والخصائص
ال img اختصار ل Image يعني صورة وال src اختصار ل Source يعني المصدر وبتحدد مسار الصورة
ال alt اختصار ل Alternative يعني بديل وبتحتوي على النص البديل للصورة
هنضيف غلاف كتاب لمشروع المكتبة ونفهم ليه اسم الملف ومكانه مهمين لظهور الصورة
جهز الصورة داخل المشروع
داخل learn-html اعمل مجلد images وحط فيه صورة مناسبة من جهازك باسم book-cover.jpg
استخدم صورة عندك وراجع امتدادها واتاكد انه مكتوب بشكل سليم
<img src="images/book-cover.png" alt="The Book Cover Text">ال src بتحدد مسار الصورة بالنسبة لملف الصفحة وال alt بتقدم بديلا نصيا لمعناها
ال img عنصر فارغ ومش بنكتب جواه محتوى أو وسم إغلاق
اختار النص البديل حسب وظيفة الصورة
لو الصورة غلاف كتاب اكتب وصف يوضح الكتاب بدل كلمة صورة فقط
لو الصورة زخرفية ومش بتضيف معلومة استخدم alt بقيمة فارغة بدل ما تحذف الخاصية
<img src="images/decoration.png" alt="">ماذا تفعل لو الصورة لم تظهر
- راجع اسم الملف والامتداد
- اتأكد إن مجلد images بجوار index.html
- طابق الحروف الكبيرة والصغيرة لأن اختلافها ممكن يعمل مشكلة على السيرفر
- استخدم الشرط المائل / في المسار
حدد الأبعاد الحقيقية
لو صورة الغلاف عرضها 400 وارتفاعها 600 بكسل ممكن تكتب الأبعاد دي علشان المتصفح يعرف نسبتها ويحجز مكانها أثناء التحميل
<img src="images/book-cover.png" alt="The Book Cover Text" width="400" height="600">الأبعاد في المثال تخص صورة بهذه النسبة فلا تستخدمها مع أي صورة عشوائية وإلا ممكن يظهر الغلاف مشدود
تطبيق يجمع الدروس
ضيف غلاف ووصف وسعر لكتاب ثم رابط يفتح صفحة about.html
غير المسار مؤقتا لاسم غير موجود ولاحظ فشل التحميل ثم رجعه وتأكد إن الصورة رجعت
ودة شكل الصورة في الصفحة بعد كتابة ال Code بشكل سليم
