العناوين والنصوص في Html

العناوين والنصوص <h?>

شرح للوسوم الأساسية للعناوين والنصوص

العناوين من H1 إلى H6 الفقرات النصية السطر الجديد الخط الأفقي تنسيقات النص الإضافية أمثلة تطبيقية تمرين عملي

العناوين من H1 إلى H6: هرمية واضحة للمحتوى

في HTML، نستخدم وسوم العناوين من <h1> إلى <h6> لإنشاء عناوين ذات مستويات مختلفة. وسوم العناوين هذه ضرورية لتنظيم المحتوى وتعزيز تجربة المستخدم وتحسين محركات البحث (SEO).

مثال على العناوين بمستوياتها المختلفة:

<h1>هذا عنوان رئيسي كبير (المستوى الأول)</h1>
<h2>هذا عنوان فرعي (المستوى الثاني)</h2>
<h3>هذا عنوان أصغر (المستوى الثالث)</h3>
<h4>هذا عنوان (المستوى الرابع)</h4>
<h5>هذا عنوان (المستوى الخامس)</h5>
<h6>هذا عنوان صغير (المستوى السادس)</h6>

النصائح المهمة لاستخدام العناوين:

1. يجب استخدام <h1> مرة واحدة فقط في الصفحة كعنوان رئيسي
2. الحفاظ على تسلسل منطقي للعناوين (لا تنتقل من h1 إلى h3 مباشرة)
3. استخدام العناوين لتنظيم المحتوى وليس فقط لتغيير حجم النص
4. جعل العناوين وصيفة للمحتوى الذي يليها

مثال لتسلسل صحيح للعناوين:

<h1>عنوان المقال الرئيسي</h1>
<h2>القسم الأول من المقال</h2>
<h3>فرع داخل القسم الأول</h3>
<h2>القسم الثاني من المقال</h2>

الفقرة النصية: <p> - أساس المحتوى النصي

وسم <p> يُستخدم لإنشاء فقرات نصية في HTML. يقوم المتصفح تلقائيًا بإضافة مسافة (هامش) قبل وبعد كل فقرة.

مثال بسيط للفقرات النصية:

<p>هذه فقرة نصية عادية. يمكن أن تحتوي على أي amount من النصوص والكلمات.</p>
<p>هذه فقرة نصية أخرى. لاحظ المسافة التي يضيفها المتصفح تلقائيًا بين الفقرات.</p>

مثال متقدم مع العناوين والفقرات:

<h1>مقال عن تعلم HTML</h1>
<p>HTML هي لغة ترميز تستخدم لإنشاء صفحات الويب.</p>

<h2>مزايا تعلم HTML</h2>
<p>تعلم HTML يمنحك القدرة على إنشاء مواقع الويب الخاصة بك.</p>
<p>كما أنه يمثل الخطوة الأولى في رحلة تعلم تطوير الويب.</p>

<h2>الوسوم الأساسية في HTML</h2>
<p>هناك العديد من الوسوم في HTML، each with its own purpose.</p>

لاحظ كيف أن كل فقرة تبدأ بوسم <p> وتنتهي بوسم </p>. هذه هي الطريقة الصحيحة لإنشاء الفقرات النصية.

السطر الجديد: <br> - كسر الأسطر بدون فقرة جديدة

وسم <br> يُستخدم لإدراج فواصل أسطر داخل النص. وهو من الوسوم الفارغة (لا تحتاج إلى وسم إغلاق في HTML5).

الفرق بين <p> و <br>:

<p> يُنشئ فقرة جديدة مع مسافات قبلها وبعدها، بينما <br> ينتقل فقط إلى السطر التالي دون إضافة مسافات.

مثال على استخدام <br>:

<p>
  هذا السطر الأول.<br>
  هذا السطر الثاني بعد كسر السطر.<br><br>
  سطر فارغ بيني وبين السطر السابق.<br>
  وهذا آخر سطر.
</p>

مثال عملي لعنوان وعنوان فرعي:

<h3>معلومات الاتصال</h3>
<p>
  الاسم: أحمد محمد<br>
  البريد الإلكتروني: ahmed@example.com<br>
  الهاتف: 0123456789
</p>

ملاحظة: لا تستخدم <br> repeatedly لإنشاء مسافات كبيرة بين العناصر. استخدم CSS للتحكم في المسافات.

الخط الأفقي: <hr> - فاصل موضوعي

وسم <hr> يُستخدم لإدراج خط أفقي فاصل بين أقسام المحتوى. وهو أيضًا من الوسوم الفارغة.

مثال على استخدام <hr>:

<h2>القسم الأول</h2>
<p>هذا محتوى القسم الأول من الصفحة.</p>

<hr>

<h2>القسم الثاني</h2>
<p>هذا محتوى القسم الثاني من الصفحة.</p>

<hr>

<h2>القسم الثالث</h2>
<p>هذا محتوى القسم الثالث من الصفحة.</p>

مثال متقدم مع استخدامات مختلفة للخط الأفقي:

<article>
  <h1>عنوان المقال الرئيسي</h1>
  <p>مقدمة المقال.</p>
  
  <hr>
  
  <h2>الجزء الأول من المقال</h2>
  <p>محتوى الجزء الأول.</p>
  
  <hr>
  
  <h2>الجزء الثاني من المقال</h2>
  <p>محتوى الجزء الثاني.</p>
  
  <hr>
  
  <h2>خاتمة المقال</h2>
  <p>الخاتمة والاستنتاجات.</p>
</article>

يُستخدم <hr> لفصل between different thematic sections of content. وهو أكثر من مجرد خط decorational، فهو يحمل meaning semantique.

تنسيقات النص الإضافية: جعل النص غامقًا ومائلًا وغير ذلك

بالإضافة إلى العناوين والفقرات، تقدم HTML وسومًا خاصة لتنسيق النص:

وسوم التنسيق الأساسية:

<p>
  هذا نص <strong>مهم جدًا</strong>.<br>
  هذا نص <em>مائل</em>.<br>
  هذا <mark>نص مميز</mark>.<br>
  هذا <small>نص صغير</small>.<br>
  هذا <del>نص محذوف</del>.<br>
  هذا <ins>نص مضاف</ins>.<br>
  هذا <sub>نص منخفض</sub> وهذا <sup>نص مرتفع</sup>.
</p>

مثال تطبيقي على استخدام وسوم التنسيق:

<h3>وصفة كعك الشوكولاتة</h3>
<p>
  <strong>المقادير:</strong><br>
  - 2 كوب دقيق<br>
  - 1 <sup>1</sup>/<sub>2</sub> كوب سكر<br>
  - 3 بيضات<br>
  - <em>رشة ملح</em><br>
</p>
<p>
  <mark>ملاحظة:</mark> يجب تسخين الفرن مسبقًا إلى 180 <sup>o</sup>C.
</p>

هذه الوسوم تساعد في إضافة emphasis ودلالات إضافية للنص، مما يحسن accessibility وسهولة القراءة.

أمثلة تطبيقية: دمج كل ما تعلمناه معًا

الآن لنطبق كل ما تعلمناه في مثال متكامل يوضح كيفية استخدام العناوين والفقرات ووسوم التنسيق معًا.

مثال 1: صفحة ويب بسيطة عن كتاب

<h1>العادات السبع للناس الأكثر فعالية</h1>
<h2>بقلم ستيفن كوفي</h2>

<hr>

<h3>ملخص الكتاب</h3>
<p>
  هذا الكتاب يُعد من أشهر الكتب في مجال تطوير الذات والقيادة. 
  يقدم الكاتب <strong>سبع عادات</strong> يمكن أن transform حياة الأشخاص 
  وتجعلهم أكثر فعالية في حياتهم الشخصية والمهنية.
</p>

<h3>العادات الأساسية</h3>
<p>
  <strong>العادة الأولى: كن proactive</strong><br>
  التركيز على الدائرة التي يمكنك التأثير فيها بدلاً من الانشغال بما هو beyond سيطرتك.
</p>

<p>
  <strong>العادة الثانية: ابدأ والنهاية في ذهنك</strong><br>
  حدد أهدافك وvision لحياتك قبل أن تبدأ في العمل towards تحقيقها.
</p>

<hr>

<p><small>جميع الحقوق محفوظة للناشر الأصلي</small></p>

مثال 2: صفحة شخصية بسيطة

<h1>السيرة الذاتية</h1>
<h2>أحمد محمد</h2>

<hr>

<h3>معلومات شخصية</h3>
<p>
  البريد الإلكتروني: ahmed@example.com<br>
  الهاتف: 0123456789<br>
  العنوان: القاهرة، مصر
</p>

<h3>المؤهلات العلمية</h3>
<p>
  <strong>بكالوريوس في علوم الحاسب</strong><br>
  جامعة القاهرة - 2015-2019<br>
  التقدير: جيد جدًا
</p>

<h3>المهارات</h3>
<p>
  - HTML & CSS<br>
  - JavaScript<br>
  - React<br>
  - Node.js
</p>

<hr>

<p><em>آخر تحديث: يناير 2023</em></p>

تمرين عملي: أنشئ صفحتك الأولى بالعناوين والنصوص

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

خطوات التمرين:

1. افتح محرر النصوص الخاص بك وأنشئ ملفًا جديدًا.
2. ابدأ ببنية HTML الأساسية (html, head, body).
3. inside الجزء body، أنشئ المحتوى التالي:

<h1>مدونتي الشخصية</h1>
<h2>مرحبًا بكم في مدونتي</h2>

<hr>

<h3>عن المدونة</h3>
<p>
  هذه المدونة شخصية أكتب فيها about مواضيع تهمني في مجالات التكنولوجيا، 
  البرمجة، وتطوير الذات. أشارك فيها تجاربي وآرائي وخبراتي.
</p>

<h3>أحدث المقالات</h3>

<h4>كيفية تعلم البرمجة من الصفر</h4>
<p>
  في هذا المقال، أشارك نصائح واستراتيجيات لأي شخص يريد بدء رحلة تعلم البرمجة 
  بدون خبرة مسبقة. سأحدثك عن المصادر والأدوات والخطوات التي يمكنك اتباعها.
</p>

<h4>أهمية إدارة الوقت للعاملين في المجال الرقمي</h4>
<p>
  إدارة الوقت من المهارات الأساسية لأي شخص يعمل في المجال الرقمي. 
  في هذا المقال، أستعرض بعض التقنيات والأدوات التي تساعد على تحسين إنتاجيتك.
</p>

<hr>

<p>
  <small>جميع الحقوق محفوظة © 2023</small>
</p>

4. احفظ الملف باسم blog.html.
5. افتح الملف في المتصفح وشاهد النتيجة.
6. قم بالتعديلات التي ترغب فيها وأضف محتوى من عندك.

تحدي إضافي (اختياري):

حاول إنشاء صفحة سيرة ذاتية كاملة لك، تتضمن:

• عنوان رئيسي باسمك
• sections للمعلومات الشخصية، التعليم، الخبرات، والمهارات
• استخدم جميع وسوم التنسيق التي تعلمتها
• أضف خطًا أفقيًا between الأقسام المختلفة

تهانينا! لقد أكملت الدرس الثاني بنجاح. الآن أصبحت تعرف كيفية إنشاء العناوين والفقرات وإضافة فواصل الأسطر والخطوط الأفقية في HTML. في الدروس القادمة، سنتعلم المزيد من الوسوم لإثراء صفحاتنا بمحتوى أكثر تنوعًا.

تعلم Html