إدراج الصور والتحكم بخصائصها

بسم الله الرحمن الرحيم ...... درسنا اليوم سيكون درسا ممتعا ان شاء الله وسنتحدث فيه عن الصور وكيفية ادراجها والتحكم بخصائصها .

لادراج الصور الى موقعك استخدم الوسم <img> وهو وسم بدون نهاية يعني لا يحتوي على وسم نهاية ويستخدم بالشكل التالي :

<img src="path">

 بحيث نستبدل كلمة path في الكود اعلاه بمسار الصوره مثلا اذا كانت الصورة محفوظة في القرص c وفي المجلد photo  واسم الصورة pic1 فسيكون الوسم السابق بالشكل التالي :

 <img src="c:\photo\pic.bmp">

لاحظ اننا اضفنا امتداد الصورة بجوار اسمها وهذا امر مهم اذ انه من الضروري ادراج امتداد الصورة والا فلن تظهر الصورة على المتصفح ومن اشهر امتدادات الصور هي  bmp- jpg- gif- png

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

اولا ارتفاع وعرض الصورة :

لتحديد ارتفاع الصورة نستخدم الوسم height  ولتحديد عرض الصورة نستخدم الوسم width  وذلك بالشكل التالي :

 <img src="c:\photo\pic.bmp" width="200" height="160">

 في الكود اعلاه قمنا بتحديد عرض الصورة ب 200 بكسل وارتفاعها ب160 بكسل .

ملاحظة : البيكسل هي وحدة لقياس عرض وارتفاع الصور .

ثانيا : محاذاة  الصورة

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

<img src="c:\photo\pic.bmp" align="bottom">

في الوسم اعلاه قمنا بتحديد موقع الصورة باسفل الصفحة وذلك باستخدام القيمة bottom ويمكنك استخدام القيم التالية لتحديد محاذاة الصورة :

bottom : الصورة في الاسفل

top : موقع الصورة في اعلى الصفحة

right : موقع الصورة على اليمين

left: موقع الصورة على اليسار

ثالثا : اطار الصورة

اطار الصورة هو الخط الذي يحيط بالصورة من الخارج ويمكنك التحكم بحجمة من خلال الوسم border ويستخدم بالشكل التالي :

 <img src="c:\photo\pic.bmp" border="1">

 في الكود اعلاه قمنا بتحديد عرض الاطار ب1 بيكسل ويمكنك انت تحديد الحجم المناسب لك

رابعا : اسم الصورة

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

 <img src="c:\photo\pic.bmp" alt="name">

حيث ان name  هو اسم الصورة .

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

 <img src="c:\photo\pic.bmp" alt="name" width="200" height="180" border="0" align="right">

ولنجرب هذه الخصائص بالمثال التالي وسنستخدم الصورة التالية :

وسنستخدمها بالمثال التالي بحيث يكون عرض الصوره 400 بيكسل وارتفاعها 300 ومحاذاتها الى اليمين  وبدون اطار لذلك سنحدد قيمة الاطار بصفر اي بدون اطار وسيكون الوسم بالشكل التالي :

 <img src="c:\photo\pic.bmp"  width="400" height="300" border="0" align="right">

وسيكون الناتج بالشكل التالي :

الانتقال الى فهرس الدروس ...