हेडलाइन्स सजवण्यासाठी फॉन्ट, बॉर्डर आणि प्रतिमा वापरा
बहुतांश वेब पृष्ठांवर मथळे सामान्य आहेत. खरं तर, कितीही मजकूर दस्तऐवज कमीत कमी एक मथळा ठेवतात जेणेकरून आपल्याला आपण काय वाचत आहात याचे शीर्षक माहित असेल. ही मथळे एचटीएमएल शीर्षकांवरील घटक - एच 1, एच 2, एच 3, एच 4, एच 5 आणि एच 6 या सहाय्याने कोडित आहेत.
काही साइट्सवर, आपल्याला हे आढळू शकते की हे मूलभूत घटक या घटकांचा वापर न करता कोडित केले आहेत त्याऐवजी, मथळे त्यांच्यास जोडलेल्या विशिष्ट श्रेणी विशेषतांसह किंवा वर्ग घटकांसह विभाजन असलेल्या परिच्छेदांचा उपयोग करू शकतात. कारण मी बर्याचदा या अयोग्य पद्धतीविषयी ऐकत आहे कारण डिझायनर "शीर्षलेखांचे स्वरूप पाहू शकत नाही". डिफॉल्टनुसार, हेडिंग बोल्ड मध्ये प्रदर्शित केले जातात आणि ते आकाराने मोठे, विशेषत: एच 1 आणि एच 2 घटक जे पृष्ठाच्या मजकूराच्या इतर भागापेक्षा बरेच मोठ्या फॉन्ट आकारात प्रदर्शित होतात. लक्षात ठेवा हे फक्त या घटकांचे डिफॉल्ट रूप आहे! CSS सह, आपल्याला पाहिजे असेल तर आपण हेडिंग लूक करू शकता! आपण फॉन्ट आकार बदलू शकता, ठळक काढू शकता आणि बरेच काही करू शकता. शीर्षकाच्या पृष्ठांची ठळक अक्षरे देण्यासाठी योग्य मार्ग आहे येथे का काही कारणे आहेत
डीव्हीए आणि स्टाईल पेक्षा हेडिंग टॅग्ज का वापरा
शीर्षक टॅग प्रमाणे शोध इंजिने
हे हेडिंगचा वापर करण्याचे सर्वोत्तम कारण आहे आणि ते योग्य क्रमाने (उदा., 1, नंतर एच 2, नंतर एच 3, इत्यादी) वापरतात. शोध इंजिने टॅग्ज शीर्षकाखाली समाविष्ट असलेल्या मजकुरास सर्वाधिक भार देतात कारण त्या मजकूराचे अर्थ मूल्य आहे. दुसऱ्या शब्दांत, आपल्या पृष्ठाचे शीर्षक H1 लेबल करून, आपण शोध इंजिन स्पायडर ला सांगू शकता की ते पृष्ठाच्या # 1 चे फोकस आहे. H2 शीर्षकाच्या 2 वर जोर दिला जातो, आणि याप्रमाणे.
आपल्या डोक्यावर व्याख्यानांसाठी आपण कोणत्या वर्गांना वापरले हे लक्षात ठेवण्याची आवश्यकता नाही
जेव्हा आपल्याला माहित असेल की आपल्या सर्व वेब पेजेस ठळक, 2 नाम आणि पीला असणार आहेत त्या H1 कडे जात असतील तर आपण एकदा आपल्या स्टिझशीटमध्ये ते ठरवू शकता आणि केले पाहिजे. 6 महिन्यांनंतर जेव्हा आपण दुसरा पृष्ठ जोडता, तेव्हा आपण आपल्या पृष्ठाच्या शीर्षस्थानी एक H1 टॅग जोडा, आपल्याला कोणत्या पृष्ठावर परिभाषित करण्यासाठी वापरलेली शैली आयडी किंवा वर्ग जाणून घेण्यासाठी अन्य पृष्ठांवर परत जाण्याची आवश्यकता नाही मथळा आणि उप-डोक्यावर
ते एक मजबूत पृष्ठ बाह्यरेखा प्रदान करतात
बाह्यरेखा वाचण्यासाठी मजकूर सोपे बनविते. म्हणूनच बहुतेक अमेरिकन शाळांनी विद्यार्थ्यांना कागदपत्र लिहिण्याआधी एक आरेखन लिहिण्यास शिकवले. जेव्हा आपण आऊटलाइन स्वरूपात शीर्षक टॅग वापरता, तेव्हा आपल्या मजकूरामध्ये एक स्पष्ट रचना असते जी खूप जलद दिसून येते. तसेच, अशी साधने उपलब्ध आहेत जी सारांश सादर करण्यासाठी पृष्ठाच्या बाह्यरेषाचे पुनरावलोकन करू शकतात आणि हे बाह्यरेखा संरचनासाठी शीर्षक टॅगवर विसंबून आहेत.
आपले पृष्ठ भावनांनाही मदत करेल, तरीही शैली संपुष्टात
प्रत्येकजण स्टाइल शीट पाहू किंवा वापरू शकत नाही (आणि हे # 1 वर परत येते - शोध इंजिने आपल्या पृष्ठाच्या सामग्री (मजकूर) पहा, शैली पत्रक नाही). जर आपण हेडिंग टॅग वापरता, तर आपण आपली पृष्ठे अधिक प्रवेशयोग्य करीत आहात कारण मथळे माहिती प्रदान करतात जी डीआयव्ही टॅग नसतील.
हे स्क्रीन रीडर आणि वेबसाइट प्रवेशयोग्यतेसाठी उपयुक्त आहे
शीर्षकाचा योग्य वापर दस्तऐवजात एक तार्किक रचना तयार करतो. ही स्क्रीनवरील वाचक आपल्या साइटवर दृष्टि अपात्रांसह साइट "वाचण्यासाठी" वापरेल, ज्यामुळे आपली साइट अपंगत्व असलेल्या लोकांना उपलब्ध होईल.
आपल्या मथळ्याच्या मजकूर आणि फॉन्ट शैली
हेडिंग टॅगच्या "मोठ्या, ठळक, आणि कुरुप" समस्येपासून दूर जाण्याचा सर्वात सोपा मार्ग म्हणजे आपण त्यांना पाहू इच्छिता त्याप्रमाणे मजकूर शैलीमध्ये टाइप करणे. खरं तर, जेव्हा मी एका नवीन वेबसाइटवर काम करत असतो, तेव्हा मी विशेषत: परिच्छेद, एच 1, एच 2 आणि एच 3 शैली पहिल्यांदा लिहितो. मी सहसा फक्त फॉन्ट कुटुंब आणि आकार / वजन चिकटून उदाहरणार्थ, हे नवीन साइटसाठी प्राथमिक शैली पत्रक असू शकते (हे फक्त काही उदाहरण शैली आहेत जे वापरता येतील):
शरीर, html {समास: 0; पॅडिंग: 0; } पी {फॉन्ट: 1EM एरियल, जिनिव्हा, हेल्व्हेटिका, सेन्स-सेरिफ; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {फॉन्ट: ठळक 1.2 एएम एरियल, जिनिव्हा, हेल्व्हेटिका, सेन्स-सेरिफ; }आपण आपल्या मथळ्याचे फॉन्ट सुधारू शकता किंवा मजकूर शैली किंवा मजकूर रंग बदलू शकता. या सर्व गोष्टी आपल्या "कुरुप" मथळा आणखी सशक्त बनतील आणि आपल्या डिझाइनसह ठेवून
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; समास: 0; पॅडिंग: 0; रंग: # ई 7 सी 00; }बॉर्डर्स अप ड्रेस अप करू शकता Headlines
आपल्या सुर्खियाँ सुधारण्यासाठी सीमा ही एक उत्कृष्ट मार्ग आहे आणि सीमा जोडणे सोपे आहे. परंतु सीमेबाहेर प्रयोग करणे विसरू नका - आपल्या मथळ्याच्या प्रत्येक बाजूला सीमा आवश्यक नाही आणि आपण फक्त साध्या बोरिंग बॉर्डरपेक्षा अधिक वापरू शकता.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; समास: 0; पॅडिंग: 0; रंग: # ई 7 सी 00; सीमा-शीर्ष: घन # ई 7 सी 00 मध्यम; सीमा-तळाशी: ठिपकेदार # e7ce00 पातळ; रूंदी: 600px; }काही मनोरंजक दृश्यात्मक शैली परिचय करण्यासाठी मी माझ्या नमुना मथळावर शीर्ष आणि तळाशी सीमा जोडली. आपण इच्छित डिझाईन शैली साध्य करण्यासाठी आपण कोणत्याही प्रकारे बॉर्डर जोडू शकता.
आपल्या मथळ्यांसाठी पार्श्वभूमी प्रतिमा जोडा अधिक Pizazz साठी
बर्याच वेबसाइट्समध्ये पृष्ठ शीर्षस्थानी शीर्षलेख विभाग असतो ज्यात मथळा समाविष्ट असतो - विशेषत: साइट शीर्षक आणि ग्राफिक. बर्याच डिझाइनरांना हे दोन वेगवेगळे घटक समजतात, परंतु आपल्याला तसे करण्याची गरज नाही. जर ग्राफिक फक्त हेडलाइन सुशोभित करायचा असेल तर मग त्याला हेडिंग स्टाइलमध्ये का जोडायचे?
h1 {font: bold italic 3em / 1em "टाइम्स न्यू रोमन", "एमएस सेरिफ", "न्यू यॉर्क", सेरिफ; पार्श्वभूमी: #fff url ("fancyheadline.jpg") पुनरावृत्ती- x तळ; पॅडिंग: 0.5 एएम 0 90 पीएक्स 0; मजकूर-संरेखन: केंद्र; समास: 0; सीमा-तळ: घन # ई 7 सीईए 0.25em; रंग: # ई 7 सी 00; }या मथळ्याच्या युक्तीमुळे मला माहिती आहे की माझी प्रतिमा 9 0 पिक्सेल उंच आहे. म्हणून मी 9 0 पीएक्सच्या मथळाच्या खाली पॅडिंग जोडले (पॅडिंग: 0.5 0 90px 0p;) आपण जेथे इच्छित आहात तेथे प्रदर्शित करण्यासाठी मथळाचा मजकूर मिळविण्यासाठी मार्जिन, रेखा-उंची आणि पॅडिंगसह प्ले करू शकता.
प्रतिमा वापरताना लक्षात ठेवा की एक गोष्ट अशी आहे की जर एखाद्या प्रतिसाद वेबसाइटसह (जी आपण पाहिजे) स्क्रीन आकार आणि डिव्हाइसेसवर आधारित बदल करणार्या मांडणीसह, आपण मथळा नेहमीच समान आकार असणार नाही जर आपल्याला आपली मथळा अचूक आकाराची गरज असेल, तर यामुळे समस्या उद्भवू शकतात. हे एका कारणामुळे मी मुख्यतः पार्श्वभूमीच्या प्रतिमा मथळ्यांमध्ये टाळतो, कारण ते कधी कधी पहाता येतात.
हेडलाइंसमधील प्रतिमा पुनर्स्थित
हे वेब डिझायनर्ससाठी दुसरी लोकप्रिय तंत्र आहे कारण ते आपल्याला ग्राफिकल मथळा बनविण्यास आणि त्या प्रतिमेसह शीर्षक टॅगचे मजकूर पुनर्स्थित करण्यास परवानगी देते. वेब डांचर्सना फारच थोड्या फॉन्टमध्ये प्रवेश होता आणि ते त्यांच्या कार्यामध्ये अधिक विदेशी फॉन्ट वापरणे हे सत्यतेने एक जुने अभ्यास आहे. वेब फॉंटचे उदय खरोखरच बदलले आहे की डिझाइनर साइटवर कसे जायचे. मथळे आता वेगवेगळ्या प्रकारच्या फॉन्ट आणि प्रतिमांमध्ये सेट केल्या जाऊ शकतात ज्यात एम्बेडेड फोन्ट्स आवश्यक नाहीत. यामुळे, आपल्याला फक्त जुन्या साइट्सवरील मथळे ठेवण्यासाठी सीएसएस प्रतिमा प्रतिस्थापना सापडतील जी अजून आधुनिक पद्धतींमध्ये अद्ययावत नाहीत.
जेनिफर क्रिनिन द्वारे मूळ लेख. 9/6/17 रोजी जेरेमी गिरर्ड द्वारा संपादित