.:: ! HTML PROF ::.
|
• الانـتـسـاب » Jun 2010
|
• رقـم العـضـويـة » 71305
|
• المشـــاركـات » 5,583
|
• الـدولـة » Egypt
|
• الـهـوايـة » <HTML>
|
• اسـم الـسـيـرفـر » Private Server
|
• الـجـنـس » Male
|
• نقـاط التقييم » 177
|
|
|
تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس الخامس ) .
![](http://im61.gulfup.com/GBda5Q.png)
الدرس الخامس فى لغة الـ HTML ...
![](http://im55.gulfup.com/QxQsXY.gif)
أهلا وسهلا بكم اعضاء و زوار منتدى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ,,
سوف نتحدث فى درس اليوم عن الصور والرسومات , وكل ما يتعلق بها ,,
حيث اننا كنا قد تحدثنا عن الصور فى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ولكن بطريقة غير مباشرة الا وهى كيفية اضافة صورة ما كخلفية لصفحتنا على الانترنت .
ولكن حديثنا اليوم سوف يختلف قليلا عن عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] وهو كيفية ادراج الصور ضمن الصفحات ,,
![](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)
|