المشاركات

عرض المشاركات من نوفمبر, ٢٠١٣

سر النجاح في التدوين

صورة
الكثير يبحث عن نجاح لموقعة او مدونتة ولكن الحاجز الاساسي يقف بينه وبين الزوار وهذا قد يرجع لعده اسباب سوف اسرد عليك اهم ثلاث اسباب قد يفتقدها البعض أولها وهيا كتابة محتوي جيد لمقالاتك علي الويب (( المعظم يظن ان جميع مقالاته تكتب بشكل جيد )) فما رأيك ان تضع نفسك في مكان الزائر فلـنبدأ بك اولآ عندما تريد البحث عن موضوع معين فـما الكلمات التي تخطر في بالك كي تكتبها في محرك البحث حتي يتم البحث عنها ( إذآ فـعليك اولآ قبل كتابة الموضوع الذي سوف تضعه في مدونتك ان تكون في مكان الزائر وهوا يبحث عن الموضوع الذي كتبته فما هوا الذي سيخط في باله كي يكتبه علي محرك البحث ) إذآ انتهينا من فكرة العنوان نـدخل الي المــحتوي ثانيآ عليك ان يكون محتوي مقالاتك منسق جيدآ وان يكون المحتوي كامل ولاينقصه شئ ( ايضآ ضع نفسك مكان الزائر الذي يبحث عن ما تكتبة ماذا يريد هذا الزائر ان يري او يقرأ في مقالتك ) وعليك في هذه الحاله عمل محتوي جيد للموضوع حتي يلفت انتباه الزائر الشئ الثالث والاخير وهوا الانتباه لتعليقات الزوار او المتابعين ويجب ان تأخذها بعين الاعتبار وان تكون علي تواصل دائم معهم ففي هذه

خطوات نجاح المدونين

صورة
أشياء يجب ان تتعلمها في قبل انشاء المدونة وبعد انشاء المدونة الشئ الاول الذي يجب علي الجميع معرفته هوا إذا كان هدفك من انشاء المدونة هوا جني الارباح فكن علي يقين ان مدونتك ستفشل ولــكن العكس صحيح اذا كان هدفك من انشاء المدونة هوا تقديم ما تعرفة والنجاح فكن علي يقين انك ستنجح وسوف تجني اموال اكثر من التي تحلم بها الشئ الثاني اذا انئت موقع او منتدي كي تكون مثل شخص اخر في هذه الحالة سوف تفشل ولكنك اذا انشئت المدونة كي تقم ما تحبة وما تعرفة في هذه الحالة سوف تكون مدونتك ناجحة وانت سوف تكون مثال للمدونين الشئ الثالث إذا كانت فكرة مدونتك قائمة علي القص واللصق في هذه الحالة لن تنجح والعكس ايضآ صحيح يجب ان يكون محتوي الموقع بأكملة من مجودك الشخصي الشئ الرابع اذا كانت مدونتك تشبه البحر فكن علي يقين انه لن يأتي اليها عدد كافي من الزوار (( تشبه البحر اقصد بها متعدده المجالات ولا يوجد لها مجال محدد )) والعكس صحيح في حاله انشائك لمدونة وقد تم اختيار تخصص ومجال للمدونة ففي هذه الحاله المدونة ستكون ناجه

ما هوا الفرق بين ادسنس و حسوب

صورة
الجميع يسأل ما هوا الفرق بين ادسنس وحسوف لذا قررت عمل هذه المقاله حتي يعلم الجميع ما هوا الفرق بين كل من ادسنس وحسوب جوجل ادسنس تعتبر اكبر شركة اعلانات علي الانترنت وقد حققت نجاحآ كبيرآ جدآ في جميع دول العالم ولكن لديها شروط قوية وصارمة علي من يحمل حساب ادسنس اما بالنسبة لشركة حسوب فيها ايضآ من اكبر الشركات الاعلانية في عالم الانتر نت وقد حققت ايضآ نجاحآ زاهيآ في عالم الانترنت لديها ايضآ شروط قوية لمن يحمل حساب حسوب يعتبر ادسنس افضل من حسوب في حاله الاعلانات حيث ان ادسنس يحتسب للناشرين ارباحهم علي ظهور الاعلان والضغط عليه علي العكس من شركة حسوب فيها تحتسب ارباح الزائرين في حالة الضغط علي الاعلانات وتعتبر حسوب افضل من ادسنس في حاله الدعم الفني والاستفسارات :- يوجد لدي حسوب فريق قوي جدآ من العملاء يتميزون بالرد علي استفسارات جميع عملائهم بسرعه علي العكس من جوجل ادسنس ترد علي بعض العملاء فقط والبعض الاخر لا وتتميز حسوب ايضآ عن جوجل ادسنس في حالة انه من المستحيل ان تجد اعلان اباحي او مخالف علي موقعك علي العكس من جوجل ادسنس فمن الممكن ان تري اعلانات اباحية علي مدونتك او موقعك ا

اضافة المشاركات الشائعة بتقنية الـ jquery والـ css

صورة
اضافة اكثر من رائعة يبحث عنها الكثير من المدونين وهيا اضافة المشاركات الشائعة بتقنة الـ css والـ Jquery لا تفوتك Recent Posts Widget كــود الاضافة "recent-posts" > "http://24work.blogspot.com/" rel= "dofollow" rel="nofollow" target= "_blank" title= "My Blogger Tricks" > "My Blogger Tricks" border= "0" src= "https://bitly.com/24workpng1" style= "position: fixed; bottom: 10%; right: 0%; top: 0px;" /> "http://24work.blogspot.com/" rel= "dofollow" rel="nofollow" target= "_blank" title= "All Blogger Tricks" > "All Blogger Tricks" border= "0" src= "https://bitly.com/24workpng1" style= "position: fixed; bottom: 10%; right: 0%;" /> "http://24work.blogspot.com/" rel= "dofollow" rel="nofollow" target= "_blank" title= "All Blo

مجموعه استيلات متنوعة للفوتوشوب - styles

صورة
مجموعة من الاستيلات المتنوعة والممسزه للفوتوشوب حــصريآ علي مدونة الــعالمي يمكنك الان معاينتهم وتحميلهم المجموعة الاولي تحميل المجموعة الثانية للتحميل اضغط هنا المجموعة الثالثة للتحميل اضغط هنا المجموعة الرابعة للتحميل اضغط هنا المجموعة الخامسة للتحميل اضغط هنا

ايقونات للفوتوشوب mmi flat icons 3

صورة
المجموعه الثالثة من افضل الايقونات للفوتوشوب الان بوسعكم تحميلها للتحميل اضغط هنا

ايقونات للفوتوشوب MMi flat icons 2

صورة
المجموعة الثانية من مجموعه الايقونات المميزة تحت عنوان MMi flat icons الان جاهزة للتحميل  للتحميل اضغط هنا

تشكيلة ايقونات علي للفوتوشوب icons

صورة
اضخم واكبر تشكيله ايقون علي شكل ايقونات ios لن ولم تجدها علي اي موقع اخر الان اليك الصور وروابط التحميل التشكيلة الاولي للتحميل اضغط هنا المجموعة الثانية للتحميل اضغط هنا  المجموعة الثالثة للتحميل اضغط هنا

أيقونات social media في ثوبها الجديد

صورة
اليكم احدث ايقونات مواقع التواصل الاجتماعي في ثوبها الجديد نــأتي الان للتحميل للتحميل اضغط هنا

ايقونات مواقع التواصل الاجتماعي MMi flat icons

صورة
اليكم الان افضل واجمل واحدث مجموعه ايقونات لجميع مواقع التواصل الاجتماعي لن تراها في اي موقع اخر للتحميل إضغط هنا

تحميل ايقونات الاندرويد للفوتوشوب - Android Dialog Icons

صورة
السلام عليكم ورحمة الله وبركاته اقدم لكم اليوم المجموعه الاكثر من رائعة لأيقونات الاندرويد تحت عنوان Android Dialog Icons تحتوي علي جميع الايقونات التي تخص بالاندرويد والتي قد يحتاجها الكثير من المصممين وهيا بحجم 16 ميجا واليكم الان صورة من هذه الايقونات  للتحميل أضغط هنا

مجموعة ايقونات للفوتوشوب icons

صورة
اليوم اقدم لكم مجموعه من الايقونات المهمه التي قد يحتاجها اي مصمم او مدون وهذه الايقونات لا غني عنها في معظ التصمميات للتحميل اضغط هنا

شرح كيفية معرفة Post Id Number

صورة
سأشرح لكم الان كيفية معرفة الـ id الخاص بكل تدوينة حيث ان لكل تدوينة Id مختلف عن الاخري والان سوف اشرح لكم كيفية معرفته أولآ سوف تقوم بالذهاب الي لوحة التحكم الخــاصة بمدونتك ومن ثم إختيار المشاركات ومن ثم بعد الدخول الي المشاركات سوف تختار اي واحد من القالات التي انت تريد معرفة الـ Id الخاص بها  وتضغط علي تـحرير ومن بعد الضغط علي تحرير سوف تذهب الي صفحة التدوينة وستجد في الاعلي كود كـهذا فــهذا هوا ما يسمي بالــ Id الخاص بالمقال او رقم المقال التعريفي (( لا تنسي اذا واجهتك اي مشكله اترك ردك في تعليق )) وإذا اعجبك الموضوع لا تبخل علينا بردودك المشجعة

شرح كيفية اضافة زر مشاركة الفيس بوك في المدونة

صورة
السلام عليكم ورحمة الله وبركاته ,, مرحبآ بكم زوار مدونة العالمي اليوم سوف اشرح لكم كيفية اضافة زر المشاركه  للتدوينات عبر الفيسبوك كل ما عليك هوا اتباع تلك الخطوات أولآ قم بالذهاب الي القاب الخاص بك ومن ثم اضغط علي تحرير HTML وقم بالبحث عن  <data:post.body/> ومن ثم قم بإضافة هذا الكود اعلاه أو اسفلة <div class="facebook-share"> <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='BUTTON-TYPE'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/> </div> ومبروك عليك الاضافة لاتنسي اذا اعجبك الموضوع ,, لاتبخل علينا بالتعليقات وإذا واجهتك اية مشاكل كل ما عليك هوا اضافة تعليق  وسوف ارد عليك في الفور

افضل واجمل قالب بلوجر تعليمي

صورة
السلام عليكم ورحمو الله وبركاته ,, مرحبآ بكم زوار مدونة العالمي اليوم سوف اقدم لكم قالب من اجمل وافضل القوالب التي يمكن ان تشاهدها ويعتبر هذا القالب من القوالب المميزة علي الأطلاق حيث يوفر لك سليدر شو رائع في بداية وعرض الموضوعات بطريقة رائعة بالأضافة للأمكانية القالب للتجاوب مع الشاشات الأصغر وهو ما يضيف للقالب روعة وجمال مــعاينة القـالب تـحميل القالب التعديل علي القالب بعد تركيب القالب علي مدونتك قم بالدخول لأدوات مدونتك وقم بفتح أداة Feature Top Full Width وضع الكود التالي بها بعد التعديل عليه  <h2 class="featuredi"><a>Feature Update<a></a></a></h2><script src='/feeds/posts/summary/-/بلوجر?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentthumbs&amp;' type='text/javascript'/> </div> <div class='clears'/></script> قم بأستبدال كلمة "بلوجر" بأسم التسمية التي تريد أظهارها في بداية المدونة بعد ذلك قم بفتح أداة Feature Sid

احدث قالب بلوجر - قالب العالمي نسخة 5

صورة
السلام عليكم ورحمة الله وبركات اليوم سوف اقدم لكم الاصدار الخامس من قالب العالمي للمعلوميات فهذا القالب كان وورد بريس ومن ثم تم تحويله الي بلوجر والقالب يتميز بالكثير من المميزات منها اماكن لعرض اعلانات ادسنس متوافق مع جميع الاجهزة متوافق مع جميع المتصفحات يوجد به عمودين مساحة واسه لعرض التدوينة والكثير من المميزات يمكنك مـعاينة القالب من هنا او تحميل القالب  من هنا في حالة واجهتك اية مشاكل فقط قم بإضافة تعليق وسوف ارد عليك فورآآ

تـصميم لوجو منتدي مصر الحره

صورة
تم تصميم هذا اللوجو بواسطة برنامج adobe illasturator  لـطلب مثل هذا اللوجر مـجانآ قم بالضغط هنا

اضافة اداة اخر التعليقات بشكل إحنرافي لمدونتك

صورة
إضافة أداة آخر التعليقات بشكل احترافي لمدونتك بطريقة سهلة للغاية ومضمونة 100% بإذن الله والطريقة من خلال موقع way2blogging تابع معي الشرح 1-  انقر هنا  للدخول إلى موقع الإضافة 2- املأ نموذج الإضافة كالتالي 3- اضغط على زر add to blogger اضغط على الصورة لمشاهدتها بالحجم الطبيعي 4-ستفتح لك نافذة جديدة، اختر منها اسم الإضافة، ثم اضغط على إضافة عنصر واجهة المستخدم المصدر:- نسائم الحق :)

خطوات سقوط صفحات الفيس بوك

صورة
اليوم سوف نتابع معـآ اهم الاسباب التي تؤدي الي سقوط صفحات الفيس بوك بمعني اخر فرار المعجبين من الصفحة وذلك لعده اسباب منها ان ادمن الصفحة يفكر في الربح من صفحتة علي الفيس ويعيد التفكير فيتوصل الي وضع روابط خارجيه في صفحته التي تحتوي علي عدد كبير من المعجبين وذلك كي يجني نسبة ارباح من خلال ضغط الاعضاء علي هذه الروابط ,, ولكنه اذا فكر بعض الشئ سيعلم ان معظم مستخدمي الفيس بوك يفرون من الصفحات التي يتم وضع فيها روابط خارجيه لــذا اذا فكر  احدآ في الربح عن طريق صفحات الفيس بوك وعن طريق وضع روابط خارجيه في صفحته كل ما عليه هوا الاتي وضع الروابط الخارجيه التي تتحدث عن مواضيع تهتم بما يتم نشره في صفحتك علي الفيس بوك فعلي سبيل المثال اذا كانت صفحتك تتحدث عن الرومانسيه فـكل ما عليك في هذا الوقت هوا وضع روابط خارجيه تتحدث عن نفس الشئ وهو الرومانسية مما سيجعل المعجبين بصفحتك علي الفيس بوك من زيارة تلك الروابط الخارجيه اي وضع مواضيع تشبه مواضيع اهتمام صفحتك علي الفيس بوك وهذه هيا افضل طريقة لذلك :)

4 أشياء مشتركة بين أنجح رواد الأعمال يجب أن نتعلمهم

صورة
هل لديك عمل خاص تقوم به أو مشروع خاص تهدف الى الربح من خلاله وتحقيق أعلى مستويات النجاح ؟ يحتوى العالم حاليا على الملايين من رجال الأعمال وأصحاب المشاريع المختلفة الصغيرة والكبيرة والجميع يريد القفز بمشروعه الى القمة ولكن الوصول الى القمة ليس بأمرا سهلا والحفاظ عليها أيضا اصعب من الوصول اليها لذا دعونا نتحدث بإختصار عن الاشياء والمميزات المشتركة بين أنجح رجال الاعمال واصحاب المشاريع. 1- الخبرة المهنية : لكى تتخذ القرارات الصحيحة دائما التى تصب فى صالح أعمالك فى النهاية يجب عليك ان تسعى لأن تكون ذو خبرة واسعة فى مجال عملك حيث يعد أصحاب الاعمال ذو الخبرات يجنون المال مرتين ونصف أكثر من الاخرين وينمون أعمالهم بصورة أكبر لذا يجب عليك توسيع مجال تفكيرك والبحث عن الجديد دائما فى مجال عملك واكتساب المزيد من الخبرات. 2- التخطيط الجيد : بدون خطة عمل وتخطيط جيد لن تستطيع التحرك بعملك خطوة واحده حيث يعد التخطيط من أهم العوامل التى تؤدى الى السير على نهج معين فى طريق صحيح للوصول الى ماتريد حيث تعد الشركات التى تسير دائما على خطط محددة أنجح ضعفين من الشركات الاخرى التى لا تسير على خطط دائما وكذل

مشاكل اليكسا في ترتيب المواقع

صورة
اليكسا هيا الموقع الاول والرائد في العالم لتصنيف وترتيب المواقع ولكن الكثير من المدونين يواجهون مشاكل كثير مع اليكسا من حيث ترتيب المواقع وثبات المواقع علي ترتيبها ونقصان ترتيب المواقع وكل هذه المشاكل ترجع الي ان اليكسا تعتمد في ترتيبها للمواقع والمدونات علي اشياء لا بد من ان يعرفها جميع المدونين وهيا اولا وجود اضافة اليكسا في الموقع او المدونة !! اي ان علي المدون او صاحب الموقع علية ان يضع الاضافة الـخاصة بـ اليكسا داخل موقعه او مدونتة وفي هذه الحالة تحتسب نسبة الزيارات للمدونة اي ان عند دخول اي شخص للمدونة سوف يحتسب دخولة وبذلك سوف يتم انخفاض ترتيب موقعك في اليكسا ثـانيآ ان يكون الزائر دخل الي الموقع عن طريق محرك البحث الشهير جوحل !! في هذه الحالة ايضآ تحتسب اليكسا الزيارات لك عندما يدخل الزائر موقعك من عن طريق محرك البحث جوجل في هذه الحالة تحتسب لك الزيارة ثالثآ ان يكون الزائر مركب تولبار اليكسا !! وهيا الحالة الثالثة التي تعتمد فيها اليكسا احتساب زيارات موقعك اذا كان الزائر يستخد تولبار اليكسا فتحتسب لك الزيارات هذه هيا كانت الثلاث حالات التي تحتسب فيها اليكسا احتسا

افضل وسم في الـ html

صورة
تعتبر لــغه الــHTML هيا اهم لغة من لغات الرمجة او ربما نقول انهــا اللغة الاولي التي يتعلمها اي مصمم او مطور للمواقع يبدأون دائمــآ بــلغة الـ HTML  وربما جميع المدونين او ربما اغلب المدونين يعلمون بشكل جزئي عن لغة الـ HTML لانه عند تغيير قالب مونتهم او عند اضافة اي قسم لمدوناتهم فأن الاحتمال الكبير هوا انهم يــلجأون للغة الــ HTML وانت اذا كنت تريد ان تصبح مصمم او مطور مواقع لــذا عليك اولآ بالتعرف علي لغة الــ HTML واهم الوسوم في هذه اللغة ,, قد تلاحظ وجود اكثر من منصة تدوين مثل بلوجر و ورد بريس وجوملا وتمبلر وغيرهم الــكثير والكـثر وتختلف كل منصه منهم عن الاخري ولــكنهم يتجمعون شئ واحد وهوا استخدام وسوم لــغة الــ HTML  لــذا دعوني اوضح لكم وسم من أهم وسوم  هذه اللـغة التي يعرفها اي مصمم او مطور مواقع وهوا وسم الـ Heading  أكواد الــ heading وتتكون اكود الــ Heading من 6 أكــواد تكــتب بــهذا الــشكل <H1> al3almi.info </H1> <H2> al3almi.info </H2> <H3> al3almi.info </H3> <H4> al3almi.info </H4> <H5> al3almi.info

ما هيا فائدة النيتش

صورة
يتسائل الكثير من المدونين عن النيتش وما هيا فائدتة وكيف يمكنه اختيار النيتش المناسب للمدونة او للموقع او للمنتدي انت علي سبيل المثال عندما تريد عمل مدونة .. فأنت في هذه الحالة لا بد من ان تخصص مدونتك !! ويأتي النيتش علي هذا الاساس ,, فــعند عملك للمدونة ومن ثم تريد عمل تخصيص للمدونة وهنا تخصيص المدونة يكون بمعني اختيار مجال وااحد فقط تتحدث عنه في مدونتك فأنت علي سبيل المثال اذا اخترت ان يكون تخصيص مدونتك يكون عن البلوجر انت الان خصصت مدونتك عن البلوجر اذآ هناك تخصيص وليس هناك نيتش لمــاذا !! لان البلوجر مجال واسع يتحدث عن (( قوالب بلوجر ,, اضافات بلوجر ,, الربح من بلوجر ,, شروحات بلوجر ,, انشاء قوالب بلوجر ... الخ )) فــأنت عليك في هذه الحاله اختيار مجــال واحد فقط للبلوجر وعلي سبيل المثال انت اخترت قوالب بلوجر بأن تكون هيا تخصص مدونتك ايضآ في هذه الحاله لن يكون لديك نيتش !! لماذا لأن قوالب بلوجر تنقسم الي قســمين وهما (( قوالب بلوجر عربية ,, قوالب بلوجر اجنبية )) ومن ثم عليك الاختيار من بينهم حتي يكون عليك نيتش علي سبيل المثال انت اخترت قوالب بلوجر عربية كي تكون هيا تخ

فن التعامل مع الزوار

صورة
الكثير من المدونين يفقدون كيفية التعامل مع زوار مدوناتهم ومواقعم لذا سنتطرق لاكثر من طريقه قد نستطيع من خلالها تقديم اكثر من حل لهؤلاء المدونين عن كيفية التعامل مع زوار مواقعهم او مدوناتهم يأتي الشئ الاول وهوا الاهم وهوا عدم ازعاج زوار موقعك !! اي لا تفكر بوضع اعلانات ربحية كالنوافذ المنبثقة او اعلانات اختصار الروابط  لان هذه الاشياء تزعج الزوار كثيرآ فإن ذلك سووف يجعل زائر موقعك يأخذ ما يريد ولن يعود الي موقعك مرة اخره ثانيآ عدم اجبار الزوار !! اذا كنت تقدم خدمة للزوار لا تطلب منهم مقابل لهذه الخدمة بل اجعل هذه الخدمة دون مقابل حينها سيعلم الزائر انك تعمل لاجله فقط ولست تعمل مقابل اي شئ فذلك الشئ سيجعل الزائر يعود اليك اكثر من مره ثالثآ لا تكون خدماتك محدودة !! فأنت علي سبيل المثال اذا كنت تقدم خدمة كتصميم شعار او دعم فني فلا تشترط علي الزائر ان تقدم له هذه الخدمة مرة واحده فقط فهذا سيجعله يحصل علي الخدمة للمرة الاولي ولن يعود اليك مرة اخري رابعآ تكون خدماتك دون مقابل !! اذا كنت تقدم خدمة للزائر لا تطلب منه مقابل كالاعجاب بصفحتك او الاشتراك في مدونتك او اي

2% فقط من المدونين العرب استطاعوا النجاح

صورة
نحن الان في عصر الانترنت , ويوجد ملايين الناس يدخلون الي شبكه الانترنت بشكل يومي مما جعل الكثير يفكر في انشاء موقع او مدونة تقدم الخدمات والاخبار والمساعدات لهؤلاء الناس الذين يتراوغون يوميآ علي الشبكة العنكبوتية ,, ولكن من المؤسف ان معظم هذه المواقع العربية قد كانت فقط تعتمد علي سياسة القص واللصق مما جعل جميع المنتديات العربية متشابهة ولا تفرق عن بعضها  ومن ثم اصبحنا الان في عصر المدونات وهوا العصر الذي سيكتسح المنتديات , ويشتغل في مجال التدوين هذا اكثر من مليون شخص عربي ولكن للأسف من استطاعو النجاح فيهم هما 2% وربما اقل قليلآ لماذا 2% فقط من العرب هما الذين نجحو في مجال التدوين !!! لقد نجحو في مجال التدوين لعده اسباب هامة اولها ؟؟ لقد اختارو المجال المناسب الذي يحبونه ومن خلالة استطاعو تقديم كل ما يعرفونة عن هذا المجال لذلك استطاعو النجاح ثانيآ مشو عكس الطريقة التي انتشرت بها المنتديات وهيا القص واللصق فابتعدو عنه تمام الابتعاد ثالثآ جعلو ربح المال هوا اخر الاشياء الذين يفكرون بها لذا هم الان يكسبون الالاف يوميآ رابعآ احسنوا التعامل مع زوارهم واعضائم وكانو دائمين الرد

دورة تعلم css الدرس الرابع

صورة
السلام عليكم ورحمة الله وبركاتة ,, تعلمنا طريقة كتابة وسوم بلغة الــ Css وفي درس اليوم سنشرح اشياء مهمة في تأثيرات الــ Css وهيا الــ Div والــ class والــ Id  اذا استرجعنا المـثال القديم  الذي كان كالتالي :- فتظهر لنا النتيجه بهذا الشكل ماذا اذا نحن نريد وضع اكثر من وسم كــ H1 , H2 , H3 ,P يمكننا في هذه الحالة اتباع احدي الطريقتين  الطريقة الاولي هيا التطبيق علي كل وسم من هذه الوسوم بنفس الطريقة السابقة كالتالي  كل ما تلاحظة هوا اننا كتبنا كل وسم من هذه الوسوم وداخلة كود اللون الذي نحن نريده وتظهر لنا النتيجه كــالتالي ولكن هذه الطريقة متعبة بعض الشئ حيث انك سوف تتعامل مع الاف الوسوم لذا يجب علينا اختصار الطرق لنصل الي الافضل لذا فنحن سوف نستخدم كل من  DIV , Id , class دعونا نتعرف علي كيفية استخدامهم كما تلاحظ كتبنا وسوم الــ HTML كما هيا ولكننا كما تلاحظ وضعنا قبل الوسوم  وسمي الــ Div كما اعطيناهم معرف (( Id )) اليك الان لتعرف ما هيا الفائدة  وسم الــ div الذي وضعناه اي تحديد هذه العناصر بالكام