❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals 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>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 { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; }

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

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

مثال

<p> This paragraph contains extra spaces. </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>
<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>
<p>Here we break the paragraph.<br>This will apear on a new line.</p>

جرب الكود



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

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

مثال

<p>    We add 4 white spaces at the beginning.</p>

جرب الكود

عودة للدرس❯ ❮عودة للدرس