फैंसी सीएसएस शीर्षकों और शीर्षकों को प्रारूपित करें

अधिकांश वेब पेजों पर हेडलाइंस आम हैं। वास्तव में, लगभग किसी भी टेक्स्ट दस्तावेज़ में कम से कम एक शीर्षक होता है ताकि आप जो पढ़ रहे हैं उसका शीर्षक जान सकें। इन शीर्षकों को का उपयोग करके कोडित किया गया है एचटीएमएल शीर्षक तत्व - h1, h2, h3, h4, h5, और h6।

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

प्रभागों के बजाय शीर्षक टैग का उपयोग क्यों करें

शीर्षकों का उपयोग करने और उनका सही क्रम में उपयोग करने का यह सबसे अच्छा कारण है (अर्थात। एच 1, फिर एच 2, फिर एच 3, आदि)। खोज इंजन हेडिंग टैग्स के अंदर शामिल टेक्स्ट को सबसे ज्यादा वेटिंग दें क्योंकि उस टेक्स्ट का सिमेंटिक वैल्यू है। दूसरे शब्दों में, अपने पृष्ठ शीर्षक H1 को लेबल करके, आप खोज इंजन स्पाइडर को बताते हैं कि वह पृष्ठ का #1 फोकस है। H2 शीर्षकों में #2 ज़ोर होता है, इत्यादि।

आपको यह याद रखने की ज़रूरत नहीं है कि आप अपनी सुर्खियों को परिभाषित करने के लिए किन कक्षाओं का उपयोग करते थे

जब आप जानते हैं कि आपके सभी वेब पेजों में एक H1 होने वाला है जो बोल्ड, 2em और पीला है, तो आप इसे अपनी स्टाइलशीट में एक बार परिभाषित कर सकते हैं और किया जा सकता है। 6 महीने बाद, जब आप कोई अन्य पृष्ठ जोड़ रहे हों, तो आप अपने पृष्ठ के शीर्ष पर केवल एक H1 टैग जोड़ें, आपके पास नहीं है अन्य पृष्ठों पर वापस जाने के लिए यह पता लगाने के लिए कि आपने मुख्य शीर्षक और उप-शीर्षकों को परिभाषित करने के लिए किस शैली आईडी या वर्ग का उपयोग किया है।

एक सशक्त पृष्ठ रूपरेखा प्रदान करें

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

शैलियों के बंद होने पर भी आपका पेज समझ में आएगा

हर कोई स्टाइल शीट को देख या उपयोग नहीं कर सकता है (और यह # 1 पर वापस आता है - सर्च इंजन आपके पेज की सामग्री (टेक्स्ट) को देखते हैं, स्टाइल शीट को नहीं)। यदि आप शीर्षक टैग का उपयोग करते हैं, तो आप अपने पृष्ठों को अधिक पहुंच योग्य बना रहे हैं क्योंकि शीर्षक ऐसी जानकारी प्रदान करते हैं जो a डीआईवी टैग नहीं होगा।

यह स्क्रीन रीडर्स और वेबसाइट एक्सेसिबिलिटी के लिए मददगार है

शीर्षकों का उचित उपयोग एक दस्तावेज़ के लिए एक तार्किक संरचना बनाता है। स्क्रीन रीडर इसका उपयोग दृष्टिबाधित उपयोगकर्ता के लिए साइट को "पढ़ने" के लिए करेंगे, जिससे आपकी साइट विकलांग लोगों के लिए सुलभ हो जाएगी।

अपने शीर्षकों के टेक्स्ट और फ़ॉन्ट को स्टाइल करें

शीर्षक टैग की "बड़ी, बोल्ड और बदसूरत" समस्या से दूर जाने का सबसे आसान तरीका टेक्स्ट को उस तरह से स्टाइल करना है जिस तरह से आप उन्हें देखना चाहते हैं। वास्तव में, जब एक नई वेबसाइट पर काम करते हैं, तो सबसे पहले अनुच्छेद, एच1, एच2, और एच3 शैलियों को लिखना सबसे अच्छा होता है। केवल फ़ॉन्ट परिवार और आकार/वजन के साथ रहें। उदाहरण के लिए, यह एक नई साइट के लिए एक प्रारंभिक स्टाइल शीट हो सकती है (ये केवल कुछ उदाहरण शैलियाँ हैं जिनका उपयोग किया जा सकता है):

आप संशोधित कर सकते हैं फोंट्स अपने शीर्षक का या टेक्स्ट शैली या टेक्स्ट का रंग भी बदलें। ये सभी आपके "बदसूरत" शीर्षक को कुछ अधिक जीवंत और आपके डिज़ाइन को ध्यान में रखते हुए बदल देंगे।

बॉर्डर हेडलाइंस तैयार कर सकते हैं

बॉर्डर आपकी हेडलाइन को बेहतर बनाने का एक शानदार तरीका है और इसे जोड़ना आसान है। लेकिन बॉर्डर के साथ प्रयोग करना न भूलें — आपको अपने हेडलाइन के हर तरफ बॉर्डर की ज़रूरत नहीं है। और आप केवल सादे उबाऊ सीमाओं से अधिक का उपयोग कर सकते हैं।

हमने कुछ दिलचस्प दृश्य शैलियों को पेश करने के लिए अपने नमूना शीर्षक में एक शीर्ष और निचला बॉर्डर जोड़ा है। आप अपनी इच्छित डिज़ाइन शैली को प्राप्त करने के लिए किसी भी तरह से सीमाएँ जोड़ सकते हैं।

और भी अधिक पिज़्ज़ाज़ के लिए अपने शीर्षकों में पृष्ठभूमि छवियां जोड़ें

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

इस शीर्षक की चाल यह है कि हम जानते हैं कि हमारी छवि 90 पिक्सेल लंबी है। इसलिए हमने 90px (पैडिंग: 0.5 0 .) के शीर्षक के निचले भाग में पैडिंग जोड़ दी है गुणित 90px 0 पी;)। आप हाशिये, लाइन-ऊंचाई और पैडिंग के साथ खेल सकते हैं ताकि शीर्षक का टेक्स्ट ठीक वहीं प्रदर्शित हो सके जहां आप इसे चाहते हैं।

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

सुर्खियों में छवि प्रतिस्थापन

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

जेरेमी गिरार्ड द्वारा संपादित