معهد دعم اتش فى اى بى اس لحلول الويب - Powered by vBulletin


 
 
النتائج 1 إلى 7 من 7

الموضوع: إنشاء مستند html

  1. #1
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    Talking إنشاء مستند html


    إنشاء مستند html

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

  2. #2
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    رد: إنشاء مستند html


    التمرين 1

    إنشاء الدليل الذي سيكون الدليل الجذر للموقع.
    نسخ ولصق التالية في مستند HTML جديد فارغ -- إذا كنت تستخدم محرر WYSIWYG تأكد من القيام بذلك في طريقة العرض "المصدر"
    حفظ هذا المستند على أعلى مستوى من الدليل موقعك. لا يهم ما تسمونه لكن انا ذاهب للإشارة إلى أنها
    وهذا ما يسمى إعلان نوع الوثيقة ، ويجب استخدامها ، في شكل هذا بالضبط ، بالضبط مثل وضعها هذا ، فوق كل شيء آخر ، على المستند لتكون صالحة XHTML 1.0 الصارمة. هذا هو البرنامج التعليمي حول استخدام أوراق الأنماط ، لذلك لا أريد أن أستطرد كثيرا في كيفية إنشاء XHTML صالح. يكفي أن أقول أنه يجب عليك أن تحاول جهدك لكتابة XHTML صالحة إذا كنت ترغب في العمل مع المغلق ، وبذلك تحتاج إلى استخدام نوع وثيقة إعلان والتحقق صفحاتك باستخدام مدقق. لمعرفة المزيد حول XHTML يمكنني فقط بقوة ننصح نلقي نظرة على مسارنا الايقاع الذاتي ، HTML و XHTML لCSS .
    أنت لست بحاجة إلى أن ننظر عن كثب جدا في هذا الرمز لأغراض هذا البرنامج التعليمي في كل شيء -- في الواقع بصرف النظر عن التأكد من أنها ارتباطات ورقة الأنماط ، والذي سنقوم به قريبا ، يمكنك إلى حد ما قريبة منه وتنسى حول هذا الموضوع.
    ملاحظة : إذا كان لديك نظرة على شيء واحد رمز قد تبرز لك. رمز للحصول على قائمة غير مرتبة التي تشكل في الناف بار ( <div id="navbar"> ) ليس لديه مساحة إضافية الأبيض في ذلك بين عناصر HTML. ومن الواضح أن هذه ليست مثالية ، لأنه من الاسهل بكثير لتحرير في وقت لاحق إذا ، على سبيل المثال ، هناك عوائد النقل بحيث يكون لكل من <li> ق هي على سطر منفصل. ومع ذلك ، إذا قمت بإدراج أي مساحة بيضاء في وجود في جميع ستجد أن هذه النتائج في التباعد بين عناصر اضافية في الناف بار عند عرض الصفحة في Internet Explorer. بطبيعة الحال ، هذا هو السلوك عربة تماما كما اضافية في المساحة البيضاء رمز يجب أن يكون أي تأثير على الإطلاق على كيفية جعل صفحة. دعنا نقول فقط أنه في هذه الحالة فإنه لا : مجرد مثال آخر للكيفية التي يمكن أن تجعل إنترنت إكسبلورر الجحيم حياتك. الآن ، هناك إصلاح CSS يستند إلى هذه المشكلة ، ولكن هذا الطريق إلى ما بعد موجز لهذا البرنامج التعليمي لتغطية ذلك. وبمجرد الانتهاء من هذا البرنامج التعليمي ، وأنت تريد وسيلة أكثر ملائمة لحل هذا الخطأ ، التحقق من ذلك .
    وملاحظة أخيرة حول محتوى صفحة الويب. فقط في حال كنت لم يطلعوا عليه من قبل ، فإن النص على الصفحة التي قمت بإنشائها هو معيار "دمية النص" المستخدمة عادة من قبل المصممين في الوقت الذي يتم تطوير موقع في محاولة لمساعدة العملاء من الهاء في الصفحة المحتوى والتركيز بدلا من ذلك على العمارة ، والمظهر وتخطيط أثناء عملية التصميم.
    إنشاء ورقة نمط

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

  3. #3
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    رد: إنشاء مستند html


    التمرين 1

    إنشاء الدليل الذي سيكون الدليل الجذر للموقع.
    نسخ ولصق التالية في مستند HTML جديد فارغ -- إذا كنت تستخدم محرر WYSIWYG تأكد من القيام بذلك في طريقة العرض "المصدر"
    حفظ هذا المستند على أعلى مستوى من الدليل موقعك. لا يهم ما تسمونه لكن انا ذاهب للإشارة إلى أنها

    كود:
    index.html . 
    
    <DOCTYPE HTML PUBLIC "! -- / / W3C / / DTD XHTML 1.0 الصارم / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML> <HEAD> أبجد هوز <TITLE>المؤتمر الوطني العراقي </ عنوان> <metahttp-equiv="Content-Type" content="text/html؛ charset=iso-8859-1" /> </ HEAD> <BODY> <divid="header"> <p>وDuis autem فيل ألم أوم iriure في hendrerit vulputate velit esse في / <molestie consequat ، فيل illum مؤلمة ولا عقوبة الاتحاد الأوروبي feugiat facilisis آخرون في فيرو اروس accumsan آخرون iusto أوديو خامسة blandit dignissim praesent luptatum zzril delenit augue duis مؤلمة الشركة المصرية للاتصالات facilisi feugait لا عقوبة. P> </ DIV> <divid="outer-image"> <divid="inner-image"> </ DIV> </ DIV> <divid="content"> <divid="navbar"> <ul><li><ahref="http://www.westciv.com/"> أبجد هوز </ أ> </ li> <li>وصفحة <a href = "http://www.westciv.com / westciv / downloads.html "> ألم </ أ> </ li> <li>و<ahref="http://www.westciv.com/style_master/house/good_oil/dao/index.html"> consetetur < / أ> </ li> <li>وبقطر <aSED href="http://blogs.westciv.com/standards/"> </ أ> </ li> <li>وصفحة <a href = "http:/ / www.westciv.com / style_master / البيت / دروس / سريع / index.html و"> بقطر voluptua </ أ> </ li> <li>وصفحة <a href =" http://www.westciv.com/style_master/ أكاديمية / browser_support / index.html و"> nonumy eirmod </ أ> </ li> <li>و<ahref="http://www.westciv.com/style_master/academy/css_tutorial/index.html"> tempor invidunt </ أ> </ li> <li>و<ahref="http://www.westciv.com/courses/index.html"> التحرير labore </ أ> </ li> <li>وصفحة <a href = "http://www.westciv.com/style_master/house/good_oil/index.html"> خوستو الثنائي </ أ> </ لى> </ UL> </ DIV> <divid="main-text"> أبجد هوز <h1>تحليل ألم </ H1> <p>وألم أبجد هوز <ahref="https://order.kagi.com/؟WC4"> التحليل الضوئي </ A> ، consetetur sadipscing elitr ، SED بقطر nonumy eirmod tempor invidunt التحرير labore آخرون مؤلمة ماجنا aliquyam erat ، SED بقطر voluptua. في فيرو إيوس وآخرون وآخرون accusam خوستو الزوجى دولوريس rebum عصام وآخرون. STET clita kasd gubergren ، لا takimata sanctus البحر مؤسسة أبجد هوز ألم التحليل الضوئي. أبجد هوز SED ألم التحليل الضوئي ، consetetur sadipscing elitr ، ديام nonumy eirmod tempor invidunt التحرير labore آخرون مؤلمة ماجنا aliquyam erat ، SED voluptua بقطر. في فيرو إيوس وآخرون وآخرون accusam خوستو الزوجى دولوريس rebum عصام وآخرون. STET clita kasd gubergren ، لا takimata sanctus البحر مؤسسة أبجد هوز ألم التحليل الضوئي. أبجد هوز ألم التحليل الضوئي ، consetetur sadipscing elitr ، <aبقطر SED nonumy href="http://www.westciv.com/style_master/index.html"> </ أ> eirmod tempor invidunt التحرير labore آخرون مؤلمة ماجنا aliquyam erat ، SED بقطر voluptua. في فيرو إيوس وآخرون وآخرون accusam خوستو الزوجى دولوريس rebum عصام وآخرون. STET clita kasd gubergren ، لا takimata sanctus البحر مؤسسة أبجد هوز ألم التحليل الضوئي. </ P> <h2>التحرير wisi ENIM </ H2> <p>والتحرير wisi ENIM الإعلانية القطرة veniam ، quis tation ullamcorper suscipit exerci nostrud lobortis nisl التحرير aliquip السابقين عصام commodo consequat. Duis autem فيل أوم iriure ألم في hendrerit vulputate velit في esse molestie consequat ، فيل illum مؤلمة ولا عقوبة الاتحاد الأوروبي feugiat facilisis آخرون في فيرو اروس accumsan آخرون iusto أوديو خامسة blandit dignissim praesent luptatum zzril delenit augue duis مؤلمة الشركة المصرية للاتصالات لا عقوبة facilisi feugait </ P> quod <p>ويبر tempor نام نائب الرئيس soluta الخيار nobis eleifend congue nihil imperdiet غطى بقبة معرف mazim placerat الصفعة possim assum. أبجد هوز SED ألم التحليل الضوئي ، consectetuer adipiscing إيليت ، وبقطر nonummy nibh euismod tincidunt التحرير laoreet aliquam مؤلمة ماجنا erat volutpat. التحرير wisi ENIM الإعلانية القطرة veniam ، quis tation ullamcorper suscipit exerci nostrud lobortis nisl التحرير aliquip السابقين عصام commodo consequat. </ P> <h2>duis autem </ H2> <p>وDuis autem فيل ألم أوم iriure في hendrerit vulputate velit في esse molestie consequat ، فيل illum مؤلمة ولا عقوبة الاتحاد الأوروبي feugiat facilisis </ P> <p>في فيرو إيوس وآخرون وآخرون accusam خوستو الزوجى دولوريس rebum عصام وآخرون. STET clita kasd gubergren ، لا takimata sanctus البحر مؤسسة أبجد هوز ألم التحليل الضوئي. أبجد هوز SED ألم التحليل الضوئي ، consetetur sadipscing elitr ، ديام nonumy eirmod tempor invidunt التحرير labore آخرون مؤلمة ماجنا aliquyam erat ، SED voluptua بقطر. في فيرو إيوس وآخرون وآخرون accusam خوستو الزوجى دولوريس rebum عصام وآخرون. STET clita kasd gubergren ، لا takimata sanctus البحر مؤسسة أبجد هوز ألم التحليل الضوئي. أبجد هوز ألم التحليل الضوئي ، consetetur sadipscing elitr ، وفي ديام ديام accusam aliquyam erat الزوجى دولوريس مؤلمة EOS eirmod ، SED وآخرون وآخرون وآخرون nonumy tempor invidunt خوستو labore ستيت clita عصام آخرون gubergren ، kasd ماجنا لم rebum. SED takimata sanctus البحر التحرير فيرو voluptua. مؤسسة أبجد هوز ألم التحليل الضوئي. أبجد هوز SED ألم التحليل الضوئي ، consetetur sadipscing elitr ، ديام nonumy eirmod tempor invidunt التحرير labore آخرون مؤلمة ماجنا aliquyam erat </ P> <p>وConsetetur sadipscing elitr ، SED بقطر nonumy eirmod tempor invidunt التحرير labore آخرون مؤلمة ماجنا aliquyam erat ، SED voluptua بقطر. في فيرو إيوس وآخرون وآخرون accusam خوستو الزوجى دولوريس rebum عصام وآخرون. STET clita kasd gubergren ، لا takimata sanctus البحر مؤسسة أبجد هوز ألم التحليل الضوئي. أبجد هوز SED ألم التحليل الضوئي ، consetetur sadipscing elitr ، ديام nonumy eirmod tempor invidunt التحرير labore آخرون مؤلمة ماجنا aliquyam erat ، SED voluptua بقطر. في فيرو إيوس وآخرون وآخرون accusam خوستو الزوجى دولوريس rebum عصام وآخرون. STET clita kasd gubergren ، لا takimata sanctus البحر مؤسسة أبجد هوز ألم التحليل الضوئي. أبجد هوز SED ألم التحليل الضوئي ، consetetur sadipscing elitr ، ديام nonumy eirmod tempor invidunt التحرير labore آخرون مؤلمة ماجنا aliquyam erat ، SED voluptua بقطر. في فيرو إيوس وآخرون وآخرون accusam خوستو الزوجى دولوريس rebum عصام وآخرون. STET clita kasd gubergren ، لا takimata sanctus البحر مؤسسة أبجد هوز ألم التحليل الضوئي. </ P> <pclass="footer"> <ahref="http://www.westciv.com/style_master/download/index.html"> أبجد </ A> : : صفحة <a href = "http://blogs. westciv.com / dog_or_higher / "> هوز </ A> : : <ahref="http://www.westciv.com/style_master/product_info/index.html"> ألم </ أ> </ P> </ DIV> </ DIV> </ BODY> </ HTML>
    هناك شيء في الجزء العلوي من المستند الذي قد لا يكون لها مثيل من قبل.
    <DOCTYPE HTML PUBLIC "! -- / / W3C / / DTD XHTML 1.0 الصارم / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    وهذا ما يسمى إعلان نوع الوثيقة ، ويجب استخدامها ، في شكل هذا بالضبط ، بالضبط مثل وضعها هذا ، فوق كل شيء آخر ، على المستند لتكون صالحة XHTML 1.0 الصارمة. هذا هو البرنامج التعليمي حول استخدام أوراق الأنماط ، لذلك لا أريد أن أستطرد كثيرا في كيفية إنشاء XHTML صالح. يكفي أن أقول أنه يجب عليك أن تحاول جهدك لكتابة XHTML صالحة إذا كنت ترغب في العمل مع المغلق ، وبذلك تحتاج إلى استخدام نوع وثيقة إعلان والتحقق صفحاتك باستخدام مدقق. لمعرفة المزيد حول XHTML يمكنني فقط بقوة ننصح نلقي نظرة على مسارنا الايقاع الذاتي ، HTML و XHTML لCSS .
    أنت لست بحاجة إلى أن ننظر عن كثب جدا في هذا الرمز لأغراض هذا البرنامج التعليمي في كل شيء -- في الواقع بصرف النظر عن التأكد من أنها ارتباطات ورقة الأنماط ، والذي سنقوم به قريبا ، يمكنك إلى حد ما قريبة منه وتنسى حول هذا الموضوع.
    ملاحظة : إذا كان لديك نظرة على شيء واحد رمز قد تبرز لك. رمز للحصول على قائمة غير مرتبة التي تشكل في الناف بار ( <div id="navbar"> ) ليس لديه مساحة إضافية الأبيض في ذلك بين عناصر HTML. ومن الواضح أن هذه ليست مثالية ، لأنه من الاسهل بكثير لتحرير في وقت لاحق إذا ، على سبيل المثال ، هناك عوائد النقل بحيث يكون لكل من <li> ق هي على سطر منفصل. ومع ذلك ، إذا قمت بإدراج أي مساحة بيضاء في وجود في جميع ستجد أن هذه النتائج في التباعد بين عناصر اضافية في الناف بار عند عرض الصفحة في Internet Explorer. بطبيعة الحال ، هذا هو السلوك عربة تماما كما اضافية في المساحة البيضاء رمز يجب أن يكون أي تأثير على الإطلاق على كيفية جعل صفحة. دعنا نقول فقط أنه في هذه الحالة فإنه لا : مجرد مثال آخر للكيفية التي يمكن أن تجعل إنترنت إكسبلورر الجحيم حياتك. الآن ، هناك إصلاح CSS يستند إلى هذه المشكلة ، ولكن هذا الطريق إلى ما بعد موجز لهذا البرنامج التعليمي لتغطية ذلك. وبمجرد الانتهاء من هذا البرنامج التعليمي ، وأنت تريد وسيلة أكثر ملائمة لحل هذا الخطأ ، التحقق من ذلك .
    وملاحظة أخيرة حول محتوى صفحة الويب. فقط في حال كنت لم يطلعوا عليه من قبل ، فإن النص على الصفحة التي قمت بإنشائها هو معيار "دمية النص" المستخدمة عادة من قبل المصممين في الوقت الذي يتم تطوير موقع في محاولة لمساعدة العملاء من الهاء في الصفحة المحتوى والتركيز بدلا من ذلك على العمارة ، والمظهر وتخطيط أثناء عملية التصميم.
    إنشاء ورقة نمط

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

  4. #4
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    رد: إنشاء مستند html


    التمرين 2

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

    أولا دعونا نفعل شيئا لتصل مباشرة حقا وإضافة التعليق الذي يفسر ما هو هذا الاسلوب هو من أجل ورقة. تعليق هو نوع آخر من البيان ورقة النمط. تذكر قلنا من قبل أن القواعد ليست سوى نوع واحد من البيان؟ كذلك ، وهنا النوع الآخر عليك أن تكون معرفة في هذا البرنامج التعليمي.
    تعليقات

    تعليقات CSS تأخذ شكل
    / * هنا هو النص الفعلي للتعليق * /

  5. #5
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    رد: إنشاء مستند html


    التمرين 3

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

    هذا هو تقريبا الأساسية جدا أليس كذلك؟ ولكن عليك أن تبدأ في مكان ما. هنا هو ما ينبغي أن تبدو تعليق.
    / * هذا هو ورقة الأنماط الأساسية للموقع.* /

  6. #6
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    رد: إنشاء مستند html


    تمرين 4

    حفظ ورقة الأنماط مباشرة داخل المجلد الجذر من موقعك الجديد. يمكنك تسمية ورقة نمط ما تريد ، ولكن سأكون مشيرا إلى أنها core-style.css .
    ليس لديك ما يدعو للقلق لأن هذا النمط ماجستير حفظ ورقة الأنماط بالنسبة لك ، في المكان المناسب ، وعندما أنشئت من أجلها. بالطبع الرغم من ذلك ، سوف تحتاج إلى حفظ كما تذهب ، ماجستير نمط ذلك هو تماما مثل أي تطبيق آخر :... اختر حفظ من قائمة ملف.

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

    هناك طريقتان لجعل ورقة نمط يؤثر فعليا في مظهر وثيقة HTML : يمكنك تضمين ورقة الأنماط في <head> من وثيقة HTML ، أو يمكنك الارتباط إلى ورقة نمط من <head> من HTML الوثيقة. نحن ذاهبون الى استخدام الطريقة الثانية هنا لأن هذا هو السبيل لتسخير حقا كفاءة CSS. نفكر في ذلك : هل يمكن ربط ما تشاء من الصفحات إلى ورقة نمط واحد كما تريد. يمكن إجراء تغييرات على هذه الوثيقة واحدة ثم تغيير مظهر كافة صفحات الويب المرتبطة به.
    للارتباط ورقة نمط نضع <link> عنصر مع اثنين من سمات خاصة في <head> من وثيقة HTML. سوف ننظر بشيء من هذا القبيل.
    <linkrel="stylesheet" type="text/css" href="main-westciv.css">
    دعونا ننظر في كل سمة.
    rel="stylesheet" هذا يقول أنه هو ارتباط إلى الأمام ، ويخبر المتصفح ما يمكن توقعه في الطرف الآخر ، أي ورقة النمط.
    type="text/css" نظريا ، قد تكون مكتوبة باستخدام أوراق الأنماط أي عدد من اللغات. أوراق الأنماط نحن نتحدث هنا عن وأوراق الأنماط المتتالية (CSS). لغة الأنماط الموسعة (XSL) هو آخر من شأنها أن تصبح ، على الأرجح مهمة. هذه السمة يخبر المتصفح ما يجري تنسيقه لتلقي ورقة الأنماط فيه
    href="main-westciv.css" هذا يخبر المتصفح حيث لتحديد ورقة الأنماط. تم تحديد الوجهة في بنفس الطريقة العادية وجهة الارتباط التشعبي ( a href="link destination" ) ، مع URL إما النسبية أو المطلقة. كما هو الحال دائما ، فإنه من الضروري أن تحصل على مسار الحق النسبي ، وإلا فإن المتصفح لا يمكن العثور على ورقة النمط. ماجستير باستخدام النمط ، لم يكن لديك ما يدعو للقلق حول هذا على الإطلاق.

  7. #7
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    رد: إنشاء مستند html


    التمرين 5

    الرابط index.html على core-style.css عن طريق لصق سطر التعليمات البرمجية أعلاه إلى <head> من الوثيقة وتغيير href القيمة للإشارة إلى core-style.css .
    مرة أخرى ، لا تحتاج إلى القيام بذلك لأن كل ما تم القيام به بالنسبة لك عند إنشاء ورقة الأنماط. ولكن ، بطبيعة الحال ، فلن دائما إنشاء أوراق الأنماط باستخدام هذا الأسلوب ، لذلك لتكون مرجعا في المستقبل هنا هو كيف يمكنك ربط من مستند HTML باستخدام ماجستير نمط.
    لربط صفحة ويب إلى ورقة نمط
    1. اختيار ارتباط... من قائمة ملف
    2. انقر فوق إضافة صفحة
    3. حدد موقع الصفحة التي تريد الارتباط من ثم انقر فوق فتح
    4. انقر فوق التالي لالخيارين التاليين دون إجراء أي تغييرات (وهذه هي أكثر تقدما الميزات CSS كنت لا داعي للقلق بشأن الآن) ، ثم موافق لإنهاء.
    ماجستير نمط يضيف رمز اللازمة لصفحة الويب الخاصة بك.
    ملاحظة -- للحصول على أفضل النتائج يجب المستند HTML تحاول تصل إلى أن تكون مفتوحة في تطبيق آخر في هذا الوقت.

    عند الانتهاء يجب أن تكون قادرا على رؤية ما يلي في <head> من index.html .
    ...
    <linkrel="stylesheet" type="text/css" href="core-style.css" />
    </ HEAD>

 

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

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •