الفقرات paragraphs في html
الفقرة ( Paragraph ) هي عبارة عن مساحة يتم تعريف الفقرات عن طريق الوسم <p>.
و هذه المساحة يتم تخصيصها من أجل عرض النص الذي نضعه فيها على سطر جديد و المتصفحات هي تفهم وحدها بأن تضيف هامش أبيض قبل و بعد الفقرة.
سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص و تنسيقها بشكل عام.
إن إستخدامك الألوان و الرسومات في الصفحة يقوم بإعطائها نوع من الحيوية و أن الخطوط تعطي الصفحة رونقاً وجمالاً.
للحصول على صفحة ذو جمال وترتيب أفضل يجب عليك التعامل مع الفقرات و القوائم في الصفحة للحصول على صفحة ذو ترتيب جيد.
إن الترتيب هو الخطوة الأولى لجلب الزوار إلى موقعك.
مثال 1
<p>Programmer Tech</p>
الوسم p هو وسم منفرد و لكنه يُستخدَم أيضاً كوسم مزدوج و كما يُمكن لهذا الوسم تحديد إتجاه الفقرات والنصوص من خلال بعض الخصائص التي تستخدم مع الوسم P وهي align , dir.
مثال 2
<p>Programmer Tech website learn programming</p>
في هذا المثال قمنا بإنشاء فقرة لكن قمنا بترك مسافات بين الكلمات في هذه الفقرة.
و عند تشغيل الكود في المتصفح سوف نجده بالشكل
كما لاحظنا عندما قمنا بتشغيل الكود لقد تم تجاهل الفراغات و لم يتم إحتسابها.
مثال 3
<p>Learn the basics of programming computer science information security scripts - linux - computer programs</p>
قمنا بإنشاء فقرة لكن كانت عدة سطور ضمن وسم واحد.
عندما نقوم بتشغيل هذا الكود في المتصفح.
التحكم في إتجاه الفقرات بواسطة align
خاصية align تُحدد إتجاه الفقرة و هي تأخذ مجموعة من القيم يمين و يسار و في الوسط center,right,left.
<p align="right">Programmer Tech</p>
في المثال السابق سوف يكون إتجاه النص على يمين الصفحة بدل الوضع الإفتراضي له و هو يسار الصفحة.
ماذا إذا كنا نُريد أن يكون النص أو الفقرة في المنتصف هنا يجب علينا إستعمال القيمة الأخرى وهي center.
<p align="center">Programmer Tech</p>
وكذلك الأمر إذا كنا نريد القيمه على يسار الصفحة نضع left .
النزول على سطر جديد في الفقرة <br>
الوسم <br> هو وسم مُنفرد يُستخدَم لإعلام المتصفح في النزول من السطر الحالي و البدأ في سطر جديد داخل الفقرة كأننا ضغطنا على زر Enter.
و معنى br يعني break أي الإيقاف, إيقاف العرض على نفس السطر و البدء في سطر جديد.
<p>Programmer Tech website. <br> learn programming.</p>
قمنا بإستخدام الوسم <br> من أجل النزول سطراً جديداً في هذه الفقرة و البدء في سطر جديد بالنص الذي بعد الوسم.
عند تشغيل هذا الكود سوف تكون النتيجة هي أنه قد نزل سطراً جديداً.
عرض أكثر من مسافة بين الكلمات في الفقرة
إستخدام بدل الفراغات في السطر, و هذا الوسم خاص لإعطاء فراغات في سطر الـ html في الفقرات.
و يقوم بإعطاء فراغ واحد في السطر و نقوم بكتابة هذا الوسم بعدد الفرغات التي نُريدها من أجل إعلام المتصفح أنه يوجد فراغ.
<p>Programmer Tech website. learn programming.</p>
في هذه الفقرة قمنا بإستخدام ثلاث مرات أي سوف يترك لنا ثلاث فراغات في هذه الفقرة.
وسم pre المخصص لعرض النص كما هو
وظيفة الوسم 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 تم حل هذه المشكلة.
نتيجة الكود السابق في المتصفح
نُلاحظ أنه بقيت مسافه موحدة بين الأحرف لو لم نستخدم هذا الوسم لكنتم توقعتم أننا إستخدمنا عدد كبير من الوسم و .
عرض كود HTML في الصفحة ليظهر كـ نص
يجب علينا التفكير في جعل المتصفح بأن يعتبر الكود المكتوب في الصفحة على أنه نص عادي و لا يتم قراءته على أنه كود.
من أجل جعل المتصفح إعتبار الكود المكتوب كنص عادي:
- نقوم بتحويل كل إشارة < في الكود إلى الرمز <.
- نقوم بتحويل كل إشارة & في الكود إلى الرمز &.
وسم hr لعرض خط أفقي في صفحة الويب
لعرض خط أفقي في الصفحة نضع الوسم <hr> فقط, و معنى hr إختصار لكلمة Horizontal Rule التي تعني مسطرة أفقية, وهو وسم منفرد ليس له وسم نهاية لإغلاقه.
<p>Learn the basics of programming<br> computer science information security<br><hr> scripts - linux - computer programs</p>
ضمن مثالنا هذا قمنا بإستخدام hr من أجل رسم خط أفقي في نتيجة صفحة الكود.
عند تشغيل الكود السابق في المتصفح
كما لآحظنا أنه رسم لنا خط أفقي في نتيجة الكود السابق لأننا قمنا بإستخدام <hr>.