شرح ادراج صورة في صفحة html وسم img - الدرس السابع

دورة تعلم لغة HTML المتكاملة
وصلنا واياكم الي الدرس السابع من سلسلة دروس دورة تعلم لغة اتش تي ام ال

في الدرس السابق "الدرس السادس" تناولنا شرح القوائم في لغة HTML بانواعها وفائدة واستخدامات كل نوع من القوائم

اما في هذا الدرس فسوف نتناول معا شرح لوسم الصوره في صفحة HTML
وكيفية ادراج صوره والخصائص التي تاتي مع هذا الوسم

الدرس السابع
" شرح وسم الصور في لغة HTML ، كيفية ادراج صورة "

بالتاكيد يعتبر هذا الوسم من الوسوم التي لا غني عنها عند اعداد صفحه بلغة HTML
فهو الوسم الذي يقوم بادراج صوره داخل الصفحه والتحكم بها من خلال مكان وضعها ومقاساتها وغيره

ولك ان تعلم ان هذا الوسم هو وسم فردي اي يجب ان يكتب بشكل فردي وليس زوجي كما يفعل البعض

الشكل العام الصحيح لوسم الصوره
<img src="رابط الصوره" />

رابط الصورة: هو المسار الموجود به الصورة

من الخصائص الاخري التي تاتي مع الوسم img
width - وذلك للتحكم في عرض الصورة
height - وذلك للتحكم في طول الصورة
alt - وذلك لكتابة اي نص يمكن ان يظهر مكان الصورة في حالة لم تظهر الصوره لاي سبب ما

وبهذه الطريقة تستطيع ادراج اي صوره تريدها

تابع معي مثال عملي علي ادراج صوره
اولا قمت بوضع صوره علي الديسك توب الخاص بجهازي وسميتها باسم kid وامتدادها كان jpg

وكتبت علي النوت باد هذا الكود
<img src="kid.jpg" width="200" height="200" alt="Beautiful baby" />


فكانت النتيجه عند عرضها علي المتصفح

تاج <img> في html

وهكذا يمكنك ادراج اي صوره تريدها داخل صفحة html
لاكن عليك ان تنتبه لمسار الصوره لانها تسبب الكثير من المشاكل للبعض

فان قمت بوضع الصوره المراد سحبها في فولدر علي الديسك توب وكان هذا الفولدر مسمي بـ images

فيكون الكود كالتالي
<img src="images/kid.jpg" width="200" height="200" alt="Beautiful baby" />


لاحظ الفرق في الكود السابق وهو انني حددت مسار الصوره داخل فولدر images
حتي يستطيع المتصفح من قرائتها

وبالمتابعة للمثال السابق فان قمت بوضع الصوره السابقة في فولدر اخر مسمي بـ photo1 وكان هذا الفولدر موجود داخل فولدر images الموجود علي الديسك توب

فيكون الكود الصحيح هو
<img src="images/photo1/kid.jpg" width="200" height="200" alt="Beautiful baby" />


وهكذا يمكنك قراءة اي صوره موجوده وسحبها علي صفحة html كما تشاء

ملحوظه هامه
قد تلاحظ ان الوسم alt لم يظهر تاثيره امام عينيك ولم تشعر بفائدة هذه الخاصيه
لذا ان اردت ان تري فائدتها فقم بكتابة مسار خاطي للصوره حتي لا تظهر علي المتصفح
وانظر النتيجه ،، ستجد ان مكان الصوره قد ظهر النص الذي ادخلته مع الوسم alt
قد تحتاج مثلا لكتابة هذه الصوره غير متاحه حاليا او تكتب اسم ووصف لمحتوي الصوره وهكذا

الي هنا نكون قد انتهينا من الدرس السابع الخاص بتعلم ادراج صوره في صفحة html
في الدرس القادم "الدرس الثامن" سوف نتناول معا شرح ادراج رابط او لينك داخل صفحة html وهو درس هام جدا فتابعوه ،،،
تنويه : الصور والفيديوهات في هذا الموضوع على هذا الموقع مستمده أحيانا من مجموعة متنوعة من المصادر الإعلامية الأخرى. حقوق الطبع محفوظة بالكامل من قبل المصدر. إذا كان هناك مشكلة في هذا الصدد، يمكنك الاتصال بنا من هنا.