HTMLالفقرات

مفهوم الفقرات

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

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

أنواع الفقرات

هناك نوعين من الفقرات التي يمكن إضافتها في الصفحة:

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

الفقرات المخصصة لعرض النص بالشكل المناسب

لعرض نص عادي في الصفحة نضع النص بداخل <p> </p>.

عند عرض النص بواسطة هذا الوسم يقوم المتصفح بإزالة أي مسافات فارغة إضافية ( Extra White Spaces ) يجد أنه لا داعي لها على النحو التالي:

• إذا وجد أكثر من مسافة بين الكلمات يبقي مسافة واحدة فقط.
• إذا وجد أسطر فارغة، سيقوم بإزلتها عند عرض المحتوى في الصفحة.
• إذا وجد النص موضوع على أكثر من سطر عمداً, سيقوم بعرض كل المحتوى على نفس السطر و ينزل على السطر عند الحاجة فقط.

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

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

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

<p>   This  paragraph    contains  extra    spaces.</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>

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

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

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

الفقرات المخصصة لعرض النص كما هو

لعرض النص كما يظهر بالضبط في الكود نضع النص بداخل <pre> </pre>.

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

في المثال التالي قمنا بكتابة نص بداخل <pre> </pre> حتى يتم عرضه كما هو في المتصفح.

<pre>
Name: Mhamad Harmush
Job:  Programmer
Age:  26
</pre>

طريقة عرض كود HTML في الصفحة

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

لجعل المتصفح يعتبر الكود المكتوب كأحرف عادية فهناك شيئان يضمنا ذلك:

• تحويل كل < موجود في الكود إلى <
• تحويل كل & موجود في الكود إلى &

في المثال التالي قمنا بعرض كود HTML في الصفحة من خلال تبديل كل رمز < موجود في الكود إلى <.
ملاحظة: وضعنا الكود بداخل <pre> </pre> حتى يتم عرضه بنفس الشكل الذي وضعناه فيه.

طريقة عرض خط أفقي

لعرض خط أفقي في الصفحة نضع <hr> فقط.

في المثال التالي قمنا بعرض خط أفقي بين الفقرتين.

<p>In Harmash.com you can learn every thing you need for free.</p>
<hr>
<p>You can learn Algorithms, Java, C++, Python, SQL etc..</p>