وغني عن القول ، وتطوير الشبكة ضخمة. جزء كبير من ذلك هو أن الجميع تقريبا على شبكة الإنترنت. ومع ذلك ، هناك نقص في المطورين في هذا المجال ، وهذا هو السبب في أن منهج تطوير الويب متاح بسهولة جدًا ومجاني أيضًا. مع وضع ذلك في الاعتبار ، سوف نعرض عليك قليلاً حول كل من HTML و CSS. بشكل أكثر تحديدًا ، سوف نوضح لك كيف تعمل "الفصول".
نحن لا نبدأك من البداية ، لأن هناك الكثير من المناهج المجانية الموجودة بالفعل. بدلاً من ذلك ، سنعرض لك على وجه التحديد كيفية عمل الفصول الدراسية ، لأنه عنصر ضروري لتصميم موقع الويب الخاص بك. لقد اعتقدنا أيضًا أنه قد يكون من المفيد التغطية قبل نشر نظرتنا على Bootstrap API على Twitter ، لأن الفصول الدراسية هي مكون مطلوب في ذلك أيضًا.
كإخلاء ، إذا كنت جديد تمامًا على HTML و CSS ، فربما لا تكون هذه بداية جيدة لك. إذا كنت معتادًا على ذلك ، فلا ينبغي أن يكون صعبًا للغاية. ولكن إذا كنت تبحث عن برنامج تعليمي متكامل للمبتدئين ، فهناك الكثير من الخيارات الرائعة على الإنترنت. على سبيل المثال لا الحصر ، هناك FreeCodeCamp و The Odin Project و CodeAcademy و Code School و Team Treehouse و Udacity وغيرها الكثير. إذا اخترت البدء في الحفر في واحدة من هذه ، فإنني أوصي بشدة بالالتزام بأحدها (مثل Free Code Camp) وإنهائها قبل بدء تشغيل أخرى ، لأن الكثير من المحتوى "الأساسي" يمكن أن يكون متكررًا إلى حد كبير.
مع الخروج من هذا الطريق ، دعنا نتعمق في ماهية الفصول الدراسية.
كيف تعمل الفصول
فصول مفيدة للغاية. يأخذون التكرار من HTML التصميم. بدون فصول ، ستصمم كل عنصر في الترميز الخاص بك بشكل فردي. وماذا لو كان لديك عنصرين من نفس العناصر ، لكنك رغبت في تصميم كل منهما بطريقة مختلفة؟ ستكون فوضى كاملة. لهذا السبب لدينا فصول. تضيف الفصول بعض الهيكل التنظيمي لـ HTML ، مما يتيح لك الحفاظ على رمزك نظيفًا نسبيًا. ليس ذلك فحسب ، بل يمكن استخدام الفصول الدراسية أكثر من مرة. بمعنى آخر ، لن تضطر أبدًا إلى إنشاء نفس قواعد التصميم مرتين.
وإليك ما تبدو الطبقات داخل
العلامة:
كما ترون ، تحت علامة الجسم لدينا ، لدينا اثنين
عناصر مع فئات مختلفة. الأولتتضمن العلامة "head1" بينما تحتوي العلامة الثانية على "head2". لذا ، في CSS الخاص بنا ، بدلاً من تطبيق التصميم علىعنصر ، يمكننا تطبيق التصميم لتلك الفئات الفردية. لماذا نريد أن نفعل ذلك؟
عنصر ، يمكننا تطبيق التصميم لتلك الفئات الفردية. لماذا نريد أن نفعل ذلك؟
السبب الرئيسي هو أنك لا تريد كل ما تبذلونه
عناصر لديها نفس التصميم. سيخلق الكثير من الصداع عند إنشاء موقع ويب ، وبالإضافة إلى ذلك ، لن تبدو المواقع رائعة جدًا. تسمح لنا الفصول بتطبيق التصميم على مثيل واحد فقط من العلامة ، وليس الكلعلامات عبر المستند. إذاً ، كيف تكتب فصلاً بلغة HTML؟ مثله:
بعض المحتوى
يمكنك إضافة خاصية "الفئة" إلى أي عنصر HTML تقريبًا.
عظيم! لذلك ، لدينا فصول ، ولكن في حالتها الحالية ، فإنها لا تفعل أي شيء في الواقع. ذلك لأننا لم نقم بإضافة أي قواعد تصفيف إلى الفصل حتى الآن. للقيام بذلك ، سنحتاج إلى إنشاء مستند .css منفصل. أنا فقط أسميها main.css. في هذا المستند ، سنقوم بتصميم نمط مثل هذا:
لتحديد فئة نريد تصميمها ، نقوم بهذا:
.head1 {color: red؛ محاذاة النص: المركز ؛ }
داخل الأقواس المتعرجة توجد كل "القواعد" (أو التصميم) التي نطبقها على تلك الفئة. هناك الكثير من القواعد المختلفة التي يمكنك وضعها داخل هذا الفصل. في حالتي ، قمت بتغيير لون النص إلى اللون الأحمر باستخدام قاعدة "اللون" وقمت بتوسيط النص باستخدام قاعدة "محاذاة النص". يمكنك العثور على قائمة كاملة من قواعد CSS وكذلك وثائقها من شبكة مطوري Mozilla.
الآن ، لا يزال تطبيقنا غير مطبق على الفصول في مستند HTML ، وهذا لأننا لم نربط الملفين معًا حتى الآن. العودة إلى ملف HTML الخاص بك ، وفي
، سترغب في ربط ملف CSS الخاص بك عن طريق القيام بذلك:
يجب أن يبدو مستند HTML كما يلي:
ويجب أن يبدو مشروع الاختبار الخاص بنا على هذا النحو على الويب:
للحصول على فيديو أكثر تفصيلاً يمر بهذه الخطوات ، يرجى الاطلاع أدناه.
فيديو
خاتمة
وهذا كل ما في الفصول الدراسية! انهم حقا بسيط لفهم. من الواضح على المواقع الكبيرة والشعبية التي تزورها ، أن القواعد داخل الفصول الدراسية أكثر تعقيدًا بكثير مما قمنا بتغطيته ، ولكن في أبسط أشكالها ، هذه هي الطريقة التي تعمل بها.
إذا كانت لديك أي أسئلة أو واجهت مشكلة في المتابعة لفترة طويلة ، فتأكد من إعلامنا في التعليقات أدناه أو أكثر في منتديات PCMech! أو إذا كنت مهتمًا بدليل كامل للمبتدئين في HTML / CSS على PCMech ، فتأكد من إخبارنا بذلك أيضًا!
