الفقرات و القوائم في لغة html الدرس |7| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الأربعاء، 4 ديسمبر 2019

الفقرات و القوائم في لغة html الدرس |7|



الفقرات و القوائم

سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص وتنسيقها بشكل عام, صحيح ان استخدامك الألوان و الرسومات في الصفحة يقوم بإعطائها نوع من الحيوية وأن الخطوط تعطي الصفحة رونقاً وجمالاً, ولكن لم تهتم بعد بترتيب صفحتك او تقضي بعض الوقت في تنسيقها.

للحصول على صفحة ذو جمال وترتيب افضل, يجب عليك التعامل مع الفقرات والقوائم في الصفحة
للحصول على صفحة ذو ترتيب جيد, الترتيب هو الخطوة الأولى لجلب الزوار إلى موقعك.

سوف نستخدم محرر اونلاين من الموقع harmash للدخول لرابط الموقع اضغط هنا


الفقرات

يتم تعريف الفقرات عن طريق الوسم <p> و المتصفحات هي تفهم وحدها بأن تضيف هامش ابيض قبل و بعد الفقرة.


وسم الفقرات <p>

<p> Programmer Tech </p>  // هذه فقرة
<p> Programmer Tech1 </p> // هذه فقرة اخرى

هو وسم منفرد ولكنه يستخدم ايضاً كوسم مزدوج وكما يمكن لهذا الوسم تحديد اتجاه الفقرات والنصوص من خلال بعض الخصائص التي تستخدم مع الوسم P وهي align , dir .

الخاصية align

هذه الخاصية تحدد اتجاه الفقرة وهي تأخذ مجموعة من القيم center,right,left .
<p align="right"> Programmer Tech </p>

في المثال السابق سوف يأتي النص على يمين الصفحة بدل الوضع الإفتراضي له وهو يسار الصفحة.
ماذا اذا كنا نريد ان يكون النص او الفقرات في المنتصف هنا يجب علينا استعمال القيمة الاخرى وهي center .
<p align="center"> Programmer Tech </p>

وكذلك الامر اذا كنت اريد القيمه على يسار الصفحة نضع left .

الوسم <br>

هذا الوسم منفرد يقوم بنزول السطر الحالي والبدأ بسطر جديد كأننا ضغطنا على زر Enter.


وسم الفراغات nbsp;&

بدل الفراغات في السطر يمكنك استخدام هذا الوسم لإعطاء فراغات في سطر الـ html ويقوم بإعطاء فراغ واحد في السطر و تقوم بكتابة هذا الوسم بعدد الفرغات الذي تريدها.


القوائم

تقسم القوائم إلى قسمين وهي قوائم مرتبة و قوائم غير مرتبة.

القوائم المرتبة lists ordered

مثال
<ol>
<li> مصر
<li>فلسطين
<li>سوريا
</ol>

وتكون النتيجه وطريقةكتابة الكود كالتالي في القسم اليمين هي المخرجات



List item يستخدم في بداية السطر الخاص بكل بند li ولتعيين كل بند من بنود القائمة بالتسلسل رقمياً , كما بالمثال السابق.

القوائم الغير مرتبة Unordered lists

وتستخدم وسم <ul> سوف نستخدم المثال السابق في القوائم الغير متسلسلة
<ul>
<li>مصر
<li>فلسطين
<li>سوريا
</ul>
و تكون النتيجة كالتالي



نلاحظ انه سلسل لنا العناصر بنقاط بعكس المثال السابق ارقام.

وهي الخاصية الوحيدة التي تستخدم مع هذا الوسم ووظيفتها تحديد شكل type للرمز الظاهر مع بنود القائمة وعادتاً ماتستخدم مع وسم بداية القائمة ul , ol, li.

وتستطيع ايضاً استخدامه مع وسم البنود لأعطاءه التحكم في كل بند داخل القائمة وتحديد رمز مختلف لكل بند.

ناتي الان الي القيم التي تستخدم مع هذه الخاصية, لكن لن اذكر كل القيم, سأدعكم تكتشفوها بأنفسكم.
<ol type="A">
<li>
<li>
<li>
</ol>
و النتيجه تكون كما في الصورة



كما رأينا بدأ بتسلسلها حرفياً بداية من الحرف A  الذي حددناه الى نهاية الحروف A,B,C,D,E...الخ.

و كذلك ايضا هكذا
<ol type = "a">
والنتيجة هي
a , b , c , d , e

وكذلك ايضاً
<ol type = "I">
والنتيجة هي
II , III , IV , V

وكذلك ايضاً
<ol type = "i">
والنتيجة هي
  ii , iii , iv , v

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام