الموقع العربي الاول للعبة Silkroad Online - [HTML/CSS] تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس الخامس ) .

http://im61.gulfup.com/GBda5Q.png
الدرس الخامس فى لغة الـ HTML ...
http://im55.gulfup.com/QxQsXY.gif
أهلا وسهلا بكم اعضاء و زوار منتدى Silkroad4arab ,,
سوف نتحدث فى درس اليوم عن الصور والرسومات , وكل ما يتعلق بها ,,
حيث اننا كنا قد تحدثنا عن الصور فى الجزء الثانى من الدرس الثانى ولكن بطريقة غير مباشرة الا وهى كيفية اضافة صورة ما كخلفية لصفحتنا على الانترنت .
ولكن حديثنا اليوم سوف يختلف قليلا عن الدرس الذى سبق وهو كيفية ادراج الصور ضمن الصفحات ,,
http://im55.gulfup.com/QxQsXY.gif
بداية فالوسم المستخدم فى ادراج الصور ضمن الصفحات هو <IMG> وهو وسم مفرد اى ليس له نهاية ولكن هذا الوسم لا يكفى وحده لادراج الصور ضمن الصفحات فهناك خاصية اخرى تدعى SRC وهى تستخدم فى تحديد الاسم و المسار الخاص بالصورة ,,
http://im55.gulfup.com/QxQsXY.gif
دعونا ننظر الى تلك الصورة الخاصة بالمنتدى ,,>>
http://im60.gulfup.com/cx36G0.png
فلنفترض ان اسم الصورة التى قمنا بادراجها هو Logo.png حيث ان Logo هو الاسم الذى اخترته للصورة و .png هو امتدادها ,,

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="#0066cc"> <IMG SRC="logo.png">‎<BR> <FONT FACE="Monotype Corsiva" SIZE="5" COLOR="#990000"> HTML Guide By 3ashek El7ozn & Silkroad4arab Forum </FONT> </BODY> </HTML>

*-.-**-.-**-.-**-.-**-.-**-.-*
وكما ترى النتيجة ,,
http://im64.gulfup.com/saFYos.png
*-.-**-.-**-.-**-.-**-.-**-.-*
حيث اننا قد استخدمنا ,,

كود بلغة HTML:

<IMG SRC="logo.png">‎

لان الصورة المستخدمة فى الشرح فى نفس مسار ملف الـ HTML هكذا ..
http://im70.gulfup.com/jqVBY7.png
*-.-**-.-**-.-**-.-**-.-**-.-*
اما اذا كانت الصورة فى مجلد اخر ولنفترض ان اسم المجلد الاخر images بداخل نفس المجلد الذى يوجد به ملف الـ HTML سوف نستخدم العلامة ( / ) للتوجه الى مسار الصورة الصحيح هكذا ,,

كود بلغة HTML:

<IMG SRC="images/logo.png">

انظر جيدا !!
http://im86.gulfup.com/YVM0TB.png
*-.-**-.-**-.-**-.-**-.-**-.-*
اما اذا كان المجلد الذى يحتوى على الصورة موجود خارج المجلد الموجود به ملف الـ HTML الخاص بنا سوف نستخدم معه العلامة ( .. ) للخروج من المجلد الحالى الذى يحتوى على ملف الـ HTML والتوجه الى المجلد الموجود به الصورة هكذا ,,

كود بلغة HTML:

<IMG SRC="../images/logo.png">‎

القى نظرة هنا لتوضيح الامر !!
http://im61.gulfup.com/ptsOeK.png
*-.-**-.-**-.-**-.-**-.-**-.-*
http://im89.gulfup.com/2of2vL.png
http://im55.gulfup.com/QxQsXY.gif
انتهينا الان من تحديد مسار الصورة نتوجه الان الى الى شاطر اخر وهو التحكم بابعاد الصورة المدرجة ..
ان الصورة المدرجة فى الشرح ابعادها هى 256 × 140 ولكن يمكنك بكل سهولة التحكم فى ابعاد تلك الصورة من خلال الخصائص HEIGHT و WIDTH يتبعها ارقام تحدد العرض والارتفاع المطلوبين هكذا ,,

كود بلغة HTML:

<IMG SRC="logo.png" HEIGHT="140" WIDTH="256">

وهذه هى الابعاد الاساسية للصورة المستخدمة ,,
وتصبح النتيجة كما سبق لاننا لم نقم بتغيير الابعاد الخاصة بالصورة بل قمنا بكتابتها داخل النص الخاص بصفحتنا ..
http://im74.gulfup.com/z7RZ5X.png
ولكن عند تغيير تلك الابعاد بهذا الشكل ,,>>

كود بلغة HTML:

<IMG SRC="logo.png" HEIGHT="300" WIDTH="460">

انظر ماذا حدث ,,
http://im43.gulfup.com/4VSie7.png
*-.-**-.-**-.-**-.-**-.-**-.-*
كما يمكنك تغيير الابعاد الى حجم اصغر او اكبر من هذا كما تشاء .
http://im55.gulfup.com/QxQsXY.gif
هناك خاصية اخرى تدعى ALT وهى تضاف ايضا الى الوسم <IMG> و وظيفتها اضافة جملة تعبر عن الصورة وتستخدم احيانا هذه الخاصية فى المواقع بطيئة التحميل حيث يظهر النص قبل ظهور الصورة فى مكانها ويمكنك كتابته بهذه الطريقة ,,

كود بلغة HTML:

<IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256">‎

النتيجة ,,
http://im48.gulfup.com/UFdpaJ.png
لاحظ ظهور النص عند وضع مؤشر الماوس على الصورة المستخدمة ,,
http://im55.gulfup.com/QxQsXY.gif
ايضا عند ادراج صورة ما ضمن فقرة فإن موقع ظهورها يتحدد بالطبع حسب ترتيب ورودها في الفقرة , مثلها مثل أي كلمة أخرى .
ولكن هناك الخاصية ALIGN والتى تحدد محاذاة الصورة مع النص الذى تم ادراجه وتاخذ احدى تلك القيم BOTTOM , TOP , MIDDLE , LEFT , RIGHT .
واليك بعض الامثلة على ذلك ,,
*-.-**-.-**-.-**-.-**-.-**-.-*
فى الحالة الطبيعية والتى تمثل القيمة BOTTOM ..

كود بلغة HTML:

<IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256" ALIGN="BOTTOM">

النتيجة ,,
http://im54.gulfup.com/dlXpDW.png
*-.-**-.-**-.-**-.-**-.-**-.-*
فى حالة اضافة القيمة TOP ..

كود بلغة HTML:

<IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256" ALIGN="TOP">

النتيجة ,,
http://im86.gulfup.com/mwYZTm.png
*-.-**-.-**-.-**-.-**-.-**-.-*
فى حالة اضافة القيمة MIDDLE ..

كود بلغة HTML:

<IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256" ALIGN="MIDDLE">

النتيجة ,,
http://im57.gulfup.com/6ChH4j.png
*-.-**-.-**-.-**-.-**-.-**-.-*
فى حالة اضافة القيمة LEFT ..

كود بلغة HTML:

<IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256" ALIGN="LEFT">

النتيجة ,,
http://im54.gulfup.com/Eryp6l.png
*-.-**-.-**-.-**-.-**-.-**-.-*
فى حالة اضافة القيمة RIGHT ..

كود بلغة HTML:

<IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256" ALIGN="RIGHT">

النتيجة ,,
http://im52.gulfup.com/UlW2A6.png
*-.-**-.-**-.-**-.-**-.-**-.-*
كما هناك ايضا طريقة اخرى اتبعها فى اعمالى لتوسيط الصورة واضافة نص يليها بالمنتصف ,,

كود بلغة HTML:

<div align="center"> <IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256"> </div>

*-.-**-.-**-.-**-.-**-.-**-.-*
ليصبح النص كاملا والكمال لله هكذا >>

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="#0066cc"> <div align="center"> <IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256"> </div> <BR> <FONT FACE="Monotype Corsiva" SIZE="5" COLOR="#990000"> <CENTER>HTML Guide By 3ashek El7ozn & Silkroad4arab Forum</CENTER> </FONT> </BODY> </HTML>

النتيجة ,,
http://im81.gulfup.com/mbQfty.png
*-.-**-.-**-.-**-.-**-.-**-.-*
كما يمكنك ايضا التحكم فى المسافة العمودية او الافقية بين الصورة والنص عن طريق القيمتين VSPACE , HSPACE ..
حيث ,,
VSPACE تستخدم لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة .
HSPACE تستخدم لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة .
وقد قمت بتطبيق هذا فى مثالا حياً لسرعة الاستيعاب هكذا ,,

كود بلغة HTML:

<IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256" ALIGN="BOTTOM" VSPACE="50" HSPACE="50">

كما يمكنك التحكم الكامل فى الخاصية ALIGN واستخدام جميع القيم الخاصة بها ولكن هذا مثال فقط .
النتيجة ,,
http://im47.gulfup.com/VtSjzb.png
http://im55.gulfup.com/QxQsXY.gif
ناتى الى شاطر اخر من درسنا اليوم وهى الخاصية الاخيرة التى يمكن اضافتها للوسم <IMG> والتى تدعى BORDER و وظيفتها إضافة إطار حول الصور والتحكم بالسمك الخاص بالاطار وهى تستخدم احيانا عند اضافة رابط تشعبى ( لينك ) الى صورة ما عند الضغط عليه يتم تحويلك الى صفحة اخرى هكذا ,,

كود بلغة HTML:

<IMG SRC="logo.png" ALT="Silkroad4arab Logo" HEIGHT="140" WIDTH="256" ALIGN="BOTTOM" VSPACE="50" HSPACE="50" BORDER="2">

وفى هذا المثال قمنا باضافة اطار الى الصورة المستخدمة فى الشرح سمكه 2 بيكسل .
النتيجة ,,
http://im60.gulfup.com/WBEyxn.png
*-.-**-.-**-.-**-.-**-.-**-.-*
مثال آخر ولكن باختلاف بسيط وهو اذا قمت بالضغط على الصورة المستخدمة فى الشرح سيتم تحويلك تلقائيا الى المنتدى ,,

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="#0066cc"> <div align="center"> <a title="Silkroad4Arab Forum" target="blank" href="http://www.silkroad4arab.com/vb"><img alt="Silkroad4arab Logo" src="logo.png" HEIGHT="140" WIDTH="256" ALIGN="CENTER" VSPACE="50" HSPACE="50" BORDER="0"></a> </div> <BR> <FONT FACE="Monotype Corsiva" SIZE="5" COLOR="#990000"> <CENTER>HTML Guide By 3ashek El7ozn & Silkroad4arab Forum</CENTER> </FONT> </BODY> </HTML>

النتيجة ,,
http://im50.gulfup.com/WcFOdK.png

http://im55.gulfup.com/QxQsXY.gif
والى هنا اكون قد انتهيت من درس الصور والرسومات ,,
http://im55.gulfup.com/QxQsXY.gif
وفى النهاية
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وعند النقل يرجى ذكر المصدر
دمتم بود
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**
http://im54.gulfup.com/Zz30Un.png