9 गलतियाँ आपको वेब पेज बनाते समय नहीं करना चाहिए

विज्ञापन

HTML और CSS के साथ एक वेब पेज बनाना है बहुत सीधा कैसे एक वेबसाइट बनाने के लिए: शुरुआती के लिएआज मैं आपको स्क्रैच से एक पूरी वेबसाइट बनाने की प्रक्रिया के माध्यम से मार्गदर्शन करूंगा। चिंता मत करो अगर यह मुश्किल लगता है। मैं आपको इसके हर कदम पर मार्गदर्शन दूंगा। अधिक पढ़ें . लेकिन गलतियाँ करना आसान है, और कुछ ऐसी चीजें हैं जिनके बारे में आप सोच भी नहीं सकते। अधिकांश समय, इन छोटी गलतियों से बहुत फर्क नहीं पड़ता था।

लेकिन लंबे समय में, वे आपके जीवन को और अधिक कठिन बना सकते हैं। इन नौ गलतियों को करना आसान है, लेकिन यदि आप बाद में पहले के बजाय उन्हें बंद कर देते हैं, तो आपका पृष्ठ बेहतर दिखेगा, बनाए रखना आसान होगा, और आप इसे कैसे करना चाहते हैं, यह कार्य करेगा।

1. इनलाइन स्टाइलिंग

HTML और CSS के बारे में महान चीजों में से एक यह है कि आप पाठ की किसी भी लाइन को प्रारूपित कर सकते हैं - कोई भी शब्द, वास्तव में - जब भी आप चाहें। लेकिन इसका मतलब यह नहीं है कि आपको इस क्षमता का लाभ उठाना चाहिए।

यहाँ एक इनलाइन शैली का एक उदाहरण है जिसका उपयोग आप किसी पैराग्राफ को आसपास के पैराग्राफ से बड़ा बनाने और एक अलग रंग में हाइलाइट करने के लिए कर सकते हैं:

यहां पर लिखें।

यह पैराग्राफ को एक पैराग्राफ देता है सीएसएस शैली HTML और CSS को इन स्टेप बाय स्टेप ट्यूटोरियल के साथ जानेंHTML, CSS और JavaScript के बारे में उत्सुक? यदि आपको लगता है कि आपके पास स्क्रैच से वेबसाइट बनाने का तरीका सीखने के लिए एक आदत है - तो कुछ शानदार चरण-दर-चरण ट्यूटोरियल कोशिश करने लायक हैं। अधिक पढ़ें यह पैराग्राफ के समापन के साथ समाप्त होता है। बहुत कुशल लगता है, है ना?

इसके साथ एक बड़ी समस्या है: यदि आप अपनी वेबसाइट में बहुत सारी चीजों को बदलना चाहते हैं, तो आपको इनलाइन स्टाइल के हर उदाहरण को खोजने और इसे बदलने की आवश्यकता है। यदि आपके पास 100 अलग-अलग अनुच्छेद हैं जो कि 120% पाठ आकार और नीले हैं, तो आपको सभी 100 खोजने होंगे और जो भी आपने तय किया है, उसे बेहतर प्रारूप में बदलना होगा।

इसके बजाय, CSS स्टाइलशीट का उपयोग करें। यहां वह शैली है जो आप उपरोक्त अनुच्छेद के लिए उपयोग करते हैं:

p.important {आकार: 120%; नीला रंग; }

अब, इनलाइन शैली का उपयोग करने के बजाय, आप बस इस लाइन का उपयोग कर सकते हैं:

यहां पर लिखें।

और आपका पैराग्राफ बड़ा और नीला होगा। और जब आप अपने सीएसएस में "महत्वपूर्ण" वर्ग में बदलाव करते हैं, तो वे सभी बदल जाएंगे।

2. लेआउट के लिए टेबल्स

लोग नियमित रूप से पृष्ठ लेआउट को स्वरूपित करने के लिए तालिकाओं का उपयोग करते थे। तालिका का उपयोग करके, आप कॉलम और पंक्तियों में अपने पृष्ठ पर तत्वों को व्यवस्थित कर सकते हैं, साथ ही साथ विभिन्न संरेखण और शैलियों को लागू कर सकते हैं। यहां तक ​​कि एकल-कक्षीय तालिकाओं का उपयोग सामग्री को सही ढंग से संयोजित करने के लिए किया जाएगा। लेकिन तालिकाओं के इस उपयोग पर आमतौर पर ध्यान दिया जाता है।

इनलाइन शैलियों की तरह, लेआउट के लिए HTML तालिकाओं के बजाय CSS का उपयोग करना आसान है। फिर से, यदि आप दर्जनों या सैकड़ों पृष्ठों में परिवर्तन करना चाहते हैं, तो अपनी स्टाइलशीट को संपादित करना ज्यादा आसान है, क्योंकि प्रत्येक पृष्ठ पर जाकर तालिकाओं को बदल दिया जाए।

आसान रखरखाव के अलावा, सीएसएस लेआउट पढ़ना HTML टेबल पढ़ने की तुलना में काफी आसान है। खासकर यदि आप एक दूसरे के भीतर तालिकाओं के कई स्तरों को समाप्त करते हैं। आपके HTML दस्तावेज़ और आपकी स्टाइलशीट के बीच आगे-पीछे जाने के लिए यह सुपर आसान नहीं हो सकता है कि वास्तव में क्या हो रहा है, लेकिन आपके पृष्ठ की सामग्री स्पष्ट और संपादित करने में आसान होगी।

स्तंभों को यहां और वहां विभाजित करने के लिए तालिकाओं का उपयोग करना नश्वर पाप नहीं है। कभी-कभी यह सीएसएस के साथ खिलवाड़ करने की तुलना में आसान और तेज़ है। लेकिन अगर आप विशाल, बहु-स्तरीय टेबल बना रहे हैं, तो आपको सीएसएस के साथ सुधार पर विचार करना चाहिए।

3. पदावनत HTML

किसी भी भाषा की तरह, HTML नियमित रूप से बदलता है। आधिकारिक तौर पर मान्यता प्राप्त टैग बदल जाते हैं, और कुछ पदावनत हो जाते हैं। यदि वे टैग अभी भी काम करते हैं, तो भी उनसे बचना सबसे अच्छा है।

उदाहरण के लिए, यदि आप इसका उपयोग कर रहे हैं बोल्ड और के लिए टैग इटैलिक के लिए टैग, आप समय से पीछे हैं। तथा ("जोर" के लिए) अब मानक टैग हैं।

, , , , और अन्य भी पदावनत हैं।

अधिकांश पदावनत टैग सीएसएस के साथ बदल दिए गए थे, इसलिए आपको समान प्रभाव पाने के लिए शैलियों (अधिमानतः इनलाइन नहीं) का उपयोग करने की आवश्यकता होगी। यदि आप सुनिश्चित नहीं हैं कि कैसे हटाए गए टैग को प्रतिस्थापित किया जाए या यदि कोई विशिष्ट टैग अभी भी उपयोग में है, तो जांच करें आधिकारिक HTML प्रलेखन या बस एक त्वरित खोज चलाएँ।

4. इनलाइन जावास्क्रिप्ट

कुछ वेब पेज जावास्क्रिप्ट का उपयोग करते हैं अतिरिक्त कार्यक्षमता जोड़ें जावास्क्रिप्ट और वेब विकास: दस्तावेज़ ऑब्जेक्ट मॉडल का उपयोग करनायह आलेख आपको दस्तावेज़ कंकाल से परिचित कराएगा जो जावास्क्रिप्ट के साथ काम करता है। इस अमूर्त दस्तावेज़ ऑब्जेक्ट मॉडल का एक कार्यशील ज्ञान होने के बाद, आप जावास्क्रिप्ट लिख सकते हैं जो किसी भी वेब पेज पर काम करता है। अधिक पढ़ें . यह वेब पेजों को इंटरेक्टिव बना सकता है, पाठ में प्रवेश करते ही मान्य कर सकता है, एनिमेशन जोड़ सकता है, उपयोगकर्ता की कार्रवाइयों पर प्रतिक्रिया दे सकता है, और इसी तरह। संक्षेप में, यह अतिरिक्त व्यवहार प्रदान करके एक पृष्ठ को अधिक उपयोगी बना सकता है।

सीएसएस की तरह, आप अपने HTML में इनलाइन जावास्क्रिप्ट जोड़ सकते हैं। सीएसएस की तरह, यह आमतौर पर हतोत्साहित किया जाता है। बनाए रखने के लिए संभावित रूप से कठिन होने के अलावा, कुछ अन्य कारण हैं जो इस चेतावनी को वारंट करते हैं।

इनलाइन जावास्क्रिप्ट एक अलग फ़ाइल से जुड़ी स्क्रिप्ट की तुलना में अधिक मात्रा में बैंडविड्थ का उपयोग कर सकता है। ब्रॉडबैंड और मोबाइल कनेक्शन पर कम बैंडविड्थ की आवश्यकता होने पर, उपयोगकर्ता को भेजने से पहले मिनिमाइज़ेशन नामक प्रक्रिया HTML और CSS को संपीड़ित करती है। हालाँकि, इनलाइन जावास्क्रिप्ट को छोटा नहीं किया जा सकता है। यह भी कैश नहीं किया जाएगा, जबकि एक अलग जावास्क्रिप्ट फ़ाइल कर सकते हैं कैश किया जाए.

ये सभी चीज़ें इनलाइन जावास्क्रिप्ट को अधिक बैंडविड्थ-गहन बनाती हैं।

यह डीबग करना भी कठिन है, क्योंकि आप जावास्क्रिप्ट फाइल के लिए जावास्क्रिप्ट सत्यापनकर्ता का उपयोग कर सकते हैं... लेकिन यह इनलाइन स्क्रिप्ट पर काम नहीं करेगा। और, फिर से, यह क्लीनर और अधिक आसानी से बनाए रखा HTML के लिए बनाता है।

5. एकाधिक एच 1 टैग

शीर्षक टैग महान हैं। वे पृष्ठों को स्किम करना आसान बनाते हैं, वे आपको एक एसईओ बढ़ावा दे सकते हैं, और उनका उपयोग कुछ बिंदुओं पर जोर देने के लिए किया जा सकता है।

लेकिन एक कारण के लिए शीर्षकों के छह स्तर हैं। आपके पृष्ठ पर वास्तव में केवल एक H1 टैग होना चाहिए। और वह अक्सर पृष्ठ का शीर्षक होता है (विशेषकर ब्लॉग और इसी तरह की साइटों पर)। आप सोच सकते हैं कि H1 टैग में कीवर्ड का एक समूह लगाने से Google को उन्हें लेने और परिणामों में आपकी साइट को उच्च रैंक करने की अधिक संभावना होगी।

लेकिन यह वास्तव में क्या करता है आपके पृष्ठ को और अधिक भ्रमित और पढ़ने के लिए कठिन बना देता है। जो कि वैसे भी आपके द्वारा देखे जाने वाले किसी भी एसईओ लाभ को नकार देगा।

अपने पृष्ठ को बेहतर ढंग से रेखांकित करने के लिए H2, H3 और बाकी शीर्षकों का उपयोग करें। हेडिंग के स्तर से आपके पाठक को यह अंदाजा होना चाहिए कि निम्नलिखित अनुभाग कितना महत्वपूर्ण है। यदि आपने उन्हें गुमराह किया है, तो वे इसे नहीं जान पाएंगे, और वे खुश नहीं होंगे।

6. छवि अलर्ट छोड़ें

प्रत्येक चित्र को एक "ऑल्ट" विशेषता दी जा सकती है, जो यदि चित्र प्रदर्शित नहीं की जा सकती है तो पाठ की एक विशिष्ट रेखा प्रदर्शित करती है। यह एक बड़े सौदे की तरह प्रतीत नहीं हो सकता है, विशेष रूप से आधुनिक ब्राउज़रों (डेस्कटॉप और मोबाइल दोनों) के साथ जो बस कुछ के बारे में प्रदर्शित कर सकते हैं।

लेकिन ऊँची विशेषताओं को न जोड़ना एक बड़ी गलती है, विशेष रूप से निरंतर मोबाइल ब्राउज़िंग के युग में। मोबाइल कनेक्शन हमेशा महान नहीं होते हैं, और यदि कोई ब्राउज़र किसी छवि को लोड नहीं कर सकता है, तो आपके पाठक को यह पता नहीं है कि उन्हें वहां क्या देखना चाहिए। एक पूरी विशेषता इसे ठीक कर सकती है।

और अगर कोई उपयोग कर रहा है स्क्रीन रीडर VoiceOver Apple डिवाइसेस को एवरेज एक्सेस करने योग्य बनाता हैअमेरिकन फाउंडेशन ऑफ द ब्लाइंड के अध्यक्ष का मानना ​​है कि "Apple ने किसी भी अन्य कंपनी की तुलना में अब तक पहुंच के लिए अधिक काम किया है" - और वॉइसओवर ने इसमें एक बड़ी भूमिका निभाई। अधिक पढ़ें या अन्य एक्सेसिबिलिटी फ़ीचर, यह पूरी विशेषता हो सकती है कि वे सभी छवि से बाहर निकल जाएं।

बेशक, संभावित एसईओ लाभ भी हैं। खोज इंजन छोटी, वर्णनात्मक ऊँची विशेषताओं को अनुक्रमित कर सकते हैं। लेकिन यहां सबसे बड़ा लाभ आपके पाठकों को मदद कर रहा है।

7. टैगिंग बंद नहीं

कुछ HTML टैग्स हैं जिन्हें आप बंद नहीं, जैसे कि दूर कर सकते हैं

तथा

. ब्राउज़रों को पता है कि जब आप एक और पैराग्राफ या सूची आइटम शुरू करते हैं, तो पिछला एक खत्म हो जाता है। लेकिन इसका मतलब यह नहीं है कि आपको समापन टैग पर छोड़ देना चाहिए।

ब्राउज़र तकनीक में प्रगति के बावजूद, सबसे पहले और निश्चित रूप से यह संभावना है कि यदि आपने अपने टैग बंद नहीं किए हैं तो ब्राउज़र आपकी सामग्री को अनुचित रूप से प्रदर्शित करेगा। और शैलियों को लागू करना कुछ अप्रत्याशित परिणाम उत्पन्न कर सकता है, जैसा कि स्टैक एक्सचेंज उपयोगकर्ता रोबर्टेक प्रदर्शित करता है.

यह नीचे आता है कि ब्राउज़र बंद टैग की उम्मीद कर रहे हैं। उन्हें पूरी तरह से उनकी आवश्यकता नहीं है... लेकिन जब वे आपके पृष्ठ को प्रदर्शित करने का प्रयास कर रहे हों, तो उन्हें निश्चित रूप से सही HTML होने से लाभ होगा।

सौभाग्य से, यह आपके टैग्स को बंद करने के लिए ज्यादा नहीं है, खासकर यदि आप एक अच्छे HTML संपादक का उपयोग कर रहे हैं।

8. DOCTYPE शामिल नहीं है

HTML दस्तावेज़ों की शुरुआत में, आप आमतौर पर इस तरह एक DOCTYPE घोषणा देखते हैं:

यह कुछ ऐसा है जिसके बारे में अक्सर बात की जाती है, लेकिन यह आपके पृष्ठ का एक महत्वपूर्ण तत्व है। DOCTYPE घोषणा एक ब्राउज़र को बताती है कि आप किस प्रकार का HTML उपयोग कर रहे हैं। यह इसे HTML को सही ढंग से प्रस्तुत करने की अनुमति देता है।

यदि आप DOCTYPE घोषणा छोड़ देते हैं, तो पृष्ठ "quirks मोड" में रेंडर होगा। यह पुरातन वेब पेजों के खिलाफ आधुनिक ब्राउजर का बचाव है। और यह बदलता है कि आपका पृष्ठ कैसे प्रदर्शित होता है। एक त्वरित देखो फ़ायरफ़ॉक्स की विचित्र विधा यह दिखाता है कि मामले की संवेदनशीलता में परिवर्तन होता है, फ़ॉन्ट गुण तालिका में इनहेरिट नहीं होते हैं, फ़ॉन्ट आकार अलग-अलग गणना किए जाते हैं, और बिना ऊँची विशेषताओं के छवियां कभी-कभी गलत तरीके से प्रदर्शित होती हैं।

इनमें से ज्यादातर चीजें अपेक्षाकृत मामूली हैं। लेकिन अगर आप चाहते हैं कि आपका पेज सही तरीके से प्रदर्शित हो, तो आपको यह सुनिश्चित करना चाहिए कि ब्राउज़र में पूर्ण मानक मोड सक्षम हो।

और ऐसा करने के लिए, आपको एक DOCTYPE चाहिए। (यदि आप सुनिश्चित नहीं हैं कि क्या उपयोग करना है, तो बस उपयोग करें .)

9. उपेक्षा स्कीमा मार्कअप

स्कीमा मार्कअप खोज इंजनों को आपके पृष्ठ पर क्या है इसका बेहतर विचार प्राप्त करने में मदद करता है। विशेष रूप से, वह मार्कअप खोज इंजन को बताता है कि आप प्रत्येक अनुभाग में क्या लिख ​​रहे हैं।

उदाहरण के लिए, एक लेख में, आप खोज इंजन को शीर्षक, लेखक, तिथि, प्रकाशक और एक लेख के बारे में अन्य उपयोगी जानकारी बताने के लिए स्कीमा मार्कअप का उपयोग कर सकते हैं।

फिल्मों, पुस्तकों, संगठनों, लोगों, रेस्तरां, उत्पादों, स्थानों, कार्यों, विभिन्न प्रकारों के लिए स्कीमा हैं डेटा, संगीत, मूर्तिकला, आरक्षण, सेवाओं, एटीएम, ब्रुअरीज, और बस के बारे में सब कुछ आप के बारे में सोच सकते हैं। यह बहुत अद्भुत है।

स्कीमा मार्कअप का उपयोग किए बिना आप निश्चित रूप से दूर हो सकते हैं। आपका पृष्ठ इसके बिना सही ढंग से प्रदर्शित होगा। आपके पाठकों को यह भी पता नहीं है कि वहाँ क्या है लेकिन इस मार्कअप को प्राप्त करने के लिए बहुत कुछ है। खोज इंजन आपके पेज के बारे में अधिक विस्तृत, उपयोगी जानकारी प्रदान करने में सक्षम होंगे, जिसमें समृद्ध स्निपेट्स भी शामिल हैं।

और Google के स्कीमा मार्कअप टूल के साथ, प्रक्रिया वास्तव में बहुत आसान है।

HTML बेस्ट प्रैक्टिस करने के लिए उपयोग करें

इन सर्वोत्तम प्रथाओं को एक आदत बनाने में थोड़ा समय लग सकता है। और कभी-कभी ऐसा महसूस हो सकता है कि आप किसी ऐसी चीज़ के लिए बहुत अधिक समय ले रहे हैं जो आपको बहुत अधिक नहीं मिलती है। लेकिन यह सुनिश्चित करना कि आपके HTML और CSS HTML और CSS को इन स्टेप बाय स्टेप ट्यूटोरियल के साथ जानेंHTML, CSS और JavaScript के बारे में उत्सुक? यदि आपको लगता है कि आपके पास स्क्रैच से वेबसाइट बनाने का तरीका सीखने के लिए एक आदत है - तो कुछ शानदार चरण-दर-चरण ट्यूटोरियल कोशिश करने लायक हैं। अधिक पढ़ें अच्छी तरह से बाहर रखा गया है, साथ काम करने में आसान है, और बनाए रखने से आपको लंबे समय में बहुत समय की बचत होगी।

वेब पेज बनाते समय आपको कौन सी अन्य अच्छी आदतें उपयोगी लगती हैं? क्या आप उपरोक्त किसी भी प्रथा से असहमत हैं? नीचे टिप्पणी में अपने विचारों को साझा करें!