العناوين والفقرات وتنسيق النص
نكتب نصوص الصفحة بالوسم المناسب لمعناها: عنوان، أو فقرة، أو كلمة مهمة. ⏱ نحو 20 دقيقة.
- ترتّب العناوين من
h1إلىh6حسب الأهمية. - تكتب الفقرات وتستخدم
brوhrفي مكانهما. - تنسّق النص بـ
strongوemوmarkوغيرها. - تكتب الرموز الخاصة مثل &
lt; و ©.
١العناوين: ستة مستويات
لعناوين الصفحة ستة وسوم: <h1> للعنوان الأهم، ثم <h2> للأقسام، ثم <h3> للأقسام الفرعية… حتى <h6>.
<h1>دليل الطالب</h1><h2>التسجيل</h2><h3>الوثائق المطلوبة</h3><h4>صورة الهوية</h4><h5>ملاحظة</h5><h6>آخر تحديث</h6>
- عنوان
<h1>واحد في الصفحة: هو موضوعها. - لا تقفز المستويات: بعد
<h2>يأتي<h3>لا<h5>. - نختار العنوان حسب أهميته لا حسب حجمه؛ الحجم نغيّره لاحقًا بـ
CSS. ومحركات البحث وقارئات الشاشة تعتمد على هذا الترتيب.
٢الفقرات، والمسافات التي تختفي
الفقرة <p> نص يبدأ في سطر جديد وبعده مسافة. لكن انتبه: المتصفح يتجاهل الأسطر الجديدة والمسافات الكثيرة التي تكتبها في الكود، ويحوّلها إلى مسافة واحدة:
<p>السطر الأولالسطر الثاني بعد مسافات كثيرة</p><p>السطر الأول<br>السطر الثاني</p><hr><p>فقرة بعد الخط الفاصل.</p>
| الوسم | وظيفته |
|---|---|
<p> | فقرة نص. |
<br> | سطر جديد داخل الفقرة نفسها، مثل أسطر العنوان البريدي أو الشعر. وسم مفرد بلا إغلاق. |
<hr> | خط أفقي يفصل بين موضوعين. وسم مفرد أيضًا. |
٣تنسيق النص داخل الفقرة
<p>هذه كلمة <strong>مهمة جدًّا</strong> وهذه <em>مؤكدة</em>.</p><p>ابحث عن <mark>الكلمة المظللة</mark> في النص.</p><p>السعر <del>100</del> <ins>80</ins> ريالًا.</p><p>الماء H<sub>2</sub>O والمساحة 5 م<sup>2</sup></p><p><small>جميع الحقوق محفوظة</small></p>
| الوسم | المعنى | يظهر عادة |
|---|---|---|
<strong> | نص مهم | عريض |
<em> | نص مؤكد (نبرة) | مائل |
<mark> | نص مظلل للانتباه | بخلفية صفراء |
<del> و <ins> | نص محذوف ونص مضاف | مشطوب، وتحته خط |
<sub> و <sup> | نص سفلي وعلوي | صغير أسفل السطر أو أعلاه |
<small> | ملاحظات جانبية وحقوق | أصغر |
قد ترى <b> و <i> أيضًا: يعطيان الشكل نفسه (عريض ومائل) لكن بلا معنى. استخدم <strong> و <em> عندما تقصد الأهمية والتأكيد.
٤الرموز الخاصة
كيف تكتب علامة < في صفحتك والمتصفح يظنها بداية وسم؟ نستخدم رموزًا خاصة تبدأ بـ & وتنتهي بـ ;:
<p>الوسم <p> للفقرات.</p><p>© 2025 مقهى بُنّ</p><p>القهوة & الحلى</p>
| تكتب | فيظهر |
|---|---|
< | < |
> | > |
& | & |
© | © |
| مسافة لا تنكسر (لا ينفصل ما حولها في سطرين) |
٥الاقتباس
للاقتباس الطويل من مصدر نستخدم <blockquote>، فيظهر بإزاحة عن الحافة:
<p>قال أحد الحكماء:</p><blockquote>العلم في الصغر كالنقش على الحجر.</blockquote>
توقّع وتحقّق
كم عنوان h1 يُنصح به في الصفحة؟
كتبت فقرة على ثلاثة أسطر في الكود. كيف تظهر؟
أي وسم يعني «نص مهم»؟
strong للأهمية.كيف تكتب العلامة < لتظهر في الصفحة؟
lt = less than.الخلاصة
h1واحد للصفحة، ثمh2للأقسام، ولا نقفز المستويات.- المتصفح يتجاهل الأسطر والمسافات الزائدة؛
brلسطر جديد وhrلفاصل. strongللأهمية، وemللتأكيد، وmarkللتظليل.- الرموز الخاصة تبدأ بـ & وتنتهي بـ ; مثل &
lt; و ©.
تحدٍّ برمجي: خبر في صحيفة المدرسة
سهلاكتب صفحة خبر عن «يوم المهنة» في الكلية: عنوان رئيسي، وقسمان بعنوانين فرعيين، وفقرات، مع تنسيق الكلمات المهمة.
- عنوان h1 واحد فقط.
- عنوانان فرعيان h2 على الأقل.
- ثلاث فقرات p على الأقل.
- كلمة مهمة داخل strong، وكلمة مظللة داخل mark.
- سطر أخير صغير فيه رمز الحقوق ©.
👀 اعرض شكل الناتج المطلوب
- عنوان h1 واحد فقط وفيه نص.
- عنوانان h2 على الأقل.
- ثلاث فقرات p على الأقل فيها نص.
- كلمة داخل strong، وأخرى داخل mark.
- رمز الحقوق © في الصفحة.
💡 تلميح 1
💡 تلميح 2
حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
<h1>يوم المهنة في الكلية</h1><p>أقامت الكلية <strong>يوم المهنة</strong> بمشاركة عشرين شركة.</p><h2>الشركات المشاركة</h2><p>شاركت شركات في <mark>البرمجة</mark> والشبكات والأمن السيبراني.</p><h2>المقابلات</h2><p>أجرى الطلاب مقابلات قصيرة، وقدّموا سيرهم الذاتية.</p><p><small>© 2025 صحيفة الكلية</small></p>