الصورة ( img ) في الـ HTML

نبذة عامة

كثيراََ ما ندخل إلى مواقع الإنترنت ، ونشاهد بعض الصفحات التى تحتوي على الصور ، كيف يتم وضع الصورة بالصفحة ، وما هو الـ tag  المسئول عن وضع الصورة بالصفحة ،

هذا ما سيتم شرحه في الدرس .

 

Img

الـ tag  المسئول عن وضع الصورة هو img وهو  فقط tag بداية بدون نهاية ، ويكتب بهذه الطريقة :

<img src="" alt="" />

لو قمت بكتابته كما بالأعلى لن يظهر أي شىء ، لأنك لم تحدد من أين يقوم بجلب الصورة ، من على جهازك أو من مكان أخر ؟

 

الخصائص

تعرفنا مسبقاََ على Attribute التي  من خلالها يمكن إضافة خصائص  للعنصر نفسه ، ما هي الـ Attribute الموجودة في وسم الـ img

 

src

وتعد هذه احد أهم الخصائص الموجودة بالصورة ، وبدونها لن يكون  اي فائده لوسم img ولن يعمل الوسم ،

وهي إختصار لـ Source  بمعنى المصدر وهو مكان التي تتواجد عليه هذه الصورة ، وممكن ان يكون على الجهاز أو جلب هذه الصورة من اي مكان على الإنترنت .

الان على فرض أنك تعمل على ملف بإسم index.html  ومتواجد في نفس المكان المتواجده فيه الصورة التي تريد عرضها بالصفحة

والصورة بإسم home-bg.jpg كيف يمكننا وضع هذه الصورة لكي تظهر في هذه الصفحة ؟

The image is next to the file

 

لكي تظهر الصورة بالشكل الصحيح يجب ان نكتب كالتالي:

<img src="home-bg.jpg" alt="" />

 

ملاحظة مهمة: يفضل أن يكون إمتداد الملفات على جهازك ظاهراََ حتى تقوم بكتابة إسم الصورة والإمتداد بشكل صحيح ولا يظهر معك أي مشاكل 

Show Extensions Image

 

الان على فرض أنك تعمل على ملف بإسم index.html والصورة متواجد داخل مجلد باسم image باسم home-bg.jpg

  • ملف الـ html إسمه index.html
  • مجلد الذي يحتوي على جميع الصور بإسم image
  • الصورة المراد عرضها من داخل المجلد image بإسم home-bg.jpg

image inside folder

 

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

<img src="image/home-bg.jpg" alt="" />
  • image وهو اسم المجلد كما قلنا مسبقاََ .
  • home-bg.jpg وهو إسم الصورة الموجود داخل مجلد image .

image/home-bg.jpg وهذا كاملاََ يعني أدخل على مجلد بإسم image ستجد هناك صورة بإسم home-bg.jpg قم بجلبها وعرضها هنا .

 

الان على فرض تريد عرض صورة وهذه الصورة موجود على الإنترنت ، بكل بساطة يمكنك أخد رابط هذه الصورة ووضعها ،

Image Learn HTML

 

  • الذهاب إلى محرك البحث الخاص بالصور في Google .
  • كتابة إسم الصورة التي تريد عرضها بالموقع  في حالتنا قمنا بكتابة learn html
  • بدلاََ من حفظ الصورة على جهازك ووضعها في صفحتك بإمكانك نسخ عنوان الصورة ووضعها في وسم img .
<img src="https://html.com/wp-content/uploads/html-hpg-featured-new.png" alt="" />

ستظهر الصورة تماماََ كأنك قمت بحفظها لديك بالجهاز ، ولكن هنا سيتم تحميلها من الموقع المرفوعه عليه هذه الصورة .

 

alt

تخيل معي أنك قمت بوضع الصورة ، وبعد فترة من الزمن تم حذف هذه الصورة ، سيكون شكلها كالتالي :

Alt Attribute Html Img

من هنا جاءت وظيفة الخاصية alt وهي إختصار لـ Alternative Text بمعنى النص البديل ، بمعنى أدق ما هو النص الذي تريد إظهاره في حال عدم تحميل أو ظهور هذه الصورة لأي سبب من الأسباب ؟

ويجب ان تكون قيمتها ذو دلالة ، بمعنى لو الصورة كانت عبارة عن صورة أزهار يجب ان تكون القيمة مثلا flowers حتى يفهم المستخدم انه من المفترض ظهور صورة هنا تتكلم عن الأزهار .

<img src="image/test.png" alt='Here Image'  />

Alt Attribute Img HTML