٢٠٢٤-١٠-٠٤ ٢٣:٠١
الحالة:
العلامات: البرمجة
عندما نعلم ان اغلب المحتوى على شبكة الويب نصي ندرك اننا سنستخدم عناصر “HTML” النصية كثيرا, لذا سنتعلم قليلا عن اهم العناصر والعلامات المرجعية النصية مثل الفقرات وعناوين الفقرات والنصوص بالخط العريض والخط المائل والعلاقات بين العناصر المتداخلة وكيف نكتب ملاحظتنا.
المتصفحات لا ترى المسافات المتعددة بين الكلمات وتتخطاها, بالنسبة للمتصفح المسافة بين كلمتي “انا أتعلم” مثل المسافة بين “انا أتعلم”, اذ اردنا ان نضيف مسافات بين الكلمات علينا ان نستخدم عنصر الفقرات <p/>.
وايضا لدينا عنصر اخر يساعدنا في توزيع الفقرات وزيادة وضوح النص لدى القراء ويسمى بعنوان الفقرة او رأس القلم, وهي مهمة ليس للقارئ فحسب بل حتى لمحركات البحث تحدد بها جودة الصفحة ووضوحها وتصنفها طبقا لهذه المعايير, وحتى بالنسبة للمتصفحات فإنها تحتوي على ادوات مساعدة لذوي الاحتياجات الخاصة مثل اصحاب النظر الضعيف الذين يحتاجون للتصفح عن طريق سماع محتوى الصفحة باستخدام ادوات خاصة, فإن الاستخدام الصحيح يضمن التجربة السليمة لجميع اطياف المستخدمين ويحسن تصنيف موقعك لدى محركات البحث.
وعنصر عنوان الفقرة يظهر كالاتي <h1> ويجعل الكلمة بالخط العريض وذات اهمية كما شرحنا سابقا,ويعتبر العنوان الاهم وعادة ما يعتبر عنوان الصفحة, وهنالك ست مستويات للاهمية وحجم العنوان وعرضه تبدا من <h1> و تنتهي ب <h6>.
وايضا هنالك عناصر اخرى مثل <strong> لجعل الخط عريض و <em> لجعل الخط مائلا وكلها تهم محركات البحث وادوات المساعدة والوصول مثل العناوين.
ومن الممكن اضافة تعليقات لأنفسنا والمطورين بعدنا داخل الملف البرمجي بإستخدام <-- words --!>
تظهر فقط في الملف البرمجي ولا تظهر في الصفحة.
ايضا لدينا <b> و <i> وهما عنصران قديمان تم الاستغناء عنهما في الاصدارات الحديثة ب <strong> و <em> لعدم تاثيرها في اهمية محتوى الموقع.
ايضا احببت ان اشرح العلاقة بين العناصر المتداخلة (Nested Elements) اي العلاقة بين العناصر, ونستخدم الروابط الاسرية لوصف العلاقة بين العناصر في الملف, مثل كون عنصر <head> يعتبر أبا ووالدا لعنصر <Title> , وعنصر <meta charset="UTF-8"> يعتبر شقيقا لعنصر <title> لانها تحت نفس الاب وعلى نفس المستوى.
وايضا نستخدم المسافة البادئة (Indentation) وهي الفراغ في اول الفقرة, لزيادة الوضوح بين الاسطر البرمجية وسهولة التعامل معها.\
المراجع: https://www.theodinproject.com/lessons/foundations-working-with-text