Part04 – التنسيق النصي في HTML – برمجة FSWD – HTML

🔹 1. عناصر التوكيد: <strong>, <em>

✅ <strong>

• تستخدم لتمييز النص المهم جدًا.

• المعنى: النص مهم دلاليًا وليس فقط شكله.

• بيظهر بشكل غامق (Bold) غالبًا.

✅ <em>

• معناها “Emphasis” أو “تشديد على الكلمة”.

• تستخدم لتأكيد الكلمة أو الجملة بشكل مائل.

• لها معنى عند محركات البحث وبرامج قراءة الشاشة.

<p>هذا النص <strong>مهم جدًا</strong> ويجب الانتباه له.</p>
<p>أحب <em>البرمجة</em> لأنها ممتعة ومفيدة.</p>

2. الخطوط العريضة والمائلة: <b>, <i>

✅ <b>

• بتخلي النص عريض (Bold) لكن بدون دلالة معنوية.

✅ <i>

• بتخلي النص مائل (Italic) لكن برضه بدون معنى دلالي.

• تستخدم أحيانًا لأسماء الكتب أو الكلمات الأجنبية

<p>تعلم <b>HTML</b> خطوة مهمة لأي مبرمج.</p>
<p>كلمة <i>Website</i> معناها موقع إلكتروني.</p>

3. النص الممسوح والمضاف: <del>, <ins>

✅ <del>

• تعني نص تم حذفه أو لم يعد صالحًا.

• بيظهر مشطوب عليه (line-through).

✅ <ins>

• تعني نص مضاف حديثًا.

• بيظهر غالبًا مسطر (underline).

<p>سعر المنتج القديم كان <del>200 جنيه</del>.</p>
<p>السعر الجديد هو <ins>150 جنيه فقط</ins>!</p>

4. الاقتباسات: <blockquote>, <q>

✅ <blockquote>

• تستخدم لاقتباس نص طويل من مصدر خارجي.

• بيتم عرضه بمسافة بادئة (Indented) تلقائيًا.

✅ <q>

• تستخدم لاقتباس قصير داخل سطر.

• المتصفح بيحط علامات اقتباس “” تلقائيًا.

<blockquote>
  النجاح لا يأتي صدفة، بل هو نتيجة للإصرار والعمل الجاد.
</blockquote>

<p>كما قال أحد الحكماء: <q>من جد وجد، ومن زرع حصد.</q></p>

5. الكود البرمجي: <code>, <pre>

✅ <code>

• لعرض كود برمجي أو أوامر في سطر عادي.

• بيستخدم خط أحادي العرض.

✅ <pre>

• لعرض نص كما هو مكتوب، مع الحفاظ على الفراغات والأسطر.

• مهم جدًا لعرض كود منسق.

<p>استخدم الأمر التالي: <code>npm install</code></p>

<pre>
function sayHello() {
  console.log("Hello, World!");
}
</pre>

فيديو مثال كامل يضم كل العناصر دي

ملخص سريع

إيه هو < في HTML؟

الرمز < هو اختصار لكلمة “less than”، يعني علامة أصغر من <
لكن مكتوب بالطريقة الخاصة بـ HTML اللي اسمها: HTML Entities

🔸 ليه بنكتب < كده بدل ما نكتبها عادي؟

في HTML، علامة < هي بداية أي وسم (Tag)
يعني لما تكتب <p>، المتصفح بيفهم إن ده وسم فقرة.
فلو كتبت < كجزء من النص العادي، المتصفح هيحاول يفسره كوسم وممكن يحصل أخطاء في الصفحة.

علشان كده، بنستخدم رموز بديلة خاصة بتبدأ بـ & وتنتهي بـ ;
ودي اسمها HTML Entities.

الرمز < بيمثل إيه؟

<p>علامة أصغر من تكتب كده: &lt;</p>

علامة أصغر من تكتب كده: <

<p>5 &lt; 10</p>
<p>10 &gt; 5</p>
<p>استخدم &quot;علامات تنصيص&quot; كده</p>
<p>علامة &amp; معناها "و"</p>

5 < 10
10 > 5
استخدم "علامات تنصيص" كده
علامة & معناها "و"