بسم الله الرحمن الرحيم والحمد لله كما ينبغي لجلال وجهك وعظيم سلطانك
الدرس الثالث(الصور"متقدم")
انها من اهم العناصر التي تضفي علي الموقع الحيويه والفعاليه فبعد ان صممت موقعك من حيث النصوص والوصلات اعتقد ان مظهره لا يعجبك وذلك لعدم احتوائه علي صور وفي هذا الفصل ستتعلم كيفيه ادارج صوره في صفحتك
ملحوظه هامه جدا جدا: قم بعمل فولدر جديد وضع فيه الصور التي تريدها وكذلك احفظ صفحاتك فيه لكي تظهر الصور بشكل صحيح والا سوف لا تظهر الصوره ويظهر مكانها مربع ابيض صغير في منتصفه علامه غلط .
الوسم المسئول باءدراج الصوره هو وسم
وهو وسم مفرد اي ليس له وسم نهايه ولكن هذا الوسم لا يعمل بمفرده فلابد من تحديد مسار الصوره <img>
علي جهازك ولذلك يستخدم معه الوسم
ويكون شكل الوسم الكلي :source وهي اختصار لكلمه <src>
<img src=” الصوره المراد ادراجها.الامتداد ”>
ملحوظه هامه: وهي يجب ان تكتب امتداد الصوره التي تدرجها في صفحتك لكي تظهر
كما قلنا في الدرس السابق ان لغه الهتمل تتميز بتداخل الوسوم وهذا مفيد جدا فاذا كنا نريد ان نضع رابط لوصله تشعبيه ولكن سوف نغير الكلمه التي تضغط عليها الي صوره ففي هذه الحاله سوف نستخدم هذه الميزه ولكن يجب الا تنسي الترتيب في الوسوم ولكن في هذه الحاله يجب ان يسبق وسم ادارج الوصله قبل الصوره ولو حدث العكس سوف تظهر الصوره فقد وعند الضغط عليها لا تنقلك الي اي رابط انت وضعته فيجب مراعاه الوسم الرئيسي ثم الكماليات فالوسم الرئيسي هو الرابط والصوره من ضمن الكماليات
ويكون الوسم الكلي هو:
<a href=”index.htm”><img src=”Mohamed.gif”></a>
تحليل الكود السابق:
في البدايه كتبنا وسم ادراج وصله تشعبيه وقد اخترتها علي ان تكون صفحتك الرئيسيه ثم كتبنا بعده وسم ادراج الصوره ثم كتابنا المسار الخاص بها ثم الامتداد وبعد ذلك لا تنسي ان تقفل وسم ادراج الوصله التشعبيه لان وسم ادارج الصوره ليس له وسم نهايه والا كان قد تم وضعه قبل وسم النهايه للوصله التشعبيه
ملحوظه اخري: تلاحظ بعد كتابه الوسم السابق ان الصوره احيطت باطار والوسم المسئول عن هذا الاطار هو
ويتم ادراجه ضمن وسم الصوره وله قيم عباره عن ارقام فالرقم صفر يعني الصوره بدون اطار او border
تحديد والرقم واحد يتم وضع اطار والرقم اتنين يتم مضاعفه سمك الاطار وهكذا ويكون الشكل الكلي للوسم السابق بدون اطار هو :
<a href=”index.htm”><img src=”Mohamed.gif” border=”0”></a>
خواص الصوره
عند ادراج صوره في موقعك يجب مراعاه المكان الذي تريد ان تظهر فيه ولذلك نستخدم الوسم الذي تم استخدامه لمحاذاه النص وهو وسم :
وهو المسئول عن محاذاه الصوره وياخذ القيم :align
Bottom , top , middle , left , right
وهذه القيم عندما يكتب علي الصوره :
<img src=”Mohamed.gif” border=”1” align=”top”>
تحليل المثال السابق:
لا يوجد جديد فيه ولكن تم وضع اطار للصوره وعند تحديد هذه القيمه للوسم
فان اول سطر يتم كتابته بعد الصوره يقع بمحاذاه الحافه العلويه للصوره اما باقي النص فيمتد اسفلهاalign
وبالنسبه للقيمه
فان النص يبدا بمحاذاه الحافه السفلي للصورهbottom
النص يقع بمحاذاه منتصف الصوره وباقي النص يقع اسفلهاmiddle
يودي الي محاذاه النص اقصي اليمين مع التفاف النص الذي يليها علي الجهه اليسري حسب ارتفاع Right
الصوره اي طولها والعكس مع الخاصيه
Left
واذا كانت هذه الوسوم لا تلبي احتياجاتك اي تريد ان تضع الصوره في المنتصف يمكن استعمال وسم تمركز النص ويكون شكله الكلي :
<p align=”center”><img src=”mohamed.jpg”></p>
يتبقي لنا تحديد عرض الصوره والارتفاع لذلك نستخدم الخاصيه
Width , height
يجب ان تكتب الكلمه صحيحه لتحصل علي النتيجه المرغوبه
الشكل الكلي للوسم هو :
<img src="mohamed.jpg" width="20" height="30" border=”0” align=”top”>
تحليل المثال السابق
ايضا لا يوجد جديد غير ان قمنا بتحديد العرض والارتفاع لا يوجد اكثر من ذلك في المثال السابق
في بدايه الشرح انا طلبت بعمل فولدر(مجلد) ووضع الصور فيه وذلك حتي لا تكتب مسار الصوره كامل بل تكتب الاسم والامتداد فقط فاذا كانت الصوره موجوده عندك في دريف السي بداخل مجلد وليكن
وبداخله ايضا مجلد اسمه images
وبداخله الصوره الصوره ماذا تفعل عليك بكتابه الاتيMy imges
<img src=”*.*/c/images/my images/الصوره . الامتداد”>
هل هذا سهل ام تقوم بوضع الصوره في المجلد وتكون بهذا الشكل
<img src=”الصوره . الامتداد”>
ايهما اسهل اعتقد الثاني وانا افضل الثاني وهو الذي استخدمه ولك حريه الاستخدام ولكن لا تنسي عند استخدام الكود الاول لا تنسي تغير الدريف والمجلد
عمليه شاقه جدا. هل لازلت تريد استعمل الاول
شرح امتداد الصور:
1-gif وهي اختصار ل graphical interchange format وا قصي عدد للالوان في هذا التنسيق 265 لون ومن مزايا استخدام هذا النوع هو لها القدره علي تخزين الصور بخلفيات شفافه وثانيهما الصور المتحركه gifs animated
2-jpeg ,jpg وهي اختصار ل joint photographic experts group ويدعم هذا النوع من الصور 16.7 مليون لون ومن مزاياه ا مكانيه ضغط الصور بنسب مختلفه عند تخزينها وبالتالي الحصول علي صور صغيره نسبيا وهنا المقصود بها الحجم بالكيلو بايت وليس بابعاد الصوره
3-png وهي اختصار ل portable network graphics وهو نوع ابتكر خصيصا لمواقع الانترنت فمن مميزاته الشفافيه والوان ذات درجه وضوح عاليه وتسطيع ان تضع معها المعلومات الخاصه بك حتي تمنع من سرقتها ولكن من عيوبه هو مشكله واحده حتي الان انه يدعم من قبل ie5 ولا يدعمه netscape4 ولكنه يعمل بشكل رائع مع الاصدارات الحديثه مثل ie6 و netscape7
اتمني ان يكون الشرح وافي
وانتظروا الدرس القادم
الدرس الثالث من دروس الاتش تي ام ال 
