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

السلام عليكم ورحمة الله

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

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


HTML دروس

حسنًا ، قد لا يعجبك شكل الصفحة التي أنشأناها في الحلقة السابقة 🙁  ومن ذا الذي ستعجبه ؟

إنها  أشبه ما يكون بورقة تلميذ كسول  😛  فهل شكلها سيكون جذاباً للزوار ؟ لا أعتقد،  فشكلها لم يعجبني ! و لن يشجعني على زيارته  مستقبلاً إذا بقي على هذا الحال 😯

إذن يلزمنا أن  ننظم صفحتنا ونرتبها و ننسق شكلها حتى لا نصبح أضحوكة أمام المبحرين على النت .

ماذا علينا  أن نفعل إذن؟ لا شيئ ! فقط علينا أن نكتشف  عالم HTML و نتعلم كيفية استعمال علاماته  التي تساعدنا على ترتيب و تنسيق موقعنا ليصبح أنيقاً و جذاباًً  .

في الحقيقة ليست كل أكواد HTML5 جديدة، فالبعض منها ما زال معمول به منذ الإصدارات الأولى  . أما الإضافات ما هي إلا تطوير في الاصدارات من جيل لآخر .

سنكتشف سوياً كيف  نستعمل لغة HTML  في كتابة العناوين و الكلمات ثم  الفقرات  وصولاً إلى  القوائم. 😆 

عـلى بركـة الله

      • – كيفية كتابة الفقرات
      • – كيفية تنظيم صفحتك مع العناوين
      • – كيف نعطي أهمية لبعض الكلمات في النص.
      • -كيفية تنظيم المعلومات في شكل قوائم.

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

الفقــرات:

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

<p> تعني “بداية الفقرة” 

</ p> تعني “نهاية الفقرة”

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

ما يهمنا الآن هو العلامتين: <p> و </p>

لذا سنكرر كتابة نفس الكود السابق ثم نضيف العلامتين إلى الفقرات:

 

الآن بعد كتابة  هاتين الفقرتين ، جرب ، و سترى النتيجة!

طَـيِّب،  لا تفرح كثيراً، إنها ليس كل شيء و لكنها بداية جيدة لكيفية تنظيم و ترتيب النّص ب HTML: 

نعم إنها بداية جيدة  لنستمر، لا أن نكتفي  بما فعلنا ، فالقادم أجمل 🙂  .  سنرى الآن شيئًا خاصًا حول HTML:  كيف ننتقل من سطر إلى آخر؟  قد تقول لي  أن الأمر سهل  😛

لا يا حبيبي ! نحن لا نكتب على « الأوفيس – وورد »    هنا الأمر مختلف تماماً   😯  .

الرجوع للسطر في HTML ، لا يحتاج كالعادة إلى  الضغط على المفتاح  Entée  كي تنشئ سطراً جديداً   .

جرب هذا الكود و سترى :

 

عند تسجيل الصفحة سيظهر  النص على نفس السطر! 

لكن باستعمال علامات HTML  التي ذكرنا آنقاً   <p>   سيتبين لك أن  مفتاح  Entée  في محرر النصوص لا يعني شيئًا. 💡 

لذلك سيكون عليك اتباع دروس HTML ، حتى تظفر   بنص جميل ، منسق ، مرتب ومنظم . 😆 

لذلك، إذا كنت تريد كتابة فقرة ثانية ، فما عليك سوى استخدام علامة <p> ثانيةً كي تنتقل إلى سطر آخر مع ترك فراغ بين الفقرتين 🙄 .

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

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

مثال :

 

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

دروس HTML

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

هذا جيد  🙂  و لـــــــكن نريد أحياناً الانتقال إلى السطر داخل الفقرة دون أن نحدث هذا الفاصل بين السطور  🙄  ما ذا نفعل ؟

حسناً ! كل شيء متوفر عند HTML ، توجد علامة  الإنتقال إلى الخط  الموالي دون المساس بجمالية  الفقرة !

<br />  هي العلامة  اليتمية التي  تخبرنا أن الفقرة  التي نحن بصدد كتابتها ستكتمل في السطر الموالي .  لذا يجب وضعها داخل  الفقرة وليس في مكان آخر.

لاحظ  كيف سنستعملها في هاته الشفيرة :

النتيجة كما ترى الرجوع الى السطر داخل الفقرة الواحدة لا يترك مسافة كبيرة مثل الفاصل بين الفقرات:

دروس 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 بعد ذلك بقليل. 

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

 

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

هــيــا على بركة الله

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

 

 

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

جيِّـد !  لكني أريد أن أجعل عنواني  في الوسط، وأكتبه بلون مغاير !

سنفعل كل هذا عندما نتعلم CSS  ( من الجزء الثاني من الدورة التدريبية). كل ما يجب أن تعرفه الآن هو  أن <h1> لا تعني “Times New Roman، size 16 pt“.  و لكن تعني  عنوان مهم.

بفضل لغة CSS ، ستتمكن من قول “أريد أن تتلون عناويني  المهمة باللون الأحمر  و تتوسط السطر وأن تضع خطاً تحتها “.

في الوقت الحالي ، بلغة HTML ، نقوم بتنظيم صفحتنا فقط. نكتب المحتوى قبل أن نملأ تنسيقه .

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

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

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

لإعطاء نصك شيئاً من الميزة ، يجب عليك استخدام العلامة <em> </ em>.

استخدام بسيط للغاية، فقط  تأطير الكلمات  بهاته العلامتين لتسليط الضوء عليها! 

لا حظ المثال:

الأدلة:

 

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

وضعيات مهمة أخرى للنص

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

 

ربما ترى النص يظهر بالخط العريض. مرة أخرى ،الخط العريض  ليس  سوى نتيجة.  المتصفح اختار  هاته الكلمات  المهمة وجعلها بارزة أكثر.

لا تعني العلامة <strong> “غامق” ولكن  “مهـــم“.  يمكننا أن نقرر فيما بعد ، في CSS ، أن نعرض الكلمات “المهمة” بطريقة  أخرى غير الخط العريض إن أردنا ذلك.

إبـراز النـص

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

فهم مقتضب لبعض العلامات

بشكل افتراضي ، <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>.  

المثال هنا سوضح لك كل شيء ، ما عليك سوى التركيز بروية.

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

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

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

لاحظ أنه يجب وضع القائمة داخل</ body>. من الآن فصاعدا ، لا أضع كل رمز الصفحة ليصبح واضحًا.

لذلك تذكر هاتين العلامتين:

 <ul> </ ul> لتحديد القائمة بأكملها؛

<li> </ li>  يحدد عنصرًا من القائمة .

بإمكانك وضع العديد من العناصر التي تريدها في القائمة النقطية ، ولا تقتصر على  أربعة  عناصر كما في المثال .

والآن ، أنت تعرف كيفية إنشاء قائمة نقطية! أظن أنها ليست صعبة و عليك تطبيقها لمرات كي تستوعب جيداً كم هي سهلة. 💡 

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

وهنا المثال:

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

قائمة مرتبة

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

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

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

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

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

 

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

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

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

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

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

باختصار: 

يحتوي HTML على العديد من العلامات التي تسمح لنا بتنظيم نص صفحتنا. هذه العلامات تعطي مؤشرات مثل « هذه فقرة » ، « هذا عنوان »، إلخ.

يتم تعريف الفقرات بواسطة علامة <p> </ p> وفواصل الأسطر بواسطة العلامة <br />.

هناك ستة مستويات من العنوان ، من <h1> </ h1> إلى <h6> </ h6> ، لاستخدامها اعتمادًا على أهمية العنوان.

يمكن تمييز بعض الكلمات بعلامات <strong> و <em> و <mark>.

لإنشاء قوائم ، استخدم العلامة <ul> (نقطي ، غير مرتبة) أو <ol> (قائمة مرتبة). في الداخل ، نقوم بإدراج العناصر مع علامة <li> لكل عنصر.

إلى هنا نكون قد أنهينا درس تنظيم و ترتيب النّص ب HTML.

إقرأ أيضاً: إدراج الصور في صفحة HTML

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

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

 

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

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

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

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

اترك تعليقًا

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

عدد المشاهدات لهذه المقالة : 7٬361
انتقل إلى أعلى
%d مدونون معجبون بهذه: