شرح كيفية كتابة الفقرات (Paragraphs) في لغة HTML
في الدرس ده هنتكلم عن حاجة أساسية جدًا في لغة HTML، وهي إزاي تكتب فقرة
نصية باستخدام تاج البراجراف، وكمان هنتعرف على الفروق بين أكتر من طريقة
لعرض النصوص على صفحات الويب، زي استخدام التاج
<p>، والتاج
<br>، وكمان
<pre>، وهنشوف إمتى نستخدم كل واحد فيهم وازاي
نتحكم في تنسيق النص.
إيه هو تاج البراجراف في HTML؟
تاج البراجراف هو التاج المسؤول عن عرض فقرة نصية في صفحة الويب. علشان تكتب فقرة، كل اللي عليك تعمله إنك تكتب الكود التالي:
<p>هنا بيكون محتوى الفقرة اللي انت عايز تعرضه.</p>
طبعًا التاج <p> يعتبر من التاجات اللي لازم
تقفلها، يعني لازم تكتب بداية التاج وبعدين تقفله باستخدام
</p>.
فين نحط تاج البراجراف في الكود؟
تاج البراجراف بيتكتب جوا تاج <body>، لأن
العناصر اللي جوه الـ <body> هي اللي بتظهر
للزائر على صفحة الموقع. أما تاج <head> فده
بنحط فيه بيانات وصفية عن الموقع، زي العنوان، وصف الصفحة، وأكواد الربط
بالستايلات الخارجية.
تجربة كتابة فقرة داخل المحرر
لو بتستخدم محرر الأكواد الشهير Visual Studio Code، تقدر تكتب حرف
p وتدوس Enter، هتلاقي المحرر بيكملك التاج بشكل
تلقائي كده:
<p></p>بعد كده تقدر تكتب جوا التاج النص اللي انت عايز تعرضه. مثال:
<p>دي أول فقرة بنكتبها في HTML.</p>
كمان ممكن تستخدم الاختصار lorem متبوع بعدد
الكلمات، زي lorem30 علشان يولدلك نص تجريبي مكوّن من
30 كلمة.
ملاحظة مهمة عن المسافات والأسطر
لما تيجي تضيف مسافات كتير أو تضغط Enter علشان تنزل النص في سطر جديد، هتكتشف إن المتصفح ما بيعرضش غير مسافة واحدة بس. ده لأن HTML بتتعامل مع المسافات المتتالية كأنها مسافة واحدة، ومش بتحترم الأسطر الجديدة اللي انت ضايفها في المحرر.
يعني لو كتبت النص كده في المحرر:
<p>جملة أولى
جملة تانية
جملة تالتة</p>المتصفح هيعرضهم على نفس السطر، لأن السطور الجديدة مش بيتم قراءتها كـ فقرات منفصلة أو أسطر جديدة.
إزاي تعمل سطر جديد جوه نفس الفقرة؟
لو عايز تنزل في سطر جديد جوه نفس الفقرة، تقدر تستخدم التاج
<br>. التاج ده اسمه Break وبيعمل كسر للسطر،
وبيعتبر من التاجات الفردية (self-closing).
<p>
السطر الأول<br>
السطر التاني<br>
السطر التالت
</p>هتلاقي كل سطر بيظهر في سطر جديد في المتصفح، لكن كلهم تحت نفس الفقرة.
ممكن تكتب <br> كده:
<br>أو بالطريقة التانية:
<br />والطريقتين بيشتغلوا بشكل سليم.
إزاي تضيف فاصل أفقي بين الفقرات؟
لو حابب تفصل بين جزئين من النص بخط أفقي، تقدر تستخدم التاج
<hr>، وده كمان من التاجات الفردية.
<p>الجزء الأول من النص.</p>
<hr>
<p>الجزء التاني من النص.</p>وده بيظهر خط أفقي في الصفحة بيفصل بين الفقرتين.
استخدام التاج <pre> لعرض النصوص بنفس
التنسيق
لو عندك نص طويل أو كود وعايز المتصفح يعرضه زي ما كتبته بالضبط (بكل
المسافات والأسطر)، استخدم التاج <pre>. التاج
ده بيحافظ على تنسيق النص زي ما هو.
<pre>
سطر أول
سطر تاني بمسافة بادئة
سطر تالت بمسافة أكتر
</pre>ده مفيد جدًا لما تكون بتعرض أكواد برمجية أو محتوى لازم يفضل شكله زي ما هو.
الفرق بين <p> و
<pre>
| التاج | السلوك |
|---|---|
<p> |
بيعرض الفقرة بشكل تلقائي مع التكيّف مع حجم الشاشة، ومفيش احترام للمسافات والأسطر في الكود. |
<pre>
|
بيعرض النص زي ما هو مكتوب في المحرر، مع الحفاظ على كل الأسطر والمسافات. |
لكن في نقطة لازم تاخد بالك منها:
-
لما تستخدم
<p>، المتصفح بيخلي الفقرة تتكيّف مع حجم الشاشة (responsive)، فلو الشاشة صغيرة النص هينزل في أسطر. -
أما مع
<pre>، فلو النص طويل، المتصفح بيعرضه في سطر واحد وبيعمل شريط تمرير أفقي (scroll) لو النص خرج عن عرض الشاشة.
استخدام <pre> في عرض الأكواد
لو عايز تعرض كود برمجي زي CSS أو JavaScript على موقعك، ممكن تستخدم التاج
<pre> علشان يفضل شكله منسق وواضح للزائر، وسهل
ينسخه.
مثال:
<pre>
body {
background-color: #f1f1f1;
font-size: 16px;
}
</pre>النص هيتعرض بنفس التنسيق والمسافات اللي كتبته بيها في المحرر.
إمتى تستخدم <p>؟ وإمتى تستخدم
<pre>؟
-
استخدم
<p>لما تكون بتكتب محتوى عادي، زي مقالات أو نصوص عامة. -
استخدم
<pre>لما تكون عايز تحافظ على شكل النص زي ما هو، خصوصًا في الأكواد أو المحتوى اللي لازم يظهر منسق.
خلاصة الدرس
-
علشان تكتب فقرة في HTML، استخدم التاج
<p>. -
لو حبيت تنزل في سطر جديد جوه نفس الفقرة، استخدم
<br>. -
لو حبيت تضيف فاصل أفقي بين أجزاء المحتوى، استخدم
<hr>. -
لو محتاج النص يظهر بنفس ترتيب الكتابة (مع المسافات والأسطر)، استخدم
<pre>. -
لازم تختار التاج المناسب حسب نوع المحتوى اللي بتعرضه، وحسب الطريقة اللي عايز الناس تشوف بيها النص.
في نهاية الدرس، نتمنى إنك تكون استفدت وفهمت الفرق بين أنواع التاجات اللي بتتحكم في طريقة عرض النصوص على موقعك باستخدام HTML. لو عندك أي سؤال أو محتاج توضيح أكتر، شاركنا في التعليقات.