جاري التحميل...
جاري التحميل...
وسوم HTML وكيفية كتابة النصوص
في الدرس السابق تعلمنا أن HTML مكون من "علامات". لكن في الواقع، العلامة وحدها ليست العنصر. العنصر يتكون من ثلاثة أجزاء:
بعض العناصر لا تحتوي على محتوى وتسمى "عناصر فارغة" مثل:
💡 تشبيه بسيط:
العلامة مثل الأقواس ( )، والمحتوى هو ما بداخلها. لكن بعض العناصر مثل <br> و<img> لا تحتاج محتوى بين الأقواس - إنها مثل ( ) فارغة.
هناك العديد من العلامات للعمل مع النص. إليك أهمها:
HTML يوفر 6 مستويات من العناوين من <h1> (الأكبر) إلى <h6> (الأصغر):
💡 قاعدة مهمة:
لا تقفز من <h1> مباشرة إلى <h3>! العناوين يجب أن تكون تسلسلية. <h1> ثم <h2> ثم <h3> وهكذا. تخطي المستويات خطأ شائع.
لفقرة نصية عادية، نستخدم علامة <p>:
الفرق بين <strong> و<b>: الأولى تشير إلى الأهمية الدلالية للنص، بينما الثانية فقط تعطي عريضاً مرئياً. يُفضل استخدام <strong> لأسباب تتعلق بالإمكانية.
HTML يوفر ثلاثة أنواع من القوائم:
تُستخدم عندما لا يكون ترتيب العناصر مهماً:
تُستخدم عندما يكون الترتيب مهماً:
تُستخدم لعرض أزواج من المصطلحات والتعريفات:
يمكنك وضع قائمة داخل قائمة أخرى:
HTML يوفر عدة علامات مفيدة أخرى لتنسيق النص وهيكلته.
دعنا نرى كيف نستخدم كل ما تعلمناه في صفحة مقال حقيقية:
عندما يقرأ المتصفح علامات النص، يحدث ما يلي:
<h1> إلى نص كبير (عادة 32px أو أكثر) بوزن عريض.<p> إلى نص في فقرة منفصلة بهامش سفلي.<ul> و<ol> إلى قوائم نقطية أو مرقمة تلقائياً.<strong> إلى نص عريض.<code> إلى نص بخط خاص (Monospace) وخلفية رمادية.💡 هل تعلم؟:
المتصفح يعطي كل علامة أبعاداً افتراضية. مثلاً، <h1> تحصل على font-size: 2em وmargin: 0.67em 0. يمكنك رؤية هذه القيم في أدوات المطورين (F12).
<h1> يتبعه مباشرة <h3> بدون <h2>. هذا يضعف هيكل الصفحة ويسبب مشاكل SEO والإمكانية.<h3> لأنك تريد نصاً أصغر. العناوين فقط للهيكل الدلالي، التنسيق دور CSS.<p> داخل <p> آخر. هذا غير صالح في HTML.<br> لإنشاء مسافة: استخدام <br><br><br> لإنشاء مسافة بين الفقرات. استخدم هامش CSS بدلاً من ذلك.<h1> إلى <h6> - لا تخطي المستويات<p><strong> | مائل: <em><ul> (غير مرقمة) | <ol> (مرقمة) | <dl> (وصفية)<br> و<hr> و<img> (بدون علامة إغلاق)كم عدد مستويات العناوين في HTML؟
ما الفرق بين <strong>strong</strong> و<strong>b</strong>؟
أنشئ صفحة HTML تحتوي على مقال مكتمل بـ: 1. عنوان رئيسي <code><h1></code>، 2. فقرة مقدمة، 3. عنوان فرعي <code><h2></code> مع فقرة، 4. قائمة مرقمة بالخطوات، 5. قائمة غير مرقمة، 6. اقتباس، 7. خط أفقي، 8. فقرة ختامية بنص عريض ومائل.
الحل:
<h1>مقدمة في HTML</h1>
<p>HTML هي لغة الويب الأساسية. تُستخدم لبناء صفحات الويب.</p>
<h2>أنواع العناصر</h2>
<p>هناك عدة أنواع من العناصر في HTML:</p>
<h3>العناوين</h3>
<p>يوجد 6 مستويات من العناوين من h1 إلى h6.</p>
<h3>القوائم</h3>
<ul>
<li>العناصر غير المرقمة تستخدم ul</li>
<li>العناصر المرقمة تستخدم ol</li>
</ul>
<h3>النص العريض والمائل</h3>
<p>يمكنك استخدام <strong>strong</strong> للنص العريض و <em>em</em> للنص المائل.</p>
<blockquote>
<p>هذا اقتباس من مصدر موثوق.</p>
</blockquote>
<hr>
<p>هذا مثال على <code>النص المنسق</code> внутри فقرة.</p>أنشئ صفحة ملف شخصي تتضمن:
<h1><p><ul><ol>💡 استخدم جميع العلامات التي تعلمتها في هذا الدرس. تذكر استخدام العناوين بالترتيب (h1، h2، h3) دون تخطي المستويات.
العناوين:
<h1> إلى <h6> - ستة مستويات عنوان<h1> هو الأكبر، <h6> هو الأصغرعلامات النص:
<p> - فقرة<strong> - عريض (أهمية دلالية)<em> - مائل (تأكيد)<code> - كود مضمّن<blockquote> - اقتباس كتلي<pre> - نص مُنسّق مسبقاًالقوائم:
<ul> - قائمة غير مرقمة<ol> - قائمة مرقمة<li> - عنصر قائمة<dl> - قائمة وصفيةالعناصر الفارغة:
<br> - سطر جديد<hr> - خط أفقي<img> - صورة (بدون علامة إغلاق)<!-- العناوين -->
<h1>العنوان الرئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان قسم</h3>
<!-- النص -->
<p>نص الفقرة</p>
<strong>نص عريض</strong>
<em>نص مائل</em>
<code>كود مضمّن</code>
<!-- القوائم -->
<ul>
<li>عنصر 1</li>
<li>عنصر 2</li>
</ul>
<ol>
<li>الأول</li>
<li>الثاني</li>
</ol>