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

**3ashek El7ozn** · 30-09-2014, 04:44 AM

الدرس الخامس فى لغة الـ HTML ...

أهلا وسهلا بكم اعضاء و زوار منتدى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ,,
سوف نتحدث فى درس اليوم عن الصور والرسومات , وكل ما يتعلق بها ,,
حيث اننا كنا قد تحدثنا عن الصور فى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ولكن بطريقة غير مباشرة الا وهى كيفية اضافة صورة ما كخلفية لصفحتنا على الانترنت .
ولكن حديثنا اليوم سوف يختلف قليلا عن عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] وهو كيفية ادراج الصور ضمن الصفحات ,,

بداية فالوسم المستخدم فى ادراج الصور ضمن الصفحات هو <IMG> وهو وسم مفرد اى ليس له نهاية ولكن هذا الوسم لا يكفى وحده لادراج الصور ضمن الصفحات فهناك خاصية اخرى تدعى SRC وهى تستخدم فى تحديد الاسم و المسار الخاص بالصورة ,,

دعونا ننظر الى تلك الصورة الخاصة بالمنتدى ,,>>

فلنفترض ان اسم الصورة التى قمنا بادراجها هو Logo.png حيث ان Logo هو الاسم الذى اخترته للصورة و .png هو امتدادها ,,

<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>

*-.-**-.-**-.-**-.-**-.-**-.-*
وكما ترى النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
حيث اننا قد استخدمنا ,,

<IMG SRC="logo.png">‎

لان الصورة المستخدمة فى الشرح فى نفس مسار ملف الـ HTML هكذا ..

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

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

انظر جيدا !!

*-.-**-.-**-.-**-.-**-.-**-.-*
اما اذا كان المجلد الذى يحتوى على الصورة موجود خارج المجلد الموجود به ملف الـ HTML الخاص بنا سوف نستخدم معه العلامة ( .. ) للخروج من المجلد الحالى الذى يحتوى على ملف الـ HTML والتوجه الى المجلد الموجود به الصورة هكذا ,,

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

القى نظرة هنا لتوضيح الامر !!

*-.-**-.-**-.-**-.-**-.-**-.-*

انتهينا الان من تحديد مسار الصورة نتوجه الان الى الى شاطر اخر وهو التحكم بابعاد الصورة المدرجة ..
ان الصورة المدرجة فى الشرح ابعادها هى 256 × 140 ولكن يمكنك بكل سهولة التحكم فى ابعاد تلك الصورة من خلال الخصائص HEIGHT و WIDTH يتبعها ارقام تحدد العرض والارتفاع المطلوبين هكذا ,,

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

وهذه هى الابعاد الاساسية للصورة المستخدمة ,,
وتصبح النتيجة كما سبق لاننا لم نقم بتغيير الابعاد الخاصة بالصورة بل قمنا بكتابتها داخل النص الخاص بصفحتنا ..

ولكن عند تغيير تلك الابعاد بهذا الشكل ,,>>

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

انظر ماذا حدث ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
كما يمكنك تغيير الابعاد الى حجم اصغر او اكبر من هذا كما تشاء .

هناك خاصية اخرى تدعى ALT وهى تضاف ايضا الى الوسم <IMG> و وظيفتها اضافة جملة تعبر عن الصورة وتستخدم احيانا هذه الخاصية فى المواقع بطيئة التحميل حيث يظهر النص قبل ظهور الصورة فى مكانها ويمكنك كتابته بهذه الطريقة ,,

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

النتيجة ,,

لاحظ ظهور النص عند وضع مؤشر الماوس على الصورة المستخدمة ,,

ايضا عند ادراج صورة ما ضمن فقرة فإن موقع ظهورها يتحدد بالطبع حسب ترتيب ورودها في الفقرة , مثلها مثل أي كلمة أخرى .
ولكن هناك الخاصية ALIGN والتى تحدد محاذاة الصورة مع النص الذى تم ادراجه وتاخذ احدى تلك القيم BOTTOM , TOP , MIDDLE , LEFT , RIGHT .
واليك بعض الامثلة على ذلك ,,
*-.-**-.-**-.-**-.-**-.-**-.-*
فى الحالة الطبيعية والتى تمثل القيمة BOTTOM ..

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

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
فى حالة اضافة القيمة TOP ..

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

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
فى حالة اضافة القيمة MIDDLE ..

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

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
فى حالة اضافة القيمة LEFT ..

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

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
فى حالة اضافة القيمة RIGHT ..

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

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
كما هناك ايضا طريقة اخرى اتبعها فى اعمالى لتوسيط الصورة واضافة نص يليها بالمنتصف ,,

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

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

<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>

النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
كما يمكنك ايضا التحكم فى المسافة العمودية او الافقية بين الصورة والنص عن طريق القيمتين VSPACE , HSPACE ..
حيث ,,
VSPACE تستخدم لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة .
HSPACE تستخدم لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة .
وقد قمت بتطبيق هذا فى مثالا حياً لسرعة الاستيعاب هكذا ,,

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

كما يمكنك التحكم الكامل فى الخاصية ALIGN واستخدام جميع القيم الخاصة بها ولكن هذا مثال فقط .
النتيجة ,,

ناتى الى شاطر اخر من درسنا اليوم وهى الخاصية الاخيرة التى يمكن اضافتها للوسم <IMG> والتى تدعى BORDER و وظيفتها إضافة إطار حول الصور والتحكم بالسمك الخاص بالاطار وهى تستخدم احيانا عند اضافة رابط تشعبى ( لينك ) الى صورة ما عند الضغط عليه يتم تحويلك الى صفحة اخرى هكذا ,,

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

وفى هذا المثال قمنا باضافة اطار الى الصورة المستخدمة فى الشرح سمكه 2 بيكسل .
النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
مثال آخر ولكن باختلاف بسيط وهو اذا قمت بالضغط على الصورة المستخدمة فى الشرح سيتم تحويلك تلقائيا الى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ,,

<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>

النتيجة ,,

والى هنا اكون قد انتهيت من درس الصور والرسومات ,,

وفى النهاية
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وعند النقل يرجى ذكر المصدر
دمتم بود
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**

**™AhmedAlastoOora™** · 01-10-2014, 08:57 AM

شغال كمل الدورة

**3ashek El7ozn** · 01-10-2014, 09:06 AM

المشاركة الأصلية كتبت بواسطة ™AhmedAlastoOora™ عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

شغال كمل الدورة

انت فين من بدرى يا راجل

**Midget1337** · 01-10-2014, 08:42 PM

شكراً ..استمر :)

**3ashek El7ozn** · 02-10-2014, 07:48 PM

المشاركة الأصلية كتبت بواسطة Midget1337 عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

شكراً ..استمر :)

العفو اتمنى ان الشرح يكون عجبك

**_Joo** · 30-10-2014, 09:34 AM

مش عارف اقول ايه ع الدوره الممتعه دى

يتصفح الموضوع حالياً : 1 (0 عضو و 1 زائر)