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

http://im61.gulfup.com/GBda5Q.png
الجزء الثانى من الدرس الرابع فى لغة الـ HTML ...
http://im55.gulfup.com/QxQsXY.gif
أهلا وسهلا بكم اعضاء و زوار منتدى Silkroad4arab ,,
سوف نستكمل حديثنا اليوم عن اساسيات تنسيق الصفحة وسيكون كلامنا اليوم عن القوائم ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
دعونا نستعيد سريعا ما تم ذكره فى الدرس السابق ( الرابع ) ,,

لقد قمنا بشرح الوسم <P> والخصائص المرتبطة به ,,
قمنا بشرح الخاصية DIR والتى نستخدمها أيضاً مع <P> و تقوم بتحديد إتجاه قراءة النص وتأخذ القيم ,,
LTR وتعنى Left To Right ..
RTL وتعنى Right To Left ..
قمنا بشرح خاصية الاقتباس لتنسيق الفقرات <BLOCKQUOTE>___</BLOCKQUOTE> ..
http://im55.gulfup.com/QxQsXY.gif
وفى درسنا اليوم سوف نتكلم عن القوائم ,,
قبل الدخول فى الدرس رجاء تامل فى هذه الصورة >>
http://im84.gulfup.com/W1ebfh.png
ما هو استنتاجك المبدئى لهذه الصورة ؟
ولا تنسى اننا قد ذكرنا فى الدرس الاول
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

اقتباس:

المشاركة الأصلية كتبت بواسطة 3ashek El7ozn (المشاركة 5103402)

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

كود بلغة HTML:

<HTML> <HEAD> <TITLE> My First HTML Page </TITLE> </HEAD> <BODY> HTML Guide By 3ashek El7ozn & Silkroad 4 arab Fourm </BODY> </HTML>

http://im64.gulfup.com/cmlQaG.png

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الاستنتاج الثانى لك هو اننى قمت باستخدام الوسم ‎  الخاص باضافة الفراغات , و الوسم <BR> للانتقال الى سطر جديد كما قمنا بذكره فى الدرس الاول .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
والوسم <TT>___</TT> الذى يستخدم فى توحيد المسافات بين الاحرف , كما ذكرنا فى الجزء الثانى من الدرس الثالث
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

اقتباس:

المشاركة الأصلية كتبت بواسطة 3ashek El7ozn (المشاركة 5112429)

كما انه يستخدم الوسمين <TT>___</TT> فى توحيد المسافات بين الاحرف بمعنى انه اذا استخدمنا الحرفين M و I كمثال ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
قبل اضافة الوسم >>

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> IIIIIIIIII <BR> MMMMMMMMMM </BODY> </HTML>

النتيجة ,,
http://im71.gulfup.com/0U3ioI.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

بعد اضافة الوسم >>

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> <TT> IIIIIIIIII <BR> MMMMMMMMMM </TT> </BODY> </HTML>

النتيجة ,,
http://im86.gulfup.com/gETXCE.png

http://im55.gulfup.com/QxQsXY.gif

ولكن الامر غير ذلك تماماً ولكن بالنسبة لاستنتاجك فلا بأس به ولكن الطريقة الصحيحة لعمل مثل هذه الصفحة >>
http://im84.gulfup.com/W1ebfh.png

هو استخدام الوسمين <PRE>___</PRE> فاحتفظ النص بالتنسيق المكتوب به هكذا ,,

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY><FONT COLOR="FF0000"><H1><PRE> H T M L G U I D E B Y 3 A S H E K E L 7 O Z N & S I L K R O A D F O R A R A B F O R U M </FONT></H1></PRE> </BODY> </HTML>

النتيجة كما سبق :-
http://im84.gulfup.com/W1ebfh.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
ولكن اذا لم يتم كتابة الوسمين ..

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY><FONT COLOR="FF0000"><H1> H T M L G U I D E B Y 3 A S H E K E L 7 O Z N & S I L K R O A D F O R A R A B F O R U M </FONT></H1> </BODY> </HTML>

ستكون النتيجة ,,
http://im69.gulfup.com/Sygdt1.png
http://im55.gulfup.com/QxQsXY.gif
والان نبدا فى درسنا اليوم وسوف نتحدث فيه عن القوائم ......
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
مبدئيا عليك ان تعلم بان لغة HTML تحتوى على مجموعة من الوسوم الخاصة بتنظيم البيانات في القوائم وسنقوم بسرد النوعين الاكثر شيوعاً الا وهما ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
Ordered Lists او المتسلسلة وتكون بهذا الشكل ,,
http://im88.gulfup.com/SOhBDe.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وثانيهما Unordered Lists او الغير متسلسلة وتكون بهذا الشكل ,,
http://im89.gulfup.com/psrgHy.png
http://im55.gulfup.com/QxQsXY.gif
وهنا السؤال هل قمت بـ اضافة ارقام واستخدام الوسم <BR> للانتقال الى سطر جديد ؟
هل قمت باستخدام تلك النقطة السوداء ( ● ) ثم استخدمت الوسم <BR> للانتقال الى سطر جديد ؟
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الإجابة بالطبع لا فالامر ابسط بكثير :mf_popcorn: ,,
يمكنك ان تستخدم القوائم المتسلسلة Ordered Lists بواسطة اضافة الوسم <OL>___</OL> هكذا >>

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> <OL> <LI>HTML <LI>Guide <LI>By <LI>3ashek El7ozn <LI>& <LI>Silkroad4arab Forum </OL> </BODY> </HTML>

وستحصل على النتيجة ,,
http://im88.gulfup.com/SOhBDe.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
اما بالنسبة للقوائم الغير متسلسلة Unordered Lists يتم استخدام الوسم <UL>___</UL> معها بهذا الشكل ,,

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> <UL> <LI>HTML <LI>Guide <LI>By <LI>3ashek El7ozn <LI>& <LI>Silkroad4arab Forum </UL> </BODY> </HTML>

وستكون النتيجة ,,
http://im89.gulfup.com/psrgHy.png
http://im55.gulfup.com/QxQsXY.gif
اعرف ما يدور براسك !!
لماذا الوسم <LI> ؟ وما الذى يفعله !!
باختصار شديد الوسم <LI> يستخدم فى تعيين كل بند من بنود القائمة وهو وسم مفرد ليس له نهاية ,, ويعنى List Item .
http://im55.gulfup.com/QxQsXY.gif
نذهب الان الى شاطر اخر وهو الخواص التى يمكن اضافتها لـ هذه الوسوم >>
الخاصية الوحيدة التى يمكن ان نستخدمها مع هذه الوسوم هى TYPE حيث انها تحدد شكل الرمز الظاهر مع بنود القائمة .
وتكون بهذه الشكل >>

كود بلغة HTML:

<OL TYPE="___">

حيث يمكنك تغيير الترتيب الافتراضى للقوائم عن طريق اضافة الخاصية TYPE مع احد القيم التالية لتغيير الترتيب الافتراضى وهو الارقام ,,
وتتكون هذه القيم من >>
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
القيمة ( i ) وتستخدم فى اضافة ترتيب باستخدام الارقام الرومانية بحروف صغيرة هكذا ,,
http://im86.gulfup.com/os8mZW.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
القيمة ( I ) وتستخدم كذلك فى اضافة ترتيب باستخدام الارقام الرومانية بحروف كبيرة هكذا ,,
http://im48.gulfup.com/O1dFui.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
القيمة ( a ) وتستخدم فى اضافة ترتيب باستخدم حروف انجليزية صغيرة هكذا ,,
http://im67.gulfup.com/vNFaVp.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
القيمة ( A ) وتستخدم كذلك فى اضافة ترتيب باستخدام حروف انجليزية بحروف كبيرة هكذا ,,
http://im58.gulfup.com/aIqPiL.png

ولن اقوم بسرد الاكواد الخاصة بها قم بالتجربة بنفسك واطرح النتيجة فى الموضوع وساقوم بالمتابعة والتصحيح ,, -:)

http://im55.gulfup.com/QxQsXY.gif

ولن ننسى القوائم الغير متسلسلة Unordered Lists فهناك اشكال عديدة لتغيير تلك النقطة السوداء باستخدام الخاصية TYPE وبعض القيم ايضا ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
حيث ان

كود بلغة HTML:

<UL TYPE="square">

يعنى مربع ويظهر بهذا الشكل ,,
http://im57.gulfup.com/G58JkW.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

كود بلغة HTML:

<UL TYPE="circle">

وتعنى دائرة مفرغة وتظهر بهذا الشكل ,,
http://im44.gulfup.com/ilkQqk.png

ولن اقوم بسرد الاكواد الخاصة بها قم بالتجربة بنفسك واطرح النتيجة فى الموضوع وساقوم بالمتابعة والتصحيح ,, -:)

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