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

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

الجزء الثانى من الدرس الرابع فى لغة الـ HTML ...

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

لقد قمنا بشرح الوسم <P> والخصائص المرتبطة به ,,
قمنا بشرح الخاصية DIR والتى نستخدمها أيضاً مع <P> و تقوم بتحديد إتجاه قراءة النص وتأخذ القيم ,,
LTR وتعنى Left To Right ..
RTL وتعنى Right To Left ..
قمنا بشرح خاصية الاقتباس لتنسيق الفقرات <BLOCKQUOTE>___</BLOCKQUOTE> ..

وفى درسنا اليوم سوف نتكلم عن القوائم ,,
قبل الدخول فى الدرس رجاء تامل فى هذه الصورة >>

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

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

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

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

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

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

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

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

النتيجة ,,

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

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

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

النتيجة ,,

ولكن الامر غير ذلك تماماً ولكن بالنسبة لاستنتاجك فلا بأس به ولكن الطريقة الصحيحة لعمل مثل هذه الصفحة >>

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

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

النتيجة كما سبق :-

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
ولكن اذا لم يتم كتابة الوسمين ..

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

ستكون النتيجة ,,

والان نبدا فى درسنا اليوم وسوف نتحدث فيه عن القوائم ......
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
مبدئيا عليك ان تعلم بان لغة HTML تحتوى على مجموعة من الوسوم الخاصة بتنظيم البيانات في القوائم وسنقوم بسرد النوعين الاكثر شيوعاً الا وهما ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
Ordered Lists او المتسلسلة وتكون بهذا الشكل ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وثانيهما Unordered Lists او الغير متسلسلة وتكون بهذا الشكل ,,

وهنا السؤال هل قمت بـ اضافة ارقام واستخدام الوسم <BR> للانتقال الى سطر جديد ؟
هل قمت باستخدام تلك النقطة السوداء ( ● ) ثم استخدمت الوسم <BR> للانتقال الى سطر جديد ؟
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الإجابة بالطبع لا فالامر ابسط بكثير ,,
يمكنك ان تستخدم القوائم المتسلسلة Ordered Lists بواسطة اضافة الوسم <OL>___</OL> هكذا >>

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

وستحصل على النتيجة ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
اما بالنسبة للقوائم الغير متسلسلة Unordered Lists يتم استخدام الوسم <UL>___</UL> معها بهذا الشكل ,,

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

وستكون النتيجة ,,

اعرف ما يدور براسك !!
لماذا الوسم <LI> ؟ وما الذى يفعله !!
باختصار شديد الوسم <LI> يستخدم فى تعيين كل بند من بنود القائمة وهو وسم مفرد ليس له نهاية ,, ويعنى List Item .

نذهب الان الى شاطر اخر وهو الخواص التى يمكن اضافتها لـ هذه الوسوم >>
الخاصية الوحيدة التى يمكن ان نستخدمها مع هذه الوسوم هى TYPE حيث انها تحدد شكل الرمز الظاهر مع بنود القائمة .
وتكون بهذه الشكل >>

<OL TYPE="___">

حيث يمكنك تغيير الترتيب الافتراضى للقوائم عن طريق اضافة الخاصية TYPE مع احد القيم التالية لتغيير الترتيب الافتراضى وهو الارقام ,,
وتتكون هذه القيم من >>
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
القيمة ( i ) وتستخدم فى اضافة ترتيب باستخدام الارقام الرومانية بحروف صغيرة هكذا ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
القيمة ( I ) وتستخدم كذلك فى اضافة ترتيب باستخدام الارقام الرومانية بحروف كبيرة هكذا ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
القيمة ( a ) وتستخدم فى اضافة ترتيب باستخدم حروف انجليزية صغيرة هكذا ,,

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
القيمة ( A ) وتستخدم كذلك فى اضافة ترتيب باستخدام حروف انجليزية بحروف كبيرة هكذا ,,

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

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

<UL TYPE="square">

يعنى مربع ويظهر بهذا الشكل ,,

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

<UL TYPE="circle">

وتعنى دائرة مفرغة وتظهر بهذا الشكل ,,

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

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

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

**™AhmedAlastoOora™** · 25-09-2014, 02:21 PM

Tu es professeur

بالفرنساوى اهو

**3ashek El7ozn** · 26-09-2014, 02:19 AM

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

Tu es professeur

بالفرنساوى اهو

وماله مش عيب

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

بجد شرحاتك تجنن

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

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