Mr. A7meD KaMeL

6- إضافة الفقرات في صفحة الويب HTML Paragraphs

محتوى الموضوع

بسم الله الرحمن الرحيم

المحاضرة السادسة: اضافة الفقرات في صفحة الويب
HTML Paragraphs

اضافة فقرات صفحة الويب

وسم الفقرة هو <p>، ويتم انشاء الفقرة في صفحة HTML كما يلي:

<p> هنا نص الفقرة بالكامل </p>

ومن الطبيعي ان تحتوي الفقرات على العديد من السطور .. ولكن .. السطور العديدة داخل الفقرة لا تنشئ سطراً وانما سيتم كتابة الفقرة كما هي في سطر واحد.

انظر الى الكود التالي:

<p> هنا نص الفقرة 
ومن المفترض ان يكون هذا السطر هو السطر الثاني
ووهذا السطر هو السطر الثالث من نص الفقرة
</p>

من الكود السابق: يتضح اننا نريد عمل سطور عديدة – حيث نص السطر الاول من الفقرة هو ” هنا نص الفقرة ”
ونص السطر الثاني هو ” ومن المفترض ان يكون هذا السطر هو السطر الثاني” ……. وهكذا.

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

والطريقة الصحيحة لانشاء السطور داخل الفقرة -> هي ادراج الوسم <br> في نهاية نص السطر – ويعتبر هذا وسم (فاصل السطور)  – كما في الكود التالي:

<p> هنا نص الفقرة <br>
هنا نص السطر الثاني من الفقرة  <br>
وهنا نص السطر الثالث من الفقرة <br>
</p>

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


ولكن ماذا اذا كنا نريد انشاء فقرة معينه بمسافات عديدة بين الكلمات وسطور عديدة بدون ادراج فاصل السطور؟

– هناك وسم يدعى بوسم النص مسبق التنسيق preformatted.

والذي يمكن استخدامه لكتابة اي نص بداخله وسيتم ادراج هذا النص كما تم كتابته في الكود – ويستخدم كما يلي:

<pre>
     هنا نص ما في السطر الاول

     هنا نص ما في السطر الثاني

     هنا نص ما     في       السطر     الثالث      وفيه        مسافات        عديدة           بين           الكلمات
</pre>

لاحظ في الكود السابق ان: السطر الثالث فيه نص طويل – وعلى الرغم من عرض المتصفح او الشاشه فلن يتم تقسيم النص الى سطر يليه .. ولكن النص ظل في سطر واحد.

ولاحظ ايضا: عندما يكون النص في سطر ما طويل فإن هناك شريط تمرير افقي قد ظهر لامكانية التمرير للانتقال داخل هذا العنصر – كما في الشكل التالي:

مثال لوسم النص مسبق التنسيق

نهاية المحاضرة

تاريخ الموضوع: أبريل 4, 2017 1:50 م
اسم الكاتب A7meD KaMeL - NiGh10GaLe
نبذة عن الكاتب

مهندس كمبيوتر - مصمم مواقع - مدرب كمبيوتر - مدرب ICDL بمركز التدريب الاداري والاستشارات بكلية التجارة بجامعة المنصورة - مدرب تصميم مواقع - مدرب لكورس الربح من الانترنت.

اترك تعليقاً