Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

HTMLالوسم <p>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

نستخدم الوسم <p> على هذا النحو <p>content</p> لعرض فقرة.

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

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <p>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإضافة فقرة بواسطة الوسم <p>.

مثال

<p>Hello guys, my name is Mhamad. I start learning programming at 19.</p>
جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

نصائح و ملاحظات

في حال إضافة مسافات فارغة لا حاجة لها بداخل الوسم <p> فإنه سيقوم بشكل تلقائي بإزالتها.
للدقة أكثر، المسافات الفارغة في أول و آخر الفقرة سيتم إزالتها و في حال وجود أكثر من مسافة فارغة بين الكلامات سيتم تحويلها لمسافة واحدة فقط.

مثال

<p>   This  paragraph    contains  extra    spaces.   </p>
جرب الكود

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

مثال

<p>Hello guys, my name is Mhamad.
I start learning programming at 19.
One year later I create harmash.com</p>
جرب الكود

لإعلام المتصفح أنك تريد النزول على سطر جديد بداخل الفقرة، يجب وضع <br> في نهاية السطر.
في المثال التالي قمنا بإعلام المتصفح أنه من بعد كلمة paragraph. يجب عرض النص المتبقي على سطر جديد.

مثال

<p>Here we break the paragraph.<br>This will apear on a new line.</p>
جرب الكود

لإعلام المتصفح أنك تريد وضع أكثر من مسافة فارغة وراء بعض في النص، يمكنك استخدام الرمز &nbsp; الذي يعني مسافة فارغة بالنسبة للمتصفح.
ملاحظة: كل رمز &nbsp; تضعه يفهمه المتصفح على أنه مسافة فارغة يجب عدم إزالتها.

في المثال التالي قمنا بإضافة 4 مسافات فارغة في بداية النص.

مثال

<p>&nbsp;&nbsp;&nbsp;&nbsp;We add 4 white spaces at the beginning.</p>
جرب الكود