الفقرات و القوائم في لغة 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 ويقوم بإعطاء فراغ واحد في السطر و تقوم بكتابة هذا الوسم بعدد الفرغات الذي تريدها.
 

وسم المخصصة لعرض النص كما هو

سوف نقوم بإستخدام الوسم pre ووظيفة هذا الوسم هي تعرض النص كما هو موجود في محرر الأكواد أي منسق مسبقاً, و معنى هذا المصطح بالإنجليزية Preformatted Text و ترجمتها نص منسق مسبقاً.
<html>
    <head></head>
        <title></title>
<body>
    <pre>A    B    C    D</pre>
    <pre>E    F    G    H</pre>
    <pre>I    J    K    L</pre>
    <pre>M    N    O    P</pre>
    <pre>Q    R    S    T</pre>
    <pre>U    V    W    X</pre>
</body>
</html>
 
 
كما نلاحظ بفضل الوسم pre قد عرضنا نتيجة الكود كما هي في المحرر مع الفراغات, بعكس الوسم p إذا تركنا فراغات في الوسم p لن تعرض في المتصفح لكن عند إستخدام pre تم حل هذه المشكلة.

مثال 2
<html>
    <head></head>
        <title></title>
<body>
    <pre>FirstName :  Muhammad         LasatName :    Alush</pre>
    <pre>FirstName :  Ahmed            LasatName :    kaissar</pre>
    <pre>FirstName :  Saja             LasatName :    Osman</pre>
    <pre>FirstName :  Wazer            LasatName :    AboMAnar</pre>
    <pre>FirstName :  S49              LasatName :    Yemen</pre>
    <pre>FirstName :  Parrot           LasatName :    Nawa</pre>
    <pre>FirstName :  KasoCS           LasatName :    Irbel</pre>

</body>
</html>

 
نلاحظ أنه مسافه موحدة بين الأحرف لو لم نستخدم هذا الوسم لكنتم توقعتم اننا إستخدمنا عدد كبير من الوسم و &;nbsp.

القوائم

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

القوائم المرتبة 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

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

الاسم

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

رسالة *