إضافة الصور إلى صفحات الويب

لا تكاد تخلو أى صفحة من صفحات الانترنت من الصور فلقد أصبحت الصور شيء أساسي فى كل صفحات الانترنت
ووسم إضافة الصور هو <img>
وهو وسم خالي بمعنى أنه لا يوجد له وسم إغلاق ويحتوى على خصائص فقط
ومن  أهم خصائص الوسم img ما يلى:-

• خاصية المصدر src 

وهو اختصار source وهو يعنى مسار الصورة أو عنوان الصورة فلو كانت الصورة فى نفس المجلد الذى عليه  صفحة الانترنت نحتاج فقط أن نكتب اسم الصورة وامتدادها 

مثال; 

<img src="egypt.gif">    

•       خواص height & width والخاصية height 

تعنى ارتفاع الصورة والخاصية width تعنى عرض الصورة وتقاس بالبيكسل px 

مثال: 

<img src="egypt.gif" height=220 px" width="250px">

•  كما سبق استخدمنا الخاصية height & width ولكن يفضل استخدام style وذلك لأن استخدام style تمنع css من تغيير حجم الصورة سواء كان css الداخلى أو الخارجى 

مثال:

<img src="egypt.gif" style="width:220px;height:250px"

• الخاصية alt:

وهى تقوم بوضع اسم اختيارى يظهر عند عدم ظهور الصورة لأن الصورة قد لا تظهر بسبب بطئ فى الاتصال بالانترنت أو خطأ فى اسم الصورة أو فى امتداد الصورة أو بسبب وجود خطأ فى مسار الصورة  

• screen reader:

 قارئ الصورة هو عبارة عن برنامج يقوم باستخدامه بعض المستخدمين ممن يعانون من مشاكل فى الرؤية أو يعانون من عدم الإبصار أو من صعوبات التعلم وهو برنامج يقوم بقرءة محتويات الشاشة وقارئ الشاشة يستطيع قراءة الخاصية alt

 مثال:

<img src="egypt.gif" style="width:220px;height:250px" alt="egypt map">

• مسار الصورة فى مجلد أخر

فى كثير من الأحيان ولأغراض تنظيمية بحتة يقوم العديد من مصممى مواقع الويب بوضع الصور فى مجلد فرعى ولنفرض أن اسم المجلد الفرعى images هنا لابد من كتابة مسار الصورة كاملا للوصول إلى الصورة 

مثال:

<img src="images/egypt.gif" style="width:220px;height:250px" alt="egypt map">

• خاصية طوفان الصورة  image float

استخدام خاصية float يكون مع css بحيث يسمح للصور بالطواف أو العوم وتعنى هذه الخاصية التفاف النص حول الصور سواء التفاف جهة اليمين أو التفاف جهة اليسار بالنسبة للصورة.

ولمعرفة تأثير الخاصية float على الصور نقوم أولا بكتابة نص تحت الصور مع عدم استخدام الخاصية float

فنلاحظ أن النص ظهر اسفل الصورة كما فى المثال التالي:-

مثال:

<p>

<img src="images/egypt.gif" style="width:220px;height:250px" alt="egypt map">

  و وخريطة جمهورية مصر العربية وتمتاز مصر بالعديد من الخصائص فهى تقع على البحر الأحمر والبحر المتوسط كما يمر بها نهر النيل هذا الشريان الرئيسي للحياة فى مصر - كما ان بها قناة السويس وهذه القناة التى تمثل عصب النقل البحرى للعالم أجمع كما ان مصر بها العديد من المعادن مثل الفوسفات والمنجنيز كما أن بها البترول والغاز الطبيعى وموقعا المتوسط يربط بين قارات العالم القديم آسيا وافريقيا وأوربا ..بالإضافة إلى أن بها الأيدى العاملة الماهرة.

</p>

ناتج المثال:

وعند استخدام الخاصية float: left يقوم بوضع الصورة جهة اليسار وعمل التفاف للنص حولها

مثال:

<p>

<img src="images/egypt.gif" style="float:left;width:220px;height:250px" alt="egypt map">

  و وخريطة جمهورية مصر العربية وتمتاز مصر بالعديد من الخصائص فهى تقع على البحر الأحمر والبحر المتوسط كما يمر بها نهر النيل هذا الشريان الرئيسي للحياة فى مصر - كما ان بها قناة السويس وهذه القناة التى تمثل عصب النقل البحرى للعالم أجمع كما ان مصر بها العديد من المعادن مثل الفوسفات والمنجنيز كما أن بها البترول والغاز الطبيعى وموقعا المتوسط يربط بين قارات العالم القديم آسيا وافريقيا وأوربا ..بالإضافة إلى أن بها الأيدى العاملة الماهرة.

</p>

ناتج المثال:

وعند استخدام الالتفاف جهة اليمين يقوم بوضع الصورة جهة اليمين وعمل التفاف للنص حولها كما يظهر فى المثال التالي:-