Css कोड में एरर कैसे पाए। CSS Validation Service का उपयोग करके वैधता के लिए CSS की जाँच करना। बटन इंटरएक्टिव बनाना
वैधता के लिए एक वेब कोड की जाँच W3C मानकों और प्रमाण पत्रों के खिलाफ जाँच कर रहा है।
W3C (वर्ल्ड वाइड वेब कंसोर्टियम) वेब के तकनीकी विधायक हैं जो कोडिंग के लिए मानक और दिशानिर्देश विकसित करते हैं। वेब पर काम करने वाले सभी लोगों के लिए W3C प्रमाणपत्र और मानक अनिवार्य हैं। कोड वर्तनी में समान मानकों की आवश्यकता है ताकि सभी वेब एप्लिकेशन एक ही भाषा के स्थान पर, मानक भाषाओं में संवाद करें, और वेब दस्तावेजों के साथ काम करते समय एक दूसरे को समझें।
W3C न केवल नेटवर्किंग मानक बनाता है, बल्कि सक्रिय रूप से उनके कार्यान्वयन को बढ़ावा देता है।
W3C में वैधता के लिए HTML / XHTML और CSS कोड की जाँच के लिए ऑनलाइन सेवाएँ हैं।
W3C सत्यापनकर्ताओं का उपयोग करके W3C मानकों के खिलाफ अपने कोड की जाँच करना सबसे अच्छा तरीका है।
वैधता के लिए कोड की जांच करने के लिए W3C से मुफ्त ऑनलाइन सेवाएं।
W3C सत्यापनकर्ताओं के पास एक सहज ज्ञान युक्त अंतरफलक है। उनके साथ काम करना आसान और सरल है।
सेवाओं को तीन मोड में जांचना संभव है और तदनुसार, केवल तीन बटन हैं:
URL की जाँच करें
(सत्यापन के लिए, आपको वेब पर उपलब्ध साइट के किसी भी पृष्ठ का पता निर्दिष्ट करना होगा)
अपलोड की गई फ़ाइल की जाँच करें
(सत्यापन के लिए, आपको स्कैन की गई फ़ाइल के लिए पथ निर्दिष्ट करना होगा)
टाइप किए गए टेक्स्ट को चेक करें
(सत्यापन के लिए, आपको सत्यापनकर्ता विंडो में सत्यापित कोड को कॉपी और पेस्ट करना होगा)
स्थानीय कंप्यूटरों पर स्थित वेब दस्तावेजों या ग्रंथों की जांच करते समय अंतिम दो तरीके विशेष रूप से उपयोगी होते हैं। ये वेब पेज हो सकते हैं, या तो पहले से ही वेब से एक स्थानीय कंप्यूटर पर डाउनलोड किया जा सकता है, या "डेनवर" जैसे स्थानीय सर्वर पर स्थित इंजन द्वारा उत्पन्न होता है। डेनवर के मामले में, आपको ब्राउज़र के माध्यम से पृष्ठ को .html एक्सटेंशन वाली फ़ाइल के रूप में सहेजना होगा और फिर इसे एक अलग फ़ाइल के रूप में देखना होगा, या ब्राउज़र से सीधे वेब पेज के स्रोत कोड की प्रतिलिपि बनाएँ और इसे टाइप किए गए पाठ के रूप में जांचें।
W3C ऑनलाइन सत्यापनकर्ताओं का उपयोग कैसे करें।
हम सत्यापनकर्ता की ओर मुड़ते हैं:
(http://validator.w3.org/ - HTML या XHTML सत्यापन के लिए
http://jư.w3.org/css-validator/ - CSS सत्यापन के लिए)
खोले गए सत्यापनकर्ता विंडो में, तीन सत्यापन विधियों में से एक का चयन करें
(साइट पृष्ठ url, स्थानीय फ़ाइल या टाइप किया गया पाठ)
संबंधित टैब पर जाएं
सत्यापन की वस्तु निर्दिष्ट करें
(चेक किए गए वेब पेज का यूआरएल दर्ज करें,
या स्थानीय कंप्यूटर पर फ़ाइल के लिए पथ,
क्रमशः परीक्षण कोड डालें या डालें)
"चेक" बटन दबाएं और चेक के परिणाम को देखें
W3C की सेवाएं वैधता के लिए कोड की जांच करती हैं और यदि कोई हो, तो तुरंत त्रुटियों का संकेत देती हैं। प्रत्येक त्रुटि पर टिप्पणी की जाएगी। टिप्पणियाँ, दुर्भाग्य से, अंग्रेजी में हैं। इसलिए Google Translate आपकी सहायता करने के लिए है, आपको बस इतना करना है कि कोड को ठीक करें और यदि आवश्यक हो तो इसे फिर से जाँच के लिए जाँचें।
W3C सत्यापनकर्ता पूरी तरह से स्वतंत्र और स्वचालित हैं। इसलिए, आप उन्हें लंबे समय तक गलतियों पर और अशुद्धता के साथ अपने काम के साथ हथौड़ा कर सकते हैं। इसके लिए ये सेवाएं बनाई जाती हैं।
W3C सत्यापनकर्ताओं के लिए एक सामान्य विकल्प।
W3C वेब कोड सत्यापन ऑनलाइन सर्वर के अलावा, मोज़िला फ़ायरफ़ॉक्स ब्राउज़र के लिए HTML Validator एक्सटेंशन बहुत अच्छे परिणाम देता है। ब्राउज़र में इस तरह के ऐड-ऑन की उपस्थिति से वेबमास्टर के काम में आसानी होती है और एक बार फिर साबित होता है कि मोज़िला फ़ायरफ़ॉक्स "स्टीयरिंग" ब्राउज़र है।
आप यहां डबेर एक्सटेंशन डाउनलोड कर सकते हैं: http://users.skynet.be/mgueury/mozilla/
आप एक्सटेंशन को इस तरह स्थापित कर सकते हैं:
- फ़ायरफ़ॉक्स लॉन्च करें।
अगला: मेनू - उपकरण - ऐड-ऑन - एक्सटेंशन।
और, केवल डाउनलोड की गई फ़ाइल (xpi एक्सटेंशन) को माउस के साथ खोली गई विंडो में खींचें।
उसके बाद, एक्सटेंशन स्वचालित रूप से स्थापित हो जाएगा।
या (दूसरा तरीका):
- फ़ायरफ़ॉक्स लॉन्च करें।
अगला: मेनू - फ़ाइल - ओपन फ़ाइल - डाउनलोड की गई फ़ाइल के लिए पथ निर्दिष्ट करें।
उसके बाद, विस्तार, फिर से, स्वचालित रूप से स्थापित किया जाएगा।
स्थापना पूर्ण होने के बाद, आपको ब्राउज़र को पुनरारंभ करना होगा।
पुनः आरंभ करने पर, वेब पृष्ठों को स्कैन करने के लिए एक विकल्प विधि के साथ एक विंडो दिखाई देगी:
"HTML सुव्यवस्थित" या "SGML पार्सर" या "सीरियल"
हम "SGML पार्सर" विधि को सबसे सुविधाजनक और स्वीकार्य विकल्प के रूप में चुनते हैं। संबंधित बटन पर क्लिक करें। अब, ब्राउज़र विंडो में, ऐड-ऑन आइकन प्रदर्शित किया जाएगा, और इसके बगल में एड-ऑन सेटिंग्स बटन दिखाई देगा।
मेरे पास - ऊपर और दाईं ओर:
Mozilla Firefox ब्राउज़र के लिए HTML Validator पूरी तरह से स्वचालित रूप से काम करता है। उसे यह दिखाने की जरूरत नहीं है कि क्या जाँच करनी है। यह सभी दस्तावेजों की जांच करता है जो मोज़िला फ़ायरफ़ॉक्स में खोले जाएंगे। यह बहुत सुविधाजनक है। खुले दस्तावेज़ में कोई समस्या है या नहीं यह समझने के लिए प्रोग्राम लेबल के रंग को देखने के लिए पर्याप्त है।
परीक्षण के परिणामों के आधार पर, आइकन का रंग हरा, पीला या लाल हो सकता है, जिसका अर्थ निम्न है:
हरा - "कोई त्रुटि नहीं", सब कुछ "ठीक है"
पीला - "कोई त्रुटि नहीं, लेकिन चेतावनी"
लाल - "गलतियाँ हैं"
जब आप शॉर्टकट पर क्लिक करते हैं, तो एक विंडो खुलेगी जिसमें पेज का सोर्स कोड स्पष्टीकरण और चेतावनियों के साथ त्रुटियों और चेतावनियों के साथ होगा, यदि कोई हो।
कुछ इस तरह।
स्वागत हे! तो हम समाप्त हो गए। आगे पूरे साल फलदायी काम होता है, कई दिलचस्प विचारों को रेखांकित किया गया है और अब केवल एक ही चीज बची है, उन्हें जीवन में लाना है and आप घटनाओं के पाठ्यक्रम का अनुसरण कर सकते हैं और देख सकते हैं कि विचारों की स्वतंत्रता कैसे कार्रवाई में व्यक्त की जाती है - बस ब्लॉग की सदस्यता लें, मैं आपको आश्वस्त करता हूं - इसमें ज्यादा समय नहीं लगेगा। ...
आज मेरा काम यह पता लगाना है कि क्या सही स्रोत कोड जिसने परीक्षा उत्तीर्ण की है, वह कुछ भी प्रभावित करता है और यदि हां, तो कितना। और हमेशा की तरह, मैं टिप्पणियों में इस पर आपकी राय का इंतजार कर रहा हूं।
पिछले साल, मैंने अपने प्रकाशनों में इस तरह की वैधता पर बहुत ध्यान दिया, यह पता लगाने का समय है कि कौन से लोग हैं। वैध HTML के फायदे... इससे पहले, आपके साथ, हमने चर्चा की कि वैधता के साथ-साथ चैनलों और कुछ अन्य दिलचस्प बिंदुओं के लिए कैसे जांच की जाए।
एक वैध वेबसाइट के पक्ष में चार मुख्य कारक
सबसे पहले, हम एक सौ प्रतिशत निश्चितता के साथ कह सकते हैं कि वे पृष्ठ जिन्होंने सत्यापनकर्ता परीक्षा उत्तीर्ण की है, बिल्कुल सभी आधुनिक ब्राउज़रों में सही ढंग से प्रदर्शित होंगे - और यह किसी भी तरह से कम महत्वपूर्ण नहीं है। सहमत हूं, आपके सामने विकृत तत्वों के साथ लेआउट को देखना बहुत सुखद नहीं है। और आगंतुक ऐसे ब्लॉग पर लौटने की संभावना नहीं है, जहां इसका लेखक उपस्थिति और के बारे में अप्रिय है।
दूसरे, भले ही आप तार्किक रूप से सोचते हों, अनावश्यक टैग और अन्य "कचरा" को हटाते हुए, हम पृष्ठ का वजन कम करते हैं और इस तरह पृष्ठ लोड समय को कम करते हैं, और ब्राउज़र ऐसे पृष्ठों को संसाधित करने में कम समय खर्च करते हैं। आप जानते हैं, इस तरह की एक कहावत है: "कम शब्द, अधिक कार्रवाई", यदि आप इसे rephrase करते हैं और इसे साइट बिल्डिंग पर लागू करते हैं, तो आपको कुछ ऐसे मिलते हैं जैसे "कम टैग - अधिक शब्द।"
और ये खाली शब्द नहीं हैं, जिन लोगों को कभी भी यैंडेक्स के साथ समस्याओं का सामना करना पड़ा है उन्हें तकनीकी सहायता से प्रतिक्रिया मिली: साइट में सुधार करें और उस पर काम करें। उदाहरण के लिए, यैंडेक्स वेबमास्टर टूलबार में, आप उस अनुभाग के लिए मदद पा सकते हैं, जिसमें साइट बनाने के लिए सिफारिशें शामिल हैं।
यदि आप ध्यान से इस दस्तावेज़ का अध्ययन करते हैं, तो पैराग्राफ 3 "लेआउट" निम्नलिखित निर्धारित करता है:
अपने पृष्ठ लेआउट को मानक तक रखने का प्रयास करें
तीसरा, यदि आप उन्हें ऑर्डर करने या उन्हें बढ़ावा देने के लिए वेबसाइटों के निर्माण में लगे हुए हैं, तो आपको शायद एचटीएमएल और सीएसएस भाषाओं को जानना चाहिए, और यदि ऐसा है, तो फिर जानबूझकर त्रुटियां क्यों पैदा होती हैं? इसके अलावा, ग्राहक कभी-कभी ठेकेदार के लिए एक कार्य निर्धारित करते हैं: क्रमशः एक वैध कोड का उपयोग करने के लिए, और प्रदर्शन किए गए कार्यों के लिए कीमतें बहुत अधिक होंगी।
और, अंत में, चौथे, मनोवैज्ञानिक कारक एक महत्वपूर्ण भूमिका निभाता है। यह जानकर अच्छा लगा कि किए गए कार्य कुछ मानदंडों और मानकों को पूरा करते हैं, हमारे मामले में, वर्ल्ड वाइड वेब कंसोर्टियम के मानकों। और जैसा कि आप जानते हैं, मनोविज्ञान एक महान चीज है! तो उसकी उपेक्षा मत करो।
एह, ऐसा शिलालेख देखना बहुत अच्छा लगता है nice
सभी को नमस्कार!
HTML कोड की वैधता की जाँच करना आवश्यक है, क्योंकि खोज रोबोट केवल HTML कोड देखते हैं। इस कारण से, साइट कोड को पूर्ण क्रम में रखना उचित है। इसमें हमें विशेष ऑनलाइन सेवाओं द्वारा मदद मिलेगी जो कोड सत्यापन करते हैं और विशेष रूप से त्रुटियों की ओर इशारा करते हैं।
ऐसी ही एक सेवा है validator.w3.org validator, जो शायद सबसे अच्छी है। यह पूरी तरह से अंग्रेजी में है, इसलिए कुछ को काम करते समय समस्या हो सकती है, लेकिन चिंता न करें: सत्यापनकर्ता आपको लाइन नंबर और त्रुटि दोनों ही दिखाएगा।
एक मान्य कोड एक कोड है जो सभी मानकों को पूरा करता है.
पाठ के लिए, आपको निम्नलिखित सामग्री की आवश्यकता होगी:
उपर्युक्त ऑनलाइन सेवा पूरी साइट पर ऑनलाइन HTML कोड की जाँच करती है। आपको अपनी साइट के डोमेन को निर्दिष्ट करने और "चेक" बटन पर क्लिक करने की आवश्यकता है, इसलिए आप साइट के एचटीएमएल-कोड की जांच करना शुरू करते हैं।
इसके अलावा, सत्यापनकर्ता एक बहुत ही दिलचस्प सुविधा प्रदान करता है - स्थानीय कंप्यूटर से साइट फ़ाइलों की जाँच करना। मेरी राय में, यह टूल उन लोगों के लिए उपयोगी है जो ऑर्डर करने के लिए वेबसाइट बनाते हैं। आदेश रखने से पहले, आपको सब कुछ डबल-चेक करने की आवश्यकता है, क्योंकि आप अपने काम से हमेशा संतुष्ट रहना चाहते हैं। आप "फाइल अपलोड द्वारा मान्य" टैब पर जाकर फ़ाइलों की जाँच कर सकते हैं: 
मैं HTML कोड में त्रुटियों को कैसे ठीक करूं?
Validator W3c सेवा ने मुझे दो त्रुटियां बताईं और 8 चेतावनी जारी कीं। मैं उन्हें ठीक करने की कोशिश करूंगा और आपको दिखाऊंगा कि इसे एक टुकड़े में कैसे किया जाए। 
हम त्रुटि को ठीक करते हैं “तत्व शैली इस संदर्भ में तत्व div के बच्चे के रूप में अनुमति नहीं है। (इस सबट्री से आगे की त्रुटियों को दबाना।) ”। यह त्रुटि मुझे बताती है कि HTML कोड में, अर्थात् टैग
सत्यापनकर्ता यह भी बताता है कि त्रुटि कहाँ स्थित है: 
इस तरह से आप HTML त्रुटियों को ढूंढ और ठीक कर सकते हैं। लेकिन साइटें केवल मार्कअप कोड से ही नहीं, बल्कि सीएसएस से भी जुड़ी होती हैं, इसलिए हम वेब संसाधन की कैस्केडिंग स्टाइल शीट भी जांचते हैं।
वैधता के लिए सीएसएस कोड की जाँच
W3c सत्यापनकर्ता वैधता के लिए सीएसएस कोड की भी जांच कर सकता है। आप इस लिंक पर कर सकते हैं। ऑपरेशन का सिद्धांत समान है: साइट का URL निर्दिष्ट करें, या अपने कंप्यूटर पर एक फ़ाइल चुनें और "चेक" बटन पर क्लिक करें।
उसी HTML सत्यापनकर्ता के विपरीत, सीएसएस सत्यापनकर्ता रूसी में है।
सीएसएस त्रुटियों और चेतावनियाँ
वैधता के लिए सीएसएस कोड की जांच करते समय, सेवा बड़ी संख्या में त्रुटियों और चेतावनियों को जारी करती है। मुझे 23 त्रुटियां और 281 चेतावनी मिलीं। पहली नज़र में, ऐसा लग सकता है कि यह बहुत कुछ है और यहां तक \u200b\u200bकि डरावना भी हो सकता है, हालांकि, अधिकांश संकेतित त्रुटियों और चेतावनियों को केवल इसलिए दिखाया जाता है क्योंकि सेवा कुछ गुणों को नहीं जानती है जो विभिन्न ब्राउज़रों पर लागू होती हैं।
मेरे मामले में, 281 में से अधिकांश चेतावनियाँ विभिन्न ब्राउज़रों में सामान्य रूप से प्रदर्शित करने के लिए CSS गुण हैं:
सेवा ऐसे टैग को "अज्ञात विक्रेता एक्सटेंशन" के रूप में रखती है। इसलिए, यदि, आपकी सीएसएस फ़ाइलों की जांच करते समय, आपको बड़ी संख्या में ऐसी त्रुटियां दिखाई देती हैं, तो चिंतित न हों। ठीक है।
मैं उन्हें समाप्त करने के लिए सबसे सामान्य त्रुटियों और तरीकों की सूची नहीं दूंगा, क्योंकि सभी के समाधान अलग-अलग हो सकते हैं और आपको यह समझने के लिए HTML कोड को देखने की जरूरत है कि क्या गलत है।
यदि आप कुछ त्रुटि को समाप्त नहीं कर सकते हैं, तो पाठ में टिप्पणियों में समस्या को साझा करें, शायद हम एक साथ समाधान पाएंगे।
मुझे उम्मीद है कि इस सप्ताह के दौरान जो सबक सामने आए, वे आपके लिए उपयोगी थे और कुछ समस्याओं को हल करने में मदद करते थे।
खैर, अब, अलविदा!
पिछला लेखअगला लेख
2016-12-29
हम बटन को चेतन करते हैं और HTML और CSS कोड की वैधता के लिए साइट की जांच करते हैं
नमस्ते प्रिय आगंतुक!
आज हम एक बनाए गए वेब पेज के उदाहरण का उपयोग करते हुए विचार करेंगे कि आप HTML और CSS भाषाओं के स्थापित विनिर्देशों के अनुपालन के लिए वैधता के लिए साइट की जांच कैसे कर सकते हैं।
इसके अलावा, जाँच करने से पहले, हम साइडबार बटन को "एनिमेट करने" से संबंधित भाग में सीएसएस स्टाइलशीट का कुछ संशोधन करेंगे, जहां हम स्टेटिक बटन को इंटरेक्टिव बनायेंगे, उनकी उपस्थिति को उनके राज्य के आधार पर बदलते हुए - निष्क्रिय, सक्रिय और दबाया हुआ।
- बटन को बड़ा करना
- बटन इंटरएक्टिव बनाना
- क्या आपको सत्यापन की आवश्यकता है
- HTML कोड को कैसे मान्य करें
- CSS कोड को कैसे मान्य करें
- साइट स्रोत फ़ाइलें
बटन को बड़ा करना
पिछले लेख में, हमने मुख्य सामग्री क्षेत्र को होम पेज के लेआउट से मिलान करने के लिए स्टाइल किया था। इसी समय, साइडबार में बटन हैं जो स्थिर हैं और गोल कोनों के साथ एक नियमित फ्लैट ब्राउन आयत की तरह दिखते हैं।
नीचे ऐसे बटनों के साथ साइडबार का एक टुकड़ा है।
बटनों को "चेतन" करने के लिए, हम सबसे पहले सीएसएस शैलियों की मदद से उन्हें कुछ मात्रा देते हैं। और हम रैखिक ढाल संपत्ति का उपयोग करके ऐसा करेंगे, जो पहले रोटेटर, खोज और सदस्यता ब्लॉकों के डिजाइन में उपयोग किया गया था।
हम रेखीय ढाल मूल्यों को निम्नानुसार परिभाषित करते हैं:
1. बटन के मुख्य रंग की तुलना में गहरे रंग से शुरू होकर, रंगों को नीचे से ऊपर तक सेट किया जाएगा। ग्रेडिएंट की शुरुआत में किस रंग का उपयोग करना है, यह निर्धारित करने के लिए, हम इस मामले में फोटोशॉप में एक ग्राफिक्स एडिटर के टूल का उपयोग करते हैं।
ऐसा करने के लिए, एक खुले डिज़ाइन लेआउट दस्तावेज़ के साथ, "कलर पिकर" का चयन करें, बटन के आवश्यक क्षेत्र पर कर्सर ले जाएँ, मुख्य रंग को परिभाषित करें और फिर उसी ब्राउन शेड के गहरे रंग का चयन करने के लिए "कलर पिकर" टूल्स का उपयोग करें। हमारे मामले में, आइए "653939" मान के साथ एक रंग लें। यह कैसे किया जा सकता है यह नीचे स्क्रीनशॉट में स्पष्ट रूप से दिखाया गया है।
2. अगला, ग्रेडिएंट की स्टॉप स्थिति को परिभाषित करें जहां प्रारंभिक, गहरा रंग मुख्य एक में संक्रमण करेगा। बीच में स्टॉप की स्थिति लगभग रखें। उसी समय, अधिक संतृप्त रंग बनाने के लिए, हम स्टॉप पोजिशन को थोड़ा ऊपर ले जाएंगे, और इसके मूल्य को परिभाषित करेंगे, कहते हैं, 70% ऊंचाई।
3. ग्रेडिएंट को गुण असाइन करने के लिए आखिरी चीज बेस रंग की तुलना में हल्के रंग को परिभाषित करना है जो शीर्ष पर बटन को रंग देगा। यह उसी तरह से किया जाता है जब प्रारंभिक ढाल रंग को परिभाषित करता है। इस मामले में, हम इस रंग का मान "b88686" के रूप में लेंगे।
3. प्राप्त आंकड़ों के आधार पर, बटन के पहले से उत्पन्न सीएसएस गुणों में एक रैखिक ढाल जोड़ें।
इनपुट: {
ऊंचाई : 30 पीएक्स;
margin-bottom : 10 पीएक्स;
बॉर्डर-त्रिज्या : 5 पीएक्स;
पृष्ठभूमि : # a76d6d;
पाठ संरेखित : केंद्र;
फ़ॉन्ट वजन : साहसिक;
रंग : # एफएफ;
नाव : सही;
पृष्ठभूमि छवि
यह ध्यान दिया जा सकता है कि जब चरम रंगों का निर्धारण किया जाता है, तो स्टॉप पोजिशन को यहां इंगित नहीं किया जाता है, क्योंकि 0% और 100% के मूल्यों पर यह आवश्यक नहीं है।
अब, हम ब्राउज़र को रीफ्रेश करते हैं और परिणाम देखते हैं।
जैसा कि आप देख सकते हैं, बटन ने एक मामूली उभार हासिल कर लिया है। अब आप उन्हें "पुनर्जीवित करना" शुरू कर सकते हैं।
बटन इंटरएक्टिव बनाना
बटनों के साथ पूरी तरह से काम करने के लिए, हम उन्हें संवादात्मक बनाएंगे, जो नेत्रहीन उनके तीन मुख्य राज्यों को प्रतिबिंबित करेगा, निष्क्रिय (बटन अपनी प्रारंभिक स्थिति में है), सक्रिय (कर्सर बटन पर मंडरा रहा है) और दबाया गया (जब कर्सर मँडरा रहा है, तो माउस बटन दबाया और आयोजित किया गया है)।
और यह छाया और सीमा गुणों के संयोजन का उपयोग करके किया जाएगा। इस तकनीक का सार यह है कि विभिन्न पक्षों से छाया और सीमाओं के रंग को बदलकर, आप बटन की स्थिति में बदलाव की नकल प्राप्त कर सकते हैं।
सबसे पहले, आइए इसे निष्क्रिय अवस्था के लिए करें और इसे चित्रित करने का प्रयास करें ताकि बटन सतह से ऊपर उठें।
हम पिछले मामलों की तरह ही बॉर्डर और छाया के रंगों को चुनेंगे।
उपयुक्त जोड़ के बाद CSS कोड फॉर्म लेगा।
इनपुट: {
ऊंचाई : 30 पीएक्स;
margin-bottom : 10 पीएक्स;
बॉर्डर-त्रिज्या : 5 पीएक्स;
पृष्ठभूमि : # a76d6d;
पाठ संरेखित : केंद्र;
फ़ॉन्ट वजन : साहसिक;
रंग : # एफएफ;
नाव : सही;
पृष्ठभूमि छवि : रैखिक-ढाल (शीर्ष पर, # 653939, # a76d6d 50%, # b88686);
डब्बे की छाया : 2px 2px 4px 0px # 422a2a;
सीमा चौड़ाई : 2 पीएक्स;
झालर की शैली : ठोस;
किनारे का रंग : # डडबे # 241616 # 241616 # डडब्बे;
यहां यह ध्यान दिया जा सकता है कि सीमाओं को गुणों के संयोजन द्वारा दर्शाया जाता है जो मूल्य के साथ मोटाई (सीमा-चौड़ाई) निर्धारित करते हैं 2px ), एक शैली (बॉर्डर-स्टाइल) जिसमें एक मूल्य है जो चार पक्षों में से प्रत्येक पर एक ठोस सीमा और रंग (बॉर्डर-रंग) निर्दिष्ट करता है।
आइए ब्राउज़र को अपडेट करें और देखें कि बटन अब कैसे दिखेंगे।
जैसा कि आप देख सकते हैं, बटन इस स्थिति में उठाए गए प्रतीत होते हैं।
अब आइए बटन को दबाए गए राज्य की तरह बनाने की कोशिश करें। ऐसा करने के लिए, हम छाया को हटा देंगे, और सीमाओं का रंग बदल देंगे। इस स्थिति में, हम एक विशेष छद्म श्रेणी के चयनकर्ता का उपयोग करेंगे: सक्रिय राज्य के अनुरूप होवर करें।
बटन की सक्रिय स्थिति के लिए सीएसएस इस तरह दिखेगा।
इनपुट: मंडराना {
डब्बे की छाया : कोई नहीं;
किनारे का रंग : # a76d6d # a76d6d # a76d6d # a76d6d;
इस मामले में, हम सीमाओं के रंग को फिर से बदल देंगे और एक छाया जोड़ देंगे, केवल इस मामले में यह आंतरिक और विस्थापन के बिना होगा। छद्म श्रेणी के चयनकर्ता भी बदल जाएगा: सक्रिय, दबाए गए राज्य के अनुरूप।
दबाए गए राज्य के लिए सीएसएस कोड निम्नानुसार होगा।
इनपुट: सक्रिय {
डब्बे की छाया : 0px 0px 7px 2px # 422a2a इनसेट;
किनारे का रंग : # 777 #fff #fff # 777;
तुलना के लिए नीचे "खोज" बटन दिखाया गया है, जहां आप स्पष्ट रूप से देख सकते हैं कि यह राज्य के आधार पर अपनी उपस्थिति कैसे बदलता है।
अंजीर। 8 निष्क्रिय अवस्था
यह वह जगह है जहां हमने मुख्य पृष्ठ के लेआउट को समाप्त किया और इसे ऐसे रूप में लाया जो डिज़ाइन लेआउट से मेल खाता है। और अब हमें प्रत्येक चरण में पहले की तरह, विभिन्न ब्राउज़रों में क्रॉस-अनुकूलता के लिए इसे देखना चाहिए। लेकिन इससे पहले, चलो सत्यापन के लिए पृष्ठ की जांच करें, क्योंकि कोड की स्थिति कुछ हद तक क्रॉस-संगति को प्रभावित कर सकती है। इसलिए, अब हम यह बहुत आवश्यक ऑपरेशन करेंगे।
क्या आपको सत्यापन की आवश्यकता है
मान्यता स्थापित मानकों के खिलाफ कोड का सत्यापन है। HTML और CSS कोड की शुद्धता के लिए मान्यता के बीच अंतर। यह स्पष्ट है कि एक मामले में HTML कोड की जाँच की जाती है, दूसरी सीएसएस कोड में।
शायद, कई लोगों को यह सवाल अजीब लगेगा कि क्या सत्यापन की आवश्यकता है। लेकिन अगर आप इंटरनेट पर देखते हैं, तो आप देख सकते हैं कि कई लोग मानते हैं कि मान्य कोड अनावश्यक है, कि यह समय की बर्बादी है, क्योंकि सभी प्रकार की त्रुटियों की उपस्थिति में भी ब्राउज़र अच्छी तरह से काम करते हैं।
बेशक, कई मामलों में, साइटें अमान्य कोड पर अच्छा काम कर सकती हैं, लेकिन ऐसे मामलों में क्रॉस-संगति निश्चित रूप से गारंटी नहीं होगी। आखिरकार, प्रोग्रामिंग भाषाओं के लिए स्वयं मानक हैं, लेकिन इस तथ्य के लिए कि ब्राउज़र उसी तरह त्रुटियों को ठीक करते हैं, ऐसा मानक, निश्चित रूप से मौजूद नहीं है और नहीं हो सकता है। और इसलिए, विभिन्न ब्राउज़र विभिन्न तरीकों से त्रुटियों को संभाल सकते हैं, जिससे पृष्ठों के विभिन्न प्रदर्शन हो सकते हैं।
और सामान्य तौर पर, यह स्पष्ट नहीं है कि कुछ लोगों के अपने काम के प्रति इस तरह की एक आलंकारिक रवैया क्यों है, सिद्धांत के अनुसार "यह ऐसा ही करेगा।" इसलिए, अगर कोई सोचता है कि उसे वैधता के लिए कोड की जांच करने की आवश्यकता नहीं है, तो यह उसका अधिकार है, और वह शायद ही विपरीत के बारे में आश्वस्त हो सकता है, और कोई आवश्यकता नहीं है।
अब कोडों की वैधता की सीधे जाँच करते हैं, पहले HTML, फिर CSS।
HTML कोड को कैसे मान्य करें
वास्तव में, कोड सत्यापन जांच स्वयं काफी सरल है, जैसा कि अब देखा जा सकता है। लेकिन, त्रुटियों को समाप्त करने में आमतौर पर एक निश्चित समय लगता है। बेशक, यदि कोड में कई लाइनें हैं, तो यहां कठिनाइयां पैदा हो सकती हैं। लेकिन, अगर उनमें से सैकड़ों और हजारों हैं, तो आपको कड़ी मेहनत करनी पड़ सकती है, यह सब इस बात पर निर्भर करता है कि कोड कितनी अच्छी तरह संकलित किया गया था। इसलिए, संयुक्त क्रॉस-मिलान चेक के साथ इसे अधिक बार करना बेहतर होता है।
यहां हम वैधता की जांच के लिए सबसे सरल और सबसे आम विकल्प पर विचार करेंगे - यह "डब्ल्यू 3 सी कंसोर्टियम" साइट का उपयोग है, जो ब्राउज़र डेवलपर्स के समर्थन से वेब पेजों के कोड के लिए विनिर्देशों का विकास करता है।
HTML कोड की जाँच करने के लिए, बस https://validator.w3.org/ लिंक का अनुसरण करें, जहाँ जाँचे जा रहे पृष्ठ का पता दर्ज करने के लिए एक फ़ील्ड वाला पेज खुल जाएगा।
स्क्रीनशॉट 51
"चेक" बटन दबाने के बाद, हम चेक परिणाम प्राप्त करेंगे।
इस स्थिति में, HTML कोड मान्य है, लेकिन मान के साथ lang विशेषता का उपयोग करने के लिए एक सिफारिश है "आरयू" , क्योंकि पेज रूसी का उपयोग करता है।
लैंग एट्रीब्यूट ब्राउज़र के लिए कुछ वर्णों को प्रदर्शित करने के लिए है, जैसे कि उद्धरण चिह्न, सही ढंग से, उपयोग की जा रही भाषा के आधार पर। इसलिए, HTML कोड में इसे शामिल करना हमारे लिए अतिश्योक्तिपूर्ण नहीं होगा। और हम इसे html टैग में करेंगे ताकि यह विशेषता पूरे दस्तावेज़ को प्रभावित कर सके।
इस जोड़ को बनाने के लिए निम्न तालिका में दिखाया गया है।
"आरयू" >
. . .
और अब, अगर हम दूसरी जांच करते हैं, तो हम देख सकते हैं कि कोड बिना किसी टिप्पणी के पूरी तरह से वैध हो गया है।
इस तरह, हमने इंटरनेट पर पोस्ट की गई फ़ाइल की जाँच की। लेकिन जब पृष्ठ अभी तक वेब पर पोस्ट नहीं किया गया है, तो आप अन्य तरीकों से इसकी वैधता की जांच कर सकते हैं, यह या तो फाइल को ब्राउज़ बटन का उपयोग करके अपलोड करना है, या HTML कोड को सीधे कॉपी करने के लिए फ़ॉर्म का उपयोग करना है।
स्क्रीनशॉट अंतिम विकल्प दिखाता है, जब सत्यापन के लिए वेब पेज कोड को सीधे फॉर्म में कॉपी किया जाता है।
चेक करने के बाद, हमें एक समान परिणाम मिलता है, और चेक किया हुआ कोड भी यहाँ दिखाया जाएगा। इस घटना में कि त्रुटियां पाई जाती हैं, उन्हें खोज को सरल बनाने के लिए हाइलाइट किया जाएगा, जो उन्हें खत्म करने के लिए काम को बहुत सरल करता है।
CSS कोड को कैसे मान्य करें
हमने HTML सत्यापन जाँच को कवर किया है। CSS कोड ठीक उसी क्रम में जांचा जाता है। केवल इस मामले में, आपको एक अन्य सत्यापनकर्ता पृष्ठ का उपयोग करने की आवश्यकता है, जो इस मामले के लिए http://jư.w3.org/css-validator/ पर स्थित है।
चलो इसे खोलें और, पिछली बार की तरह, जांचे जाने वाले पृष्ठ का पता दर्ज करें, और फिर "चेक" बटन दबाएं।
इस चेक का परिणाम स्क्रीनशॉट में दिखाया गया है।
जैसा कि आप देख सकते हैं, हमारा सीएसएस कोड बिना किसी त्रुटि के विनिर्देश के साथ पूरी तरह से अनुरूप है, जो एक अच्छा परिणाम है।
इस मामले के लिए अन्य सत्यापन विधियों का क्रम HTML-कोड के लिए समान जांच के साथ पूरी तरह से मेल खाता है। इसलिए, हम यहां खुद को नहीं दोहराएंगे, और यही वह जगह है जहां हम सत्यापन जांच पर विचार करेंगे।
उसके बाद, हम क्रॉस-मैचिंग के लिए अपने पेज की जाँच करेंगे और यह सुनिश्चित करेंगे कि यह सभी ब्राउज़रों पर समान प्रदर्शित हो, इससे साइट के मुख्य पेज का लेआउट पूरा हो जाएगा।
और, हम नए साल की छुट्टियों के तुरंत बाद इससे निपटेंगे।
और निष्कर्ष में, आप सभी को नव वर्ष की शुभकामनाएं दे सकते हैं! और आपको नए साल में इंटरनेट पर सफल काम की संभावना के लिए अपनी खुद की वेबसाइट बनाने में स्वास्थ्य, प्रेम, आनंद, समृद्धि और निश्चित रूप से सफलता चाहिए!
साइट स्रोत फ़ाइलें
इस आलेख में किए गए अद्यतनों के साथ साइट की स्रोत फ़ाइलें संलग्न से डाउनलोड की जा सकती हैं अतिरिक्त सामग्री.