XHTML و CSS الجزء 1


سلسلة دورة CSS و XHTML

هذا الدرس مهم جداً لمتابعة دورة PHP الخاصة بتطوير مواقع وتطبيقات الإنترنت.

ما هي HTML؟

هي لغة ترميز تستخدم للرمز إلى العناصر الموجودة في صفحة الويب, آخر نسخة ثابتة هي HTML 4.01 والنسخة القادمة التي يتم العمل عليها حالياً وتطويرها هي HTML 5.

ما هي XHTML؟

هي HTML ولكن مضاف إليها تطابق شروط الـ XML, آخر نسخة ثابتة هي XHTML 1.1 والنسخة القادمة التي يتم العمل عليها وتطويرها حالياً هي XHTML 2.0.

ما هي CSS؟

هي لغة تنسيق أنماط تستخدم لشرح تصميم الموقع وبمعنى آخر يتم تلوين وتنسيق عناصر الرموز في لغة الترميز XHTML.

النسخة الأخيرة من هذه اللغة هي CSS 2.1 ويتم العمل والتطوير على CSS 3 والتي تحتوي أيضاً على مميزات إضافية جديدة قادمة.

لمعرفة النسخ الأخيرة والمميزات التي تحصل يتم متابعتها من خلال الويكيبيديا الموسوعة العالمية أو من خلال W3C المنظمة العالمية المعتمدة للمعايير القياسية لهذه اللغة الخاصة بترميز وتنسيق مواقع الإنترنت.

لماذا نتعلم XHTML و CSS؟

نحتاج لتعلم XHTML و CSS قبل تعلم أي لغة برمجة في تطوير المواقع, لأنها لغتين خاصة بتحديد أماكن وتنسيق وتصميم الموقع, وكذلك هما لغتين أساسيتين وليس تكميليتين ولأهمية إتقانها في البرمجة يجعل منك مطور ومبرمج تطبيقات ويب محترف, فلنقل أننا نريد عرض قائمة الأقسام بلغة البرمجة (PHP) حيث يتم عرض الأقسام من قاعدة البيانات فنعمل Loop أي حلقة دائرية على عنصر XHTML معين, سنتطرق إلى تفاصيل هذه العملية في دورة الـ PHP ولكن أحببت إضافة موضوع خاص ببعض تفاصيل XHTML و CSS قبل الدخول إلى عالم PHP.

ستجد هنا موضوع سابق للأخت صوت الحياة شرح ممتاز ورائع عن الـ HTML.

وسنشرح بعض التفاصيل الأخرى مع لغة XHTML هنا.

مالفرق بين XHTML و HTML؟

الفروقات شبه بسيطة جداً XHTML هي HTML العادية لكن باختلافات بسيطة حيث X تعني Extensible أي ممتدة لـ XML لتوافق وتطابق المعايير الخاصة بها بلغة XML. وهذه من أهم الفروق في XHTML :

  • العناصر في XHTML يجب أن تكون حروف صغيرة (lowercase) أي وليس
  • العناصر في XHTML يجب أن تكون مرتبة أي لا تكون هناك عناصر متداخلة على بعضها أي example وليس example
  • العناصر في XHTML يجب أن تكون مغلقة بإحكام في مكانها الصحيح وحتى لو كان عنصر بدون محتوى,كـ a وليس a
  • XHTML يجب أن يحتوي على عنصر واحد فقط رئيسي, كـ واحد فقط

هل استخدم XHTML أو HTML؟

قد يكون طبعاً XHTML في أغلب الأوقات بالفروقات التي تكون أفضل من HTML في سهولة تطويرها وغيرها من الفروقات, ولكن في بعض الأحيان قد تتطلب لاستخدام HTML عادية, ولكن في معظم الأوقات لن تواجه أي مشاكل.

هل أتعلم XHTML أو CSS أو كليهما؟

تأتيني أسئلة كثيرة بهذا الخصوص, هاتين اللغتين إذا كنت تنوي تصميم وتطوير مواقع إنترنت بشكل جدي فيجب عليك تعلم كليهما, مع العلم أنهما سهلة جداً كل ما عليك هو ممارستها بشكل بسيط حتى تعتاد عليها, بشكل مختصر يجب عليك تحديد العناصر اللازمة في الموقع باستخدام (XHTML) وبطريقة أخرى تحديد ألوان وتنسيق العناصر باستخدام (CSS).

كل ما سبق هو شرح نظري والآن سنقوم بتطبيق عملي بسم الله نبدأ… في هذا الدرس سيتم شرح طريقة عمل موقع باستخدام XHTML و CSS معاً بشكل جيد.

إلى التطبيق

سنتعلم تطبيق وإنشاء صفحة بالشكل التالي باستخدام اللغتين XHTML و CSS:

فلنقل أننا سنقوم بتصميم موقع خاص بالتعريف عن الرسول صلى الله عليه وسلم, فنبدأ بإنشاء المجلد الخاص بالموقع مثلاً في سطح المكتب باسم (prophet_muhmmad_pbuh):

وسنبدأ الآن بإنشاء صفحة جديدة بوضع رموز الموقع أو عناصر الموقع بلغة XHTML وذلك باستخدام أي محرر ويمكنك استخدام Notepad++ كما تم استخدامه في دورة الـبي اتش بي أو استخدام المفكرة بأقل تقدير أو استخدام برامج متقدمة مثل برامج متقدمة مثل MS Expression Web أو Adobe Dreamweaver أو MS Sharepoint Designer الذي تم الإعلان عن نشره مجاناً.

الصيغة الرئيسية لكل صفحة ويب هي :





عنوان الموقع



يجب دائماً عملها وعادة ما يتم إنشاءها مباشرة تلقائياً بمجرد إنشاء صفحة جديدة في برامج متقدمة مثل MS Expression Web أو Adobe Dreamweaver.

لا ننسى فقط في الصيغة الرئيسية أن نتأكد بأن العنصر html يحتوي على الخاصية dir=”rtl” وهذه الخاصية تجعل الصفحة من اليمين إلى اليسار للغة العربية.

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

ستجد أن ما تم إضافته هو أولاً

وهذا العنصر يسمى div اختصاراً لـ division ومعناه قسم, فعند تحديد قسم أو جزء معين فنستخدم div مثل تحديد الجزء الأسفل أو الجز الأوسط أو الجزء العلوي.

وتم إعطاء هذا القسم العلوي اسم header للتعرف عليه عند تلوينه بالـ CSS وتم كتابة الخاصية id لإعطاءه اسم وهناك خاصية أخرى لإعطاء اسم باسم class, سيتم استخدامها بعد قليل وشرح الفرق بينهما, هنا أريدك أن تعرف فقط بأن كل قسم يجب أن يحمل اسم خاص به للتعريف به لأننا داخل body سنستخدم أكثر من قسم كالقسم العلوي والقسم السفلي وقسم محتوى الصفحة الذي هو القسم الأوسط…الخ

بعدها أضفنا

عادة ما يتم كتابة h1 في أي عنوان رئيسي وذلك لأنه يعني فقرة بخط رئيسي أول header1 وهناك header2 و header3 و header4 وتم استخدام العنوان الرئيسي رقم 4 لكتابة شرح مختصر عن الموقع أو الشعار النصي للموقع وذلك لأنه عنوان رئيسي لا نحتاج لتكبيره فـ 1 تعني كبير جداً و 2 أصغر و 3 أصغر .. الخ

انتهينا من شرح الكود البسيط السابق في لغة الـ XHTML حيث سيكون داخل body بهذه الطريقة





محمد صلى الله عليه وسلم




فنقوم بحفظ الصفحة في مجلد (prophet_muhmmad_pbuh) باسم index.htm ولماذا تم تسميته index؟ وذلك لأنه الصفحة هي الصفحة الرئيسية ودائماً يجب أن يكون اسم الصفحة الرئيسية index لماذا؟ لأن عند فتح موقع http://www.example.com فإنه يتم فتح index مباشرة لأنه هو الصفحة الرئيسية.

فبعد الحفظ وفتح الصفحة ستظهر النتيجة كالتالي :

الآن تقريباً فهمنا XHTML, أريد أن نفهم CSS قبل عرض العناصر المتبقية للـ XHTML

طرق استخدام الـ CSS

لكي نقوم باستخدام لغة CSS هناك 3 طرق

1/ أن ننشئ ملف جديد باسم style.css في المجلد (prophet_muhmmad_pbuh) * هذه افضل طريقة معتمدة بالمعايير القياسية العالمية

2/ أن نكتب الـ CSS داخل ملف الـ HTML أي مباشرة على ملف index.htm ولكن داخل الوسم وداخل وسم يكتب كالتالي (

)

3/ أن يتم كتابة الـ CSS داخل سطور الـ HTML على كل عنصر كالتالي (

)

نحن سنعتمد الطريقة الأولى والأفضل وسنكتب داخل ملف الـ style.css التالي :

#header {
	padding:20px;
	background:url(images/header_bg.gif);
	border:3px green solid;
}

بعد حفظها يجب علينا استدعاء الملف داخل ملف index.htm وذلك عن طريق كتابة الكود التالي داخل العنصر :



محمد صلى الله عليه وسلم

الآن ستظهر النتيجة كالتالي :

جميل هاه؟, طبعاً استخدمنا في أكواد لغة CSS حدود خضراء وخلفية بالصورة الموضحة أمامكم مع مسافة داخلية تساوي 20 بكسل أو نقطة فقط, فهذا هو التصميم للموقع باستخدام CSS وذلك للعنصر header فقط.

نرجع إلى إكمال عناصر الموقع بإضافة قائمة جانبية للموقع بأكواد XHTML كالتالي :


  • القائمة الرئيسية

    • مولده ونشأته
    • دعوته
    • حياته في المدينة
    • أهم غزواته
    • عام الوفود
    • حجة الوداع
    • وفاته
    • معجزاته
    • زوجات الرسول بالترتيب
    • أولاده
    • أسماؤه

أحب أضيف نقطة مهمة بعد مشاهدة هذا الكود, وهي النقطة التي تتعلق بجمال الكود ونظافته من الشوائب وكذلك توزيع وترتيب الأكواد باستخدام XHTML و CSS بشكل مستقل, بعض المطورين يقومون بجعل صفحة htm تحتوي على جميع خصائص التصميم وتكون مشوه كثيراً فلذلك هنا يمكنك ملاحظة مدى جودة التعامل مع المعايير القياسية وأفضلية تطويرها.

عموماً كذلك هناك نقطة أخرى تتعلق بأكواد XHTML حيث يمكنك اختيار العناصر المناسبة لك, أقوم شخصياً بكتابة صيغة العناصر التي يتم عملها من قبل مطورين عالميين ومراجعة الأكواد في مواقعهم لمشاهدة أفضل الطرق لتصميم المواقع. فلذلك أأمل أن تعجبكم الصيغة المطروحة باستخدام

    وغيرها من العناصر.

    طبعاً كل عنصر يرمز باختصار لشيء فـ ul يرمز إلى unorderd list أي قائمة غير مرتبة بأرقام وهي القائمة التي نريد استخدامها في موقعنا لذلك تم استخدامها.

    تم استخدام class للتعريف عن العنصر بدل id وذالك لأن class هي خاصية تعريف تستخدم عندما يكون العنصر يستخدم عدة مرات وليس لمرة واحدة فالـ id هو تعريفي لشيء واحد أما القائمة الجانبية فهي متكررة لذلك يتم وضعها في class وسيتم إضافة قائمة جانبية متكررة أخرى بعد قليل.

    الآن يمكنك مشاهدة نتيجة ما تم إضافته بالـ XHTML

    الآن لتنسيق هذا الجزء بالـ CSS يتم ذلك من خلال ملف style.css الذي تم استدعاءه قبل قليل, فنضيف فيه التالي :

    .side_menu, .side_menu h2, .side_menu li,  .side_menu li ul,  .side_menu li ul li {
    	list-style:none; margin:0px; padding:0px;
    }
    .side_menu {
    	width:180px;
    }
    .side_menu h2 {
    	margin:10px 0 0 0;
    	padding:4px 0;
    	border-bottom:1px gray dotted;
    	color:#999999;
    }
    .side_menu li ul li {
    	border-bottom:1px green solid;
    	padding:5px 0;
    	font-weight:bold;
    	color:#006600;
    }

    لتصبح النتيجة كالتالي :

    الآن انهينا القائمة الجانبية والتي مع العلم والفائدة المهمة يمكنك إعادة استخدامها بنفس التصميم بشكل ممتاز سواء قائمة جانبية على اليمين أو اليسار دون الحاجة لإعادة كتابة أكواد التصميم الخاصة بها التي تم كتابتها بالـ CSS وهنا تكمن قوة CSS ويتم إعادة استخدام القائمة بالطريقة التالية :

    • القائمة الرئيسية

      • مولده ونشأته
      • دعوته
      • حياته في المدينة
      • أهم غزواته
      • عام الوفود
      • حجة الوداع
      • وفاته
      • معجزاته
      • زوجات الرسول بالترتيب
      • أولاده
      • أسماؤه
    • مواقع صديقة

      • موقع رسول الله
      • صيد الفوائد
      • طريق الإسلام
      • الشبكة الإسلامية

    والنتيجة :

    ستلاحظون أن القائمة بدون روابط فيجب علينا إضافة الروابط الخاصة بصفحات القائمة وذلك بالعنصر كالتالي :

    
    

    فبعد إضافة الروابط ستلاحظون أن الروابط ظهرت :

    ولكن تغير شكل الموقع بالروابط, وذلك لأننا أضفنا العنصر فلكل عنصر في XHTML يحتوي على تنسيق خاص به بشكل افتراضي فتنسيق a هو اللون الأزرق وخط أسفل النص, يمكننا تحرير ذلك من خلال جعل أي رابط في الموقع يحتوي على الخصائص الخاصة بنا كقالب فبمجرد إضافة أي رابط في الموقع داخل العناوين وغيرها نريد أن يكون اللون الأخضر وبدون خط أسفل النص بالكود التالي :

    a {
    	color:#006600;
    	text-decoration:none;
    }

    ليظهر بصورته الطبيعية التي نريدها كالتالي :

    الأن نريد أن نضيف محتوى الصفحة أولاً يجب علينا إدخال القائمتين الجانبيتين إلى قسم جانبي ومن ثم نضيف قسم الصفحة كالتالي :

    جداً عمليه سهلة وواضحة, بعد ذلك يجب علينا تنسيق أماكنها باستخدام لغة CSS وذلك بكتابة الكود التالي :

    #side_right {
    	width:180px;
    	float:right;
    }
    #content {
    	margin-right:180px;
    	padding:10px
    }

    لتظهر النتيجة كالتالي :

    وبهكذا قد قمنا بتصميم قالب بسيط جداً وجميل للموقع باستخدام الـ XHTML و الـ CSS ويمكنك الرجوع للرابطين السابقين لمعرفة عناصر وخصائص اللغتين لاستخدامها في موقعك.

    عموماً نكمل الدرس لآخره بإضافة محتوى الصفحة بشكل مناسب وذلك داخل القسم

    بكتابة الكود التالي

    الصفحة الرئيسية

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

    لماذا أسس الموقع؟

    أوجب الله سبحانه وتعالى على المؤمنين طاعته والإقتداء بهديه واتِّباع سُنَّته و توقيره ومحبته صلى الله عليه وسلم فوق محبة الآباء والأبناء والأزواج والعشيرة ، والتجارة والأموال ، وأوعد من تخلف عن تحقيق ذلك بالعقاب ، فقال سبحانه وتعالى : { قُلْ إِنْ كَانَ ءابَاؤُكُمْ وَأَبْنَاؤُكُمْ وَإِخْوَانُكُمْ وَأَزْوَاجُكُمْ وَعَشِيرَتُكُمْ وَأَمْوَالٌ اقْتَرَفْتُمُوهَا وَتِجَارَةٌ تَخْشَوْنَ كَسَادَهَا وَمَسَاكِنُ تَرْضَوْنَهَا أَحَبَّ إِلَيْكُمْ مِنَ اللَّهِ وَرَسُولِهِ وَجِهَادٍ فِي سَبِيلِهِ فَتَرَبَّصُوا حَتَّى يَأْتِيَ اللَّهُ بِأَمْرِهِ وَاللَّهُ لا يَهْدِي الْقَوْمَ الْفَاسِقِينَ } التوبة: 24.

    وكذلك كتابة التنسيق الخاص بالعناصر من خلال الـ CSS كالتالي

    #content h2 {
    	margin:0px;
    	border-bottom:2px green solid;
    	padding:5px 0;
    	margin-bottom:5px;
    }
    #content .content_post {
    	font-family:Tahoma;
    	font-size:10pt;
    	line-height:16pt;
    	text-align:justify;
    }
    .ayat {
    	color:#009900;
    }

    لتكون النتيجة النهائية كالتالي

    نأمل بأن يكون الدرس مفيد في تعلم أساسيات XHTML و CSS البسيطة وذلك لمتابعة دورة PHP بشكل أفضل,

    لتحميل الملف الخاص بنتيجة هذا الدرس البسيط من هنا وشكراً لكم.

    تم طرح الدرس الثاني ←

    • طريقة عرض مرتبة وجميلة
      و الموضوع مفيد جداً
      إستفسار : أشرت إلى أن ”
      مالفرق بين XHTML و HTML؟
      » XHTML يجب أن يحتوي على عنصر واحد فقط رئيسي, كـ واحد فقط ”
      ما المقصود بعنصر واحد

      جزاك لله خيراً

      • أي يجب أن يكون هنالك جذر واحد فقط لمستند الـXHTML
        بمعنى أن يوجد وسم … واحد فقط في المستند
        ولا يمكن أن يوجد واحد أخر بداخله نهائياً
        وكذلك بالنسبة لوسم و وسم
        هذه الثلاثة الوسوم (tags) لا يسمح نهائياً بتكرارها في XHTML

        أنظر هذا المثال :
        http://snipt.org/Wlg

        • لا أدري لماذا لم يظهر الوسم في الرد ! =)

          الوسوم الثلاثه المشار إليها هي :
          و و ( طبعاً بدون مسافات )
          أنظر هذا المثال :
          http://snipt.org/Wlg

        • أبت أن تظهر نهائياً لا بمسافات ولا بدون =(
          إنظر المثال المذكور وستعرفها ..
          html و head و body !

      • مرحبا اخوي المعتصم, فعلاً مثل ما قال أخوي محمد جبلي مشكور, وهي الرئيسية التي في الصيغة الرئيسية لصفحة الـ XHTML وتعتبر الـ Root وهم html و head و body يجب عدم تكرارهم في نفس الصفحة ليكون العمل XHTML صحيح.
        وجزاك الله خير

        • محمود

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

          بارك الله بك

        • حياك الله اخوي محمود إذا كان موضوع الرسالة او المشكله بخصوص الـ XHTML و الـ CSS فيسعدني ذالك على البريد althari22 على الجيميل

          تحيتي لك

    • شكراً لكم

      متابعة للدروس
      وقد تعلمنا هذا الدرس جيداً ..

      متابعة لآخر الدورة

    • رائع جدا

      يعطيك العافية أستاذ عبدالملك

    • ماشاء الله تبارك الله .. شرح خيآآل
      عيني عليك بارده يا أ.عبدالملك =)
      الله يجزاك جنة الفردوس من دون حساب

      الأسئلة :
      س / الـ xmlns=”http://www.w3.org/1999/xhtml” مافائدتها ؟
      يعني لو ما كتبناها إيش راح يصير ؟

      إضافة : ( بعد إذنك )
      يمكن حفظ مستند الـHTML و الـXHTML بصيغة .html أو .htm
      لايوجد فرق بينهما .. فقط كانت أنظمة التشغيل سابقاً
      لا تدعم إلا 3 حروف أو أرقام كحد أقصى لإمتداد الملف والأن لم يعد الإمتداد محدد بـ 3 حروف أو أرقام

      إقتراح :
      توجد إضافة تتيح تعديل الرد خلال 60 دقيقة بعد إضافة الرد ( على ما أفتكر )
      أتمنى وضعها .. لتجنب المعاناة التي حصلت في رد على تسائل الأخ المعتصم بالله =)

      ملاحظة :
      الكود اللي بعد هذا السطر لم يظهر في الموضوع :
      “نرجع إلى إكمال عناصر الموقع بإضافة قائمة جانبية للموقع بأكواد XHTML كالتالي :”

      وشكراً لك يالغالي

      • مرحبتين أخوي محمد دائماً تعليقاتك مثرية بشكل كبير شكراً لك على المرور والإضافة القيمة التي دائماً نتمناها

        وجزاك الله كل خير

        بالنسبة للسؤال : ((xmlns=”http://www.w3.org/1999/xhtml” مافائدتها ؟))

        فهنا الإجابة من المنظمة العالمية للمعايير القياسية
        http://www.w3.org/TR/xhtml1/#docconf

        وباختصار فإن الرابط سيريك الصيغة الأساسية لتعريف ملف XHTML وذالك للتعريف بإن الصفحة هي صفحة XHTML وليس HTML , وكذالك يريك أنواع الـ DOCTYPES التي يتم تعريفها في أول الصفحه, هما مجرد الـ DTD و xmlns فقط كتعريف بأن الصفحة XHTML ليتم التعامل معها بقوانين XHTML بدل HTML.

        بالنسبة للإقتراح , إقتراح قيم سيتم أخذه بعين الإعتبار

        وبالنسبة للملاحظة شكراً لك وتم التعديل 🙂

    • درس مرتب وواضح جداً

      جزاك الله خيراً اخي الكريم

    • عبدالله

      ما فهمت الفرق بين HTML و XHTML

      يا ليت توضحونها لو تكرمتم

    • م.عبدالله

      الله يجزاك خير ويوفقك

      شرح رائع جدا ونحن متابعون ونطبق ماتكتبه

      لدي سؤالين

      بعض الاوامر المكتوبه لا نعرف فائدتهامثل xmlns؟

      أيضا كيف أعرف رقم اللون الذي أريده أن يظهر في الموقع؟

      مشكور أخي العزيز

      • شكراً لك م.عبدالله على السؤالين الجميلين

        بالنسبة لـ xmlns فتم الإجابة عليها في الرد على الأخ محمد

        فهنا الإجابة من المنظمة العالمية للمعايير القياسية
        http://www.w3.org/TR/xhtml1/#docconf

        وباختصار فإن الرابط سيريك الصيغة الأساسية لتعريف ملف XHTML وذالك للتعريف بإن الصفحة هي صفحة XHTML وليس HTML , وكذالك يريك أنواع الـ DOCTYPES التي يتم تعريفها في أول الصفحه, هما مجرد الـ DTD و xmlns فقط كتعريف بأن الصفحة XHTML ليتم التعامل معها بقوانين XHTML بدل HTML.

        وبالنسبة للسؤال الثاني, يمكن معرفة أرقام الألوان وذالك من خلال أي برنامج تحرير متقدم مثل MS Sharepoint Designer الذي أطلق مجاناً من هنا http://www.tech-wd.com/wd/?p=4707 أو من خلال الفوتوشوب أو أي أداة بسيطة تعطيك رقم الألوان هنا تجد أبسط أداة التي يقدمها هذا الموقع من الموقع مباشرة http://html-color-codes.info

        شكراً لك

    • أبو عمار

      السلام عليكم

      حقيقة ومن غير مجاملة والله هذا أسهل درس قرأته عن التصميم باستخدام الأكواد باللغة العربية وفي نفس الوقت ينقل المتعلم إلى مرحلة متطورة جدا وكل هذا باستخدام الطريقة الأصح في تصميم المواقع باستخدام الكود البرمجي.

      حقيقة فخر والله لنا ولكم أمثالكم..

      متابع لكم الله يوفقكم

      والله مدونة كلها جميييل وجديييد وفريد.

    • وليد السودي

      الله يجزاكم خير ..درس لطيف وخفيف ..
      تم التطبيق ..سيتم وضع التطبيق في وقت لاحق ..

      اخواننا الكرام هل اسطيع ان انقل الدروس مع ذكر المصدر ورابط الدورة ..
      للفائدة فقط ..

    • sami

      درس جميل جداً ..

      الله يوفقكم ..

      ننتظر الجميل والجميل من هذه الدروس

    • F A I S A L

      مجهوود جبار ,, ربي يووووفقك

    • شكراً للجميع على المرور والتعليقات الرائعة والتشجيع القيم وبإذن الله سيكون هناك دروس متقدمه للـ XHTML و CSS حيث تم إعادة تسمية هذا الدرس بـ XHTML و CSS الجزء الأول, حيث سيكون هناك جزء ثاني وثالث ورابع فهناك الكثير والكثير لتعلمه مثل الأعمدة الثلاثة والإطارات وغيرها من الأمور المتقدمة في الـ XHTML و CSS وذالك باستخدام المعايير القياسية بشكل جميل.

      شكراً لكم مره اخرى لدعمكم المتواصل وتواجدكم ولإي اقتراحات او مشاكل يمكن التعليق بها ونتشرف بالرد عليها.

    • خالد

      جزاك الله خير اخوي شرح موفق
      مثلا كنت متمكن من برنامج معين مثلا dreamweaver هل يغنيني عن كتابة الكود يدويا

      • شكراً لك أخوي خالد على المرور وطرح السؤال

        مبدئياً سيغنيك ولكن المشكلة بأنه لن يتم استدعاء ملف CSS بل سيتم وضع خصائص الألوان وغيرها داخل كود XHTML وهذا خطأ قد يعطلك مستقبلاً كثير فيجب عليك معرفة الأساسيات الخاصة بالتعامل مع الـ XHTML و الـ CSS بشكل جيد وتحريرهم كذالك بشكل يدوي لكي يمكنك حل المشكلة بشكل أعمق.

        شكراً لك اخوي خالد

    • ماشاء الله عليك ، بارع في التصميم والبرمجة مع أنه من الصعب الإلمام بالإثنين معا.
      وفقك الله.
      سؤال : كيف قمت بكتابة الكود بهذا الشكل الملون والمنسق على المدونة حيث أحاول عمل ذلك ولا أستطيع. كما أنني لا أستطيع الكتابة من اليسار لليمين في مدونتي لأنها معربة.
      شكرا لك.

      • مرحباً بك أخوي محمد شكراً لك على تعليقك الجميل

        بالنسبة لتلوين الكود وعرضه بهالطريقة هي بكل بساطة باستخدام موقع
        http://snipt.org شكراً للأخ محمد جبلي لإنه دلني عليه واكتشفت انها اداة رائعة جداً ومفيدة.

        وبالنسبة للكتابة من اليمين إلى اليسار, يمكن عمل ذالك باستخدام محررات مختلفة, مثلاً نحن في عالم التقنية نستخدم محرر FCKeditor والذي يحتوي على خاصية تحويل الجملة من اليسار إلى اليمين بشكل عملي جداً, وبإمكانك أيضاً في اي محرر بسيط تحرير الجملة شكل التدوينة باستخدام الـ XHTML 🙂

        • abdullah_kh

          بالنسبة لتلوين الأكواد في المواضييع أذكر أن هناك إضافات تقوم بهذا العمل دون الإستعانة بموقع آخر.. وهي كما تبدو لي أفضل.. مثل المستخدمة في أكواد وردت في هذا الموضوع http://www.nahedh.com/blog/?p=197

          .. وربما تكون أسهل وأسرع لكم..

          ..

          بالنسبة للدرس فهو أفضل درس مر علي على الإطلاق.. واضح جد جدا..

          بارك الله فيك وجزاك كل خير أخوي عبدالملك..

    • زلزال

      جعلني ما أذوق حزنك يا عبد الملك ، وفقك الله وجزاك كل خير … متابعين معك لآخر المشوار
      تقبل تحياتي

    • أحمد توفيق

      شكراً لك أخي الكريم وبارك الله فيك على المعلومات القيمة جدا والمرتبة ترتيب منطقي…. في الواقع لي سؤال حول البداية…هل أستطيع البداية ب XHTML دون تعلم HTML وخصوصاً أنني أملك فكرة عن طريقة كتابة الأكواد في HTML..
      تحياتي لكم.

    • زلزال ~

      شكراً لك يالغالي على تعليقك وتشجيعك الرائع

      أحمد توفيق ~

      شكراً لك أخي على المرور, بالنسبة بالبداية بالـ XHTML فكما ترا الفروقات بسيطه جداً ولا يوجد هناك فروقات نصية بشكل كبير اللهم فروقات في الترتيب فقط, فنعم يمكنك ذالك بكل سهوله كل ماعليك هو متابعتنا بهذه السلسلة, حيث الأن بهذا الدرس مثلاً انت تعرف كيف تعمل صفحه فارغة , وتعمل تقسيم للموقع بالجزء الأعلى والقائمة الجانبية والمحتوى وعمل قائمة وعمل عنوان بالـ XHTML وسنكمل بإذن الله تعالى 🙂 وتمنياتي لك بكل التوفيق ولو لديك اي استفسار اخر نحن حاضرين

      اطيب تحياتي

      • أحمد توفيق

        شكراً لك أخي عبد الملك على الرد, سأعمل بنصيحتك ولكن في الواقع كان سبب سؤالي هو أني أعتزمت منذ فترة تعلم لغة php ولذلك قررت البدء ب HTML ولكن للأسف لم يسعني الوقت لذلك بسبب ضغط الدراسة الكثيف وتحضيري لعدة مشاريع, ولقد سألتك ذاك السؤال لأني قد جمعت الكثير من الكتب والمقالات للبدء منذ مرحلة HTML وحتى PHP ولكني وجدت في دورتك ترتيب الأفكار الممتاز والمتسلسل وعدم فقدان اي حلقة لذلك لو كان واجب علي ان ابدأ ب HTML كنت سأحفظ مقالاتك ريثما اتقنها ولكن شكرا لك على النصيحة … أرجو منك الاستمرار في هذه الدورة ونصيحتي لجميع الاخوان الذين اعتزمو تعلم لغة PHP تابعو في هذه الدورة لأني جربت الكثير من المصادر المفقرو للاسلوب العلمي والعملي ..
        شكرا جزيلا لك اخي الكريم وجعلها الله لك في ميزان حسناتك

    • عبد الملك الثاري ,,
      يعجز اللسان عن وصف هذا الإنسان 🙂 ,,
      الدرس رائع بكل المقايسس ….
      خاصة للمبتدئين أمثالي …
      شكراً لك ، ولعالم التقنية 😀 ,,

    • وليد السودي

      الله يجزاك خير ويطيل بعمرك ويجعلك ذخر للأسلام والمسلمين ..حقيقة انت انسان نادر ..
      الله يوفقك وييسر لك امورك…
      اخي الكريم اريدك في موضوع مهم…ليتك تضيف ايميلي :
      waleed2008-2007@hotmail.com
      اتمنى ما ترد طلبي .

    • خالد

      مشكور اخوي على ردك .. بس اسمح لي ازعجتك

      الصوره للاسف حاولت تكون موجود بالهيدر ماتطلع معي حتى الصوره اللي عندي
      سميتها نفس الاسم اللي انت مسويه bg مافيه فايده

      • تأكد من مكان الصورة .. بحيث الامتداد يكون صحيح .

    • عبدالرحمن

      السلام عليكم

      الحمد لله خلصت من تطبيقي 🙂 بس على موقعي وسويت صفحة لإقفال الموقع لأني ناوي أجدده 🙂

      والحمد لله اختبرتها بـ W3C وكلها تمام التمما ومافيها غلط والحمد لله
      سويت ملفين بس
      الصفحة الرئيسية
      index.html
      و
      style.css

      وتستطيعوا ان ترو التطبيق من هنا 🙂
      http://www.des-stu.com/

    • م.عبدالله

      السلام عليكم ورحمة الله وبركاته

      بارك الله فيك أخي عبدالملك

      والله إني أغبطك على هذه الدعاوي التي تاتيك من المشاركين والمتابعين
      فنسئل الله ان يوفقك ويبارك فيك

      في البداية أنا طبقت الدرس كاملا ولله الحمد لكن تدور في رأسي اسئله كثيره سأذكر بعضها؟

      1*أتمنى في الدروس القادمة توضيح الاوامر الموجوده في css
      أو توجيهنا إلى أي موقع يوضح جميع الاوامر

      2*في css

      مرة نجد #header
      ومرة نجد #content h2

      ومرة contenet .content-post#

      اتمنى توضيحها وفكرة إستدعائها؟

      3*كيف أستطيع إختيار عدد البكسل؟فمثلا نجد 180px فكيف اختارها هل هي بالتخمين والتجربه ؟ أو هنالك اساس للاختيار؟

      الاسئله الاخرى سأكتبها لاحقا؟إلا إذا كانت الدروس القادمه سوف يكون فيها تفصيل اكثر للاوامر.

      الله يوفقك أخي عبدالملك ويبارك فيك وفي علمك

      • م.عبدالله

        حاولت تكون الخلفيه بامتداد jpg ولكن لم يقبل الصورة فلا يظهر شيء

        هل الخلفيات يجب ان تكون من نوع gif?

    • الف شكر لك اخي على الدروس و ايضا بمناسبة الرد اوجه ملاحظة بسيطة للاخ م.عبد الله فيما يخص سؤاله هو ان احسن صيغة و التي ينصح بها المبرمجين و هي صيغة png لانها جيدة جدا للاستعمال و مساحتها صغيرة و بالتالي ينصح جميع المبرمجين باستعمالها
      الف شكر لك اخي على كل ما قدمته و تقدمه من اجل الافادة و الى الامام دوما.

    • بصراحة جزاك الرحمن الجنة من غير حساب شرح لم أرى مثلة بارك الله فيكم وإلى الأمام

      ونتطلع ان تكون هذه الدروس مرئية في القريب العاجل يا شباب 🙂

    • درس رائع شكرا لك

    • FAHD DESIGN

      أشكرك أخوي عبدالملك .. أنا من أشد المتابعين لمدونة عالم التقنية .. لكن مالي فيها ولا رد .. من أول ما نزلت الدرس وانا متابعه ..

      ورجعت للدرس أكثر من مرة .. فعلا درس سهل وممتع وبسيط وواضح وخالي من التعقيدات ..

      فعلا أجبرتني أرد عليك أستاذي الفاضل ..

      الا على فكرة .. ليش ما كملت الدرس واضفت الفوتر ؟؟

    • شكراً لكم جميعاً

      أخوي فهد شرفني مرورك

      انا أقوم الأيام السابقة بتجهيز الدرس مع إضافة الفوتر وأجزاء أخرى 🙂

      سيكون بإذن الله هناك تفاصيل اكثر في الدروس القادمة

      اطيب تحياتي

    • الف شكر لك حبيب قلبي . .

      درس جميل وترتيب اجمل للافكار وطرق طرحها وشرحها . .

      وفقت في الدرس حبيبي . .

      لدي استفسار . .

      عند وضع المحتوى اي المقالات . . القائمه الجانبيه نزلت الى الاسفل . .

      ما هو الحل ؟؟ . .

      لتوضيح

      القائمة الرئيسية
      ………………………….. الكلام هنا …………
      …………………………………………
      ……………………………………………

      * مولده
      * دعوته

      اتمنى تكون فهمت شو المشكله الي واجهتني

    • حياك الله أخوي ماجد, بصراحة ما فهمت كيف لكن ارجوا انك ترسل لي الملف تبعك اللي سويته على بريدي عشان اوضح لك المشكلة بالضبط

      althari22 على الجيميل

      تقبل اطيب تحياتي

    • شرح خوورااافي ما شاءالله عليك يا عبدالملك .. الله لا يضرك
      استفدت كثيراً من الدرس اكثر مما تتخيل 🙂

      ما زلت ياأخي أعاني من شيئين لم أفهمها بشكل واضح .. وهما
      margin

      padding

      أحياناً تظهر برقمين بعدها وأحياناً أربعة أرقام … حبذا لو تشرح لنا الشغلتين هذي بالصور وبطريقة سلسة مثل شرحك لهذا الدرس واعذرني على طلبي بنتعبك معنا شوي .

      جزاك الله خيراً

    • حياك الله أخوي الصقر, وشكراً لك على المرور والإطراء

      margin و padding سهله جداً وسأوضحها لك يالغالي

      طبعاً انت عارف الفرق بينهم وأن margin تعني المساحة الخارجية من اي عنصر و padding هي المساحة الداخلية من اي عنصر واللي يكون بينهم الحدود (border)

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

      للتوضيح كالتالي :

      margin:10px
      تعني مساحة بقيمة 10 نقاط من جميع الأماكن وبالترتيب ( فوق يمين تحت يسار )

      فلو أضفنا

      margin:10px 5px

      فهذه تعني فوق وتحت 10 نقطه ويمين ويسار 5 نقاط

      ولو أضفنا

      margin:10px 5px 7px

      فهذه تعني فوق 10 نقاط يمين 5 نقاط تحت 7 نقاط ويمين 5 نقاط مثل اليسار

      وأخيراً

      margin:10px 5px 7px 9px

      تعني فوق 10 يمين 5 تحت 7 يسار 9 نقاط

      وعلى ذالك …

      فهذه الصيغة المحدده لها

      margin:top right bottom left

      وطبعاً كذالك نفس الطريقه للـ padding

      ان شاء الله تكون وضحت لك يالغالي وان شاء الله يستفيد منها الجميع

      ونتقبل اي استفسارات او ملاحظات وشكراً

      • واضحة يا غالي ما قصرت وبيض الله وجهك ..

        طيب فيه أمر كما يلي :
        margin-top
        هل هذا معناه المسافة من الأعلى فقط ؟

    • الله يجزاك الجنة

      ولا يحرمنا من ابداعاتك يا عبدالملك

      اقسم لك بالله اني استفدت كثثثثثثثثير من هذا الدرس

      لتبسيطك في الشرح .. وانا بإنتظار جديد دروسك

      اسال الله العلي القدير دوام التوفيق والنجاح

      واتمنى لك حياة سعيدة

    • abu khalid

      الاخ عبدالملك الثاري

      أشكرك جزيل الشكر على هذا المجهود المتميز جعله الله في ميزان حسناتك

      لدي سؤال بسيط

      بخصوص اكواد css هل هي تأتي جاهزة ام انها تكتب لأني أرى انك اتيت بأكواد جاهزة ولم تفصل حول معناها والفرق بينها وطريقة كتابتها

      وهل هناك مواقع عربية تنصحنا بها لشرح ال css بالتفصيل

      وبخصوص الدرس انا طبقت درسك والنتيجة رائعة عدا محتوى الموقع اتى يجانب القائمة (وفي الاسفل) وليس في الاعلى انظر للصورة : http://u.travelerpedia.net/uploads/travelerpedia12454363300.png

    • خرجاوي

      بارك الله فيك والله يجزاك كل خير على دعائك وتعليقك الرائع

      أبو خالد

      شكراً لك بالنسبة لاستفسارك يا أخي الغالي بخصوص CSS وهي لغة التنسيق فعلاً كلامك صحيح لم اتطرق لها فتلاحظ مع طول الدرس إلا انه يحتاج لتعمق أكثر

      بالنسبة لأوامر الـ CSS التي تطرقنا لها وغيرها يمكنك معرفتها من هذا الموقع :

      http://www.ar.html.net/tutorials/css

      وإذا كان لديك أي استفسار يمكنك طرحه وسيشرفني الإجابة عليك ويمكنك متابعة الدورة هذه لمعرفة طريقة بناء قالب وما يمكن عمله بـ HTML و CSS

      تقبل اطيب تحياتي لك

    • أكرم الشرجبي

      الله يجزيك عنا خير الجزاء ويجعل عملك هذا في ميزان حسناتك

    • أكرم الشرجبي

      هل للدوره دورس باقيه واين اجدها الله يبارك فيك استاذي

    • جميلة .. و لكن ان كانت مفصلة .. يعنى اتش تى ام ال لوحدها و السى أس أس لوحده لكان افضل …
      كمان حجم تحميل الصفحة كبير شوية …

    • ناصر الهاجري

      الله يعطيك الف الف عافيه اخوي عبدالملك

      صحيح من الغباء الوصول المتأخر لهذا الموقع الجميلع

      ولكن الاهم انه افضل من عدم الوصول

      بأذن الله راح اطبق واعطيك ملاحظاتي

    • abdou

      السلام عليكم شكرا لك اخي للدرس لرائع لكن هناك مشكل
      محتوى الصفحة لايضهر في الوسط وانما يضهر في اسفل القائمة
      كيف اجعله يضهر في وسط الصفحة

    • السلام عليكم ورحمة الله

      بصراحة أبدعتنا أ.عبد الملك بما قدمت لنا
      ولكن عندي استفسار لو سمحت
      ؟؟؟

      أنا عندي مشروع بالجامعة
      المفروض اني اسوي موقع خاص فيني
      ولكن الدكتور طلب منا نعمل الموقع فقط بـ XHTML 1.1
      وانت استخدمت في شرحك الـ CSS
      كيف يمكنني استخدام XHTML 1.1 بدون الاستعانة بـ CSS
      ؟؟؟؟؟؟

      آسفة عالإطالة
      ويعطيك الف عافية يا رب
      والله يوفقك في حياتك
      ^_^

      وعليكم السلام ورحمة الله

    • شكراً للجميع على المرور

      اخوي abdou

      ارجوا ارفاق الملف لمعاينته 🙂

      أختي إنعام

      طلب الدكتور غير واضح اذا كان يبغاكم تعلوا تلوين للموقع وتكبير الخط وتنسيقه لكن بدون الـ CSS فهذا مستحيل لكن بإمكانك استخدام الـ CSS داخل ملف الـ HTML كالتالي

      <p style=”color:red; font-size:14pt; font-weight:bold”>بسم الله</p>

      فبهذه الطريقة تم دمج الـ CSS مع الـ HTML فأصبح ملف واحد بدل ملفين

      لكنها ليست الطريقة المعتمده عالمياً لأنها طريقه تقليدية وتحتوي على الكثير من العيوب مثل عندما يكون لديك 100 صفحه فيها عنوان بنمط وتصميم معين كاللون الأحمر والحجم المعين واردتي تغييرها يجب عليك ان تغيريها في جميع الصفحات الـ 100 وهذا صعب وغير عملي وهناك الكثير من الأسباب التي تجعل الملف للتصميم منفصل بوجود الـ CSS

      وبالمناسبة لكثرة السؤال عن مثل هذه المسألة قمت بتحريرها في الموضوع وهي

      طرق استخدام الـ CSS

      يمكنك التوجه له مباشره من هذا الرابط

      http://www.tech-wd.com/wd/2009/05/04/css-and-xhtml-1/#usingcss

      تحيتي لك

    • اهلا اخ عبد الملك

      احنا بعد ما اخدنا كيف نسوي الاستايل
      بس رح ناخد الدرس ان شاء الله

      وهذا هوه اللي طالبه في المشروع
      1.Design document (source code, as zip file)
      2.Minimum of 12 web pages (only XHTML 1.1 )
      3.At least two stylesheets
      4.Nice design is a MUST
      5.A site navigation feature of some kind, allowing the user to move between the pages of the site
      6.At least three links to relevant external web sites
      7.At least one table
      8.A form of some sort
      9.An image rollover, using JavaScript OR another example of Javascript
      10.More content of some description, possibly embedded media (Flash, YouTube etc)

      هوه قالنا انو نبدأ بكتابة الكود
      لانه يحتاج وقت
      وكل ما ناخد شغلة نطبقها

      وشكرا كتييييير على ردك على استفساري
      ويعطيك الف عافية
      ^_^

      • مرحباً بك أختي إنعام اعتذر لك عن التأخير

        بالنسبة لطلب الدكتور في هذه النقاط فهو واضح جداً

        1- المشروع كله يكون في ملف مضغوط من نوع zip

        2- يجب عليك ان تنشأي مشروعك بما لا يقل عن 12 صفحة بالـ HTML فقط يعني ما تضيفين فيه اكواد CSS ولكن في النقطة الثانيه تضيفين اكواد الـ CSS

        3- وانشاء ملفين stylesheets وهما ملفين خاص بالـ CSS كالتالي style1.css و style2.css او main.css و forms.css هالملفين يمكنك بداخلهم عمل اكواد الـ CSS لتصميم الصفحات لمشروعك مثلاً لون الخط الرئيسية ونوعه وحجمه وحجم خط عنوان كل صفحه وإلى آخره

        4- ويطلب تصميم جميل بشكل مهم كما هو واضح

        5- site navigation يمكنك عمله بطريقتين بأحس حال وهي وضع قائمة على الجنب او في الأعلى وهي القائمة الرئيسية وعند الضغط عليها تفتح الصفحه ويكون على القائمة علامه بأنه تم فتح هذه الصفحة بتغيير لونها مثلاً والطريقه الثانيه تكون زياده وليست لوحدها اي انها مكمله للطريقة الأولى لتكون بشكل افضل وهي وضع في الأعلى كالتالي ( الصفحة الرئيسية >> صفحة فرعية >> صفحة فرعية من الصفحة الفرعية )

        6- على الأقل 3 روابط لمواقع خارجية

        7- على الأقل جدول واحد http://www.w3schools.com/html/html_tables.asp

        8- نموذج form هذا يمكنك وضعه في صفحة اتصل بنا http://www.w3schools.com/html/html_forms.asp

        9- يجب عليك استخدام الجافا سكريبت بأي شكل في موقعك وهو اعطى مثال كرول اوفر وهي عند تأشير الفأرة على صورة معينه يتم جعلها متوهجه مثلاً او تتغير إلى صورة اخرى كقائمة مثلاً او غيره, وكمثال بسيط على الرول اوفر تجدينه هنا مع شر http://joemaller.com/js-singleroll.shtml

        10- إضافة محتوى اكثر مع شرح اكثر في الموقع مثل إضافة فلاش في الصفحة او إضافة مقطع يوتيوب ويمكنك إضافة ملف مستند افضل من يوتويب زيادة على اليوتيوب ولإضافة مستند يمكنك ذالك من خلال موقع http://www.scribd.com تسجيل فيه وترفعي ملف مستند ويعرضه لك كفلاش بإمكانك الضغط على Embed واخذ الكود ولصقه في اي مكان في موقعك ليظهر المستند على شكل فلاش طبعاً الـ Embed لتشغيل سيحتاج إلى إنترنت متصل.

        ارجوا ان اكون افدتك وافدت غيرك, وإذا كان هناك اي مشكله يمكننا متابعة حلها من هنا.

        تحيتي لك

    • بارك الله فيك أخي مع أني جئت متأخرا إلا أني أظنني سأتستفيد
      تسلم ايديك
      🙂

    • إنعام

      أهلاً أخي الكريم

      شكرا كثيرا لك على ما قدمت لي من شرح
      فقد غابت عني نقاط كثيرة
      لم أفهمها كما يجب

      واستفدت كثيرا مما قدمت
      والله يعطيك ألف عافية

    • رغم أني تأخرت على هذه الدورة الطيبة إلا أنها سوف تفيدني بالتأكيد 🙂
      شكراً عبدالملك

    • إنعام

      السلام عليكم ورحمة الله

      كيف الحال أخي ان شاء الله بخير

      انا عندي مشكلة كبيرة ومو عارفة كيف احلها
      سويت الموقع تبعي بس للأسف ما بيزبط على كل الـ browsers
      يعني بيشتغل متل ما بدي عالـ internet explorer
      وما بيشتغل مزبوط عالـ firefox & google chrome
      اخدت ستايل جاهز وجربت عليه وما زبط معي
      ممكن اطلب مساعدتك ؟؟؟
      لاني تعبت وانا بجرب … حتى سألت الدكتور
      بس المشكلة انو هوه مو فاضي وما بقدر يزبطلي اياه 🙁

      واسفة عالإطالة
      تحياتي

    • فادي فارس

      ما الفرق بين القوائم الافقيه و الرئسيه؟
      في الhtml لايوجد قرق ولاكن في صفحة css ماهو الامر الفارق

    • السلام عليكم،

      لماذا لا يتم اضافة “القائمة الرئيسية” و “مواقع صديقة” كل منهما في div ليتم بعدها وضعها في قالب على الموقع واستعماله في القوائم ؟

      شكراً.

    • Nael

      أخي لو سمحت كيف يتم تحديد طول وعرض الهيدر
      لأنني لا أريده أن يكون ممدد
      أريده ذو عرض وطول ثابت

    • Thats hilarious that you actually pooped yourself, though oh god, do I feel for you! Just imagining it was uber horrible, so you poor thing to have to deal with it for real. Youre truly a hardcore runner now.

    • Your post had me cracking up. Now at least when I tell my story to people I can say: hey, but at least I didnt crap my shorts like some other girl didnt! 😉

    • I discovered your blog site on google and check a few of your early posts. Continue to keep up the very good operate. I just additional up your RSS feed to my MSN News Reader. Seeking forward to reading more from you later on!…

    • Noticed your site on delicious right now and genuinely enjoyed it.. Hey, I just hopped over to your site via StumbleUpon. Not somthing I would usually browse, but I appreciated your views none the less. Thanks for creating something worthy of reading. great terrific awesome.

    • Hey, that��s the geartest! So with ll this mental faculties AWHFY?

    • Woah this blog is excellent i like studying your posts. Keep up the good paintings! You realize, lots of people are looking round for this info, you could help them greatly.

    • I have been checking out some of your posts and i must say pretty clever stuff. I will surely bookmark your blog.

    • Thanks for your blog post. Some tips i would like to contribute is that pc memory must be purchased if the computer can’t cope with everything you do along with it. One can mount two RAM memory boards of 1GB each, as an example, but not one of 1GB and one with 2GB. One should always check the maker’s documentation for own PC to be sure what type of ram is necessary.

    • Excellent post at XHTML Ùˆ CSS الجزء 1 | عالم التقنية. I was checking continuously this blog and I am impressed! Extremely helpful information specifically the last part 🙂 I care for such information a lot. I was looking for this particular info for a long time. Thank you and good luck.

    • JazyA

    • WIjsI

    • XHTML Ùˆ CSS الجزء 1 | عالم التقنية I was suggested this web site by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You are incredible! Thanks! your article about XHTML Ùˆ CSS الجزء 1 | عالم التقنيةBest Regards Justin

    • XHTML Ùˆ CSS الجزء 1 | عالم التقنية I was suggested this web site by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You’re wonderful! Thanks! your article about XHTML Ùˆ CSS الجزء 1 | عالم التقنيةBest Regards Craig

    • Yet another issue is that video gaming became one of the all-time main forms of excitement for people spanning various ages. Kids have fun with video games, plus adults do, too. The particular XBox 360 is amongst the favorite gaming systems for individuals that love to have a huge variety of activities available to them, plus who like to play live with other people all over the world. Thank you for sharing your ideas.

    • And for the record on Nicks note, that was figurative blubbering and sniffling, but I did say “I love these guys, I really do!” about all of you. I managed to only cry once today when Nick got to the ER.

    • XHTML Ùˆ CSS الجزء 1 | عالم التقنية I was suggested this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my problem. You are wonderful! Thanks! your article about XHTML Ùˆ CSS الجزء 1 | عالم التقنيةBest Regards Nick

    • XHTML Ùˆ CSS الجزء 1 | عالم التقنية I was recommended this website by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my trouble. You are wonderful! Thanks! your article about XHTML Ùˆ CSS الجزء 1 | عالم التقنيةBest Regards Shane

    • مشكور أخي .

    • Marwa

      جزاك الله خيرا – موضوع مهم جداً و شرح جميل ..

    • هدايه

      كيف طريقة الكتابة داخل ملف style.css ؟

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