مرحبا بكم في هذه السلسة لتعلم html مجانا هذا سيكون اول درس لنا الذي سنتعلم فيه كيفية اضافة عناوين وفقرات وتنسيقات النصوص الى صفحة مكتوبة بلغة html فقط.
لذا قم بتجهيز محرر النصوص الخاص بك ولنبدأ في تعلم كتابة تلك الاكواد.
لغة html هي اللغة المكتوبة بها كل المواقع الالكترونية سواء مواقع عادية ثابتة او ديناميكة متغيرة فكلاهما ييستخدم html مهما حصل فالمتصفح لا يفهم اي لغة غير html, css, js اللغات الاساسية لتصبح مطور ويب ولا يمكنه تنفيذ اكواد مكتوبة بلغات اخرى غير تلك اذا كنت تريد التحقق فقم بكتابة كود لغة برمجة لا يتعرف عليها المتصفح مثلا php وقم بعرضها وما سيحدث هو انك لن ترى النتيجة المرجوة من البرنامج السابق سنتعلم كل ما يخص سلسلة دروس تعلم html.
اقرا ايضا: افضل 7 خيارات رائعة لمحررات النصوص للويندوز والماك والاندرويد 2024
لكي تفهم html بشكل اعمق يمكنك قراءة مقال لدينا بعنوان دليل شامل للمبتدئين تعلم HTML بالعربية من الصفر حتى الاحتراف
فلنبدأ اولا بكيفية كتابة الفقرات
عنصر <p> لكتابة فقرة في html
هذا عنصر شائع الاستخدام في كل مواقع الانترنت فلا يوجد موقع يخلو من الفقرات والنصوص ويستخدم اكثر في المدونات اثناء كتابة المقالات في الموقع ونستخدمه بفتح عنصر <p> ثم نكتب الفقرة التي نريدها ثم نغلقها بوسم </p> وبهذا يكون الشكل النهائي لها.
المتصفح بطبيعته يكون بجعل الفقرة في سطر جديد ويضيف اليها ايضا بعض الهوامش (مسافات بيضاء) قبلها وبعدها
<p>محتوى الفقرة يكون هنا.</p>
ملحوظة: عند كتابتك للفقرة واضافة سطور جديدة او اي مسافات بيضاء المتصفح يقوم بتجاهلها وتخطي كتابتها فمثلاً هذا مثال لدينا.
<p>محتوى الفقرة يكون هنا.
سطر جديد لن يحتسب
مسافة مسافة </p>
بعد تنفيذ الكود النيجة ستكون هكذا بدون مسافات او سطور جديدة بل كل الكلمات في سطر واحد:
محتوى الفقرة يكون هنا سطر جديد لن يحتسب مسافة مسافة
كما ترى النصوص لن تاتي كما كتبتها في html واذا كنت تريد عمل سطر جديد فعليك ان تستخدم وسم <br/> وهذا الوسم من النوع الذي لا يلزم اضافة له وسم اغلاق ويمكنك ايضا استخدام رمز ;nbsp& لكي تضع مسافة فارغة بين الكلمات.
وهكذا سيكون الكود بستخدام رموز المسافات:
<p>محتوى الفقرة يكون هنا.<br/>
سطر جديد سيحتسب<br/>
مسافة مسافة<br/>
</p>
أقرا ايضا: ما هو تطوير الويب web development (دليل شامل)
عنصر <pre> واهميته
ماذا لو كنت تريد الحصول على النص المماثال للذي كتبته في html ياتي دور هذ العنصر في حفظ جميع المسافات والسطور الجديدة بدون اضافة اي عناصر اخرى كما يلي:
<pre>
محتوى الفقرة يكون هنا.
سطر جديد سيحتسب
مسافة مسافة
</pre>
في المثال السابق قمنا بادخال نص داخل عنصر pre ونتيجة ذلك انك ستحصل على النص المماثل للذي كتبته هنا وسيحفظ السطور الجديدة والمسافات بين الكلمات.
يمكن استخدام هذا العنصر في كثير من الامثلة واحدها هو عندماتريد كتابة كود برمجي ذلك الكود به الكثير من المسافات والسطور للحفاظ على التنسيق والقراءة الجيدة فليس من المستحسن ان تكتب الكود بوجود عناصر مثل br فهذا سيكبر حجم الكود ولكن pre ستقلل من عدد السطور.
تنسيق الفقرة بالخطوط والالوان
يمكنك تغيير لون الفقرة الى اي لون تحب باستخدام عنصر font. العنصر لا يسمح لك بتغيير اللون فقط بل ايضا يغير نوع الخط وحجمه والابداع في ذلك للخروج بتصميم بسيط للنص وهذا هو مثال على كود به نص منسق.
<p><font size="6" face="arial" color="green">محتوى الفقرة يكون هنا.</font></p>
هذا الكود سيغير اولا حجم الخط عن طريق الخاصية size الى 6 وتلك الخاصية تقبل عددا من 1 اصغر حجم لها الى 7 اكبر حجم للخط.
ثانيا سيغير نوع الخط عن طريق خاصية اخرى تسمى face الى arial التي تقبل انواعا اخرى من الخطوط الموجودة في المتصفح
ثالثا سيغير لون الفقرة الى الاخضر green عن طريق الخاصية الرائعة color ويمكنك ادخال اي لون اخر red احمر او blue ازرق وهكذا.
طبعا توجد طرق كثيرة وحديثة اتنسيق الفقرات وهذه الطرق تطبق عن طريق استخدام خواص لغة css لكنك الان لا تحتاجها ركز على html فقط حتى تحترفها ثم انتقل css.
اضافة خط فاصل بين الفقرات (عنصر hr)
نستخدم hr لكي نضع فاصل بين محتوى الصفحة وتقسيمها ويكون بشكل خط رمادي به مسافة من فوق وتحت وهذا العنصر ايضا من العناصر الفارغة التي لا تحتاج لعنصر النهاية يعني يكتب هكذا:
<p>فقرة اولى.</p><hr><p>فقرة ثانية.</p><hr>
والان سننتقل لجزءنا الاخر وهو العناوين في html وسنشرح كل شئ تفصيلة عنها
اقرا ايضا: كل ما تريد معرفته عن HTTP: البروتوكول الأساسي للويب (دليل شامل 2024)
العناوين من <h1> الى <h6> في html
العناوين ايضا اكثر استخداما خصوصا في المقالات والتدوينات ونستخدما عند تحديد عنوان لمجموعة من الفقرات وجزء من المحتوى الخاص بنا كمثل العنوان الذي فوق هذه الفقرة فهي تحدد اننا سنشرح العناوين في html.
وتنقسم العناوين من 1 الى 6 نوع منها وتصنف حسب اهميتها في الصفحة فـ <h1> يعتبر العنوان الاكثر اهمية في الصفحة وتريد القارئ التركيز عليه.
لا تستخدم العناوين بشكل عشوائي او لتقوم بعمل تنسيق خط كبير او سميك لان الاستخدام الخاطئ لهم سيجعل موقعك غير قابل للفهرسة من محركات البحث وايضا هي مهمة للمستخدم.
هكذا يمكنك كتابة العناوين:-
<h1>عنوان 1</h1>
<h2>عنوان 2</h2>
<h3>عنوان 3</h3>
<h4>عنوان 4</h4>
<h5>عنوان 5</h5>
<h6>عنوان 6</h6>
وسترى ان العناوين كلها ستاتي في سطور جديدة وتصتف تحت بعضها البعض ولكل عنوان حجم معين من الاكبر h1 للاصغر h6.
وهكذا نصل للجزء الاخير من الدرس وهو وسوم تنسيق النص المميز في html
وسوم تنسيقات نصوص html
html لديها كثير من عناصر تنسيق النصوص وكلها عناصر لا تاخذ سطر جديد عند تضمينها بل تصبح في نفس السطر بدون كسر وكل هذه العناصر لها غرضها واستخدامها وتحدد شكلا مميو للنص الذي سيظهر للمستخدم في المتصفح.
اقرا ايضا: javascript | دليلك الشامل لمعرفة ماهي لغة جافاسكريبت 2024
سنتعرف على بعض عناصر html المميزة التي تميز النص عن البقية مثلا بجعله مائلا او جعله سميك وتلك العناصر هي:
- <b> - نص غامق او سميك لكن بدون اي اهمية للنص في المحتوى زائدة
- <i> - نص مائل يستخدم لتعريف مصطلح ما مثلا كلمة من لغة اخرى
- <strong> - نص مهم في المحتوى وتضيف عليه تنسيق السمك
- <u> - نص تحته خط للاشرة اليه
- <mark> - نص معلم عليه بلون مميز
- <sub> - نص ساقط يمكنك اضافة حرف او نص ساقط عن باقي الحرف او الكلمات الاخرى مثلا لكتابة رمز عنصر
- <sup> - نص مرتفع غالبا ما يستخدم لاضافة نص كملاحظة مرتفعة
- <small> - نص صغير
- <del> - نص محذوف يستخدم لكي تحدد نصوص حذفت ويتم وضع خط تحتها
- <ins> - نص مضاف يستخدم لوضع نص مضاف بدلا من المحذوف ويكون مننسق بوضع تحته خط
مثال على ذلك:
<b>نص غامق</b>
<i>نص مائل</i>
<strong>نص مهم في المحتوى</strong>
<u>نص تحته خط</u>
<small>نص صغير</small>
<mark>نص مميز بلون</mark>
<p>لدي بعض <del>الحلوة</del> <ins>الفاكهة</ins>.</p>
لقد وصلنا الان لنهاية درسنا اليوم عن شرح تنسيق النصوص والعناوين والفقرات ايضا في html يمكنك التطبيق الان على ما تعلمته ببعض الفكر المبدعة لتثبت المعلومات عندك واذا كان لديك اي استفسارات او اسئلة فيمكنك ترك تعليق هنا وسارد عليك في الحال اتمنى لك ان تكونوا قد استفدتم من مقالي.
