HTML: فقرات HTML

الفقرات هي الطريقة الأساسية لتنظيم النص في صفحة الويب. إتقان وسوم النص الشائعة يجعل المحتوى أكثر قابلية للقراءة.

1. وسم الفقرة <p>

يستخدم وسم <p> (فقرة) لتعريف فقرة. يضيف المتصفح تلقائيًا تباعدًا (هامشًا) قبل الفقرات وبعدها، مما يخلق فصلًا طبيعيًا بينها.

عناصر <p> المتعددة المرتبة بالتسلسل تشكل هيكل جسم المقال. هذه هي الطريقة الأكثر شيوعًا لتنظيم النص على الويب — المقالات الإخبارية ومنشورات المدونات وأوصاف المنتجات وغيرها كلها مبنية على الفقرات.

▶ مثال

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

2. فاصل السطر والخط الأفقي

بالإضافة إلى وسم الفقرة، يوفر HTML وسومين فارغين يتعلقان بتخطيط النص: <br> و <hr>.

(1) وسم فاصل السطر <br>

يمثل <br> (فاصل) فاصل سطر إجباري في النص. إنه مناسب لـ العناوين والشعر وكلمات الأغاني وغيرها من السيناريوهات حيث تكون مواضع فاصل الأسطر اليدوية مطلوبة. ملاحظة: <br> ليس لإنشاء تباعد الفقرات — يجب التحكم في تباعد الفقرات باستخدام <p> أو CSS.

(2) الخط الأفقي <hr>

يرسم <hr> (خط أفقي) خطًا أفقيًا على الصفحة، يشير عادةً إلى فاصل موضوعي أو فاصل قسم. مثل <br>، <hr> هو أيضًا وسم فارغ.

<p>هذا سطر من النص،<br>وهذا نص بعد فاصل سطر في نفس الفقرة.</p>
### ▶ مثال

<hr>

<p>فوق الفاصل هو النصف الأول، أسفله هو النصف الثاني.</p>

<p>مثال عنوان:<br>
شارع الملك فهد 123<br>
شقة 12<br>
الرمز البريدي: 10001</p>

3. كيانات أحرف HTML

في HTML، بعض الأحرف لها معانٍ خاصة (على سبيل المثال، < و > تستخدمان للوسوم). إذا كنت تريد عرض هذه الأحرف كما هي على الصفحة، يجب عليك استخدام كيانات الأحرف (وتسمى أيضًا كيانات HTML).

كيانات الأحرف الشائعة موضحة أدناه: الحرفالكودالوصفالحرفالكودالوصفالحرفالكودالوصف   مسافة غير قابلة للكسر< <أصغر من> >أكبر من& &علامة العطف" "علامة اقتباس مزدوجة' 'علامة اقتباس مفردة© ©حقوق النشر® ®علامة تجارية مسجلة™ ™علامة تجارية¥ ¥ين/يوان€ €يورو£ £جنيه إسترليني× ×علامة ضرب÷ ÷علامة قسمة± ±زائد ناقص≤ ≤أصغر من أو يساوي≥ ≥أكبر من أو يساوي≠ ≠لا يساوي≈ ≈تقريبًا∞ ∞لا نهاية∑ ∑مجموعƒ ƒدالة¹ ¹أس 1² ²أس 2 (مربع)³ ³أس 3 (مكعب)½ ½نصف¼ ¼ربع← ←سهم لليسار→ →سهم لليمين↑ ↑سهم لأعلى↓ ↓سهم لأسفل… …حذف— —شرطة طويلة· ·نقطة وسطى   مسافة en   مسافة em لماذا نحتاج إلى الهروب؟ لأنه عندما يحلل المتصفح HTML، فإنه يتعامل مع < كبداية لوسم. إذا كتبت <p> مباشرة، يعتقد المتصفح أنك تعرّف وسم فقرة بدلاً من عرض النص "<p>". تخبر كيانات الأحرف المتصفح: هذا الحرف ليس بناء جملة وسم، إنه نص عادي.

<p>استخدام كيانات الأحرف لعرض رموز خاصة:</p>
<ul>
<li>أصغر من: &lt; (كتابة < مباشرة سيُعتبر خطأً كوسم)</li>
<li>أكبر من: &gt; (كتابة > مباشرة سيُعتبر خطأً كنهاية وسم)</li>
<li>علامة العطف: HTML &amp; CSS (تُعرض كـ HTML & CSS)</li>
<li>حقوق النشر: حقوق النشر &copy; 2024</li>
<li>مسافة غير قابلة للكسر: مرحباً&nbsp;&nbsp;بالعالم (مسافتان)</li>
</ul>

❓ أسئلة شائعة

📖 ملخص

• <p> يحدد فقرة؛ إنه عنصر من مستوى الكتلة، ويضيف المتصفح تلقائيًا تباعدًا قبله وبعده
• <br> يُجبر على فاصل سطر، <hr> يرسم خطًا أفقيًا — كلاهما وسوم فارغة
• كيانات الأحرف تُستخدم لعرض الأحرف الخاصة: < (أصغر من)، > (أكبر من)، & (علامة العطف)،   (مسافة غير قابلة للكسر)
• لا تسيء استخدام <br> لإنشاء تباعد بين الفقرات — استخدم خاصية CSS margin بدلاً من ذلك

📝 تمارين

1. تمرين تخطيط النص: استخدم وسوم <p> و <br> و <hr> لكتابة نص قصير يحتوي على: ثلاث فقرات، عنوان واحد (باستخدام <br> لفواصل الأسطر)، وخط فاصل واحد.
2. تمرين كيانات الأحرف: اعرض المحتوى التالي على الصفحة: "يستخدم HTML وسوم <p> لتعريف الفقرات، ورمز & يحتاج إلى الهروب باستخدام &." (تلميح: تحتاج إلى تداخل كيانات الأحرف بشكل صحيح حتى يعرض المتصفح الكيان نفسه، وليس الحرف الذي يمثله.)

فريق Web-Tutorial التقني

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

من نحن