الفقرات Paragraphs

الفقرات

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

مثال
تشغيل
  1. <p>This is paragraph.</p>
  2. <p>This is another paragraph.</p>

فواصل الأسطر br (Line Breaks)

يستخدم الوسم <br> لإدراج فاصل أسطر في صفحة الويب.
نظرًا لأن <br> عنصر فارغ (Empty element) ، فلا حاجة لوسم الاغلاق </br>.

مثال
تشغيل
  1. <p>This is paragraph<br>with line break.</p>
  2. <p>This is <br> another paragraph <br> with line breaks. </p>

الخط الأفقـي hr (Horizontal Rule)

يستخدم الوسم <hr> لإنشاء خطوط أفقية لفصل أقسام المحتوى على صفحة الويب. مثل <br> ، يعد العنصر<hr> أيضًا عنصرًا فارغًا (Empty element). إليك مثال:

مثال
تشغيل
  1. <p>This is paragraph.</p>
  2. <hr>
  3. <p>This is another paragraph.</p>

التحكم في الفراغات

عادةً ما يعرض متصفح الويب المسافات المتعددة (اكثر من مسافة واحدة) التي تم إنشاؤها داخل كود HTML بالضغط على مفتاح شريط المسافة (space-bar) أو مفتاح (tap) على لوحة المفاتيح كمسافة واحدة. يتم أيضًا عرض فواصل الأسطر المتعددة التي تم إنشاؤها داخل كود HTML من خلال الضغط على مفتاح الإدخال (Enter) كمسافة واحدة.

سيتم عرض الفقرات التالية في سطر واحد دون أي مساحة إضافية:

مثال
تشغيل
  1. <p>This paragraph contains  multiple   spaces    in the source code.</p>
  2. <p>
  3. This paragraph
  4.     contains multiple    tabs and     line breaks
  5.         in the source code.
  6. </p>

لإنشاء مسافات متتالية إضافية يجب إدراج &nbsp; وإدراج وسم <br> لإنشاء فواصل أسطر ، كما هو موضح في المثال التالي :

مثال
تشغيل
  1. <p>This paragraph has multiple&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spaces.</p>
  2. <p> This paragraph has multiple<br><br>line<br><br><br>breaks.</p>

النص المنسق مسبقًا (Preformatted Text)

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

سيعرض المثال التالي النص في متصفح الويب كما هو في الكود المصدري (source code):

مثال
تشغيل
  1. <pre>
  2. Twinkle, twinkle, little star,
  3. How I wonder what you are!
  4. Up above the world so high,
  5. Like a diamond in the sky.
  6. </pre>
« التالي السابق »