في هذا الدرس سنتعلم كيف نكتب نصوصًا منظمة داخل صفحة HTML باستخدام الوسوم الخاصة بالنصوص.
1. وسوم العناوين (Headings)
لإنشاء عناوين مختلفة الأحجام داخل الصفحة، نستخدم الوسوم من <h1> إلى <h6>:
<h1>: أكبر عنوان (رئيسي).<h2>إلى<h6>: عناوين فرعية أصغر تدريجيًا.
مثال:
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>
2. وسم الفقرة (Paragraph)
لإنشاء فقرة نصية نستخدم وسم <p>.
مثال:
<p>هذا نص داخل فقرة.</p>
3. الانتقال إلى سطر جديد (Break)
لإجبار النص على الانتقال إلى سطر جديد بدون بدء فقرة جديدة نستخدم وسم <br>.
مثال:
<p>سطر أول<br>سطر ثاني</p>
4. إضافة خط فاصل (Horizontal Rule)
لإضافة خط أفقي يفصل بين الأقسام نستخدم وسم <hr>.
مثال:
<p>النص الأول</p>
<hr>
<p>النص الثاني</p>
5. تنسيقات بسيطة للنصوص
- نص عريض (Bold) باستخدام
<b>أو<strong>:
<b>هذا نص عريض</b>
- نص مائل (Italic) باستخدام
<i>أو<em>:
<i>هذا نص مائل</i>
- نص مشطوب (Line-through) باستخدام
<s>أو<del>:
<s>هذا نص مشطوب</s>
ملاحظة
- من الأفضل استخدام
<strong>بدلاً من<b>، و<em>بدلاً من<i>، لأنها تعطي معنى إضافيًا لمحركات البحث.
مثال عملي كامل
<!DOCTYPE html>
<html>
<head>
<title>درس النصوص</title>
</head>
<body>
<h1>مرحبا بك!</h1>
<p>هذا مثال على كتابة فقرة مع <strong>كلمات عريضة</strong> و <em>كلمات مائلة</em>.</p>
<hr>
<p>سطر أول<br>سطر ثاني بعد كسر السطر.</p>
</body>
</html>
الواجب العملي
- أنشئ صفحة HTML جديدة.
- أضف عنوان رئيسي مع عنوان فرعي وفقرتين.
- جرّب إضافة كسر سطر
<br>وخط فاصل<hr>. - جرّب استخدام التنسيقات
<strong>و<em>داخل الفقرات.
ماذا سنتعلم في الدرس القادم؟
في الدرس الثالث سنتعرف على كيفية إضافة الروابط (Links) باستخدام الوسم <a>!