جزيت خير اخي الفاضل netjaeper
ونظرا لكثرة الردود وتباعد الدروس تم تقسيم الموضوع حتى يسهل للجميع المشاركة ومعرفة اين بداية الدروس
ويسهل عليك اكمالها
لرؤية تجارب العضوات
واتمنى الالتزام بعدم اظهار التوقيع هنا ياخواتي ليسهل عليكم التصفح
:27::)
aroona
•
السلام عليكم ورحمة الله
الى الأخوات العضوات الفاضلات انا عضوة اعتبر جديدة ولست بجديدة اي انني لي فترة وانا مسجلة في هذا المنتدى الرائع ولانه اعجبني كثيرا طبعا بمشاركاتكم الهادفة والمحترمة ولأنني اعتبر جديدة من ناحية المشاركة في المنتديات فاني اود طلب المساعدة منكم هذا اذا سمحتم لي
وسؤالي هو كيف اطرح موضوع جديد في المنتدى ولكم جزيل الشكر وارجو ان لااكون ضيفة ثقيلة الدم ونصبح باذن الله صيقات
الى الأخوات العضوات الفاضلات انا عضوة اعتبر جديدة ولست بجديدة اي انني لي فترة وانا مسجلة في هذا المنتدى الرائع ولانه اعجبني كثيرا طبعا بمشاركاتكم الهادفة والمحترمة ولأنني اعتبر جديدة من ناحية المشاركة في المنتديات فاني اود طلب المساعدة منكم هذا اذا سمحتم لي
وسؤالي هو كيف اطرح موضوع جديد في المنتدى ولكم جزيل الشكر وارجو ان لااكون ضيفة ثقيلة الدم ونصبح باذن الله صيقات
مشكورة أخت أرينا على ترتيب الموضوع
أخت نوران :
ممكن ما فهمت غليك بالضبط لكن أنتي كتبتي ثلاثة سطور .. الأول اللي هو العنوان و السطر الثاني يكون لليمين و الثالث لليسار
و مو ممكن أن تكون هذه الجمل على سطر واحد بإستخدام الطرق العادية .. كل سطر له تنسيق واحد .. إما كله لليسار أو كله لليمين أو يكون السطر في المنتصف
لاحقا .. راح نتعلم كيف نكتب جملة على سطر واحد بحيث يكون جزء منها محاذي لليمين و الجزء الآخر من الجملة على نفس السطر محاذي لليسار و بين الجملتين فراغ ( مسافة ) بإستخدام علامات الجدولة أو غيرها من الأكواد .
شمس البحرين :
طبقتي عدد من الأكواد .. و هي كلها صحيحة .. هذا بالإضافة إلى النص المتحرك لليمين .. نأمل استمرارك معنا ،،
ام الغزلان :
حياك الله .. بإمكانك ذلك من خلال الضغط على زر
نستكمل ..
القوائم بأنواعها ( Lists ) و التعاريف ( Definitions )
أحيانا نحتاج لكتابة القوائم في صفحات الإنترنت .. فالقوائم ترتب المعلومات على شكل نقاط على عدة أسطر بحيث تكون سهلة القراءة لمتصفح الصفحة .
و القوائم أنواع .. منها القوائم الرقمية و منها القوائم الحرفية أو النقطية و غير ذلك .
و في كل قائمة عناصر بحيث يكون كل عنصر على سطر .. و هذا مثال لقائمة نقطية مكونة من عنصرين :
و داخل القائمة لازم نكتب العنصر داخل الكود <li> .... </li>
و مو ضروري أن نغلق هذا الكود ..
هذا مثال للقائمة الرقمية
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
قائمة رقمية تبدأ من الرقم واحد و مثل ما قلنا مو ضروري لازم تغلق الكود اللي هو </li> إذا كان داخل كود آخر مثل هذا المثال
نستطيع استعمال هذا الكود لعمل قوائم حرفية سواء أحرف كبيرة
أو أحرف بحالة صغيرة أو أحرف رومانية و سوف نرى هذا لاحقا
----------------------
<dl>
<li>Item 1</li>
<li>Item 2</li>
</dl>
قائمة نقطية .. دوائر و تكون دوائر القائمة من بداية السطر
هذا الكود يستخدم فقط للقوائم النقطية
العناصر في هذه القائمة هي :
Item 1
Item 2
----------------------
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
قائمة نقطية .. دوائر و تكون دوائر القائمة بعد
مسافة من بداية السطر
هذا الكود يستخدم فقط للقوائم النقطية
----------------------
<ol>
<li type="a">Item 1</li>
<li>Item 2</li>
</ol>
قائمة حرفية .. أحرف صغيرة
لاحظوا حرف ( a ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب أبجديا و بإستعمال الحروف الصغيرة Small Letters
----------------------
<ol>
<li type="A">Item 1</li>
<li>Item 2</li>
</ol>
قائمة حرفية .. أحرف كبيرة
لاحظوا حرف ( A ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب أبجديا و بإستعمال الحروف الكبيرة Capital Letters
----------------------
<ol>
<li type="i">Item 1</li>
<li>Item 2</li>
</ol>
قائمة حرفية .. أحرف رومانية صغيرة
لاحظوا حرف ( i ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب بإستعمال الحروف الرومانية الصغيرة .
----------------------
<ol>
<li type="I">Item 1</li>
<li>Item 2</li>
</ol>
قائمة حرفية .. أحرف رومانية كبيرة
لاحظوا حرف ( I ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب بإستعمال الحروف الرومانية الكبيرة .
----------------------
<ol>
<li type="a">Item 1</li>
<li type="A">Item 2</li>
<li type="i">Item 3</li>
<li type="1">Item 4</li>
</ol>
هنا راح تظهر قائمة واحدة .. طبعا الترتيب كالتالي :
العنصر الأول راح يحمل حرف ( a )
و العنصر الثاني راح يحمل الحرف الثاني في الانجليزية و هو ( B )
و العنصر الثالث راح يحمل الرقم الثالث في الأرقام الرومانية و هو ( iii )
و العنصر الرابع راح يحمل الرقم الرابع في الأرقام و هو ( أربعة )
يعني احنا نحدد ترتيب كل عنصر مثل ما نبغى و على هوانا .
-----------------------
<ol start="10" type="a">
<li>Item 1</li>
<li>Item 2</li>
</ol>
هنا قائمة حرفية صغيرة لكنها راح تبدأ بالحرف العاشر من
الحروف الانجليزية و هو الحرف ( j ) .
لاحظوا حرف ( a ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب أبجديا و بإستعمال الحروف الصغيرة Small Letters و نفس الشئ لاحظوا الرقم ( 10 ) و هذا الرقم يمثل الحرف ( j ) في الحروف الإنجليزية الصغيرة .
-----------------------
<ol start="10" type="a">
<li>Item 1</li>
<li value="3">Item 2</li>
</ol>
هنا قائمة حرفية .. العنصر الأول راح يحمل الحرف العاشر من الحروف الانجليزية و العنصر الثاني راح يحمل الحرف الثالث من الحروف الانجليزية .
-----------------------
<ol>
<li>Item 1</il>
<li>Item 2</il>
<ol>
<li>Item 2-1</il>
<li>Item 2-2</il>
</ol>
</ol>
هنا قائمة رقمية و تحت العنصر الثاني هناك قائمة فرعية أخرى تتكون من عنصرين .. فإذا أردنا تكوين قائمة فرعية داخل قائمة رئيسية نضع كود القائمة الفرعية بالكامل داخل كود القائمة الرئيسية و يمكننا عمل قائمة فرعية أخرى داخل القائمة الفرعية بنفس الطريقة .
------------------------
<ul>
<li>أول قائمة ( رئيسية ) تكون دائرة ملونة
<ul>
<li>ثاني قائمة ( فرعية ) تكون دائرة مجوفة
<ul>
<li>ثالث قائمة ( فرعية تحت القائمة الثانية ) تكون مربع
</ul>
</ul>
</ul>
هذه طريقة لكتابة القوائم بطريقة غير مرتبه بحيث يصير القائمة الرئيسية هي قائمة نقطية على شكل دائرة ملونة و مهما نكتب قائمة رئيسية ثانية راح تكون على شكل دائرة ملونة أما
القائمة الفرعية تحت القائمة الرئيسية ( المستوى الثاني ) راح تكون على شكل دائرة مجوفة و القائمة الفرعية الثالثة تحت القائمة الفرعية الثانية تكون على شكل مربع .. و بقية القوائم الفرعية تحت القائمة الفرعية الثالثة راح تكون على شكل مربع .
-------------------------
<ul type="square">
<li>First item bullet shape set automaticlly
<li type="disc">Disc item
<li type="circle">Circle item
<li type="square">Square item
العنصر الأول راح تكون على شكل مربع بسبب تحديد نوعه في بداية الكود ( حددناه Square ) أما العنصر الثاني فحددناه على شكل دائرة ملونة و الثالث على شكل دائرة مجوفة و الرابع على شكل مربع .
و أي عنصر نضيفه بعد العنصر الرابع .. راح يكون على شكل مربع .
-------------------------
بالنسبة للكودين التاليين <menu>.....</menu> و الكود التالي <dir>..... </dir> كل منها تستخدم لعمل القوائم و لكن هذه القوائم ليست حرفية و لا نقطية .. فقط قوائم بدون أي علامة في بداية العنصر و ممكن نعمل قوائم فرعية داخل القوائم الرئيسية .. و هذا الكودين لهما نفس الاستخدام .
الحين نجي للتعاريف
<dl>
<dt>pen</dt>
<dd>A tool that is use in writing</dd>
</dl>
هذا الكود خاص بالتعاريف بحيث تكتب الكلمة على سطر و يكتب تعريفها في السطر التالي مع ترك مسافة بادئة في السطر الخاص بالتعريف .. و الكود هذا <dt>.... </dt> هو الكود الخاص بالكلمة المراد وضع تعريف لها .. أما هذا <dd>.... </dd> فهو الكود الخاص بوضع تعريف الكلمة و الكودين ما يحتاجون للإغلاق .. أي ما يحتاج أن نضع </dt> أو </dd> .
------------------------
<dl><dd><p>This paragraph is indented.</p>
</dl>
هنا الكود التالي <dl><dd>... </dl> يستخدم لترك مسافة بادئة قبل الجملة و لاحظ أن الكود <dd> لا يحتاج إلى إغلاق و وهو المسؤول عن عمل المسافة البادئة و هذه المسافة ثابتة لا يمكن زيادة مقدارها .
------------------------
<ul><ul>
<p>This paragraph is even further indented.</p>
</ul></ul>
هذا الكود يستخدم لترك مسافة بادئة أكبر من المساة اللي يتركها الكود <dl><dd> ..</dl>
و يمكن زيادة المسافة البادئة بزيادة عدد الأكواد .. فمثلا هنا وضعنا كودين و لو وضعنا ثلاثة أكواد راح تصير المسافة البادئة أكبر و هكذا
بإنتظار تجاربكم على صفحة التجارب .. تحياتي
أخت نوران :
ممكن ما فهمت غليك بالضبط لكن أنتي كتبتي ثلاثة سطور .. الأول اللي هو العنوان و السطر الثاني يكون لليمين و الثالث لليسار
و مو ممكن أن تكون هذه الجمل على سطر واحد بإستخدام الطرق العادية .. كل سطر له تنسيق واحد .. إما كله لليسار أو كله لليمين أو يكون السطر في المنتصف
لاحقا .. راح نتعلم كيف نكتب جملة على سطر واحد بحيث يكون جزء منها محاذي لليمين و الجزء الآخر من الجملة على نفس السطر محاذي لليسار و بين الجملتين فراغ ( مسافة ) بإستخدام علامات الجدولة أو غيرها من الأكواد .
شمس البحرين :
طبقتي عدد من الأكواد .. و هي كلها صحيحة .. هذا بالإضافة إلى النص المتحرك لليمين .. نأمل استمرارك معنا ،،
ام الغزلان :
حياك الله .. بإمكانك ذلك من خلال الضغط على زر
نستكمل ..
القوائم بأنواعها ( Lists ) و التعاريف ( Definitions )
أحيانا نحتاج لكتابة القوائم في صفحات الإنترنت .. فالقوائم ترتب المعلومات على شكل نقاط على عدة أسطر بحيث تكون سهلة القراءة لمتصفح الصفحة .
و القوائم أنواع .. منها القوائم الرقمية و منها القوائم الحرفية أو النقطية و غير ذلك .
و في كل قائمة عناصر بحيث يكون كل عنصر على سطر .. و هذا مثال لقائمة نقطية مكونة من عنصرين :
- العنصر الأول
- العنصر الثاني
و داخل القائمة لازم نكتب العنصر داخل الكود <li> .... </li>
و مو ضروري أن نغلق هذا الكود ..
هذا مثال للقائمة الرقمية
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
قائمة رقمية تبدأ من الرقم واحد و مثل ما قلنا مو ضروري لازم تغلق الكود اللي هو </li> إذا كان داخل كود آخر مثل هذا المثال
نستطيع استعمال هذا الكود لعمل قوائم حرفية سواء أحرف كبيرة
أو أحرف بحالة صغيرة أو أحرف رومانية و سوف نرى هذا لاحقا
----------------------
<dl>
<li>Item 1</li>
<li>Item 2</li>
</dl>
قائمة نقطية .. دوائر و تكون دوائر القائمة من بداية السطر
هذا الكود يستخدم فقط للقوائم النقطية
العناصر في هذه القائمة هي :
Item 1
Item 2
----------------------
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
قائمة نقطية .. دوائر و تكون دوائر القائمة بعد
مسافة من بداية السطر
هذا الكود يستخدم فقط للقوائم النقطية
----------------------
<ol>
<li type="a">Item 1</li>
<li>Item 2</li>
</ol>
قائمة حرفية .. أحرف صغيرة
لاحظوا حرف ( a ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب أبجديا و بإستعمال الحروف الصغيرة Small Letters
----------------------
<ol>
<li type="A">Item 1</li>
<li>Item 2</li>
</ol>
قائمة حرفية .. أحرف كبيرة
لاحظوا حرف ( A ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب أبجديا و بإستعمال الحروف الكبيرة Capital Letters
----------------------
<ol>
<li type="i">Item 1</li>
<li>Item 2</li>
</ol>
قائمة حرفية .. أحرف رومانية صغيرة
لاحظوا حرف ( i ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب بإستعمال الحروف الرومانية الصغيرة .
----------------------
<ol>
<li type="I">Item 1</li>
<li>Item 2</li>
</ol>
قائمة حرفية .. أحرف رومانية كبيرة
لاحظوا حرف ( I ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب بإستعمال الحروف الرومانية الكبيرة .
----------------------
<ol>
<li type="a">Item 1</li>
<li type="A">Item 2</li>
<li type="i">Item 3</li>
<li type="1">Item 4</li>
</ol>
هنا راح تظهر قائمة واحدة .. طبعا الترتيب كالتالي :
العنصر الأول راح يحمل حرف ( a )
و العنصر الثاني راح يحمل الحرف الثاني في الانجليزية و هو ( B )
و العنصر الثالث راح يحمل الرقم الثالث في الأرقام الرومانية و هو ( iii )
و العنصر الرابع راح يحمل الرقم الرابع في الأرقام و هو ( أربعة )
يعني احنا نحدد ترتيب كل عنصر مثل ما نبغى و على هوانا .
-----------------------
<ol start="10" type="a">
<li>Item 1</li>
<li>Item 2</li>
</ol>
هنا قائمة حرفية صغيرة لكنها راح تبدأ بالحرف العاشر من
الحروف الانجليزية و هو الحرف ( j ) .
لاحظوا حرف ( a ) .. هذا الحرف يعني بأن عناصر القائمة راح ترتيب أبجديا و بإستعمال الحروف الصغيرة Small Letters و نفس الشئ لاحظوا الرقم ( 10 ) و هذا الرقم يمثل الحرف ( j ) في الحروف الإنجليزية الصغيرة .
-----------------------
<ol start="10" type="a">
<li>Item 1</li>
<li value="3">Item 2</li>
</ol>
هنا قائمة حرفية .. العنصر الأول راح يحمل الحرف العاشر من الحروف الانجليزية و العنصر الثاني راح يحمل الحرف الثالث من الحروف الانجليزية .
-----------------------
<ol>
<li>Item 1</il>
<li>Item 2</il>
<ol>
<li>Item 2-1</il>
<li>Item 2-2</il>
</ol>
</ol>
هنا قائمة رقمية و تحت العنصر الثاني هناك قائمة فرعية أخرى تتكون من عنصرين .. فإذا أردنا تكوين قائمة فرعية داخل قائمة رئيسية نضع كود القائمة الفرعية بالكامل داخل كود القائمة الرئيسية و يمكننا عمل قائمة فرعية أخرى داخل القائمة الفرعية بنفس الطريقة .
------------------------
<ul>
<li>أول قائمة ( رئيسية ) تكون دائرة ملونة
<ul>
<li>ثاني قائمة ( فرعية ) تكون دائرة مجوفة
<ul>
<li>ثالث قائمة ( فرعية تحت القائمة الثانية ) تكون مربع
</ul>
</ul>
</ul>
هذه طريقة لكتابة القوائم بطريقة غير مرتبه بحيث يصير القائمة الرئيسية هي قائمة نقطية على شكل دائرة ملونة و مهما نكتب قائمة رئيسية ثانية راح تكون على شكل دائرة ملونة أما
القائمة الفرعية تحت القائمة الرئيسية ( المستوى الثاني ) راح تكون على شكل دائرة مجوفة و القائمة الفرعية الثالثة تحت القائمة الفرعية الثانية تكون على شكل مربع .. و بقية القوائم الفرعية تحت القائمة الفرعية الثالثة راح تكون على شكل مربع .
-------------------------
<ul type="square">
<li>First item bullet shape set automaticlly
<li type="disc">Disc item
<li type="circle">Circle item
<li type="square">Square item
العنصر الأول راح تكون على شكل مربع بسبب تحديد نوعه في بداية الكود ( حددناه Square ) أما العنصر الثاني فحددناه على شكل دائرة ملونة و الثالث على شكل دائرة مجوفة و الرابع على شكل مربع .
و أي عنصر نضيفه بعد العنصر الرابع .. راح يكون على شكل مربع .
-------------------------
بالنسبة للكودين التاليين <menu>.....</menu> و الكود التالي <dir>..... </dir> كل منها تستخدم لعمل القوائم و لكن هذه القوائم ليست حرفية و لا نقطية .. فقط قوائم بدون أي علامة في بداية العنصر و ممكن نعمل قوائم فرعية داخل القوائم الرئيسية .. و هذا الكودين لهما نفس الاستخدام .
الحين نجي للتعاريف
<dl>
<dt>pen</dt>
<dd>A tool that is use in writing</dd>
</dl>
هذا الكود خاص بالتعاريف بحيث تكتب الكلمة على سطر و يكتب تعريفها في السطر التالي مع ترك مسافة بادئة في السطر الخاص بالتعريف .. و الكود هذا <dt>.... </dt> هو الكود الخاص بالكلمة المراد وضع تعريف لها .. أما هذا <dd>.... </dd> فهو الكود الخاص بوضع تعريف الكلمة و الكودين ما يحتاجون للإغلاق .. أي ما يحتاج أن نضع </dt> أو </dd> .
------------------------
<dl><dd><p>This paragraph is indented.</p>
</dl>
هنا الكود التالي <dl><dd>... </dl> يستخدم لترك مسافة بادئة قبل الجملة و لاحظ أن الكود <dd> لا يحتاج إلى إغلاق و وهو المسؤول عن عمل المسافة البادئة و هذه المسافة ثابتة لا يمكن زيادة مقدارها .
------------------------
<ul><ul>
<p>This paragraph is even further indented.</p>
</ul></ul>
هذا الكود يستخدم لترك مسافة بادئة أكبر من المساة اللي يتركها الكود <dl><dd> ..</dl>
و يمكن زيادة المسافة البادئة بزيادة عدد الأكواد .. فمثلا هنا وضعنا كودين و لو وضعنا ثلاثة أكواد راح تصير المسافة البادئة أكبر و هكذا
بإنتظار تجاربكم على صفحة التجارب .. تحياتي
الصفحة الأخيرة
اللهم صلي على محمد وآل محمد
السلام عليكم ورحمة الله وبركاته
اشكر الاخت سيرينا على هذا الموضوع ونتمنى لها ان تتيسر امورها
هذا التطبيق
http://marrow.jeeran.com/test.html