الفقرات paragraphs في لغة HTML - ProgrammerTech
Language:

Search

الفقرات paragraphs في لغة HTML

  • Share this:
الفقرات paragraphs في لغة HTML

الفقرات paragraphs

الفقرة ( Paragraph ) هي عبارة عن مساحة يتم تعريف الفقرات عن طريق الوسم <p>.

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

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

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

للحصول على صفحة ذو جمال وترتيب أفضل يجب عليك التعامل مع الفقرات و القوائم في الصفحة للحصول على صفحة ذو ترتيب جيد.

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

مثال 1

<p>Programmer Tech</p>

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

مثال 2

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

في هذا المثال قمنا بإنشاء فقرة لكن قمنا بترك مسافات بين الكلمات في هذه الفقرة.

و عند تشغيل الكود في المتصفح سوف نجده بالشكل.

وسم الفقرات p و تم تجاهل الفراغات

 

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

مثال 3

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

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

عندما نقوم بتشغيل هذا الكود في المتصفح.

فقرة p في html تم تجاهل الاسطر المتعددة بها

 

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

 

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

خاصية 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> تم حل هذه المشكلة.

نتيجة الكود السابق في المتصفح.

3-17.webp

 

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

 

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

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

من أجل جعل المتصفح إعتبار الكود المكتوب كنص عادي:

  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 لرسم خط افقي في فقرة html

 

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


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com