الأحياز و الرجوع إلى السطر و الفراغات في HTML | الدرس 6\37

   السلام عليكم، سنرى في هذا الدرس كيفية إنشاء الأحياز في ملف HTML، و طريقة الحصول على أسطر فارغة و الرجوع إلى السطر و الفراغات بناء على أكواد ملف HTML.

الأحياز

مكان الأحياز

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

طريقة وضع الأحياز

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

See the Pen
الأحياز by osama (@webdesigner7)
on CodePen.

  المثال أعلاه يوضح وضع الأحياز في ملف HTML، لنفترض أن n يساوي عرض الحيز، فعنصر 'HTML' يجب عدم إعطاؤه حيز لأنه لا يحتويه عنصر آخر، و بما أن العنصران 'HEAD' و 'BODY' يوجدان في نفس المستوى سنسميهما X، و العناصر المحتوية التي في نفس المستوى و توجد سواء في 'HEAD' أو 'BODY' كعناصر 'H2' ،'H1' و 'P' سنسميهم Y، و الفقرة النصية الموجودة في عنصر 'P' سنسميها Z، إذن سنعطي لـ X حيز n، أي عرض حيز أكبر من عرض حيز العنصر المحتوي، و سنعطي لـ Y حيز n+n، أما Z فسنعطيها حيز n+n+n، علماً أنه يجب إعطاء نفس الحيز لوسم الفتح و وسم الإغلاق لنفس العنصر، و من أجل كتابة الحيز في ملف HTML يحبذ الضغط على زر لوحة المفاتيح TAB.

الفيديو التوضيحي للدرس

الرجوع إلى السطر و الأسطر الفارغة في HTML 

   ليس كل ما يكتب داخل عناصر HTML من نصوص بتنسيق معين يظهر في متصفحات الإنترنت بنفس التنسيق، فمثلاً خاصيتا الرجوع إلى السطر و الأسطر الفارغة لا تظهر في المتصفحات و التطبيقات إلى بوجود عنصر مخصص لهاتين الخاصيتين ألا و هو عنصر 'BR'.

   كلمة BR مأخوذة من كلمة إنجليزية Break و هي كسر، أي كسر الأسطر في HTML، و يقحم هذا العنصر داخل عنصر 'BODY' بصفة وسم يتيم، و مخصص لغرضين :

- يطبق خاصية الرجوع إلى السطر، و ذلك بإقحامه بين الجمل النصية في ملف HTML.

- يطبق خاصية السطر الفارغ، و ذلك بإقحامه بين عنصرين من نوع Block في ملف HTML.

الفراغات في HTML

   إذا طُبّقت الفراغات في النصوص داخل ملف HTML، فهذا لا يعني أن تلك الفراغات ستظهر في متصفحات الإنترنت، لأن لغة البرمجة HTML لا تفهم سوى العناصر المقحمة في ملفاتها، لذا يجب إقحام عنصر مخصص لإنشاء الفراغات في النصوص، و هذا العنصر هو 'PRE'.

    كلمة PRE مأخوذة من كلمة إنجليزية Preformatted Text أي نص يظهر كما هو مكتوب في ملف HTML، و يقحم هذا العنصر داخل عنصر 'BODY'، و لذيه وسم فتح و وسم إغلاق و بينهما يوضع النص المراد إنشاء فراغات فيه، ليظهر هذا الأخير في متصفحات الإنترنت بنوع خط مغاير يمثل التنسيق التلقائي لـ HTML حيث توجد إمكانية تغيير مظهره بأكواد CSS.

See the Pen
الرجوع إلى السطر و الأسطر الفارغة و الفراغات by osama (@webdesigner7)
on CodePen.

جميع الأكواد المستعملة في هذا الدرس

أتمنى أن تستفيدوا من الدرس