الصور

وسم أدراج الصورة هي IMG>>  وله وسم بداية فقط

 وله عدة سمات هي :

1. src :  للاشارة إلى أسم الصورة وذلك باتباع مسارها في الجهاز او في الوب ويجب كتابتها بشكل صحيح حتى يتم الوصول إلى الصورة .

2. width : لتحديد عرض الصورة بالبكسل
3. hight : لتحديد طول الصورة بالبكسل
4. border : لتحديد حجم إطار الصورة بالبكسل واذا كانت قيمتها صفر فيعني عدم أظهار الصورة
5. alt : لاظهار رمز نصي للصورة , ويستخدم هذا النص كوصف مختصر للصورة او لما تعب عنه وهي هامه للاسباب التاليه  :
   •  في حال كون المتصفح غير مؤهل لاظهار الصورة فيظهر الرمز النصي المعبر عن الصورة
   • في حال كون المستخدم قام بإلغاء تفعيل عرض الصورة فيظهر الرمز النصي المعبر        عن الصورة
   • إبدال الصورة برديف عنها .
6. : align لتنسيق الصورة مع النص ولها ثلاث انواع من القيم هي :

1# : left  ,  right 

2# : top , middle , bottom

3# : texttop , absmiddle , absbottom , baseline

النوع الأول من القيم (#1) : تحدد موضع الصورة أما على يمين  أو يسار الصفحة

مثال :

 <img border="0" src="image/school2.jpg" align="left" width="60" height="57">

<img border="0" src="image/school2.jpg" align="right" width="60" height="57">

النوع الثاني من القيم (#2) : تحدد موضع النص بشكل عمودي بالنسبة للصورة سواء أكان النص على يمين أو يسار الصورة ( ويكون محكوما بالسطر), فيكون النص إما أعلى الصورة أو في الوسط أو في الأسفل ....

مثال :

<img border="0" src="image/shcool6.jpg" align="top" width="60" height="62">

<img border="0" src="image/school2.jpg" align="middle" width="60" height="57">

<img border="0" src="image/school2.jpg" align="bottom" width="60" height="57">

النوع الثالث من القيم (#3) : تحدد موضع النص بشكل عمودي بالنسبة للصورة ولا يحكمه السطر وقيمه تكون كالتالي :

•  texttop :  يضع النص في اعلى السطر   مثال:

<img border="0" src="image/shcool6.jpg" align="texttop" width="60" height="62">

•   absmiddle :  يضع النص في وسط السطر  مثال:

<img border="0" src="image/school2.jpg" align="absmiddle" width="60" height="57">

•  absbottom :  يضع النص في اسفل السطر  مثال:

<img border="0" src="image/school5.jpg" align="absbottom" width="60" height="61">

•  baseline :  يضع النص على  السطر  مثال:

<img border="0" src="image/school2.jpg" align="baseline" width="60" height="57">

    الفرق بين top    و texttop   : 

<img border="0" src="image/school5.jpg" align="texttop" width="60" height="61"><u>الشهرية</u>
<img border="0" src="image/school5.jpg" width="36" height="41">
 

<img border="0" src="image/school5.jpg" align="top" width="60" height="61">
<u>النصفية</u><img border="0" src="image/school5.jpg" width="38" height="40">

7. vspace : هي المسافة العمودية وتكون من أعلى وأسفل الصورة وقيمتها عدد بالبكسل .

8. : hspace هي المسافة الأفقية وتكون من يمين ويسار الصورة وقيمتها عدد بالبكسل .

مثال :

<img border="0" src="image/j0186002.jpg" align="right" width="52" height="54" vspace="3" hspace="4">

   السمات التالية بالاضافه إلى السمة الأولى فتخص مقطع الفيديو ( صورة متحركة ) :

9. dynsrc : تحدد عنوان ملف الفيديو  ( URL   ) .
10. start : تحدد بدء تشغيل الصورة ولها قيمتين هما :

File open : يبدءا تشغيل الملف فور فتح الملف

Mouse over : يبدءا تشغيل الملف عند مرور الفارة فوق الصورة

ويمكن استخدام القيمتين معا أو القيمة الأولى وحدها فقط .

11. loop : لتكرار تشغيل الملف ولها قيمتين أما رقم يحدد عدد مرات التكرار أو ( infinite ) فيكون تكرار لانهائي .
12. loopdelay : تأخير التكرار وقيمتها عدد يعبر عن جزء من الثانية قدر التأخير .

 مثال :

<img border="0" dynsrc="التقديمية/F1.wmv" start="fileopen" width="780" height="565" hspace="1" vspace="1" align="center" loopdelay="3" loop="infinite">

  استخدام الصورة كارتباط :

لإنشاء ارتباط من صورة بدلا من نص فانه يجب تركيب وسم الصورة على وسم الارتباط وتكون صيغته كالتالي :

< A herf = " URL of page linked" > < img src = " URL of picture "> </A>

مثال :

<a href="tabl2.htm"><img border="0" src="image/school5.jpg" align="texttop" width="60" height="61"></a>