تنظيم و ترتيب النّص ب HTML

بواسطة / 4 تعليقات

مرحباً بكم مرة أخرى!

تنظيم و ترتيب النّص ب HTML

  HTML دروس حسناً ، قد لا يعجبك شكل الصفحة التي أنشأناها في الحلقة السابقة 🙁  ومن ذا الذي ستعجبه ؟ إنها  أشبه ما يكون بورقة تلميذ كسول  😛  فهل شكلها سيكون جذّاباً للزوار ؟ لا أعتقد،  فشكلها لم يعجبني ! و لن يشجعني على زيارته  مستقبلاً إذا بقي على هذا الحال 😯 إذن يلزمنا أن  ننظم صفحتنا ونرتبها و ننسق شكلها حتى لا نصبح أضحوكة أمام المبحرين على النت . ماذا علينا  أن نفعل إذن؟ لا شيئ ! فقط علينا أن نكتشف  عالم HTML و نتعلم كيفية استعمال علاماته  التي تساعدنا على ترتيب و تنسيق موقعنا ليصبح أنيقاً و جذاباًً  . في الحقيقة ليست كل أكواد HTML5 جديدة، فالبعض منها ما زال معمول به منذ الإصدارات الأولى  . أما الإضافات ما هي إلا تطوير في الاصدارات من جيل لآخر . سنكتشف سوياً كيف  نستعمل لغة HTML  في كتابة العناوين و الكلمات ثم  الفقرات  وصولاً إلى  القوائم. 😆  ∴ نبدأعـلى بركـة الله

 

طبعاً لن يكون الأمر معقداً كما قد يتهيَّأ للبعض، فقط قليل من التـركيز وسنرى كم هي سهلة عملية تنظيم و ترتيب النّص ب HTML 😉

الفقــرات:

 

  كما قلنا في  الحلقة السابقة ، أن صفحات الويب مليئة بعلامات HTML ، فعند كتابة فقرة  تقترح علينا  لغة  HTML علامة <P> لتحديد الفقرات.

1
<p> أهلاً ومرحبًابك في مدونتي على الويب! </ p>

<p> تعني “بداية الفقرة”  </ p> تعني “نهاية الفقرة” يجب أن أذكركم بشيئ مهم تجده  في الحلقة السابقة ،وهو أن محتوى موقع الويب يكتب بين العلاماتين

1
<body> و </ body>.

ما يهمنا الآن هو العلامتين: <p> و </p> لذا سنكرر كتابة نفس الكود السابق ثم نضيف العلامتين إلى الفقرات:

1
2
3
4
5
6
7
8
9
10
11
<! DOCTYPE html>
<HTML>
  <meta charset = "utf-8" />
  <head>
<title> عنوان الصفحة  </ title>
</ head>
  <body>
 <p> !أتمنى لك إبحاراً موفقاً  </ p>
  <p> !أهلاً ومرحبًا بك في موقعي  </ p>
</ body>
</ HTML>

الآن بعد كتابة  هاتين الفقرتين ، جرب ، و سترى النتيجة! طَـيِّب،  لا تفرح كثيراً، إنها ليس كل شيء و لكنها بداية جيدة لكيفية تنظيم و ترتيب النّص ب HTML:  نعم إنها بداية جيدة  لنستمر، لا أن نكتفي  بما فعلنا ، فالقادم أجمل 🙂  .  سنرى الآن شيئًا خاصًا حول HTML:  كيف ننتقل من سطر إلى آخر؟  قد تقول لي  أن الأمر سهل  😛 لا يا حبيبي ! نحن لا نكتب على « الأوفيس – وورد »    هنا الأمر مختلف تماماً   😯  . الرجوع للسطر في HTML ، لا يحتاج كالعادة إلى  الضغط على المفتاح  Entée  كي تنشئ سطراً جديداً   . جرب هذا الكود و سترى :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<! DOCTYPE html>
<HTML>
    <head>
    <meta charset = "utf-8" />
     <title> اختبارات العودة إلى السطر بشكل سريع </ title>
    </ head>
    <body>
   <p> أهلا  وسهلا ومرحبًا بكم في موقعي!
أخبر زواري الكرام أن هاته أول صفحة
أكتبها لبناء موقعي الجديد، لذا أرجو منكم التعامل
مع أخطائي بالحكمة والصبر، وإن شاء اللهسأفاجئكم، و القادم أجمل.
سأكون عند حسن ظنكم. فلا تحرموني من اقتراحاتكم.  
تحياتي</P>
    </ body>
</ HTML>

عند تسجيل الصفحة سيظهر  النص على نفس السطر!  لكن باستعمال علامات HTML  التي ذكرنا آنقاً   <p>   سيتبين لك أن  مفتاح  Entée  في محرر النصوص لا يعني شيئًا. 💡  لذلك سيكون عليك اتباع دروس HTML ، حتى تظفر   بنص جميل ، منسق ، مرتب ومنظم . 😆  لذلك، إذا كنت تريد كتابة فقرة ثانية ، فما عليك سوى استخدام علامة <p> ثانيةً كي تنتقل إلى سطر آخر مع ترك فراغ بين الفقرتين 🙄 .

• قوة لغة HTML في تنظيم و ترتيب النّص

لا يمكنك تجاوز  لغة HTML  في تنظيم النصوص و الفقرات .. إحفظها جيداً  💡  مثال :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<! DOCTYPE html>
<HTML>
   <meta charset = "utf-8" />
<head>
   <title> تنسيق الفقرات </ title>
</ head>
 
  <p>أخبر زواري الكرام أن هاته أول صفحة </p>
  <p> أهلا  وسهلا ومرحبًا بكم في موقعي!</p>
  <p>مع أخطائي بالحكمة والصبر، وإن شاء الله سأفاجئكم، و القادم أجمل. </p>
  <p>أكتبها لبناء موقعي الجديد، لذا أرجو منكم التعامل </p>
  <p> في الوقت الحالي ، يبدو الموقع فارغاً ، ولكن سيكون له شأن عندما أتعلم كيف أجعله  منظماً! </ p>
  <p>سأكون عند حسن ظنكم. فلا تحرموني من اقتراحاتكم. </p>
 </body>
</ HTML>

 

و عند تسجيل الصفحة بامتداد HTML ستكون النتيجة على  الشكل التالي:

دروس HTML

هنا نلاحظ أن الفقرات لم تعد في سطر واحد كالسابق، وذلك بفضل اسعتعمال علامات <p>

هذا جيد  🙂  و لـــــــكن نريد أحياناً الانتقال إلى السطر داخل الفقرة دون أن نحدث هذا الفاصل بين السطور  🙄  ما ذا نفعل ؟ حسناً ! كل شيء متوفر عند HTML ، توجد علامة  الإنتقال إلى الخط  الموالي دون المساس بجمالية  الفقرة ! <br />  هي العلامة  اليتمية التي  تخبرنا أن الفقرة  التي نحن بصدد كتابتها ستكتمل في السطر الموالي .  لذا يجب وضعها داخل  الفقرة وليس في مكان آخر. لاحظ  كيف سنستعملها في هاته الشفيرة :

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<HTML>  
 <head>
  <meta charset = "utf-8" />    
 <title> تنسيق الفقرات </title>  
 <p> أهلا  وسهلا ومرحبًا بكم في موقعي! </br> أخبر زواري الكرام أن هاته أول صفحة </p>
   </head>
    <body>   
<p>أكتبها لبناء موقعي الجديد، لذا أرجو منكم التعامل  مع أخطائي بالحكمة والصبر،  </br> وإن شاء الله سأفاجئكم، و القادم أجمل. </p>
<p>سأكون عند حسن ظنكم. فلا تحرموني من اقتراحاتكم. </p>
<p> في الوقت الحالي ، يبدو الموقع فارغاً ، </br>ولكن سيكون له شأن عندما أتعلم كيف أجعله  منظماً! </ p>   
  </body>
</HTML>

النتيجة كما ترى الرجوع الى السطر داخل الفقرة الواحدة لا يترك مسافة كبيرة مثل الفاصل بين الفقرات: دروس HTML خـلاصـة: إلى هنا نكون قد عرفنا كيف نكتب الفقرات و نعود للسطر بعد اكتمال الفقرة باستعمال  علامة <p> ، وتعلمنا أيضاً كيف ننتقل  إلى السطر الموالي  قبل أن تنتهي الفقرة باستعمال   علامة  <br/>

يمكنك من الناحية النظرية وضع عدة علامات <br /> متتالية لجعل عدة فواصل أسطر ، ولكنها تعتبر من الممارسات السيئة التي تجعل من الصعب صيانة الشفرة. لتحويل النص بشكل أكثر دقة ، سوف نستخدم CSS ، هذه اللغة التي تكمل HTML والتي سأناقشها قليلاً. إذن  هل ما سبق شرحه كان واضحاً و مفهوماً ؟ للتذكير: <p> </ p>  لتنظيم النص الخاص بك إلى فقرات؛

<br /> للذهاب إلى السطـر.

الآن بعد أن عرفنا كيف نكتب الفقرات ، دعونا نرى كيف نجعل لهاته الفقرات  عناوين بارزة و مميزة.

العناوين: تنظيم و ترتيب النّص ب HTML

  عندما يكون محتوى صفحتك مكوَّناً من العديد من الفقرات ، و كل فقرة منفصلة عن الأخرى،  سيصعب على زوارك جمع أفكارهم داخل الموضوع  . و هنا  تصبح  العناوين مفيدة. في HTML ،  لدينا  الحق في استخدام ستة مستويات من العناوين المختلفة. وهذا يعني أنه   يمكننا القول أن:  “هذا عنوان مهم جدًا” ، “هذا عنوان أقل أهمية” ، “هذا عنوان  أقل أهمية مما سبق” ، وهكذا دواليك . وكل عنوان من هاته المستويات يتم تشكيله بعلامة معينة : <h1> </ h1>: تعني “عنوان مهم جدًا”.  وغالباً ما يتم استخدامه لعرض عنوان بداية الصفحة . <h2> </ h2>: تعني “العنوان المهم” و لكنه ليس مميزاً كالأول. <h3> </ h3>: نفس العنوان لكنه  أقل أهمية (وقد نسميه “عنوان فرعي” إ). <h4> </ h4>:  رتبته  أقل أهمية. <h5> </ h5>: عنوان غير مهم. <h6> </ h6>: هو في الأصل عنواناً  ، ولكن لا أهمية له.

تحذير:
  لا تخلط بين علامة <title>! و علامة <h1>  . فالأولى  تَعْرِضُ  ( <title> ) عنوان الصفحة في شريط عنوان المتصفح كما رأينا في  درس سابق.  لكـن <h1>  يتم استخدامها  لإنشاء عناوين لمواضيع في صفحة الويب.
لا تهول الأمر، فالعلامات الست  ليست كلها ذات أهمية ، ولكن يجب معرفتها ، فقد تحتاجها و لو في أوقات متباعدة 😯 .  هي  ست  مستويات من العناوين  لكن في الممارسة العملية ، غير مطلوبة كلها، فأنا مثلاً غالباً ما أستعمل علامتين اثنتين  <h2> ، <h1> و  قليلاً ما أرحب ب <h3> .  يعرض المتصفح الخاص بك العنوان المهم جدًا في الحجم الكبير جدًا ، ويعرض العنوان الأقل أهمية  بدرجة أقل قليلاً ، وهكذا.

لا تختار علامة العنوان الخاصة بك على أساس الحجم الذي ينطبق على النص! من الضروري تنظيم صفحتك بدءًا من عنوان المستوى الأول    <h1>  ، ثم عنوان المستوى الثاني   <h2>  ، إلخ. يجب ألا يكون هناك عنوان فرعي  بدون عنوان رئيسي!

إذا كنت تريد تغيير حجم النص ، فاعلم أننا سنتعلم القيام بذلك في CSS بعد ذلك بقليل. 

  💡  حاول إنشاء صفحة ويب تحتوي على عناوين لمعرفة ما يعطيه هذا:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<HTML>
<meta charset = "utf-8"/>
<head>
<title> العناوين حسب المستويات </ title>
</head>
<body>
<h1> عنوان مهم للغاية </h1>
<h3> عنوان أقل أهمية </h3>
<h2> عنوان مهم </ h2>
<h4> العنوان غير جداً </h4>
<h5> عنوان غير مهم </h5>
<h6> العنوان ليس مهمًا على الإطلاق </h6>
</body>
</HTML>

أرأيت الآن كم أن تنظيم و ترتيب النّص ب HTML سهل للغاية ؟  طيب ! سنعيش الآن مع مثال  تطبيقي نستخدم فيه كل العناوين في صفحة ويب . هــيــا على بركة الله

• التنسيق المطلوب  للنص

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
  <HTML>
       <meta charset = "utf-8" />
  <head>
       <title>تنظيم و ترتيب نص الويب </title>
  </head>
  <body>
<p> أهـلاً ومرحبًا بكم في موقعي على الويب: jabism.com. <br/>
<h1> مرحبًا بكم في موقع Jabism! </h1>
<p>ما هو موقع جابيسم ؟ </P>
<h2> الدرس من الصفر </h2>
<p> يقدم جابيسم دروسًا تعليمية في لغة html من الصفر حتى يتسنى للجميع الفهم والاستعاب </p>
<p> حتماً ستتعلم إذا كانت لك الرغبة في التعلم ، و حتى إن لم تكن لديك أي معرفة مسبقة ببرمجة المواقع ،أو التعديل على صفحات الويب! </p>
<p> لديك مشكلة في برمجة موقعك أو التعديل على صفحات الويب الخاصة بك ؟ و تريد أن تتعلم لغة HTML ؟ أو تحتاج إلى مساعدة في إنشاء موقعك؟ <br/>
<h2> عندنا الحل لمشكلتك </h2>
<p>لقد أعياك البحث عن حل ! لا تقلق! سوف تكتشف أنك لست وحدك في هذه الحالة ، وستجد بالتأكيد الرد على كل تساولاتك لحل مشكلتك. </P>
  </body>
  </HTML>

ها هي صفحة الويب تأخذ شكلها المطلوب!

جيِّـد !  لكني أريد أن أجعل عنواني  في الوسط، وأكتبه بلون مغاير !
سنفعل كل هذا عندما نتعلم CSS  ( من الجزء الثاني من الدورة التدريبية). كل ما يجب أن تعرفه الآن هو  أن <h1> لا تعني “Times New Roman، size 16 pt“.  و لكن تعني  عنوان مهم. بفضل لغة CSS ، ستتمكن من قول “أريد أن تتلون عناويني  المهمة باللون الأحمر  و تتوسط السطر وأن تضع خطاً تحتها “. في الوقت الحالي ، بلغة HTML ، نقوم بتنظيم صفحتنا فقط. نكتب المحتوى قبل أن نملأ تنسيقه .

• تـطــويـر الفقرات

لتطوير  فقراتك و إبراز بعض الكلمات التي تكون أحياناً أكثرأهمية  من غيرها ، تقدم لك HTML طرقًا مختلفة لتمييز نص صفحتك.

↵ أعط للنص شيئاً  مـن القيمة

لإعطاء نصك شيئاً من الميزة ، يجب عليك استخدام العلامة <em> </ em>. استخدام بسيط للغاية، فقط  تأطير الكلمات  بهاته العلامتين لتسليط الضوء عليها!  لا حظ المثال: الأدلة:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<HTML>
<meta charset = "utf-8"/>
<head>
 <title> تنظيم نص الويب </ title>
</head>
<body>
<p> أهلاً ومرحبًا بك في موقعي! <br/> هذه  أول تجربة لي  <em> و أرجو  أن تعذوني إن أخطأت </em>  ولكن مع المتابرة سأطور معرفتي ببرمجة المواقع. </P>
</body>
</HTML>

كما ترى ، فإن استخدام العلامة <em> له تأثير على خط  النص، إذا دخلت عليه جعلته مائلاً. في الواقع ، يجب أن نميّـز الكلمات المهمة للغاية ، ولإظهار هذه المعلومات ، علينا أن  نغير مظهر النص باستخدام الخط المائل. وضعيات مهمة أخرى للنص لوضع قيمة جيدة للنص ، نستخدم العلامة <strong> التي تعني “قوي” أو “مهم” إذا كنت تفضل ذلك. يتم استخدامه بالطريقة نفسها تمامًا مثل <em>:

1
2
3
4
5
6
7
8
9
10
11
12
<! DOCTYPE html>
<HTML>
<head>
  <meta charset = "utf-8" />
  <title> تشديد الخط في صفحة الويب </ title>
</ head>
<body>
<p> أهلاً ومرحبًا بك في موقعي! <br /> هذه أول تجربة لي في تصمصم المواقع
 
<strong> أرجو التساهل معي في ارتكاب الأخطاء</ strong> و لكن يوماً بعد يوم سأصير مميزاً ! سترى !. </p>
</ body>
</ HTML>

ربما ترى النص يظهر بالخط العريض. مرة أخرى ،الخط العريض  ليس  سوى نتيجة.  المتصفح اختار  هاته الكلمات  المهمة وجعلها بارزة أكثر. لا تعني العلامة <strong> “غامق” ولكن  “مهـــم“.  يمكننا أن نقرر فيما بعد ، في CSS ، أن نعرض الكلمات “المهمة” بطريقة  أخرى غير الخط العريض إن أردنا ذلك. إبـراز النـص يتم استخدام العلامة <mark> لتسليط الضوء على جزء من النص بشكل مرئي. لا يعتبر هذا الجزء  مهمًا  بالضرورة ولكننا نريده أن يكون مختلفًا عن باقي النص. يمكن أن يكون هذا مفيدًا لإبراز النص ذي   صلة بعد البحث داخل موقعك على سبيل المثال.

1
2
3
4
5
6
7
8
9
10
11
<! DOCTYPE html>
 
<html>
<meta charset="utf-8"/>
<head>
<title> تسليط الضوء على نص </title>
</head>
<body>
    <p> أهـلاً ومرحبًا بك في موقعي! <br/> هذه ه أول تجربة لي في تصميم المواقع لذا يرجى <mark> من فضلك </mark> أن لا تحرجوني بطرح الأسئلة في الموضوع. </P>
</body>
</HTML>
فهم مقتضب لبعض العلامات

بشكل افتراضي ، <mark> له تأثير إبراز النص.  يمكننا تغيير العرض في CSS (يمكننا تمييزه  بلون آخر ، لتأطير النص ، وما إلى ذلك). هذا يأتي في نفس السياق الذي أخبرتك به عن العلامات السابقة:  فهي تدل على معنى الكلمات وليس على كيفية ظهورها. تذكر: HTML للخلفية ، CSS للشكل  قد يبدو الأمر غيرمحفز  بعض الشيء ، لكن من المهم جدًا أن نفهم  هاته الأشياء جيدًا لأن المبتدئين غالباً ما يرتكبون نفس الخطأ  في هذه المرحلة.  يعتبرون أن  العلامات <em> و <strong> و <mark> كافية 😯 ويقولون ” هذا رائع ، لقد اكتشفت كيف أكتب الخط   بطريقة مائلة،  بارزة ، وكيفية تسليط الضوء على النص ووضع خط تحت الكتابة  في HTML! “. ومع ذلك … هذا ليس كل ما تقدمه  هذه العلامات!  نعم ، أعلم ، ستقول ” نعم ، ولكن عندما أستخدم <strong> ، يظهر النص بخط غامق ، لذلك يتم وضعه بخط عريض.  ومع ذلك فمن الخطأ الاعتقاد بأن هذه العلامة تخدم هذا الغرض. دور العلامات هو الإشارة إلى معنى النص. وبالتالي ، <strong>  يخبر الكمبيوتر بأن  “هذا النص مهم“. هذا كل شيئ. ولإظهار أن النص مهم ، يقرر الكمبيوتر وضعه بحروف عريضة (ولكنه قد يكتبه أيضًا باللون الأحمر!). تعرض معظم المتصفحات النص المهم بالخط العريض ، لكن لا شيء يتطلبها.

• كيف يفهم الكميوتر النص المكتوب؟

لاأفهم.  ما هو الهدف من  أن الكمبيوتر يعرف  أن النص مهم أم لا؟ إنه ليس ذكي بما فيه الكفاية ليفهم !
إنتبه و فكِّـر جيداً! هناك  العديد من البرامج  التي تحلل أكواد مصدر صفحات الويب ، بَـدءاً من روبوتات محركات البحث. هذه الروبوتات تتصفح الويب عن طريق قراءة رموز HTML لجميع المواقع. و يتمثل ذلك في عمل الروبوتات البحث  Google و Bing ، على سبيل المثال.  كلمات المفتاح  “المهمة”  تكون أكثر قيمة بالنسبة إليهم ، لذلك إذا قام أحدهم بالبحث في هذه الكلمات ، فمن المرجح أن تقع على موقعك.

بالطبع ،لا يجب أن تعتقد أن استخدام العلامة <strong>  سيحسن من عمل محركات البحث على موقعك . عليك فقط أن تثق بأجهزة الكمبيوتر: فهم يفهمون ما المقصود بنص  “مهم”  ويمكنهم استخدام هذه المعلومات للأرشفة. ولكن بعد ذلك ، كيف يمكنك أن تكتب بالخط العريض على وجه التحديد ،وتكتب باللون الأحمر ، و هلمَّ جراً ؟ كل هذا يتم في CSS . تذكر هذا جيداً: يحدد HTML الخلفية (المحتوى ، منطق العناصر) ؛

يحدد CSS النموذج (المظهر و الشكل ).

سنرى CSS أكثر في الوقت المناسب ، لكن الان نركز على HTML وعلاماتها ، و تفسيـر معانيها.

القوائـــم:

 

  إن القوائم تسمح لنا في الغالب ببناء  نص جميل و جذاب   وترتيب معلوماتنا بشكل أفضل. سنكتشف هنا نوعين من القوائم:

  •  قوائم غير مرتبة أو قوائم نقطية
  • قوائم مرتبة أو قوائم مرقمة .

قائمة غير مرتبة

تبدو قائمة غير مرتبة كالتالي:

  • صـور الطبيعة
  • صور الفواكه
  •  صـور الحيوانات الأليفة
  • صور الحيوانات المتوحشة

إنه نظام يسمح لنا بإنشاء قائمة بعناصر دون فكرة تنظيمها ، يعني: (لا يوجد “أولاً” ولا “أخير”). إن إنشاء قائمة غير مرتبة بسيط للغاية. ما عليك سوى استخدام العلامة <ul>   التي يتم إغلاقها بعد إتمام إسم القائمة  ب </ul> لذا ابدأ في كتابة هذا: <ul></ul> والآن ، هذا ما سنفعله:  سنكتب كل عنصر في القائمة بين علامتين <li> </ li>    بحيث يجب أن تكون كل من هذه العلامات بين <ul> و </ ul>.   المثال هنا سوضح لك كل شيء ، ما عليك سوى التركيز بروية.

1
2
3
4
5
6
7
8
9
10
11
<ul>
 
<li>صور الطبيعة</li>
 
<li>صور الفواكه</li>
 
<li>صور الحيوانات الأليفة</li>
 
<li>صور الحيوانات المتوحشة</li>
 
</ul>

والنتيجة هي في الشكل التالي.

القائمة النقطية

 هذه قائمة غير مرتبة

لاحظ أنه يجب وضع القائمة داخل</ body>. من الآن فصاعدا ، لا أضع كل رمز الصفحة ليصبح واضحًا.
لذلك تذكر هاتين العلامتين:  <ul> </ ul> لتحديد القائمة بأكملها؛ <li> </ li>  يحدد عنصرًا من القائمة . بإمكانك وضع العديد من العناصر التي تريدها في القائمة النقطية ، ولا تقتصر على  أربعة  عناصر كما في المثال . والآن ، أنت تعرف كيفية إنشاء قائمة نقطية! أظن أنها ليست صعبة و عليك تطبيقها لمرات كي تستوعب جيداً كم هي سهلة. 💡 
بالنسبة لأولئك الذين يحتاجون إلى إنشاء قوائم معقدة ، يجب أن تدرك أنه بإمكانك تضمين القوائم ذات التعداد النقطي (إنشاء قائمة نقطية في قائمة نقطية). إذا كنت تريد القيام بذلك ، فافتح علامة <ul> ثانية داخل عنصر <li></ li>. و إذا أغلقت العلامات بالترتيب الصحيح ، فلن تواجه مشكلة. كن حذراً على الرغم من أن هذه التقنية معقدة بعض الشيء، بالممارسة يمكنك تطبيقها  بدون مشاكل.
وهنا المثال:

قائمة داخل قائمة

قائمة مرتبة

تعمل القائمة المرتبة بنفس الطريقة ، فقط  تغير علامة واحدة  : استبدل <ul> </ ul> بـ <ol> </ ol>. أما داخل القائمة ، فلا نغير أي شيء:  نحن نستخدم دائماً <li> </ li> لتحديد العناصر.

الترتيب الذي تضع فيه العناصر في القائمة مهم. أول

  • <li></ li> سيكون العنصر رقم 1 ، والثاني سيكون رقم  2  وهكذا …

بما أن العملية أصبحت سهلة   ، فسأتركك تستمتع  ببساطة هذا المثال:

1
2
3
4
5
6
7
      <h1>برنامجي اليومي</h1>
  <ol>
<li>أستيقظ باكراً.</li>
<li>أشرب قهوتي الصباحية.</li>
<li>أذهب إلى العمل</li>
<li>أقوم بتمارين رياضية</li>
  </ol>

  القائمة الرقمية

هذه قائمة مرتبة

بالمقارنة مع المثال السابق ، كل ما كان علينا تغييره هو العلامة <ol>.

فقط للمزيد من المعلومات :  هناك نوع ثالث من القائمة ، أكثر ندرة:  قائمة التعريفات. وهي تتضمن العلامات

 <dl>  لتحديد القائمة    <dt> لتحديد مصطلح   و  <dd>  لتحديد تعريف هذا المصطلح .

إقرأ أيضاً: إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس باختصار:  يحتوي HTML على العديد من العلامات التي تسمح لنا بتنظيم نص صفحتنا. هذه العلامات تعطي مؤشرات مثل « هذه فقرة » ، « هذا عنوان »، إلخ. يتم تعريف الفقرات بواسطة علامة <p> </ p> وفواصل الأسطر بواسطة العلامة <br />. هناك ستة مستويات من العنوان ، من <h1> </ h1> إلى <h6> </ h6> ، لاستخدامها اعتمادًا على أهمية العنوان. يمكن تمييز بعض الكلمات بعلامات <strong> و <em> و <mark>. لإنشاء قوائم ، استخدم العلامة <ul> (نقطي ، غير مرتبة) أو <ol> (قائمة مرتبة). في الداخل ، نقوم بإدراج العناصر مع علامة <li> لكل عنصر. إلى هنا نكون قد أنهينا درس تنظيم و ترتيب النّص ب HTML. إقرأ أيضاً: إدراج الصور في صفحة HTML

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

4 أفكار عن “تنظيم و ترتيب النّص ب HTML”

  2. HAMZAA

    شكران بس لو سمحت لي انشاء موقع لا بدا من فهم لغات بشكل صحيح لي يسهل عليك كتابتها دونسخ ارجو الرد

    رد
    1. jabism

      العفو أخي حمزة، وأشكرك على مرورك العطر!
      بالنسبة لإنشاء موقع ويب ، ضروري تعلم لغات البرمجة حتى تتمكن من إنشاء صفحاتك على الويب بشكل صحيح طبعاً .
      لكن أين المشكل؟

      رد
      1. صالح محمد

        اكيد يجب عليك تعلم لغات البرمجه لتتمكن من انشاء مواقع ويب باحترافيه وانصحك بمتابعة هذا اليوتيوبر
        coder shiyar
        ,وشكرا

        رد

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 464 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

4٬979 عدد المشاهدات لهذا المحتوى
Scroll to Top