الفقرات paragraphs في HTML 4

الفقرات paragraphs في HTML

الفقرة ( Paragraph ) هي عبارة عن مساحة يتم تعريف الفقرات عن طريق الوسم <p>. و هذه المساحة يتم تخصيصها من أجل عرض النص الذي نضعه فيها على سطر جديد و المتصفحات هي تفهم وحدها بأن تضيف هامش أبيض قبل و بعد الفقرة.

تستخدم الفقرات (paragraphs) لتنظيم النص في صفحات الويب. وتتمثل الطريقة الأساسية لإنشاء فقرة في HTML في استخدام عنصر p. ويتم كتابة نص الفقرة بين علامات البداية <p> والنهاية </p>.

سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص و تنسيقها بشكل عام.

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

إن الترتيب هو الخطوة الأولى لجلب الزوار إلى موقعك.

مثال 1

<p>Programmer Tech</p>
.

الوسم <p> هو وسم منفرد و لكنه يُستخدَم أيضاً كوسم مزدوج و كما يُمكن لهذا الوسم تحديد إتجاه الفقرات والنصوص من خلال بعض الخصائص التي تستخدم مع الوسم <p> وهي align , dir.

مثال 2

<p>Programmer Tech   website   learn     programming</p>
.

في هذا المثال قمنا بإنشاء فقرة لكن قمنا بترك مسافات بين الكلمات في هذه الفقرة. و عند تشغيل الكود في المتصفح سوف نجده بالشكل

كما لاحظنا عندما قمنا بتشغيل الكود لقد تم تجاهل الفراغات و لم يتم إحتسابها.

مثال 3

<p>Learn the basics of programming
computer science  information security
scripts - linux - computer programs</p>

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

نلاحظ من النتيجة السابقة بأن تم دمج جميع السطور في سطر واحد و لم يتم طباعة النص كما هو.

تغيير حجم الخط داخل الفقرات

نعم، يمكن تغيير حجم الخط داخل الفقرات في HTML باستخدام العنصر النمطي (style) أو باستخدام وحدات التنسيق CSS. لتغيير حجم الخط باستخدام العنصر النمطي، يمكن إضافة خاصية الحجم (font-size) مع قيمتها المطلوبة داخل عنصر p. على سبيل المثال، إذا أردنا تحديد حجم الخط داخل فقرة معينة بحجم 16 بكسل، يمكن كتابة الكود التالي:

<p style="font-size:16px;">
هذه الفقرة تحتوي نصًا بحجم خط 16 بكسل.
</p>

وسيتم عرض النص داخل الفقرة بحجم الخط 16 بكسل. يمكن استخدام هذه الطريقة لتغيير حجم الخط في أي عنصر HTML آخر أيضًا.

وبالطبع، يمكن استخدام وحدات التنسيق CSS لتحديد حجم الخط في جميع الفقرات في صفحة الويب. يمكن إضافة تعليمات CSS إلى عنصر الرأس (head) باستخدام عنصر النمط (style) أو رابط ورقة الأنماط (stylesheet)، ويمكن تحديد حجم الخط باستخدام خاصية font-size. على سبيل المثال، يمكن كتابة التعليمات التالية في ورقة الأنماط لتحديد حجم الخط لجميع الفقرات إلى 16 بكسل:

<style>
p {
  font-size: 16px;
}
</style>

وبهذا سيتم عرض جميع الفقرات في الصفحة بحجم الخط 16 بكسل.

تغيير لون الخط داخل الفقرات

نعم، يمكن تغيير لون الخط داخل الفقرات في HTML باستخدام العنصر النمطي (style) أو باستخدام وحدات التنسيق CSS. لتغيير لون الخط باستخدام العنصر النمطي، يمكن إضافة خاصية اللون (color) مع القيمة المطلوبة داخل عنصر p. على سبيل المثال، إذا أردنا تحديد لون الخط داخل فقرة معينة باللون الأزرق، يمكن كتابة الكود التالي:

<p style="color: blue;">
هذه الفقرة تحتوي نصًا بلون أزرق.
</p>

وسيتم عرض النص داخل الفقرة بلون أزرق. يمكن استخدام هذه الطريقة لتغيير لون الخط في أي عنصر HTML آخر أيضًا.

وبالطبع، يمكن استخدام وحدات التنسيق CSS لتحديد لون الخط في جميع الفقرات في صفحة الويب. يمكن إضافة تعليمات CSS إلى عنصر الرأس (head) باستخدام عنصر النمط (style) أو رابط ورقة الأنماط (stylesheet)، ويمكن تحديد لون الخط باستخدام خاصية color. على سبيل المثال، يمكن كتابة التعليمات التالية في ورقة الأنماط لتحديد لون الخط لجميع الفقرات إلى اللون الأزرق:

<style>
p {
  color: blue;
}
</style>

وبهذا سيتم عرض جميع الفقرات في الصفحة بلون الخط الأزرق.

التحكم في إتجاه الفقرات

خاصية align تُحدد إتجاه الفقرة و هي تأخذ مجموعة من القيم يمين و يسار و في الوسط center,right,left.

<p align="right">Programmer Tech</p>
.

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

<p align="center">Programmer Tech</p>
.

وكذلك الأمر إذا كنا نريد القيمه على يسار الصفحة نضع left .

النزول على سطر جديد في الفقرة

الوسم <br> هو وسم مُنفرد يُستخدَم لإعلام المتصفح في النزول من السطر الحالي و البدأ في سطر جديد داخل الفقرة كأننا ضغطنا على زر Enter. و معنى br يعني break أي الإيقاف, إيقاف العرض على نفس السطر و البدء في سطر جديد.

<p>Programmer Tech website. <br> learn programming.</p>
.

قمنا بإستخدام الوسم <br> من أجل النزول سطراً جديداً في هذه الفقرة و البدء في سطر جديد بالنص الذي بعد الوسم. عند تشغيل هذا الكود سوف تكون النتيجة هي أنه قد نزل سطراً جديداً.

عرض أكثر من مسافة بين الكلمات

إستخدام &nbsp; بدل الفراغات في السطر, و هذا الوسم خاص لإعطاء فراغات في سطر الـ html في الفقرات. و يقوم بإعطاء فراغ واحد في السطر و نقوم بكتابة هذا الوسم بعدد الفرغات التي نُريدها من أجل إعلام المتصفح أنه يوجد فراغ.

<p>Programmer Tech website.&nbsp;&nbsp;&nbsp; learn programming.</p>
.

في هذه الفقرة قمنا بإستخدام ثلاث مرات أي سوف يترك لنا ثلاث فراغات في هذه الفقرة.

عرض النص كما هو

وظيفة الوسم <pre> هي عرض النص كما هو موجود في محرر الأكواد أي منسق مسبقاً, و معنى هذا المصطلح بالإنجليزية Preformatted Text و ترجمتها نص منسق مسبقاً.

<body>
	<pre>A    B    C    D</pre>
	<pre>E    F    G    H</pre>
	<pre>I    J    K    L</pre>
	<pre>M    N    O    P</pre>
	<pre>Q    R    S    T</pre>
	<pre>U    V    W    X</pre>
</body>

كما نلاحظ بفضل الوسم <pre> قد عرضنا نتيجة الكود كما هي في المحرر مع الفراغات. بعكس الوسم p إذا تركنا فراغات في الوسم p لن تعرض في المتصفح لكن عند إستخدام <pre> تم حل هذه المشكلة. نتيجة الكود السابق في المتصفح.

نُلاحظ أنه بقيت مسافه موحدة بين الأحرف لو لم نستخدم هذا الوسم لكنتم توقعتم أننا إستخدمنا عدد كبير من الوسم و .

عرض كود في الصفحة ليظهر كـ نص

يجب علينا التفكير في جعل المتصفح بأن يعتبر الكود المكتوب في الصفحة على أنه نص عادي و لا يتم قراءته على أنه كود. من أجل جعل المتصفح إعتبار الكود المكتوب كنص عادي:

1. نقوم بتحويل كل إشارة < في الكود إلى الرمز <.
2. نقوم بتحويل كل إشارة & في الكود إلى الرمز &.

عرض خط أفقي في صفحة الويب

لعرض خط أفقي في الصفحة نضع الوسم <hr> فقط, و معنى <hr> إختصار لكلمة Horizontal Rule التي تعني مسطرة أفقية, وهو وسم منفرد ليس له وسم نهاية لإغلاقه.

<p>Learn the basics of programming<br>
computer science  information security<br><hr>
scripts - linux - computer programs</p>

ضمن مثالنا هذا قمنا بإستخدام <hr> من أجل رسم خط أفقي في نتيجة صفحة الكود. عند تشغيل الكود السابق في المتصفح.

كما لآحظنا أنه رسم لنا خط أفقي في نتيجة الكود السابق لأننا قمنا بإستخدام <hr>.