الفقرات في html
الفقرة ( Paragraph ) هي عبارة عن مساحة يتم تعريف الفقرات عن طريق الوسم <p>. و هذه المساحة يتم تخصيصها من أجل عرض النص الذي نضعه فيها على سطر جديد و المتصفحات هي تفهم وحدها بأن تضيف هامش أبيض قبل و بعد الفقرة.
سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص و تنسيقها بشكل عام.
إن إستخدامك الألوان و الرسومات في الصفحة يقوم بإعطائها نوع من الحيوية و أن الخطوط تعطي الصفحة رونقاً وجمالاً.
للحصول على صفحة ذو جمال وترتيب أفضل يجب عليك التعامل مع الفقرات و القوائم في الصفحة للحصول على صفحة ذو ترتيب جيد.
إن الترتيب هو الخطوة الأولى لجلب الزوار إلى موقعك.
مثال 1
<p>Nusur Tech</p>
الوسم p هو وسم منفرد و لكنه يُستخدَم أيضاً كوسم مزدوج و كما يُمكن لهذا الوسم تحديد إتجاه الفقرات والنصوص من خلال بعض الخصائص التي تستخدم مع الوسم P وهي align , dir.
مثال 2
<p>Nusur 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">Nusur Tech</p>
في المثال السابق سوف يكون إتجاه النص على يمين الصفحة بدل الوضع الإفتراضي له و هو يسار الصفحة.
ماذا إذا كنا نُريد أن يكون النص أو الفقرة في المنتصف هنا يجب علينا إستعمال القيمة الأخرى وهي center.
<p align="center">Nusur Tech</p>
وكذلك الأمر إذا كنا نريد القيمه على يسار الصفحة نضع left .
النزول على سطر جديد في الفقرة <br>
الوسم <br> هو وسم مُنفرد يُستخدَم لإعلام المتصفح في النزول من السطر الحالي و البدأ في سطر جديد داخل الفقرة كأننا ضغطنا على زر Enter.
و معنى br يعني break أي الإيقاف, إيقاف العرض على نفس السطر و البدء في سطر جديد.
<p>Nusur Tech website. <br> learn programming.</p>
قمنا بإستخدام الوسم <br> من أجل النزول سطراً جديداً في هذه الفقرة و البدء في سطر جديد بالنص الذي بعد الوسم.
عند تشغيل هذا الكود سوف تكون النتيجة هي أنه قد نزل سطراً جديداً.
عرض أكثر من مسافة بين الكلمات في الفقرة
إستخدام بدل الفراغات في السطر, و هذا الوسم خاص لإعطاء فراغات في سطر الـ html في الفقرات.
و يقوم بإعطاء فراغ واحد في السطر و نقوم بكتابة هذا الوسم بعدد الفرغات التي نُريدها من أجل إعلام المتصفح أنه يوجد فراغ.
<p>Nusur Tech website. 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>
بعكس الوسم 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>.