सीएसएस के साथ फैंसी हेडिंग करें

हेडलाइंस सजाने के लिए फ़ॉन्ट्स, सीमाओं और छवियों का प्रयोग करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

शरीर, एचटीएमएल {मार्जिन: 0; पैडिंग: 0; } पी {फ़ॉन्ट: 1em एरियल, जिनेवा, हेल्वेटिका, संस-सेरिफ़; } एच 1 {फ़ॉन्ट: बोल्ड 2em "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़; } एच 2 {फ़ॉन्ट: बोल्ड 1.5em "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़; } एच 3 {फ़ॉन्ट: बोल्ड 1.2em एरियल, जिनेवा, हेल्वेटिका, संस-सेरिफ़; }

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

एच 1 {फ़ॉन्ट: बोल्ड इटालिक 2em / 1em "टाइम्स न्यू रोमन", "एमएस सेरिफ़", "न्यूयॉर्क", सेरिफ़; मार्जिन: 0; पैडिंग: 0; रंग: # ई 70000; }

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

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

एच 1 {फ़ॉन्ट: बोल्ड इटालिक 2em / 1em "टाइम्स न्यू रोमन", "एमएस सेरिफ़", "न्यूयॉर्क", सेरिफ़; मार्जिन: 0; पैडिंग: 0; रंग: # ई 70000; सीमा-शीर्ष: ठोस # ई 70000 माध्यम; सीमा-तल: बिंदीदार # e7ce00 पतला; चौड़ाई: 600 पीएक्स; }

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

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

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

एच 1 {फ़ॉन्ट: बोल्ड इटैलिक 3em / 1em "टाइम्स न्यू रोमन", "एमएस सेरिफ़", "न्यूयॉर्क", सेरिफ़; पृष्ठभूमि: # एफएफ यूआरएल ("fancyheadline.jpg") दोहराना-एक्स नीचे; पैडिंग: 0.5em 0 90px 0; पाठ-संरेखण: केंद्र; मार्जिन: 0; सीमा-तल: ठोस # e7ce00 0.25em; रंग: # ई 70000; }

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

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

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

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

जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 9/6/17 को संपादित किया गया