Follow us on Facebook Follow us on Twitter Linked In Flickr Watch us on YouTube My Space Blogger
التسجيل
النتائج 1 إلى 12 من 12

دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها

هذا الموضوع : دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها داخل الويب وتطوير المواقع | Websites Design & Developmentالتابع الي قسم المنتديات التقنية : هذا الموضوع لمن تابع الدورة منذ البداية وكان متلهفا للخروج منها بمستوى يليق بمصمم مواقع انترنت ولكنه وقف عند مرحلة ...

  1. #1
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها

    هذا الموضوع لمن تابع الدورة منذ البداية وكان متلهفا للخروج منها بمستوى يليق بمصمم مواقع انترنت ولكنه وقف عند مرحلة التكويد وأصبح الأمر بالنسبة له معقدا أو تخيل له ذلك
    فالأمر ليس بمعقد على الاطلاق
    أولا : الفوتوشوب ما هو الا بوابة عبور بمعنى أننا نستخدم الفوتوشوب لمشاهدة كيف سيكون شكل الصفحة بعد ذلك وليس الفوتوشوب مصنعا لصفحات الانترنت
    ثانيا : التكويد ثم التكويد ثم التكويد هو العامل الرئيسى والاساسى لصنع صفحات الانترنت ويجب أن تقوم بتكويد صفحتك بنفسك
    ثالثا : ملف الانماط الانسيابية css هو المصمم بعد الفوتوشوب فهو الفرشاة والدهان لصفحتك
    رابعا : لكى تكون صفحتك ذات مستوى وتقييم عالى على الانترنت يجب أن تتبع خطوات قالتها لنا مدرسة صنع أكواد الـ html نفسها وهى مدرسة w3 W3Schools Online Web Tutorials
    يجب أن تتبع طريقة تكويد الصفحة كما قالت لنا لانها المصنع الوحيد والمدرسة الوحيدة كما ميكروسوفت للويندوز والتطبيقات والبرامج ويجب على كل شركة تنتج برمجيات كبرامج الانتى فيروس مثلا أن تقوم بصنع برنامجها بناءا على برمجية وبيئة الويندوز والا فلن يعمل أو بمعنى آخر والا فمن اللذى سيستخدمه ؟؟
    --------
    هذه النقاط للعلم والحفظ فى بداية كل عمل من أعمالك على الانترنت
    ---------
    الـ DOCTYPE من المفترض أن تكون فى أعلى أى صفحة وأول شيئ يتم كتابته قبل تاج <html> ، كما أنها ليست من ضمن لغة html بل هى أوامر أو تعليمات لمتصفح الويب تخبره عن إصدار الـ markup language لغة التكويد اللذى تستخدمه الصفحة ..
    هذا السطر يقوم بتعريف نوعية الملف Document Type Definition DTD واللتى بدورها تقوم بتحديد أوامر وقواعد اللغة المكتوب بها الصفحة لكى يقوم المتصفح بإظهارها لأجهزة العملاء – الزوار – بطريقة صحيحة

    http://www.w3schools.com/tags/tag_DOCTYPE.asp
    --------------------------
    الديف div هو مقطع فى الصفحة ويستخدم فى جمع أو لم شمل مجموعة عناصر بداخله لتكون ثابتة لا تهتز يمينا أو يسارا

    http://www.w3schools.com/tags/tag_div.asp
    ------------------------
    تاجات h1,h2,h3,h4,h5,h6 هى رؤوس عناوين ومن الاول للسادس يتم حساب حجم العنوان المكتوب
    فـ h1 الأكبر حجما و h6 هو الاصغر حجما
    -------------------------
    الرابط a - هذا التاج يعبر عن وجود رابط بداخله يتجه لصفحة ما مثل
    كود HTML:
     <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
    HTML a tag
    ----------------------
    تاج البودى body يعلم المتصفح بأن ما بداخله حتى نهايته هو محتوى الصفحة اللتى سيتم عرضها من خلاله
    HTML body tag
    -------------------------
    تاج الصور img هو عبارة عن رابط لصورة فى هذا المكان ويتم عرض الصورة فيه
    HTML img tag
    ---------------------
    تاج مجموعات القوائم ul أو unordered HTML list ويندرج تحته li وهو عنصر القائمة نفسه
    ومعنى unordered HTML list أى أنها بدون بادئة كرقم أو علامة صفرية لمجموعة القوائم
    بعكس orderd list والتاج الخاص بها هو ol
    HTML ul tag
    -----------------------------
    تاج link تاج جلب ملفات خارجية كملفات css و javascript
    HTML link tag
    ------------------------------------------------------------------------------------
    كما يمكنك تعلم html بحرفية أكثر من هذا الموقع
    www.html.net

    التعديل الأخير تم بواسطة RealIdea ; 13 / 07 / 2010 الساعة 34 : 03 AM
    يحفظ العلم بالعمل به وتعليمه والتأليف فيه، ومن حفظه وكرره وذاكره ودرسه ثبت في صدره

    موقعى الشخصى
    www.Real-Idea.Net



  2. #2
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: بعض مصطلحات لغة html و css ومعانيها

    بعض معانى الـ css


    اذا كتبت مثلا وسم البودى body وقمت باغلاقة بهاتين العلامتين {}
    كود HTML:
    body {
        font-size:12px;
    }
    بهذا السطر أقول للمتصفح أن يجعل أى تكست أو محتوى كتابة أو فونت أن يكون حجمه 12 بكسل
    -----------------------
    لو أخذت id أو class لاتعامل معه فستكون طريقة كتابته كالتالى

    كود HTML:
    #right_col {
       width:120px;
       float:right;
    }
    كود HTML:
    .right_col_h3 {
       background:blue;
    }
    الاول id والثانى class الايدى يبدأ بعلامة # والكلاس بالنقطة
    ومعنى float أى فرض اتجاه لليمين فالقيمية right جاءت بعد وضع النقطتين فوق بعضهما :
    وللفصل بينه وبين استايل آخر لنفس الايدى أو الكلاس نضع هذه العلامة ;
    CSS Tutorial

    ----------
    لا أريد هنا أن أسبق الأحداث لشرح css فسيتم شرحه بالدورة فى المراحل القادمة فتابعوا الدورة
    وفقنا الله واياكم

  3. #3


    الصورة الرمزية ام اياد
    الإشراف العام

    الحالة
    غير متصل
    تاريخ التسجيل
    Jul 2007
    الدولة
    مصرية في الامارات
    المشاركات
    7,307
    Thanks
    0
    Thanked 3 Times in 3 Posts
    معدل تقييم المستوى
    179

    رد: بعض مصطلحات لغة html و css ومعانيها

    جزاك الله خيرا استاذنا لان بجد انا من اللي اتكلمت عليهم انا موضوع الاكواد ده بالنسبالي معضلة وموضوع حضرتك مهم جدااا عشان تيسير الامور شوية انا هقرا كلمة كلمة وان شاء الله يكون كل حرف هو في ميزان حسانتك يارب .

  4. #4
    الصورة الرمزية Last Soul
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Feb 2009
    الدولة
    ....
    المشاركات
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: بعض مصطلحات لغة html و css ومعانيها

    ربي يجزيك الخير أخي

    موضوع شيق جداا والمواقع الي ذكرتها اكثر من رائعة

    يوفقك ربي دنيا ةوآخرة

  5. #5
    الصورة الرمزية osama
    مصمم متميز

    الحالة
    غير متصل
    تاريخ التسجيل
    Jul 2006
    الدولة
    مصر
    المشاركات
    1,386
    Thanks
    0
    Thanked 0 Times in 0 Posts
    الصور
    10
    معدل تقييم المستوى
    43

    رد: بعض مصطلحات لغة html و css ومعانيها

    بارك الله فيك اخى الكريم
    طريقه شرح بسيطه وجميله وهدا هو المطلوب وخصوصا مع ..التكويد ثم التكويد ثم التكويد

  6. #6
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Feb 2008
    الدولة
    SAUDI
    العمر
    28
    المشاركات
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    13

    رد: دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها

    أأكد حضوري ..........وشكرا ما قصرت اخي الكريم

  7. #7
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Nov 2010
    المشاركات
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها

    ممكن دورة عن كيفية بناء المواقع بالاكشن اسكريبت فى الفلاش

  8. #8
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها

    انا لا اعمل بالفلاش اطلاقا
    عذرا أخى الكريم

  9. #9
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Oct 2011
    المشاركات
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها

    اقتباس المشاركة الأصلية كتبت بواسطة RealIdea مشاهدة المشاركة
    الأخوة الافاضل تم تعديل المرحلة الثانية وضمها مع المرحلة الثالثة
    وفقنا الله واياكم
    المرحلة الثانية
    سنستخدم برنامج النوت باد ++ لتكويد الصفحة حيث أن له مزايا كثيرة وعديدة منها معرفة التاجات اللتى ما زالت مفتوحة من التاجات الصحيحة اللتى أغلقت وذلك عن طريق تظليل بداية ونهاية التاج




    ستلاحظ فى هذه الصورة أن تاج البانر سليم وهناك تظليل على بداية ونهاية التاج
    كما أنه يمككنا اختيار تاج معين محفوظ فى البرنامج أثناء التكويد من خلال الضغط على مفتاحى ctrl + space لتظهر لنا نافذة منسدلة بها كل الاوامر



    يمكنك الآن اتقان التعامل مع هذا البرنامج باتباع هذه الخطوات البسيطة قبل العمل
    افتح البرنامج وتوجه الى قائمة sittings ومنها الى preferences ثم اختر تبويب new document/default directory واذهب الى encoding واختر فتح الملفات دائما بفورمات UTF-8 without BOM وقم أيضا بتحديد Apply to opened ANSI files ثم close
    اذهب الى قائمة view ثم منها الى word wrap
    شكرا لك – لقد قمت الآن بما يجب عليك أن تفعله قبل البدأ فى فتح أى ملفات
    تأكيدا على ما قمت بعمله قم باغلاق البرنامج الآن ثم افتحه مرة أخرى
    قبل التكويد يجب أن نحفظ صور البانر وصورة علامة الاستفهام والصورة اللتى بجوارها والصورة الخاصة بالمنتجات أو العروض
    سنحفظ البانر باسم header.jpg وايقونة علامة الاستفهام باسم slogan.jpg والصورة اللتى بجوارها باسم java.jpg وصور المنتجات باسم imagemain.jpg



    ثم قم الآن بصنع مجلد لتضع فيه محتويات الموقع بالكامل على الديسك توب مثلا فى مجلد جديد وليكن اسمه my new website
    واصنع بداخله مجلد جديد وليكن اسمه images_folder وضع فيه الصور اللتى أخرجناها من الفوتوشوب منذ قليل فى الخطوة السابقة





    بخصوص التقطيع
    فأنا لم استخدم اداة التقطيع كى اخرج هذه الصور فكل الصور من خارج التصميم فى الاصل الا البانر قمنا بصنعه فى الفوتوشوب
    طريقة استخراج البانر لمن لا يعرف كيف يقوم بفصله عن التصميم كالتالى
    فى المرحلة الاولى من الدورة كنا قد اخترنا مقاس البانر من خلال أداة Rectangle Shape Tool بمقاسات 950 بكسل عرض فى 176 ارتفاع
    سوف نقوم الآن بمعل Canvas Size
    افتح ملف layout.psd فى الفوتوشوب وتوجه الى قائمة image ومنها الى canvas size ثم أختر أن يكون الـ width والـ hight بالكسل واترك الـ width كما هو 950 بكسل ثم غير قيمة الـ hight الى 176 بكسل واختر القطع من الاعلى من خلال الضغط على السهم الاوسط العلوى واضغط ok



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

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

    لدينا فى ملف العمل layers قمنا بتصميمها أو جلبها ووضعها فى ملف التصميم
    لدينا financial و icon? و image و image1 و image2 ...... وبقية اللايرات
    قم باختيار كل لاير تريد استخدامه فى الصفحة بعد ذلك مثل لاير financialثم اذهب الى قائمة Layer ومنها الى أمر New Layer Based Slice وسوف يقوم بتحديد اللاير وحده فى slice وهكذا بقية اللايرات المستخدمة فيصبح لدينا هنا عدد 8 slice ايقونة علامة الاستفهام وصورة financial وال 6 صور المتبقين





    احفظ هذه الصور الآن بالطريقة التالية
    من قائمة file اختر save for web and devices
    ومن النافذة الخاصة بها اختر نوعية الصور jpg



    ثم اضغط ok لتفتح لك نافذة مكان الحفظ احتر قبل الحفظ images only و ايضا all user slices لكى يقوم باستخراج ما قمت بتقطيعه فقط



    غير اسماء الصور الناتجة الى ما تريد وضعهم فى المجلد images_folder كما بالشرح بالاعلى


    مرحلة التكويد
    الجزء الأول : كتابة الهيدر

    - تعريف المتصفح بنوعية ملفك
    تعرضت لهذه النقطة بالخصوص فى مقال المجلة العدد الثانى حيث كنت أتكلم عن توافقية الصفحات مع المستعرضات بعنوان لماذا صلاحية صفحتك دائما invalid ، لكننا هنا سنزداد معرفة بمتطلبات w3 لتعريف صفحاتك قبل قراءة محتوياتها من طرف المتصفح، وتسمى هذه الجزئية بـ DOCTYPE أى نوعية الملف

    [high]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    [/high]
    الـ DOCTYPE من المفترض أن تكون فى أعلى أى صفحة وأول شيئ يتم كتابته قبل تاج <html> ، كما أنها ليست من ضمن لغة html بل هى أوامر أو تعليمات لمتصفح الويب تخبره عن إصدار الـ markup language لغة التكويد اللذى تستخدمه الصفحة ..
    هذا السطر يقوم بتعريف نوعية الملف Document Type Definition DTD واللتى بدورها تقوم بتحديد أوامر وقواعد اللغة المكتوب بها الصفحة لكى يقوم المتصفح بإظهارها لأجهزة العملاء – الزوار – بطريقة صحيحة
    - تجهيز الصفحة لتعرض اللغة العربية RTL بشكل سليم وطبيعى بدون مشاكل
    هناك قاعدة تحفظها كل المتصفحات وهى قاعدة الاتجاهات واللتى يكون الافتراضى لها هو LTR من اليسار بما أن لغة برمجة الويب باللغة الانجليزية ، فاذا لم تقم بابلاغ المتصفح باتجاهات تصميمك فسيقوم تلقائيا بالقراءة من جهة اليسار أولا
    ولا أقصد هنا التكست أو المحتوى فقط بل أيضا أقصد تكويد الصفحة نفسه ، فالمفترض أننى أقوم بكتابة العمود الأيسر أولا خلال التكويد لكن مع
    RTL
    أستطيع كتابة العمود الأيمن أولا



    ويمككنا كتابة الكود الخاص بذلك فى داخل تاج الـ html كالتالى


    [high] <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    [/high]


    اذا هيدر الصفحة سيكون كالتالى
    [high]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    [/high]




    -
    بداية كتابة الهيد Head




    كما هو معلوم وطبيعى فى صفحات الانترنت كتابة الهيد أو رأس الصفحة واللتى تحتوى على معلومات الميتا بمختلف أنواعها ويحتوى أيضا على عنوان الصفحة وأيضا يحتوى على روابط ملفات خارجية لجلبها وعرضها حين قرائة الصفحة من طرف المتصفحات – مثل ملفات الجافا سكربت والـ css وخلافه -




    [high]
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>دورة بناء صفحات الانترنت</title>
    <meta name="description" content="وصف صفحتك" />
    <meta name="keywords" content="الكلمات،المفتاحية،لم ركات،البحث" />
    <meta name="author" content="Original design: ayman essaied - http://www.real-idea.net" />
    </head>
    [/high]



    هذا الهيد يقوم باعطائنا
    - معلومات الترميز UTF-8 وهو الترميز العالمى لقراءة اللغات الغريبة - منها العربية - بطريقة صحيحة ،
    عنوان الصفحة اللذى يظهر للزائر فى شريط المتصفح بالأعلى وبالأسفل




    - وصف محتويات الصفحة وما تتكلم عنه وهو خاص بمحركات البحث لتقييم صفحتك
    - الكلمات المفتاحية اللتى يتم التركيز عليها أثناء قراءة صفحة من طرف أحد محركات البحث
    - اسم المؤلف وبياناته – وهو كود خاص بى ليس من الضرورى التقيد بكتابته –
    · تذكر أنه كلما كانت كلماتك المفتاحية قليلة كلما كانت هدفا لعناكب محركات البحث
    · سنأتى آجلا للـ HEAD ثانية لوضع معلومات ملفات الـ css اللتى سنقوم بصنعها فتذكر ذلك

    الجزء الثانى : تكويد محتوى الصفحة
    Body



    نذكر هنا بعض النقاط قبل البدأ
    تاج div اختصار division أى قسم وصفحتنا لها عدة أقسام أو div's منها أول قسم div يحتوى الموقع بالكامل وهو containerdiv يوضع بداخله جميع محتويات الموقع





    توضح الصورة السابقة مكان التقسيمات div's الموجودة بالصفحة
    لعمل القوائم سنستخدم دائما Unordered List لعمل عناصر القائمة List Items بداخلها






    للكتابة العادية سنستخدم البراجراف p

    ملاحظة هامة : الفرق بين الـ ID والـ CLASS
    الـ id مستقل بذاته لا يندرج تحت معرّف آخر ولا يندرج تحته فى الاستايل أى عنصر غيره
    الـ class يعطى كل عنصر تحته نفس الاستايل
    أى أنه لو لدينا عنصر أو div له id لا يستطيع عنصر آخر فى الصفحة أن يأخذ نفس الاستايل
    أما الكلاس فكل العناصر المسماه به تأخذ نفس الاستايل
    وقد قصدت أن أكتب هنا هذه الملحوظة كى لا نتفرق أو نتشتت عندما نستخدم الكلاسات أو الايديهات عند تكويد محتوى الصفحة

    القسم الأول : تكويد البانر

    اتفقنا أن الصفحة بالكامل ستكون بداخل div اسمه containerdiv ثم يليه الهيدر كاملا كما يلى


    [high]
    <div id="containerdiv">
    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->
    [/high]
    شرح الكود السابق
    فتحنا تاج containerdiv واللذى سنقوم باغلاقه فى نهاية التكويد للصفحة – ثم قمنا بفتح تاج الهيدرheader ووضعنا بداخله البانر مجرد تاج مفتوح ثم أغلقناه مباشرة بدون وضع أى تاجات بداخله وذلك لأننا سنقوم باعطائه خلفية وهى صورة البانر اللذى صممناه فلا حاجة أن نقوم بوضع أى أكواد بداخل هذا البانر فسيكون له قيم عرض وطول وهى قيم البانر 950 بكسل فى 176 بكسل
    بعد ذلك قمنا بفتح القائمة الرئيسية للموقع من خلال فتح تاج div المسمى topmenu لكى يتسنى لنا وضع مجموعة عناصر القائمة ul بداخله
    أما القوائم نفسها topmenu_li تأخذ نفس الـ class لكى نستطيع ارفاق ستايل لها كلها مرة واحدة فى نفس الوقت
    ثم أغلقنا القوائم والهيدر
    موضوع سهل وليس صعبا فبهذه الأكواد البسيطة قمنا بعمل القسم العلوى من الصفحة كاملا واللذى سيكون فيما بعد على هذا الشكل



    لن أقول لك قم الآن بفتح الصفحة بأى مستعرض لكى ترى ما قمت بعمله اطلاقا – فلن ترى شيئا يمكنك أن تميزه على أنه حتى صفحة ويب أو أى شيئ على الاطلاق فتابع بقية تكويد الصفحة حتى النهاية

    القسم الثانى : تكويد العمود الأيمن

    مجرد صورة وخمس عناوين وخمس مقاطع تكست وباختصار img-h3-p فقط ذلك
    سوف نعطى العمود الأيمن نفسه id ثم نعطى العناوين كلها نفس الـ class وأيضا التكست كالتالى

    [high]
    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->
    [/high]
    كان من الممكن أن لا أقوم باعطاء العناوين أى كلاسات ولا حتى التكست أقوم بوضع كلاس له لكن احتياطا فى حالة وجود عناوين أخرى h3 لنفس العمود فقمت بوضع كلاس لأحدد للاستايل أى العناوين سوف يندرج تحته
    فى جزئية صنع ملف الانماط الانسيابية css سوف نتعرض لشرح وافى لهذه النقطة

    حتى الان التكويد الكامل لما قمنا بعمله كالتالى قم بحفظه فى ملف داخل مجلد عملنا my new website
    [high]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>دورة بناء صفحات الانترنت</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Original design: ayman essaied - http://www.real-idea.net" />
    </head>
    <body>
    <div id="containerdiv">

    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->

    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->
    [/high]




    المرحلة الثالثة
    القسم الثالث : تكويد العمود الأيسر



    العمود الأيسر عبارة عن 5 ديفات div سنسردهم بالتفصيل كيف يكون تكويدهم


    • الصور المتقلبة

    سنعتبر أن أول جزء فى العمود الأيسر وهو الصورة سيكون فيما بعد عبارة عن جافا سكربت يتم فيها تقليب عدد من الصور لذا سميت هذا الـ div بـ javascript استعدادا
    أو بمعنى آخر سنقوم الآن بوضع صورتنا هنا ولا يوجد جافا سنستخدمها
    - اعتبارا لمن لا يريد استخدام هذه الجزئية -


    [high]
    <div id="leftcol">

    <div id="javascript">
    <img src="images_folder/java.jpg" alt="" />
    </div><!-- end java script div-->
    [/high]


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

    • القوائم




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

    [high]
    <div class="menu">
    <ul>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل</a></li>
    </ul>
    </div>
    [/high]

    تذكر أن الـ <ul> والـ </ul> هما بداية ونهاية مجموعة عناصر قوائم دائما والـ li هو عنصر القائمة وهنا قمنا بداخل عنصر القائمة li بوضع مجموعة عناصر ul لقوائم أخرى li ستكون كقوائم منسدلة عند الوقوف على هذا العنصر – عن طريق الـ css -





    • المحتوى الكتابى على اليمين

    سيوضع هذا المحتوى الكتابى فى div خاص به وسيأخذ الكلاس floatright وسبب أنه لم يأخذ id خاص به هو أننى فضلت أن أجعل كل ما سيأخذ الاتجاه اليمين الاجبارى فى الـ css يكون تحت نفس الكلاس بدلا من أن أصنع كل مرة id له نفس الاستايل
    وسنتعرض ونتعرف لهذا أكثر عند الدخول فى مرحلة الـ css وأرجوا من المشتركين فى الدورة اللذين ليس لهم خبرة سابقة بملفات الـ css أنت يذاكروا عنها ولو قليلا




    [high]
    <div class="floatright">
    <p class="aboutcompany">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.. فالوقت نعمة كبرى منَّ الله بها علينا،
    ولكن معظم الناس غافلون عن نعمة الوقت.
    وقد دأب بعض علماء الغرب على إصدار كتب حول إدارة الوقت،
    حققت هذه الكتب نسبة مبيعات عالية في العالم،
    بما يؤكد اهتمام الناس بهذا الجانب المهم وحرصهم على تعلم الجديد في فنّ استغلال الوقت واستثماره بأفضل صورة ممكنة،
    وبما يحقق مصالحهم وأهدافهم وبالنتيجة ليصلوا إلى السعادة التي يبحث عنها كل إنسان.
    ولكن لو تأملنا هذه الكتب نجد أنها تركز على هدف واحد هو الدنيا وزينتها،
    فمقياس النجاح لديهم هو ما يحققه المرء من مكاسب مادية أو شهرة أو سلطة،
    ولكنهم يتجاهلون فكرة بسيطة وهي المصير الذي ينتظر كل واحد منا بعد الموت،
    وهذه الفكرة كانت الخطوة الأولى التي جعلتني أتّجه نحو البحث والتأليف والتفكر والتدبر.
    </p>
    </div><!-- end div floated right-->
    [/high]


    بما أن شكل الكتابة هنا سيكون مختلفا لذا أخذ كلاس مختلف aboutcompany لكى أكون قادرا على إعطاءه استايل خاص

    • مجموعة الصور المعبرة عن المنتجات أو ما شابه

    لدينا 6 صور هنا لهم نفس معلومات الطول والعرض وكلهم على اليسار من التسكت – المحتوى الكتابى – سنضعهم فى div خاص بهم يأخذ الكلاس floatleft لكى يتجه ناحية اليسار اجباريا



    [high]
    <div class="floatleft">
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    </div><!-- end floated left div-->
    [/high]



    أعطيت أيضا كل الصور نفس الكلاس لاعطائهم نفس الاستايل فى الـ css

    • الفوتر


    به قائمتان حاليا يمكننا أن نصنع div بداخله مجموعة قوائم كالتالى
    وسنغلق هنا العمود الايسر ثم نغلق الـ containerdiv أيضا ثم الـ body ثم الـ html



    [high]
    <div id="footer">
    <ul>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Home Page</a></li>
    </ul>
    </div><!-- end footer div-->

    </div><!-- end left col-->

    </div><!-- end container div-->
    [/high]


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



    [high]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>دورة بناء صفحات الانترنت</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Original design: ayman essaied - http://www.real-idea.net" />
    </head>
    <body>
    <div id="containerdiv">

    <div id="header">

    <div id="banner">

    </div><!-- end banner-->

    <div id="topmenu">
    <ul>
    <li class="topmenu_li"><a href="#">الصفحة الرئيسية</a></li>
    <li class="topmenu_li"><a href="#">خدمات الشركة</a></li>
    <li class="topmenu_li"><a href="#">نبذة عنا</a></li>
    <li class="topmenu_li"><a href="#">من نحن</a></li>
    <li class="topmenu_li"><a href="#">اتصل بنا</a></li>
    </ul>
    </div><!-- end top menu-->
    </div><!-- end header-->

    <div id="rightcol">
    <img src="images_folder/slogan.jpg" class="siteslogan" alt="" title="" />
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    <h3 class="rightcol_h3">العنوان هنا</h3>
    <p class="rightcol_p">لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم.
    </p>
    </div><!-- end right col-->

    <div id="leftcol">

    <div id="javascript">
    <img src="images_folder/java.jpg" alt="" />
    </div><!-- end java script div-->



    <div class="menu">
    <ul>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">خدمات</a>
    <ul>
    <li><a href="#">رابط آخر</a></li>
    <li><a href="#">رابط قائمة</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل بنا</a>
    <ul>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">عن الشركة</a></li>
    <li><a href="#">رابط</a></li>
    </ul>
    </li>
    <li><a href="#">اتصل</a></li>
    </ul>
    </div>


    <div class="floatright">
    <p class="aboutcompany">
    لا يوجد شيء يمكن للمؤمن أن يندم عليه يوم القيامة،
    إلا لحظة مرت عليه في الدنيا ولم يذكر الله فيها!
    ولا توجد لحظة تمرّ على المؤمن أسعد من أن
    يحقق فيها عملاً يرضي الله تعالى،
    ويشعر معه برضا هذا الإله العظيم..
    فالوقت نعمة كبرى منَّ الله بها علينا،
    ولكن معظم الناس غافلون عن نعمة الوقت.
    وقد دأب بعض علماء الغرب على إصدار كتب حول إدارة الوقت،
    حققت هذه الكتب نسبة مبيعات عالية في العالم،
    بما يؤكد اهتمام الناس بهذا الجانب المهم وحرصهم
    على تعلم الجديد في فنّ استغلال الوقت
    واستثماره بأفضل صورة ممكنة،
    وبما يحقق مصالحهم وأهدافهم وبالنتيجة
    ليصلوا إلى السعادة التي يبحث عنها كل إنسان.
    ولكن لو تأملنا هذه الكتب نجد أنها تركز
    على هدف واحد هو الدنيا وزينتها،
    فمقياس النجاح لديهم هو ما يحققه
    المرء من مكاسب مادية أو شهرة أو سلطة،
    ولكنهم يتجاهلون فكرة بسيطة وهي المصير
    الذي ينتظر كل واحد منا بعد الموت،
    وهذه الفكرة كانت الخطوة الأولى التي
    جعلتني أتّجه نحو البحث والتأليف والتفكر والتدبر.
    </p>
    </div><!-- end div floated right-->

    <div class="floatleft">
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    <img src="images_folder/imagemain.jpg" class="mainimages" alt="" />
    </div><!-- end floated left div-->

    <div id="footer">
    <ul>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Home Page</a></li>
    </ul>
    </div><!-- end footer div-->

    </div><!-- end left col-->

    </div><!-- end container div-->

    </body>
    </html>
    [/high]


    قم بحفظ الملف الآن فى مجلد العمل my new website بجوار مجلد images_folder
    باسم
    default.htm
    او اى مسمى تريده
    هذا هو الجزء الثانى

  10. #10
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها

    اقتباس المشاركة الأصلية كتبت بواسطة mohamedok مشاهدة المشاركة
    هذا هو الجزء الثانى
    نعم هو الجزء الثانى
    تحياتى لك
    قمت باقتباس كلامك حتى اعرف ماذا كتبت لانى لم أرى محتوى ردك عندى

  11. #11
    الصورة الرمزية StayALive
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    May 2011
    المشاركات
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها

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

    اخي الكريمـ ارجوا منك بعض الاهتمام لانني اريد فهم بعض الاومر في css

    بنسبة للأمر overflow:hidden

    والامر padding

    والامر display:inline;
    لا يعمل معي

    ارجوا فهم ذلك وارجوا ان يتسع صدرك لأسألتي

  12. #12
    الصورة الرمزية طفلة القمر
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Oct 2010
    المشاركات
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - بعض مصطلحات لغة html و css ومعانيها

    رجاءا متابعة الدرس...

    أفادكم الله

    I have been in love and been alone
    I have traveled over many miles to find a home

 

 

المواضيع المتشابهه

  1. دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 34
    آخر مشاركة: 27 / 01 / 2012, 13 : 07 PM
  2. دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 62
    آخر مشاركة: 24 / 01 / 2012, 41 : 08 PM
  3. دورة تعلم بناء صفحات الانترنت من الفوتوشوب إلى Html + CSS
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 81
    آخر مشاركة: 22 / 01 / 2012, 53 : 04 AM
  4. التصويت على تسجيل دورة تعلم بناء صفحات الانترنت بالفيديو
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 15
    آخر مشاركة: 04 / 12 / 2010, 54 : 04 AM
  5. دورة تعلم بناء صفحات الانترنت
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 38
    آخر مشاركة: 07 / 09 / 2010, 30 : 05 AM

الكلمات الدلالية لهذا الموضوع

المفضلات

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
الساعة الآن 24 : 05 AM
Powered by vBulletin® Version 4.2.3
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.
Search Engine Optimization by vBSEO