نبذة عامة
كثيراََ ما ندخل إلى مواقع الإنترنت ، ونشاهد بعض الصفحات التى تحتوي على الصور ، كيف يتم وضع الصورة بالصفحة ، وما هو الـ tag المسئول عن وضع الصورة بالصفحة ،
هذا ما سيتم شرحه في الدرس .
Img
الـ tag المسئول عن وضع الصورة هو img وهو فقط tag بداية بدون نهاية ، ويكتب بهذه الطريقة :
<img src="" alt="" />لو قمت بكتابته كما بالأعلى لن يظهر أي شىء ، لأنك لم تحدد من أين يقوم بجلب الصورة ، من على جهازك أو من مكان أخر ؟
الخصائص
تعرفنا مسبقاََ على Attribute التي من خلالها يمكن إضافة خصائص للعنصر نفسه ، ما هي الـ Attribute الموجودة في وسم الـ img
src
وتعد هذه احد أهم الخصائص الموجودة بالصورة ، وبدونها لن يكون اي فائده لوسم img ولن يعمل الوسم ،
وهي إختصار لـ Source بمعنى المصدر وهو مكان التي تتواجد عليه هذه الصورة ، وممكن ان يكون على الجهاز أو جلب هذه الصورة من اي مكان على الإنترنت .
الان على فرض أنك تعمل على ملف بإسم index.html ومتواجد في نفس المكان المتواجده فيه الصورة التي تريد عرضها بالصفحة
والصورة بإسم home-bg.jpg كيف يمكننا وضع هذه الصورة لكي تظهر في هذه الصفحة ؟
لكي تظهر الصورة بالشكل الصحيح يجب ان نكتب كالتالي:
<img src="home-bg.jpg" alt="" />
ملاحظة مهمة: يفضل أن يكون إمتداد الملفات على جهازك ظاهراََ حتى تقوم بكتابة إسم الصورة والإمتداد بشكل صحيح ولا يظهر معك أي مشاكل
الان على فرض أنك تعمل على ملف بإسم index.html والصورة متواجد داخل مجلد باسم image باسم home-bg.jpg
- ملف الـ html إسمه index.html
- مجلد الذي يحتوي على جميع الصور بإسم image
- الصورة المراد عرضها من داخل المجلد image بإسم home-bg.jpg
لكي يتم وضع هذه الصورة بالصفحة بالشكل الصحيح يجب ان يتم كتابته كالتالي
<img src="image/home-bg.jpg" alt="" />- image وهو اسم المجلد كما قلنا مسبقاََ .
- home-bg.jpg وهو إسم الصورة الموجود داخل مجلد image .
image/home-bg.jpg وهذا كاملاََ يعني أدخل على مجلد بإسم image ستجد هناك صورة بإسم home-bg.jpg قم بجلبها وعرضها هنا .
الان على فرض تريد عرض صورة وهذه الصورة موجود على الإنترنت ، بكل بساطة يمكنك أخد رابط هذه الصورة ووضعها ،
- الذهاب إلى محرك البحث الخاص بالصور في Google .
- كتابة إسم الصورة التي تريد عرضها بالموقع في حالتنا قمنا بكتابة learn html
- بدلاََ من حفظ الصورة على جهازك ووضعها في صفحتك بإمكانك نسخ عنوان الصورة ووضعها في وسم img .
<img src="https://html.com/wp-content/uploads/html-hpg-featured-new.png" alt="" />ستظهر الصورة تماماََ كأنك قمت بحفظها لديك بالجهاز ، ولكن هنا سيتم تحميلها من الموقع المرفوعه عليه هذه الصورة .
alt
تخيل معي أنك قمت بوضع الصورة ، وبعد فترة من الزمن تم حذف هذه الصورة ، سيكون شكلها كالتالي :
من هنا جاءت وظيفة الخاصية alt وهي إختصار لـ Alternative Text بمعنى النص البديل ، بمعنى أدق ما هو النص الذي تريد إظهاره في حال عدم تحميل أو ظهور هذه الصورة لأي سبب من الأسباب ؟
ويجب ان تكون قيمتها ذو دلالة ، بمعنى لو الصورة كانت عبارة عن صورة أزهار يجب ان تكون القيمة مثلا flowers حتى يفهم المستخدم انه من المفترض ظهور صورة هنا تتكلم عن الأزهار .
<img src="image/test.png" alt='Here Image' />