العناوين والفقرات في لغة HTML

اولا الفقرات في لغة html

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

أنواع الفقرات types of paragraphs

هناك نوعين من الفقرات :

•         فقرات مخصصة لعرض الشكل كفقره نص paragraph
•         فقرات مخصصه من اجل عرض النص كما هو مكتوب preformatted text

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

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

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

 هو عبارة عن تاج مزدوج <P> ... <‎/P> وفي هذه الحالة يمكّننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخصائص ALIGN, DIR.

 p إختصار لكلمة Paragraph التي تعني فقرة.

كيفية عرض الفقرات في لغة HTML؟

لا يمكنك التأكد من كيفي ستعرض صفحة HTML سواء كانت الشاشات كبيرة ام صغيرة أو تصغير الصفحة هذا من شأنه يعكس نتائج مختلفة.

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

مثال 1:

‏<p Align="right" dir="rtl">هذا النص هو مثال تجريبي على الفقرة.</p>‏
‏<p>وهذا أيضا فقرة اخرى.</p>‏

الخاصية ALIGN  تحدد محاذاة الفقرة وهي تأخذ القيم Left, Center, Right وهنا استخدمنا right يمكنك تجربة الباقي بنفسك

الخاصية DIR  والتي نستخدمها أيضاً مع <P> فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم

• LTR     إتجاه النص من اليسار إلى اليمين (Left To Right) وتستخدم مع اللغة الانجليزية
• RTL     إتجاه النص من اليمين إلى اليسار (Right To Left) وتستخدم مع اللغة العربية

(تذكر هذه الخاصية جيداً فهي مهمة عند كتابة صفحات باللغة العربية)  هنا استخدمنا القيمة rtl لان الفقرة مكتوبة باللغة العربية.

ستلاحظ ان الفقرة الأولى عرضت على اليمين ومحاذاة الى اليمين لكن الفقرة الثانية لا لان لم نقوم بإضافة الخصائص لها

مع HTML انت لا يمكنك تغيير النتائج الظاهرة بواسطة اضافة مسافات فارغة او سطور اضافية داخل البرمجة حيث سيزيل المتصفح كل هذه الاضافات عند عرض الصفحة دعنا نجرب في مثال 2 و 3:

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

ملاحظة: تقوم  المتصفحات بشكل تلقائي  باضافة مسافة بيضاء (هامش) قبل وبعد الفقرة.

مثال 2:

‏<p dir="rtl">  في     هذه     الفقرة    يوجد     مسافات    فارغة    اضافية.</p>‏

مثال 3:

‏<p>مرحبا بكم !‏
انتم الان في مدونتكم ‏
مدونة اليمن التقني ‏
مجموعة دروس ‏ برمجة الويب والانترنت ‏ هذا الدرس عن الفقرات والعناوين في لغة html </p>‏

فواصل الأسطر في لغة HTML:

الوسم <br /> وظيفته يعمل على النزول (سطر جديد) في لغة HTML ،  استخدم <br />  اذا كنت تريد اضافة سطر جديد بدون بدء فقرة جديدة.

لإعلام المتصفح أنك تريد النزول على سطر جديد, يجب وضع وسم <br /> في المكان الذي تريد ان يقوم بالنزول سطر جديد.

  br إختصار لكلمة Break التي يقصد بها في حالتنا إيقاف العرض على نفس السطر.

مثال 4:

‏<p dir="rtl">هنا السطر الأول من الفقرة.<br>وهذا السطر سوف يظهر في سطر جديد.</p>‏

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

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

كل رمز &nbsp; تضعه يفهمه المتصفح على أنه مسافة فارغة يجب عدم إزالتها.

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

يمكنك مشاهدة جدول وسوم الرموز الخاصة من خلال الدرس الاول

مثال 5:

‏<p dir="rtl">‏&nbsp;&nbsp;&nbsp;&nbsp; هنا اضفنا 4 مسافات فارغة قبل هذا النص لاحظ ذلك.</p>‏

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

النص الموجود داخل الوسم <pre> يتم عرضه  بخط (ثابت العرض) ويحافظ على المسافات والفواصل بها.

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

pre  إختصار لعبارة Preformatted Text التي تعني نص منسق مسبقاً.

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

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

مثال 6:

‏<pre dir="rtl">‏
                   الاسم :‏
        ‏          اليمن التقني
                 التخصص : ‏

  كل ما يتعلق بالبرمجة والحاسوب
أنشئت في :                 ‏
	‏  2020‏
‏</pre>‏

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

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

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

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

في المثال التالي قمنا بعرض كود HTML في الصفحة من خلال تبديل كل < موجود في الكود إلى &lt;.

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

مثال 7:

<pre>
&lt;!DOCTYPE html>
&lt;html>
    &lt;body>
        &lt;p>HTML &amp; CSS are so easy to learn&lt;/p>
    &lt;/body>
&lt;/html>
</pre>

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

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

hr إختصار لكلمة Horizontal Rule التي تعني مسطرة أفقية.

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

مثال 8:

<p  align="left" dir="ltr">In thedigitalyemen.com you can learn every thing you need for free.</p>
<hr>
<p align="left" dir="ltr" >You can learn Algorithms, Java, C++, Python, SQL etc..</p>
<hr>
<p align="left" dir="ltr" >we are know in the building phase of the website and you are one of the team</p>

توسيط الفقرة او النص وسط الشاشة

لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة نستطيع استخدام الوسم <CENTER> ... </CENTER>

العناوين بلغة HTML

العناوين:  تنظيم و ترتيب النّص ب HTML

عندما يكون محتوى صفحتك مكوَّناً من العديد من الفقرات ، و كل فقرة منفصلة عن الأخرى،  سيصعب على زوار موقعك جمع أفكارهم داخل الموضوع و هنا  تصبح  العناوين مفيدة.

في HTML ،  لدينا  الحق في استخدام ستة مستويات من العناوين المختلفة. وهذا يعني أنه   يمكننا القول أن:  “هذا عنوان مهم جدًا” ، “هذا عنوان أقل أهمية” ، “هذا عنوان  أقل أهمية مما سبق” ، وهكذا......الخ .

أحيانا من اجل تنظيم مقالنا يكون العنوان الأول يكون العنوان الأساس ثم العنوان 2 يكون عنوان فرعي للعنوان الأول اما العنوان 3 فهو يكون عنوان ثانوي للعنوان الأول او عنوان فرعي للعنوان رقم 2

يتم تعريف العناوين بالوسوم <h1> إلى <h6>

<h1>يحدد العنوان الأكثر أهمية <h6> يحدد العنوان الأقل أهمية

<h1> </ h1>: تعني “عنوان مهم جدًا”.  وغالباً ما يتم استخدامه لعرض عنوان بداية الصفحة  او العناون الذي يدور عنه المقال في الصفحة.

<h2> </ h2>: تعني “العنوان المهم” و لكنه ليس مميزاً كالأول.

<h3> </ h3>: نفس العنوان لكنه  أقل أهمية (وقد نسميه “عنوان فرعي” إ).

<h4> </ h4>:  رتبته  أقل أهمية وقد يسمى عنوان ثانوي.

<h5> </ h5>: عنوان غير مهم.

<h6> </ h6>: هو في الأصل عنواناً  ، ولكن لا أهمية له.

ملاحظة: تقوم المستعرضات تلقائيًا بإضافة مسافات (الهامش) قبل العنوان وبعده

تحذير:    لا تخلط بين وسم <title>! و وسم <h1>  . فالأول    ( <title> ) تعرض عنوان الصفحة في شريط عنوان المتصفح كما رأينا في  درس سابق.  لكـن <h1>  يتم استخدامها  لإنشاء عناوين لمواضيع في صفحة الويب.

اهمية العناوين

v    تستخدم محركات البحث العناوين لفهرسة بنية ومحتوى صفحات الويب.

v    يتعرف المستخدمون على صفحات الموقع من عناوينها. من المهم استخدام العناوين لإظهار بنية المستند.

v    يجب استخدام وسم <h1> للعناوين الرئيسية متبوعة بعناوين<h2>  ثم الاقل اهمية <h3> وهكذا

" استخدم عناوين HTML للعناوين فقط. لا تستخدم العناوين لجعل النص كبير  أو غامقا.

التحكم بحجم العناوين و خصائصه :

لا تختار مستوى العنوان (مثلا (<h1> الخاصة بك على أساس الحجم الذي ينطبق على النص! من الضروري تنظيم صفحتك بدءًا من عنوان المستوى الأول    <h1>  ، ثم عنوان المستوى الثاني   <h2> ، إلخ. يجب ألا يكون هناك عنوان فرعي  بدون عنوان رئيسي!

كل عنوان HTML له حجم افتراضي ومع ذلك يمكنك تحديد حجم أي عنوان باستخدام لغة CSS   سوف نتطرق لها لاحقا

ولكن اذا اردنا تغيير حجم العنوان نستخدم السمة style وذلك باستخدام الخاصية font-size الخاصة بـ CSS 

<h1 style="font-size:30px;">العنوان الرئيسي ١ العناوين بلغةhtml</h1>