الفقرات وتنسيق النصوص في لغة HTML

المسؤول الأساسي عن التنسيقات في الويب هي لغة CSS وليس لغة HTML لكن هذا لا يعني أنه لا يمكنك إنشاء صفحة منسقة عبر HTML فقط

وذلك لأن المتصفحات تحتوي شئ يسمى User Agent Stylesheet 

 ما هو User Agent Stylesheet ؟

هي مجموعة تنسيقات CSS وضعت افتراضياً في المتصفح لعناصر HTML فهذه افتراضية في المتصفح وتعطي تنسيق مبدئي لعناصر HTML وأنت عندما تتعلم CSS يمكنك التحكم أكثر في تلك التنسيقات وتطويرها. 

 

ما هي عنصار التنسيق Formatting في HTML ؟

 [[<p>فقرة</p>]] 

هو عنصر الفقرة هو عنصر من نوع Block وسنتعرف مستقبلاً عن تلك العناصر والفروقات بينها لكن حالياً ما تحتاج معرفته أن العناصر من نوع Block هي عناصر تبدأ بسطر جديد كاملا بالعرض الكامل وليست عناصر تنسيق فعلي بل هي عناصر تحتوي عناصر التنسيق وهذا أشهر عنصر منها

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

 

 [[<b>نص غليظ</b>]]

هذا العنصر يعطيك شكل نص غليظ 

 

[[<strong>نص مهم</strong>]] 

هذا العنصر سيعطيك نفس الشكل الذي سيعطيه لك العنصر السابق لا فرق في الشكل ولكن هذا العنصر ليس شكل فقط هو يخبر المتصفح ومحركات البحث أن النص هذا هو نص مهم وليس فقط الشكل , على عكس السابق متعلق بالشكل فقط

 

[[<i>نص مائل</i>]] 

 هذا العنصر يجعل النص الذي به يظهر كأنه مائل

 

[[<em>تغيير لهجة</em>]] 

هذا العنصر أيضاً له نفس التأثير فهو يظهر كنص مائل لكن له معنى مختلف للمتصفح فهو معناه ان المكتوب به ربما بلهجة مختلفة ولهذا قد تجد أدوات قراءة المحتوى Screen Readers تغير اللهجة عند الوصول لنص بين هذا العنصر

 

[[<mark>علامة</mark>]] 

 هذا العنصر يعرض ما بداخله في علامة صفراء مميزاً له كأنك تنبه القارئ لأمر له صلة بشئ معين

 

[[<small>نص صغير</small>]] 

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

 

[[<u>تحته خط</u>]] 

 ما بين هذا العنصر من كلام سيظهر تحته خط

 

[[<s>محتوى مصحح</s>]]

 هذا العنصر يعطي للنص خط في الوسط , وهو معناه أن هذا المحتوى تم تصحيحه أو لم يعد دقيق وغالباً يستخدم في خصومات الأسعار

 

[[<strike>محتوى مصحح</strike>]] 

نفس ما سبق بالضبط لا فرق لكن هذا لم يعد مدعوم في آخر إصدارات  HTML في حين السابق هو المدعوم لكن بلوجر ما تزال تستخدم هذا  

 

[[<del>نصح محذوف</de>]]

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

 

[[<br/>]] 

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

 

[[<hr />]] 

هذا فاصل فعلي يعني نفس السابق لا يكتب به شئ لكنه يظهر لك خط فاصل بعرض الصفحة 

 

[[<pre>نص منسق</pre>]] 

 هذا يعرض نص منسق مسبقاً ما معنى هذا ؟

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

 

[[<appr title="Text">نص مفسر</appr>]] 

 هذا النص يضاف عادة لعمل تفسير لكلمة معينة , لنفترض مثلاً أنك كتبت HTML وتريد من يمرر الماوس عليها تظهر معناها فتكتبها في هذا الكود وتكتب معنها بدلا من كلمة Text

[[<q>اقتباس قصير</q>]]

هذا يستخدم لعمل اقتباس قصير من سطر واحد ويظهره لك بين علامتي اقتباس

 

[[ <blockquote>اقتباس طويل</blockquote>]]

هذا اقتباس طويل من عدة أسطر 

 

[[^{رموز رياضية}]]

لوضع رموز رياضية لأعلى كأن تكتب نص في أس رياضي أو درجة حرارة مئوية x²

 

 [[_{رموز رياضية}]]

 نفس الأمر لكن بدلاً من أن يكون النص لأعلى يكون لأسفل  جزيء الماء: H₂O

هناك أشياء أخرى للتنسيق يمكنك أن تبحث عنها لكن هذا سيكون أكثر من كافي فهذا معظم ما قد تحتاج استخدامه أو تصادفه في المواقع الإلكترونية, ويمكنك أن ترتقي بتلك الأمور وتعطيها تنسيقات مبهرة عندما تتعلم أساسيات لغة CSS وهذا ضمن خطة التعليم مستقبلاً ان شاء الله فاحرص على أن تتابعنا