اخر الاخبارالصفحة الرئسيةتعلمhtml

شرح ,paragraph, div, span في html

السلام عليكم ورحمة الله قبل البدء في الشرح نود ان نرحب بزوارنا الاعزاء ونشكركم جزيل الشكر على الثقة فينا ومتابعة ماننشره وفي هذا المقال سنقوم بتغطية 3 وسوم مهمة للغاية وهي وسم div ووسم paragraph ووسم span لننتقل الى الشرح.

شرح العنصر paragraph:

paragraph يتم اختصارها الى حرف p ,وظيفتها نفس معناها اي الفقرة

في الغالب تستخدم لفصل النص على النص المجاور له على سبيل المثال:

انظر الى الصور قبل اضافة paragraph.

انظر الى الصور بعد اضافة paragraph.

شرح العنصر div:

العنصر div هو عبارة عن حاوية عامة ليس له اي تاثير على المحتوى او التخطيط حتى يتم تنسيقه بطريقة ما باستخدام css ,يستخدم في الغالب لجمع العناصر المطلوب جمعها حسب نظرة المصمم الذي يعمل على المشروع.

على سبيل المثال:

نلاحظ في الصور ان div لا أثر على المحتوى شيئا ولكن باستخدام css يمكنك التاثير على div كما يمكنك عمل اشياء احترافية للغاية حسب نظرتك أنت لمحتواك, يمكننا ايضا اضافة عنوان او صورة او شيء اخر داخل div على سبيل المثال:

شرح العنصر span

العنصر span هو شبيه لحد كبير للعنصر div ولكن هناك اختلاف بينهم ,مثلا العنصر div عبارة عن حاوية على مستوى الكتلة اما العنصر span فهو عنصر مضمن دخل المحتوى على سبيل المثال:

لاحظ جيدا الاختلاف بين العنصرين قمنا بجمع جميع العناصر في الوسم div ثم قمنا بوضع جمل دخل span وهذه هي الطريقة الصحيحة الان سوف تتساءل وتقول لما لا اقوم بالعكس على سبيل المثال:

نلاحظ ان الكلام اصبح تحت بعضه البعض عند عرض الصفحة على المتصفح ,وتظهر بالشكل الغير مطلوب ,المشكلة ان العنصر div من الوسوم block اي لا يسمح لاخيه بالجلوس معه ولا يجلس مع اخيه ,اما عن العنصر span هو من نوع الوسوم inline هو يسمح لاخية بالجلوس معه ويجلس مع اخيه , وهنا نستنتج ان هذه الطريقة خاطئة ,الطريقة الاولى هي الصحيحة.

نستخدم span كوسيلة لاعطاء الشيء الذي بداخله ميزات غير الميزات الموجودة في الصفحة مثل تغير حجم النص او تغير لون النص او ميزة اخرى باستخدام css.

ملاحظة:

هناك حالات يسقط فيها تكليف العنصر span بالوظائف فمثلا اذا وجد وسم معين لعمل هذه الوظيفة نستغني على العنصر span.

وهنا نصل الى نهاية المقال لا تنسوا الدعاء لنا بالهداية والتوفيق وندعوكم للاعجاب بصفحتنا على الفيس بوك والسلام عليكم ورحمة الله.

الوسوم

مقالات ذات صلة

إغلاق
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock