प्रारूप फैंसी सीएसएस हेडलाइंस और शीर्षलेख

अधिकांश वेब पृष्ठों पर हेडलाइंस आम हैं। असल में, किसी भी टेक्स्ट दस्तावेज़ में कम से कम एक शीर्षक होता है ताकि आप जो पढ़ रहे हैं उसका शीर्षक जान सकें। इन शीर्षकों को एचटीएमएल शीर्षक तत्वों का उपयोग करके कोड किया जाता है - एच 1, एच 2, एच 3, एच 4, एच 5, और एच 6।

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

डीवीवी और स्टाइल की बजाय शीर्षक टैग का उपयोग क्यों करें

शीर्षक टैग की तरह इंजन खोजें

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

आपको याद रखना नहीं है कि आपने अपनी हेडलाइंस को परिभाषित करने के लिए किस कक्षा का उपयोग किया था

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

वे एक मजबूत पेज रूपरेखा प्रदान करते हैं

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

आपका पृष्ठ स्टाइल बंद होने के साथ भी भावना बना देगा

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

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

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

अपने हेडलाइंस के पाठ और फ़ॉन्ट को स्टाइल करें

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

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

सीमाएं शीर्षकों को तैयार कर सकती हैं

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

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

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

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

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

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

हेडलाइंस में छवि प्रतिस्थापन

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

जेरेमी गिरार्ड द्वारा 9/6/17 को संपादित किया गया