شرح عنصر <b> في HTML للمبتدئين
شرح عنصر <b> في HTML للمبتدئين
عند تعلم لغة HTML، ستجد العديد من العناصر التي تُستخدم لإنشاء محتوى صفحات الويب وتنظيمه. بعض هذه العناصر تكون بسيطة جدًا، لكنها مهمة لأنك ستستخدمها كثيرًا أثناء إنشاء صفحات الويب.
ومن هذه العناصر عنصر <b>، وهو عنصر بسيط يُستخدم لجعل النص يظهر بخط عريض. في هذا المقال سنتعرف على عنصر <b>، وطريقة كتابته، وكيفية استخدامه داخل النصوص والفقرات، بالإضافة إلى كيفية تنسيقه باستخدام CSS.
ما هو عنصر <b> في HTML؟
عنصر <b> هو أحد عناصر HTML التي يمكن استخدامها لجعل النص يظهر بخط عريض داخل صفحة الويب.
اسم العنصر يأتي من كلمة Bold، والتي تعني "عريض" أو "غامق" في تنسيق النصوص.
يُكتب عنصر <b> باستخدام وسم بداية ووسم نهاية، ويتم وضع النص الذي نريد جعله عريضًا بينهما.
مثال:
<b>Hello World</b>في هذا المثال، سيظهر النص:
Hello World
بخط عريض داخل الصفحة.
التركيب الأساسي لعنصر <b>
مثل العديد من عناصر HTML، يتكون عنصر <b> من جزأين:
<b>النص</b>الجزء الأول:
<b>هو وسم البداية.
أما الجزء الثاني:
</b>فهو وسم النهاية.
ويتم وضع النص بينهما.
على سبيل المثال:
<b>Welcome to my website</b>هنا سيظهر النص بالكامل بخط عريض.
من المهم كتابة وسم النهاية </b> حتى يعرف المتصفح أين ينتهي النص الذي نريد جعله عريضًا.
استخدام <b> داخل فقرة
يمكنك استخدام <b> داخل فقرة عادية لجعل كلمة أو جزء معين من النص عريضًا.
مثال:
<p>Hello, my name is <b>Hisham</b>.</p>في هذا المثال، ستكون كلمة Hisham فقط بخط عريض، بينما باقي الجملة ستظهر بالشكل العادي.
وهذا مفيد عندما تريد إبراز كلمة معينة داخل فقرة طويلة.
يمكنك أيضًا جعل أكثر من كلمة عريضة:
<p>I am learning <b>HTML and CSS</b>.</p>هنا سيظهر الجزء:
HTML and CSS
بخط عريض.
جعل جملة كاملة عريضة
ليس من الضروري استخدام <b> مع كلمة واحدة فقط، بل يمكنك استخدامه مع جملة كاملة.
مثال:
<p><b>Welcome to my website!</b></p>في هذه الحالة ستظهر الجملة كاملة بخط عريض.
وبالتالي، يمكنك تحديد الجزء الذي تريد أن يظهر بشكل عريض حسب احتياجك.
استخدام أكثر من عنصر <b>
يمكنك استخدام عنصر <b> أكثر من مرة داخل الصفحة.
مثال:
<p><b>HTML</b> is easy to learn.</p>
<p><b>CSS</b> is used to style websites.</p>في المثال السابق، تم استخدام <b> مرتين، مرة مع كلمة HTML ومرة مع كلمة CSS.
كل عنصر يعمل بشكل مستقل عن الآخر.
استخدام <b> مع CSS
يمكنك أيضًا استخدام CSS لتغيير شكل النص الموجود داخل عنصر <b>.
على سبيل المثال، إذا أردنا تغيير لون النص:
<b>Hello World</b>ثم نكتب في CSS:
b {
color: red;
}
سيصبح النص الموجود داخل <b> باللون الأحمر.
ويمكننا أيضًا تغيير حجم النص:
b {
font-size: 25px;
}وبذلك يصبح النص أكبر.
يمكننا الجمع بين أكثر من خاصية:
b {
color: blue;
font-size: 25px;
}هنا سيظهر النص باللون الأزرق وبحجم أكبر.
وهذا يوضح فكرة مهمة للمبتدئين: HTML يمكن أن يُستخدم لإنشاء المحتوى، بينما يمكن استخدام CSS لتغيير مظهر هذا المحتوى
مثال عملي كامل .
يمكننا إنشاء صفحة HTML بسيطة تحتوي على نصوص تستخدم عنصر <b>:
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
</head>
<body>
<h1>My Website</h1>
<p>My name is <b>Hisham</b>.</p>
<p>I am learning <b>HTML</b>.</p>
<p><b>Welcome to my website!</b></p>
</body>
</html>في هذا المثال استخدمنا <b> في أكثر من مكان.
في الفقرة الأولى جعلنا اسم Hisham عريضًا، وفي الفقرة الثانية جعلنا كلمة HTML عريضة، وفي الفقرة الثالثة جعلنا الجملة كاملة عريضة.
أخطاء شائعة عند استخدام <b>
من الأخطاء الشائعة التي قد يقع فيها المبتدئون نسيان وسم النهاية.
مثال غير صحيح:
<b>Hello Worldالأفضل كتابة:
<b>Hello World</b>ومن الأخطاء أيضًا وضع النص خارج العنصر بالخطأ:
<b></b>Hello Worldفي هذه الحالة لا يوجد نص داخل عنصر <b>، لذلك لن يستفيد النص من العنصر.
الصحيح:
<b>Hello World</b>كذلك يجب الانتباه إلى كتابة اسم العنصر بشكل صحيح، لأن HTML تعتمد على بناء محدد للعناصر.
هل يمكن وضع أكثر من كلمة داخل <b>؟
نعم، يمكنك وضع كلمة واحدة أو عدة كلمات أو حتى جملة كاملة داخل عنصر <b>.
مثال:
<b>This is a bold sentence.</b>ويمكنك أيضًا وضعه داخل فقرة:
<p>This is a <b>very important</b> word.</p>وهكذا يمكنك التحكم في الجزء الذي تريد جعله عريضًا.
الخلاصة
عنصر <b> هو عنصر بسيط جدًا في HTML، ولكنه مفيد عندما نريد جعل كلمة أو مجموعة من الكلمات أو جملة تظهر بخط عريض.
طريقة استخدامه بسيطة:
<b>Your Text</b>ويمكن استخدامه داخل الفقرات أو مع النصوص المختلفة في صفحة HTML.
كما يمكن استخدام CSS مع عنصر <b> لتغيير اللون والحجم وغيرها من خصائص المظهر.
إذا كنت في بداية تعلم HTML، فإن فهم العناصر البسيطة مثل <b> يساعدك على فهم طريقة بناء صفحات الويب والتعامل مع النصوص داخلها بشكل أفضل.
وفي النهاية، تذكر أن أفضل طريقة لتعلم HTML هي كتابة الأكواد وتجربتها بنفسك، ثم مشاهدة النتيجة في المتصفح.
🎯 اختبر نفسك الآن !!!!
تهانينا! لقد أنهيت هذا الدرس بنجاح. 🎉
لكن هل فهمت كل ما تعلمته بالفعل؟
لا تكتفِ بالقراءة، بل اختبر معلوماتك من خلال الاختبار التفاعلي الذي صممته خصيصًا لهذا الدرس ضمن سلسلة Hisham Academy.
تعليم
🧠 مميزات الاختبار:
أسئلة متنوعة تقيس مدى فهمك.
نتيجة فورية بعد الانتهاء.
تصميم بسيط وسريع يعمل على الهاتف والكمبيوتر.
أجهزةاتصالات
يساعدك على معرفة نقاط القوة والجوانب التي تحتاج إلى مراجعتها.
🔗 ابدأ الاختبار الآن:
https://hishamabdulrashid999.github.io/test_9/
أضغط هنا للبدء في الأختبار
📚 تابع الدرس التالي في سلسلة Hisham Academy ولا تنسَ حفظ المقال ومشاركته مع من يريد تعلم برمجة الويب من الصفر.
وأخبرني رأيك في التعليقات هل فعلاً أستفدت من هذا المقال
