में काम करने वाले लोग वेब डिजाइन उद्योग ने फ्रंट-एंड वेबसाइट विकास की तुलना तीन पैरों वाले स्टूल से की। ये तीन चरण—वेब विकास की तीन परतें—में साइट की संरचना, शैली और व्यवहार शामिल हैं।
आपको परतों को अलग क्यों करना चाहिए?
जब आप एक वेब पेज बना रहे होते हैं, तो इसकी संरचना आपके एचटीएमएल में वापस आ जानी चाहिए, CSS के लिए दृश्य शैलियाँ, और स्क्रिप्ट के लिए व्यवहार। परतों को अलग करने के कुछ लाभ हैं:
- साझा संसाधन:जब आप कोई बाहरी CSS या JavaScript फ़ाइल लिखते हैं, तो साइट का कोई भी पृष्ठ उस फ़ाइल का उपयोग कर सकता है। यदि आपको उस फ़ाइल में परिवर्तन करने की आवश्यकता है, तो शायद कुछ टाइपोग्राफिक शैलियों को अपडेट करें वेबसाइट पर, उस स्टाइलशीट का उपयोग करने वाले प्रत्येक पृष्ठ को परिवर्तन प्राप्त होगा। वेबसाइट के प्रत्येक पृष्ठ को व्यक्तिगत रूप से संपादित करने की कोई आवश्यकता नहीं है, जो एक बड़ी वेबसाइट के लिए एक कठिन उपक्रम हो सकता है।
- तेज़ डाउनलोड:आपके ग्राहक द्वारा पहली बार स्क्रिप्ट या स्टाइलशीट डाउनलोड करने के बाद, इसे वेब ब्राउज़र द्वारा कैश किया जाता है। क्योंकि ये साझा संसाधन अब में समाहित हैं ब्राउज़र कैश, ब्राउज़र में अनुरोधित अन्य पृष्ठ अधिक तेज़ी से लोड होते हैं, जिससे समग्र पृष्ठ गति और प्रदर्शन में सुधार होता है।
- बहु-व्यक्ति दल:यदि आपके पास एक से अधिक व्यक्ति एक साथ एक वेबसाइट पर काम कर रहे हैं, तो संस्करण-नियंत्रण प्रणाली का उपयोग करें जो फाइलों को चेक इन और आउट करने की अनुमति देता है ताकि यह सुनिश्चित हो सके कि हर कोई इसके साथ काम कर रहा है। नवीनतम संस्करण. यदि शैलियों और व्यवहारों को संरचना दस्तावेजों के साथ जोड़ा जाता है तो यह प्रक्रिया करना बहुत कठिन होता है।
- एसईओ:एक साइट जो शैली और संरचना के स्पष्ट पृथक्करण को प्रदर्शित करती है, उसके खोज इंजन के लिए बेहतर प्रदर्शन करने की संभावना है क्योंकि वे दृश्य-शैली और व्यवहार में उलझे बिना उस सामग्री को अधिक प्रभावी ढंग से क्रॉल कर सकते हैं और पृष्ठ को समझ सकते हैं जानकारी।
- सरल उपयोग:बाहरी स्टाइल शीट और स्क्रिप्ट फाइलें लोगों और ब्राउज़रों के लिए अधिक सुलभ हैं। सॉफ्टवेयर जैसे स्क्रीन रीडर संरचना परत से सामग्री को उन शैलियों से निपटने के बिना अधिक आसानी से संसाधित कर सकते हैं जिनका वे वैसे भी उपयोग नहीं कर सकते हैं।
- अनिच्छुक अनुकूलता:एक साइट जिसे अलग-अलग विकास परतों के साथ डिज़ाइन किया गया है, उसके पिछड़े-संगत होने की अधिक संभावना है क्योंकि ब्राउज़र और डिवाइस जो कुछ सीएसएस शैलियों का उपयोग नहीं कर सकते हैं या जिनमें जावास्क्रिप्ट अक्षम है, वे अभी भी देख सकते हैं एचटीएमएल. फिर आप अपनी वेबसाइट को उन ब्राउज़रों के लिए सुविधाओं के साथ उत्तरोत्तर उन्नत कर सकते हैं जो उनका समर्थन करते हैं।
एचटीएमएल: संरचना परत
वेब पेज की संरचना या सामग्री परत अंतर्निहित है एचटीएमएल उस पृष्ठ का कोड। जिस तरह एक घर का फ्रेम एक मजबूत नींव बनाता है जिस पर बाकी घर बना होता है, एचटीएमएल की एक ठोस नींव एक ऐसा प्लेटफॉर्म बनाती है जिस पर एक वेबसाइट बनाई जा सकती है।
संरचना परत वह है जहां आप वह सभी सामग्री संग्रहीत करते हैं जिसे आपके ग्राहक पढ़ना या देखना चाहते हैं। HTML संरचना में टेक्स्ट और चित्र शामिल हो सकते हैं, और इसमें शामिल हैं: हाइपरलिंक जिसका उपयोग आगंतुक वेबसाइट पर नेविगेट करने के लिए करेंगे। यह जानकारी मानक-अनुपालन में कोडित है एचटीएमएल 5 और इसमें टेक्स्ट, इमेज और मल्टीमीडिया (वीडियो, ऑडियो, आदि) शामिल हो सकते हैं।
साइट की सामग्री के हर पहलू को संरचना परत में दर्शाया जाना चाहिए। यह पृथक्करण उन ग्राहकों को अनुमति देता है जिनके पास जावास्क्रिप्ट बंद है या जो सीएसएस को पूरी वेबसाइट तक नहीं देख सकते हैं, यदि इसकी सभी कार्यक्षमता नहीं है।
सीएसएस: शैलियाँ परत
यह परत तय करती है कि एक संरचित HTML दस्तावेज़ किसी साइट के विज़िटर को कैसा दिखाई देगा और इसे इसके द्वारा परिभाषित किया गया है सीएसएस (व्यापक शैली पत्रक)। वेब ब्राउज़र में दस्तावेज़ को कैसे प्रदर्शित किया जाना चाहिए, इसके लिए इन फ़ाइलों में शैलीगत निर्देश हैं। शैली परत में आमतौर पर शामिल हैं मीडिया के प्रश्नों जो के आधार पर साइट के प्रदर्शन को बदलते हैं स्क्रीन का आकार और डिवाइस.
किसी वेबसाइट के लिए सभी दृश्य शैलियों को बाहरी स्टाइलशीट में रहना चाहिए। आप कई स्टाइलशीट का उपयोग कर सकते हैं, लेकिन प्रत्येक सीएसएस फ़ाइल को इसे लाने के लिए एक HTTP अनुरोध की आवश्यकता होती है, साइट के प्रदर्शन को प्रभावित करना.
जावास्क्रिप्ट: व्यवहार परत
व्यवहार परत एक वेबसाइट को इंटरैक्टिव बनाती है, जिससे पेज को उपयोगकर्ता की क्रियाओं का जवाब देने या शर्तों के एक सेट के आधार पर बदलने की अनुमति मिलती है। जावास्क्रिप्ट व्यवहार परत के लिए सबसे अधिक इस्तेमाल की जाने वाली भाषा है, लेकिन सीजीआई तथा पीएचपी भी बहुत बार उपयोग किया जाता है।
जब डेवलपर्स व्यवहार परत को संदर्भित करते हैं, तो उनमें से अधिकांश का मतलब उस परत से होता है जो सीधे वेब ब्राउज़र में सक्रिय होती है। दस्तावेज़ ऑब्जेक्ट मॉडल के साथ सीधे इंटरैक्ट करने के लिए इस परत का उपयोग करें। मान्य HTML लिखना सामग्री परत में व्यवहार परत में DOM इंटरैक्शन के लिए महत्वपूर्ण है। जब आप व्यवहार परत में निर्माण करते हैं, तो आपको गति और प्रदर्शन को अनुकूलित करने के लिए बाहरी स्क्रिप्ट फ़ाइलों का उपयोग करना चाहिए, जैसे कि सीएसएस के साथ।