HTML हमें टेक्स्ट डिज़ाइन के संदर्भ में कुछ विकल्प देता है। आज मैं आपको बताऊंगा कि HTML में मानक फ़ॉन्ट और गैर-मानक दोनों में इटैलिक फ़ॉन्ट कैसे बनाया जाता है। दूसरे मामले में, आपको सब कुछ काम करने के लिए कुछ बातों को ध्यान में रखना होगा।
HTML में इटैलिक कैसे लिखें?
मुझे इस तथ्य से शुरू करना चाहिए कि HTML में ही दो टैग हैं जो टेक्स्ट को इटैलिक शैली देते हैं। ये हैं एम और आई. वैसे, दूसरा वर्डप्रेस इंजन के html संपादक में बनाया गया है, जिसमें मैं वर्तमान में लिख रहा हूं यह लेख. ये टैग किस प्रकार भिन्न हैं? दरअसल, आज मैं जोर-शोर से यह घोषणा नहीं करना चाहूंगा कि वे किसी तरह अलग हैं।
सामान्य तौर पर, एम का उपयोग उन शब्दों को उजागर करने के लिए किया जाता है जिन्हें एक विशेष स्वर के साथ उच्चारित करने की आवश्यकता होती है, और मैं केवल पाठ को दृश्य रूप से हाइलाइट करता हूं। लेकिन आइए इसके बारे में चिंता न करें, क्योंकि हम नहीं जानते कि वास्तव में ऐसा है या नहीं।
इटैलिक टेक्स्ट के लिए CSS गुण क्या हैं?
यह फ़ॉन्ट-शैली गुण है और इसका मान इटैलिक है। इसमें तिरछा मान भी है और यह टेक्स्ट को इटैलिक में बदल देता है। क्या इन मूल्यों में कोई अंतर है? वस्तुतः कोई नहीं. वैसे, इस और अन्य के बारे में विवरण सीएसएस गुणपाठ के लिए, संबंधित लेख पढ़ें, जहां सब कुछ सुलझाया गया है।
गैर-मानक फ़ॉन्ट को इटैलिक में कैसे प्रदर्शित करें?
तथ्य यह है कि यदि आप Google फ़ॉन्ट्स के माध्यम से एक गैर-मानक फ़ॉन्ट कनेक्ट करते हैं, तो इस मामले में आपको कम से कम 1 इटैलिक फ़ॉन्ट शैली कनेक्ट करते समय बॉक्स को चेक करना होगा। यदि ऐसा नहीं किया जाता है, तो जब आप ऐसे फ़ॉन्ट को इटैलिक बनाने का प्रयास करेंगे, तो मानक फ़ॉन्ट में से किसी एक का इटैलिक प्रदर्शित किया जाएगा। वैसे, आप इस आलेख में गैर-मानक फ़ॉन्ट कनेक्ट करने के बारे में पढ़ सकते हैं।
इस स्क्रीनशॉट में आप फ़ॉन्ट कनेक्शन का एक टुकड़ा देख सकते हैं गूगल सेवाफोंट्स।
जैसा कि आप देख सकते हैं, कम से कम एक इटैलिक शैली के आगे एक चेकमार्क है। अब, आवश्यक टैग या शैली गुणों का उपयोग करते समय, यह फ़ॉन्ट वास्तव में इटैलिक हो जाएगा, न कि कुछ अन्य।
इस प्रकार, हमने उन सभी बिंदुओं पर चर्चा की है जो इटैलिक के साथ काम करने में मौजूद हैं। मैं तुम्हें अब और रोकने का साहस नहीं कर सकता।
टेक्स्ट में किसी शब्द या वाक्यांश को हाइलाइट करने का सबसे आसान तरीका एक अलग अक्षर शैली का उपयोग करना है। इस प्रकार आप बोल्ड का उपयोग करके किसी शब्द या वाक्यांश पर जोर दे सकते हैं। पेज आपको आसानी से विभिन्न शैलियों - इटैलिक, रेखांकित, बोल्ड का उपयोग करके शब्दों को हाइलाइट करने की अनुमति देते हैं।
मुख्य चीज़ को उजागर करने के तरीके के रूप में बोल्ड फ़ॉन्ट
बोल्ड फ़ॉन्ट में हाइलाइट किए गए शब्द सबसे चमकीले और आकर्षक लगते हैं। ऐसे शब्द और वाक्यांश तुरंत ध्यान आकर्षित करते हैं। इसलिए, यह जानने के लिए कि पाठ में आवश्यक स्थानों को शीघ्रता से कैसे उजागर किया जाए, आपको एक विशेष HTML कोड याद रखना चाहिए। बोल्ड फ़ॉन्ट को युग्मित टैग का उपयोग करके सेट किया गया है।
जिस शब्द या वाक्यांश या वाक्य को हाइलाइट किया जाना चाहिए, उसके पहले एक ओपनिंग टैग लगाया जाता है . पाठ के अंतिम अक्षर के बाद जिसे हाइलाइट किया जाना चाहिए, एक समापन टैग लगाया जाता है. ब्राउज़र में प्रदर्शित होने पर इन दोनों टैगों के बीच कुछ भी बोल्ड में दिखाई देगा।
अन्य हाइलाइटिंग विकल्प
इसलिए, हमें पता चला कि आप एक अलग शैली का उपयोग करके टेक्स्ट को हाइलाइट कर सकते हैं। हमने तय किया कि बोल्ड HTML फ़ॉन्ट का उपयोग करना सबसे आसान और साथ ही प्रभावी भी है। अब बात करते हैं अन्य चयन विकल्पों की।
तो, आप युग्मित टैग का उपयोग करके टेक्स्ट को इटैलिक में हाइलाइट कर सकते हैं , इसके साथ जोर दें . यह सर्वाधिक है सरल तरीकेपाठ को हाइलाइट करना.
ऐसे कम ज्ञात और प्रयुक्त टैग भी हैं जिनका उपयोग पाठ में शब्दों और वाक्यों को उजागर करने के लिए किया जा सकता है। इसलिए, पाठ को काटने के लिए, इसका उपयोग करना पर्याप्त है . एक युग्मित टैग टेक्स्ट को मोनोस्पेस्ड बनाने में मदद करेगा . यदि आपको सुपरस्क्रिप्ट बनाने की आवश्यकता है, तो उपयोग करें , निचला - .
इस मामले में, पहले की तरह, आपको जो टेक्स्ट चाहिए वह ओपनिंग और क्लोजिंग टैग के बीच होना चाहिए। जैसा कि आप देख सकते हैं, इसमें कुछ भी जटिल नहीं है, मुख्य बात इन कोडों को याद रखना या उन्हें लिखना है।
एकाधिक फ़ॉन्ट का उपयोग करना
यदि आप अपने पाठ को अधिक अभिव्यंजक बनाना चाहते हैं, तो आप केवल बोल्ड फ़ॉन्ट के अलावा और भी बहुत कुछ का उपयोग कर सकते हैं। HTML मार्कअप आपको एक ही समय में कई शैलियों का उपयोग करके किसी शब्द को हाइलाइट करने की अनुमति देता है। तो, आप एक ही समय में किसी शब्द को बोल्ड, स्ट्राइकथ्रू और इटैलिक बना सकते हैं।
साथ ही, आपको एक बात याद रखनी होगी - सभी टैग क्रमिक रूप से बंद होने चाहिए। उदाहरण के लिए, एक सही प्रविष्टि हो सकती है:
- चयनित पाठ.
यदि आप टैग को भिन्न क्रम में बंद करते हैं, तो टेक्स्ट गलत तरीके से हाइलाइट किया जाएगा। ग़लत प्रविष्टि का एक उदाहरण:
- चयनित पाठ.
इस स्थिति में, ब्राउज़र भ्रमित हो जाएगा और समझ नहीं पाएगा कि आप वास्तव में उससे क्या चाहते हैं।
वैसे, यहां यह ध्यान दिया जा सकता है कि यदि आप वर्ड में हॉट कीज़ जानते हैं तो तीन स्टाइल विकल्प - बोल्ड, रेखांकित और इटैलिक - काफी आसानी से याद किए जाते हैं। वहां, Ctrl दबाए रखते हुए समान अक्षर कुंजियों का उपयोग करके शैली सेट की जाती है।
जैसा कि आप देख सकते हैं, आप न केवल इटैलिक या बोल्ड फ़ॉन्ट का उपयोग कर सकते हैं। HTML मार्कअप आपको नियमित वर्ड की तरह आसानी से शब्दों को हाइलाइट करने की अनुमति देता है।
निष्कर्ष
टेक्स्ट को हाइलाइट करने के लिए न केवल विभिन्न रंगों और शेड्स, विभिन्न आकार और प्रकार के फ़ॉन्ट का, बल्कि उसकी शैली का भी व्यापक रूप से उपयोग किया जाता है। इसके अलावा, यह एक अलग रूपरेखा की मदद से है कि पाठ के एक या दूसरे टुकड़े को खूबसूरती से और आसानी से हाइलाइट किया जा सकता है।
फ़ॉन्ट शैली बदलने के लिए, आपको किसी भी परिचित टैग का उपयोग करना चाहिए। HTML पेज का बोल्ड फ़ॉन्ट सबसे चमकीला और सबसे अधिक ध्यान देने योग्य फ़ॉन्ट है, और इसलिए इसे अक्सर जोर देने के लिए उपयोग किया जाता है।
अपने वेब पेज को अधिक प्रस्तुत करने योग्य बनाने के लिए, हम टेक्स्ट को पैराग्राफ में विभाजित करेंगे और शीर्षक को हाइलाइट करेंगे। HTML में दस्तावेज़ अनुभाग शीर्षकों के 6 स्तर हैं, जिनकी संख्या 1 से 6 है। शीर्षकों को स्तर के अनुरूप संख्याओं वाले टैग की एक जोड़ी द्वारा घोषित किया जाता है, उदाहरण के लिए,
- प्रथम स्तर अनुभाग का शीर्षक, और - छठे स्तर के अनुभाग का शीर्षक. शीर्षक अक्षरों के आकार और चौड़ाई में नियमित पाठ से भिन्न होते हैं। प्रथम स्तर का शीर्षक h1 आमतौर पर बहुत बड़े फ़ॉन्ट में प्रदर्शित होता है, जबकि छठे स्तर का शीर्षक h6 आमतौर पर बहुत छोटे फ़ॉन्ट में प्रदर्शित होता है।टाइटल
तत्व द्वारा परिभाषित पहले चर्चा किए गए दस्तावेज़ शीर्षक के साथ दस्तावेज़ अनुभाग शीर्षकों को भ्रमित न करें
.हम पहले वाक्य को पाठ के शीर्षक के रूप में उपयोग करते हैं - ऐसा करने के लिए, इसे टैग के साथ सीमित करना पर्याप्त है
और
.अन्य.html फ़ाइल के टेक्स्ट में टैग डालें
और
ताकि वे पाठ के पहले वाक्य को सीमित कर दें, और कोड का यह भाग निम्नलिखित रूप ले ले:एसडी कंपनी पेज पर आपका स्वागत है!
आइए अर्जित परिणाम को देखें।
नोटपैड मेनू कमांड फ़ाइल - सेव का चयन करके फ़ाइल को सहेजें।
सेविंग ऑपरेशन हमेशा दस्तावेज़ देखने से पहले किया जाना चाहिए, क्योंकि यह फ़ाइल को डिस्क से कंप्यूटर की रैम में लोड करके देखने के लिए खोलता है। यदि आप HTML कोड को संपादित करने के बाद फ़ाइल को सहेजते नहीं हैं, तो आपको ब्राउज़र में कोई कॉन्फ़िगरेशन नहीं दिखाई देगा।
टास्कबार पर इसके बटन पर क्लिक करके ब्राउज़र विंडो को पुनर्स्थापित करें।
प्रोग्राम की कार्यशील विंडो के टूलबार पर F5 बटन या रिफ्रेश बटन दबाएँ। अन्य.html फ़ाइल पुनः लोड की जाएगी और आप देखेंगे कि आपकी ब्राउज़र विंडो में प्रथम स्तर का हेडर कैसा दिखता है।
टैग में संख्याओं को बदलकर देखें कि अन्य 5 स्तरों के शीर्षक कैसे दिखेंगे: h2, h3, इत्यादि। प्रत्येक कॉन्फ़िगरेशन के बाद, फ़ाइल को सहेजना और ब्राउज़र विंडो में छवि को अपडेट करना न भूलें।
जब आप प्रयोग समाप्त कर लें, तो टैग को अन्य.html फ़ाइल में फिर से पुनर्स्थापित करें
.HTML द्वारा प्रदान किए गए शीर्षकों के 6 स्तरों का उपयोग करके, आप एक सहज संरचना के साथ पढ़ने में आसान दस्तावेज़ बना सकते हैं। याद रखें कि यदि आपका दस्तावेज़ स्पष्ट रूप से अनुभागों और उप-अनुभागों में विभाजित है तो वह हमेशा बेहतर ढंग से पढ़ा जा सकेगा।
शीर्षक संरेखण
डिफ़ॉल्ट रूप से, शीर्षक पृष्ठ के बाएँ किनारे पर संरेखित होता है। लेकिन इसे दाईं ओर या मध्य में भी संरेखित किया जा सकता है। किसी टैग में सही संरेखण के लिए
विशेषता संरेखण = "दाएं" का उपयोग किया जाता है, और केंद्रित करने के लिए - संरेखण = "केंद्र"। बायीं ओर संरेखण का एक स्पष्ट संकेत भी अनुमत है - संरेखण='बाएं'।
टैग में जोड़ें
शीर्षक को केन्द्रित करने के लिए संरेखित करें = "केंद्र" विशेषता। यह तत्व इस तरह दिखना चाहिए:
एसडी कंपनी पेज पर आपका स्वागत है!
भविष्य में, हम आपको प्रारंभिक कोड के साथ फ़ाइल को सहेजने और देखने से पहले ब्राउज़र में छवि को ताज़ा करने की आवश्यकता की याद नहीं दिलाएंगे।
HTML में टेक्स्ट को हाइलाइट (बोल्ड) कैसे करें
अब बाकी पाठ पर चलते हैं। आइए इसका आकार बढ़ाएं और टेक्स्ट को इटैलिक बोल्ड करें। बोल्ड स्टाइल सेट करने के लिए युग्मित टैग का उपयोग किया जाता है .
आरंभिक को अन्य.html फ़ाइल में डालें और समापनटैग ताकि वे पाठ को सीमित करें यहां आप जानेंगे... इस तत्व को निम्नलिखित रूप लेना चाहिए:
HTML में टेक्स्ट को इटैलिक कैसे बनायें
इटैलिक शैली टैग का उपयोग करके सेट की गई है .
आरंभिक कोड में एक HTML टैग डालें औरताकि संपादित तत्व निम्नलिखित रूप ले सके:
यहां आप हमारी गतिविधियों के बारे में, हमारी कंपनी के सॉफ्टवेयर उत्पादों के बारे में और हमारे द्वारा उत्पादित उपकरणों के बारे में जानेंगे
मार्कअप तत्वों को नेस्ट किया जा सकता है, जैसे इस संरचना में, जहां तत्व …एक तत्व के भीतर निहित …. आधुनिक ब्राउज़र नेस्टेड टैग को सही ढंग से संभालने में सक्षम हैं। इसलिए, आपको यह सुनिश्चित करना होगा कि निवेश के आदेश का उल्लंघन न हो। यदि नेस्टिंग टूट गई है तो ब्राउज़र को संचालित करना मुश्किल हो जाएगा। उदाहरण के लिए, यह प्रविष्टि गलत होगी: …. नेस्टिंग का अनुपालन HTML कोड लिखने की सामान्य संस्कृति का एक बहुत महत्वपूर्ण हिस्सा है।
HTML में टेक्स्ट को रेखांकित कैसे करें
कुछ टैग का उपयोग करना आप इन टैग्स द्वारा सीमित, और टैग्स की एक जोड़ी का उपयोग करके किसी टेक्स्ट टुकड़े की रेखांकित शैली को सेट कर सकते हैं - टेलेटाइप फ़ॉन्ट में टेक्स्ट दिखाएं।
यह ध्यान दिया जाना चाहिए कि हाल ही में टैग शैलियों का उपयोग करके सरलीकृत और बल दिया गया। समकक्ष . हां, नया एनालॉग अधिक बोझिल दिखता है, लेकिन दुर्भाग्य से यह अधिक सच है। इसके पक्ष में मुख्य बात यह है कि भारी संस्करण क्रॉस-ब्राउज़र है, दूसरे शब्दों में, सभी ब्राउज़रों के लिए उपयुक्त है, जब सभी ब्राउज़र इसका समर्थन नहीं करते.
HTML में टेक्स्ट कैसे बढ़ाएं
अब टेक्स्ट का फॉन्ट साइज बढ़ाते हैं। यह विभिन्न तरीकों का उपयोग करके किया जा सकता है।
टैग उनके बीच संलग्न पाठ का फ़ॉन्ट आकार बढ़ाएँ।
उपरोक्त कोड के आरंभ और अंत में क्रमशः टैग जोड़ें औरताकि तत्व निम्नलिखित रूप ले सके:
यहां आप हमारी गतिविधियों के बारे में, हमारी कंपनी के सॉफ्टवेयर उत्पादों के बारे में और हमारे द्वारा उत्पादित उपकरणों के बारे में जानेंगे
टैग का उपयोग करना आप प्रारंभिक फ़ॉन्ट की तुलना में टेक्स्ट फ़ॉन्ट का आकार कम कर सकते हैं।
फ़ॉन्ट आकार निर्दिष्ट करने का एक अन्य तरीका टैग का उपयोग करना है आकार विशेषता के साथ. इस विशेषता के लिए मान के रूप में 1 से 7 तक के पूर्णांकों का उपयोग किया जाता है, इस मामले में, मान 1 सबसे छोटे फ़ॉन्ट आकार से मेल खाता है, और मान 7 सबसे बड़े से मेल खाता है।
टैग के स्थान पर उपयोग करना टैग देखें , देखें कि आकार विशेषता के विभिन्न मानों के लिए टेक्स्ट फ़ॉन्ट का आकार कैसे बदलता है - 1 से 7 तक।
आप आकार विशेषता के मान के रूप में + (प्लस) या - (माइनस) चिह्न के साथ 1 से 7 तक की संख्याओं का भी उपयोग कर सकते हैं। इस मामले में, फ़ॉन्ट का आकार प्रारंभिक आकार, उदाहरण के लिए, टैग की तुलना में तदनुसार बढ़ता या घटता है फ़ॉन्ट का आकार वर्तमान की तुलना में एक स्तर बढ़ जाएगा। इसकी जांच - पड़ताल करें।
प्रश्न में पाठ के टुकड़े के लिए आकार विशेषता के मान के रूप में 5 सेट करें: . इस टुकड़े का HTML कोड इस प्रकार होना चाहिए:
यहां आप हमारी गतिविधियों के बारे में, हमारी कंपनी के सॉफ्टवेयर उत्पादों के बारे में और हमारे द्वारा उत्पादित उपकरणों के बारे में जानेंगे.
टैग में रंग विशेषता का उपयोग टेक्स्ट टैग द्वारा सीमित फ़ॉन्ट के रंग को निर्दिष्ट करने के लिए भी किया जा सकता है। इस विशेषता के अर्थ पहले चर्चा की गई विशेषताओं के समान हैं जो दस्तावेज़ की पृष्ठभूमि और पाठ के रंग का वर्णन करते हैं।
डिफ़ॉल्ट रूप से, यहां आपको पता चलेगा... पाठ वाला पैराग्राफ बाईं ओर संरेखित है। टैग का उपयोग करके इसे क्षैतिज रूप से केन्द्रित करें
टैग डालें
कृपया ध्यान दें कि हमने पैराग्राफ को केन्द्रित करने के लिए टैग का उपयोग किया है
ध्यान! 2010 टैग के लिए ,
=
=
बड़ी संख्या में अन्य पुराने टैग भी हैं जिन्हें इस लेख में रेखांकित नहीं किया जा सकता है, इसलिए इस मुद्दे पर विशेष वेब साइटों से तुरंत परिचित होना बेहतर है। लेकिन मैंने यहां मुख्य को थोड़ा ऊपर पोस्ट किया है
आवंटन कोड
HTML भाषा पाठ अंशों के फ़ॉन्ट चयन के लिए दो तरीकों की अनुमति देती है। एक ओर, आप सीधे संकेत कर सकते हैं कि पाठ के एक निश्चित खंड पर फ़ॉन्ट बोल्ड या इटैलिक हो सकता है; दूसरे शब्दों में, आप पाठ की फ़ॉन्ट शैली को स्पष्ट रूप से इंगित कर सकते हैं, जैसा कि हमने इस प्रयोग में किया था। दूसरी ओर, आप पाठ के किसी भी टुकड़े को कुछ तार्किक शैली के रूप में चिह्नित कर सकते हैं जो सामान्य से अलग है, इस शैली की व्याख्या को ब्राउज़र पर छोड़ सकते हैं। इस प्रकार, तार्किक शैली एक पाठ्य अंश की भूमिका को दर्शाती है, उदाहरण के लिए, इसकी तुलना में इसका अत्यधिक महत्व साधारण पाठ मेंया कि यह अंश एक उद्धरण है। अपने काम में, आप बाद के टैग का उपयोग कर सकते हैं जो तार्किक शैलियों को परिभाषित करते हैं। जांचें कि वे कैसे काम करते हैं विभिन्न ब्राउज़र.
- किसी शब्द को परिभाषित करने के लिए उपयोग किया जाता है। टेक्स्ट डिफ़ॉल्ट रूप से इटैलिक में प्रदर्शित होता है।
- शब्दों को उजागर करना और उन्हें मजबूत करना। टेक्स्ट डिफ़ॉल्ट रूप से इटैलिक में प्रदर्शित होता है।
- पुस्तकों, फिल्मों, प्रदर्शनों आदि के शीर्षकों को उजागर करने के लिए, इसे डिफ़ॉल्ट रूप से इटैलिक में प्रदर्शित किया जाता है।
- प्रोग्राम कोड अंशों के लिए। डिस्प्ले पर एक निश्चित चौड़ाई वाले फ़ॉन्ट में दिखाया गया है।
- उस टेक्स्ट के लिए उपयोग किया जाता है जिसे उपयोगकर्ता कीबोर्ड से दर्ज करता है। विभिन्न ब्राउज़रों में अलग-अलग फ़ॉन्ट में दिखाई दे सकता है। टैग अप्रचलित है.
- प्रोग्राम संदेशों को प्रदर्शित करने का कार्य करता है। एक निश्चित चौड़ाई वाले फ़ॉन्ट में प्रदर्शित। टैग अप्रचलित है.
- विशेष रूप से महत्वपूर्ण अंशों के लिए. आमतौर पर बोल्ड में हाइलाइट किया जाता है।
- यह इंगित करने के लिए उपयोग किया जाता है कि पाठ का एक टुकड़ा या एक शब्द एक प्रतीकात्मक चर है, दूसरे शब्दों में, पाठ जिसे विभिन्न अभिव्यक्तियों द्वारा प्रतिस्थापित किया जा सकता है। डिफ़ॉल्ट रूप से इटैलिक में प्रदर्शित होता है। टैग अप्रचलित है.
HTML 4.0 विनिर्देश पाठ और अन्य भागों के लिए शैलियों को निर्दिष्ट करने की एक अधिक उन्नत विधि प्रदान करता है - सीएसएस (कैस्केडिंग स्टाइल शीट्स) नामक एक विशेष भाषा का उपयोग करके। स्टाइल शीट वेब डिज़ाइन के क्षेत्र में एक बड़ी उपलब्धि है, जो पृष्ठों की उपस्थिति में सुधार करने की क्षमता का विस्तार करती है। स्टाइल शीट से लाइन स्पेसिंग, पैडिंग, टेक्स्ट और बैकग्राउंड के लिए उपयोग किए जाने वाले रंग, फ़ॉन्ट आकार और शैली आदि को परिभाषित करना आसान हो जाता है। HTML के अधिकांश हिस्सों को स्टाइल विशेषता का उपयोग करके स्टाइल किया जा सकता है, जिसे एक तत्व के शुरुआती टैग के अंदर रखा जाता है। "संपत्ति: मूल्य" फ़ॉर्म के जोड़े का उपयोग शैली विशेषता के मूल्य के रूप में किया जाता है। उदाहरण के लिए, अनुभाग शीर्षलेख का वर्णन करने वाले कोड के एक टुकड़े में,
शैली = "रंग: नीला" विशेषता निर्दिष्ट करती है कि रंग गुण का मान नीला है, दूसरे शब्दों में, प्रथम स्तर का शीर्षक पाठ नीले रंग में प्रदर्शित होना चाहिए।
शैलियों के साथ संरेखण
आइए देखें कि शब्दों से शुरू होने वाले टेक्स्ट टुकड़े की शैली को निर्दिष्ट करने के लिए कैस्केडिंग स्टाइल शीट्स भाषा का उपयोग कैसे करें यहां आप सीखेंगे...
फ़ॉन्ट मोटाई निर्दिष्ट करने के लिए, हल्के (संकीर्ण), बोल्ड (अर्ध-बोल्ड), बोल्डर (बोल्ड) मानों के साथ फ़ॉन्ट-वेट प्रॉपर्टी का उपयोग करें, उदाहरण के लिए, स्टाइल = "फ़ॉन्ट-वेट: बोल्ड"।
इटैलिक शैली निर्धारित करने के लिए, इटैलिक मान के साथ फ़ॉन्ट-शैली गुण का उपयोग करें। इसलिए, टेक्स्ट को एक बोल्ड इटैलिक स्टाइल देने के लिए, आपको स्टाइल विशेषता इस तरह ढूंढनी चाहिए: स्टाइल = "फॉन्ट-वेट: बोल्ड; फॉन्ट-स्टाइल: इटैलिक"। कृपया ध्यान दें: विशेषताओं को किसी भी क्रम में रखा जा सकता है और उन्हें अर्धविराम से अलग किया जाना चाहिए।
यदि आपको फ़ॉन्ट आकार निर्दिष्ट करने की आवश्यकता है, तो आपको फ़ॉन्ट-आकार संपत्ति का उपयोग करना चाहिए, जिसके मान सापेक्ष या निरपेक्ष मानों में निर्दिष्ट किए जा सकते हैं। सापेक्ष मान प्रतिशत हैं, और बिंदु (पीटी), पिक्सल (पीएक्स), सेंटीमीटर (सेमी), मिलीमीटर (मिमी) का उपयोग निरपेक्ष मान के रूप में किया जाता है। जैसे:
शैली = "फ़ॉन्ट-आकार: 200%"
शैली = "फ़ॉन्ट-आकार: 16पीटी"
शैली = "फ़ॉन्ट-आकार: 100px"
सापेक्ष आकार के बजाय निरपेक्ष आकार निर्दिष्ट करके, आप अपने पृष्ठों को देखने वाले उपयोगकर्ताओं को उनकी दृष्टि और मॉनिटर रिज़ॉल्यूशन के अनुसार ब्राउज़र मेनू कमांड का उपयोग करके फ़ॉन्ट आकार को बढ़ाने या घटाने की क्षमता से वंचित करते हैं। फ़ॉन्ट केवल आपके द्वारा निर्दिष्ट आकार में प्रदर्शित किए जाएंगे। इसलिए, फ़ॉन्ट आकार को प्रतिशत के रूप में निर्दिष्ट करना बेहतर है। इस मामले में, डिफ़ॉल्ट HTML टैग का उपयोग करके स्वरूपित किए जाने पर फ़ॉन्ट का आकार एक निर्दिष्ट प्रतिशत से छोटा या बड़ा होगा।
क्षैतिज पाठ संरेखण विधि का निर्धारण करने के लिए, उपयोग करें पाठ-संरेखण संपत्तिबाएँ (बाएँ), दाएँ (दाएँ), केंद्र (केंद्र), औचित्य (चौड़ाई) मानों के साथ। इस प्रकार, यह इंगित करने के लिए कि पाठ यहां आप सीखेंगे... को मूल के 150% आकार के साथ बोल्ड इटैलिक शैली में स्वरूपित किया जाना चाहिए और केंद्र में संरेखित किया जाना चाहिए, इसकी शैली इस प्रकार मिलनी चाहिए:
शैली = "फ़ॉन्ट-वेट: बोल्ड; फ़ॉन्ट-शैली: इटैलिक; फ़ॉन्ट-आकार: 150%; टेक्स्ट-संरेखण: केंद्र"
हम इस विशेषता का उपयोग टैग में करेंगे<р>, जो आपको पाठ को एक अलग अनुच्छेद के रूप में प्रस्तुत करने की अनुमति देता है।
एक HTML तत्व संपादित करें जिसमें वह टेक्स्ट शामिल है जिसे आप यहां सीखेंगे... टैग हटाकर
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">यहां आप हमारी गतिविधियों के बारे में, हमारी कंपनी के सॉफ्टवेयर उत्पादों के बारे में और हमारे द्वारा उत्पादित उपकरणों के बारे में जानेंगे
आप देखिए, HTML विभिन्न प्रकार की स्टाइलिंग तकनीकों की अनुमति देता है। साथ ही, कैस्केडिंग टेबल भाषा का उपयोग सीएसएस शैलियाँअधिक वांछनीय है.
अन्य संरेखण और स्टाइलिंग विकल्प
हमने स्टाइलशीट भाषा के लिए केवल एक उपयोग मामला देखा है, जहां शैली परिभाषा को विशेष रूप से आपके द्वारा वर्णित तत्व के टैग के भीतर रखा गया है।
यह शैली विशेषता का उपयोग करके किया जाता है, जिसका उपयोग अधिकांश मानक HTML टैग के साथ किया जाता है। लेकिन CSS के अन्य उपयोग भी हैं।
मानक HTML में, स्टाइल शीट पेश किए बिना, किसी भी तत्व को कुछ पैरामीटर निर्दिष्ट करने के लिए, जैसे कि रंग, आकार, पृष्ठ पर स्थिति और इसी तरह, आपको हर बार प्रत्येक तत्व के लिए इन विशेषताओं को रेखांकित करना होगा, भले ही 10 पृष्ठ हों ऐसे भागों की एक पृष्ठ पर रखा जाना चाहिए जो एक दूसरे से भिन्न न हों। आपको HTML कोड का एक ही टुकड़ा एक पेज में दर्जनों बार डालना होगा, जिससे फ़ाइल का आकार और इंटरनेट से इसे डाउनलोड करने में लगने वाला समय बढ़ जाएगा।
स्टाइल शीट अलग, अधिक आरामदायक और किफायती तरीके से काम करती हैं। किसी तत्व को कुछ विशेषताएँ निर्दिष्ट करने के लिए, आपको एक बार इस तत्व की रूपरेखा तैयार करनी होगी और इस विवरण को एक शैली के रूप में खोजना होगा, और फिर बस यह इंगित करना होगा कि जिस तत्व को आप उचित रूप से डिज़ाइन करना चाहते हैं उसे आपके द्वारा वर्णित शैली की विशेषताओं को अपनाना होगा। आरामदायक, है ना?
इसके अलावा, आप शैली विवरण को अपने वेब पेज के टेक्स्ट में नहीं, बल्कि एक अलग फ़ाइल में सहेज सकते हैं - यह आपको किसी भी संख्या में वेब पृष्ठों पर शैली विवरण का उपयोग करने की अनुमति देगा। और एक अन्य संबंधित लाभ किसी भी संख्या में पृष्ठों के डिज़ाइन को बदलने की क्षमता है, केवल एक अलग फ़ाइल में शैली विवरण को सही करना।
इसके अलावा, स्टाइल शीट भाषा आपको मानक HTML से भी उच्च स्तर पर पृष्ठों के फ़ॉन्ट डिज़ाइन के साथ काम करने की अनुमति देती है।
वर्तमान में, CSS भाषा में HTML के कुछ हिस्सों के लिए काफी बड़ी संख्या में पैरामीटर हैं जिन्हें वह नियंत्रित कर सकती है। "सुरक्षित" का उपयोग करके, दूसरे शब्दों में ब्राउज़रों की सबसे बड़ी संख्या के साथ संगत सीएसएस तत्व- फ़ॉन्ट विशेषताएँ, भागों और पृष्ठभूमि के रंग, पाठ और सीमाओं की विशेषताएँ - आप अपने काम को महत्वपूर्ण रूप से सुविधाजनक बना सकते हैं और पाठ डिजाइन के मामले में अपने वेब पेजों को अधिक आकर्षक बना सकते हैं।
HTML में फ़ॉन्ट आकार एक महत्वपूर्ण भूमिका निभाता है। यह आपको उपयोगकर्ता का ध्यान अपनी ओर आकर्षित करने की अनुमति देता है महत्वपूर्ण सूचना, साइट पेज पर पोस्ट किया गया। हालाँकि न केवल अक्षरों का आकार महत्वपूर्ण है, बल्कि उनका रंग, मोटाई और यहाँ तक कि परिवार भी महत्वपूर्ण है।
HTML फ़ॉन्ट्स के साथ काम करते समय टैग और विशेषताएँ
हाइपरटेक्स्ट भाषा में फ़ॉन्ट के साथ काम करने के लिए उपकरणों की एक विस्तृत श्रृंखला होती है। आख़िरकार टेक्स्ट फ़ॉर्मेटिंग html का मुख्य कार्य है।
सृष्टि का कारण एचटीएमएल भाषाब्राउज़र द्वारा टेक्स्ट फ़ॉर्मेटिंग नियम प्रदर्शित करने में एक समस्या थी।
आइए उन टैगों पर नज़र डालें जिनका उपयोग HTML में फ़ॉन्ट और उनकी विशेषताओं के साथ काम करने के लिए किया जाता है। मुख्य है टैग . इसकी विशेषताओं के मानों का उपयोग करके, आप फ़ॉन्ट की कई विशेषताएँ निर्धारित कर सकते हैं:
- रंग - पाठ का रंग सेट करता है;
- आकार - पारंपरिक इकाइयों में फ़ॉन्ट आकार।
1 से 7 तक सकारात्मक विशेषता मान समर्थित हैं।
- चेहरा - टेक्स्ट फ़ॉन्ट परिवार को सेट करने के लिए उपयोग किया जाता है जिसका उपयोग टैग के अंदर किया जाएगा . अल्पविराम द्वारा अलग किए गए कई मान समर्थित हैं।
केवल भागों के बीच स्थित पाठ को स्वरूपित किया जाता है टैग जोड़ीफ़ॉन्ट.शेष पाठ मानक डिफ़ॉल्ट फ़ॉन्ट में प्रदर्शित होता है।
इसके अलावा HTML में कई युग्मित टैग हैं जो केवल एक फ़ॉर्मेटिंग नियम निर्दिष्ट करते हैं। इसमे शामिल है:
- - html में बोल्ड फॉन्ट सेट करता है। टैग कार्रवाई में पिछले वाले के समान;
- - आकार डिफ़ॉल्ट से बड़ा है;
- - छोटा फ़ॉन्ट आकार;
- — इटैलिक टेक्स्ट (इटैलिक)। समान टैग ;
- - रेखांकित पाठ;
- काट दिया गया;- - पाठ को केवल छोटे अक्षरों में प्रदर्शित करें;
- - ऊपरी मामले में.
सादे पाठ
थंबनेल
थंबनेल
सामान्य से अधिक
सामान्य से कम
तिर्छा
तिर्छा
अंडरस्कोर के साथ
काट दिया गया
शैली विशेषता क्षमताएँ
वर्णित टैग के अलावा, html में फ़ॉन्ट बदलने के कई और तरीके हैं। उनमें से एक सामान्य शैली विशेषता का उपयोग करना है। इसके गुणों के मूल्यों का उपयोग करके, आप फ़ॉन्ट की प्रदर्शन शैली सेट कर सकते हैं:
1) फ़ॉन्ट-परिवार - संपत्ति फ़ॉन्ट परिवार सेट करती है। अनेक मानों को सूचीबद्ध करना संभव है.
यदि पिछला परिवार सेट नहीं है तो HTML में फ़ॉन्ट को अगले मान में बदलना होगा ऑपरेटिंग सिस्टमउपयोगकर्ता.
लेखन वाक्यविन्यास:
फ़ॉन्ट-परिवार: फ़ॉन्ट-नाम [, फ़ॉन्ट-नाम[, ...]]
2) फ़ॉन्ट-आकार - आकार 1 से 7 तक सेट किया गया है। यह HTML में फ़ॉन्ट बढ़ाने के मुख्य तरीकों में से एक है।
लेखन वाक्यविन्यास:
फ़ॉन्ट-आकार: पूर्ण आकार | सापेक्ष आकार | मतलब | रुचि | इनहेरिट
आप फ़ॉन्ट आकार भी सेट कर सकते हैं:
- पिक्सेल में;
- निरपेक्ष रूप से ( xx-छोटा, x-छोटा, छोटा, मध्यम, बड़ा);
- प्रतिशत में;
- अंकों में (पीटी)।
फ़ॉन्ट-आकार:7
फ़ॉन्ट-आकार:24px
फ़ॉन्ट-आकार: x-बड़ा
फ़ॉन्ट-आकार: 200%
फ़ॉन्ट-आकार:24pt
3) फ़ॉन्ट-शैली - फ़ॉन्ट लेखन शैली सेट करता है। वाक्य - विन्यास:
फ़ॉन्ट-शैली: सामान्य | इटैलिक | तिरछा | इनहेरिट
मान:
- सामान्य – सामान्य वर्तनी;
- इटैलिक - इटैलिक;
- तिरछा - दाईं ओर झुका हुआ फ़ॉन्ट;
- इनहेरिट - मूल तत्व की वर्तनी को इनहेरिट करता है।
इस प्रॉपर्टी का उपयोग करके html में फ़ॉन्ट कैसे बदलें इसका एक उदाहरण:
फ़ॉन्ट-शैली:विरासत
फ़ॉन्ट-शैली:इटैलिक
फ़ॉन्ट-शैली:सामान्य
फ़ॉन्ट-शैली: तिरछा
4) फ़ॉन्ट-वेरिएंट - सभी बड़े अक्षरों को बड़े अक्षरों में परिवर्तित करता है। वाक्य - विन्यास:
फ़ॉन्ट-संस्करण: सामान्य | स्मॉल-कैप | इनहेरिट
इस प्रॉपर्टी के साथ html में फ़ॉन्ट कैसे बदलें इसका एक उदाहरण:
फ़ॉन्ट-संस्करण: विरासत
फ़ॉन्ट-संस्करण: सामान्य
फ़ॉन्ट-वेरिएंट:स्मॉल-कैप्स
5) फॉन्ट-वेट - आपको टेक्स्ट की मोटाई (संतृप्ति) सेट करने की अनुमति देता है। वाक्य - विन्यास:
फ़ॉन्ट-भार: बोल्ड|बोल्डर|हल्का|सामान्य|100|200|300|400|500|600|700|800|900
मान:
- बोल्ड - html फ़ॉन्ट को बोल्ड पर सेट करता है;
- बोल्डर - सामान्य की तुलना में अधिक बोल्डर;
- हल्का - सामान्य की तुलना में कम संतृप्त;
- सामान्य – सामान्य वर्तनी;
- 100-900 - फ़ॉन्ट मोटाई को संख्यात्मक समकक्ष में सेट करता है।
फोंट की मोटाई: बोल्ड
फ़ॉन्ट-वजन: बोल्डर
फ़ॉन्ट-वजन: हल्का
फ़ॉन्ट-वजन: सामान्य
फ़ॉन्ट-वजन:900
फ़ॉन्ट-वजन:100
एचटीएमएल फ़ॉन्ट संपत्ति और फ़ॉन्ट रंग
फ़ॉन्ट एक अन्य कंटेनर संपत्ति है। अपने अंदर, इसने फ़ॉन्ट बदलने के लिए इच्छित कई गुणों के मूल्यों को संयोजित किया। फ़ॉन्ट सिंटैक्स:
फ़ॉन्ट: फ़ॉन्ट-आकार फ़ॉन्ट-परिवार | इनहेरिट
मान को विभिन्न नियंत्रणों पर लेबल में सिस्टम द्वारा उपयोग किए जाने वाले फ़ॉन्ट पर भी सेट किया जा सकता है:
- कैप्शन - बटन के लिए;
- आइकन - आइकन के लिए;
- मेनू - मेनू;
- संदेश-बॉक्स - संवाद बॉक्स के लिए;
- लघु-कैप्शन - छोटे नियंत्रणों के लिए;
- स्टेटस-बार - स्टेटस बार फ़ॉन्ट।
फ़ॉन्ट:आइकन
फ़ॉन्ट: कैप्शन
फ़ॉन्ट:मेनू
फ़ॉन्ट:संदेश-बॉक्स
लघु-शीर्षक
फ़ॉन्ट: स्टेटस-बार
फ़ॉन्ट:इटैलिक 50px बोल्ड "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़
HTML में फ़ॉन्ट रंग सेट करने के लिए, आप रंग प्रॉपर्टी का उपयोग कर सकते हैं। यह आपको रंग सेट करने की अनुमति देता है कीवर्ड, और में आरजीबी प्रारूप. और हेक्साडेसिमल कोड में भी.
संतृप्ति फ़ॉन्ट लाइनों की मोटाई में वृद्धि है और तदनुसार, कंट्रास्ट है। आमतौर पर वजन चार प्रकार के होते हैं: हल्का, सामान्य, बोल्ड और बोल्ड। हालाँकि, साथ HTML का उपयोग करनाआप केवल सामान्य और बोल्ड स्टाइल ही सेट कर सकते हैं। बोल्ड टेक्स्ट सेट करने के लिए दो टैग का उपयोग किया जाता है: और .
बोल्ड फ़ॉन्ट शैली सशक्त टेक्स्ट हाइलाइटिंग
इटैलिक शैली
इटैलिक फॉन्ट केवल अलग-अलग अक्षरों का एक झुकाव नहीं है, कुछ फॉन्ट के लिए यह एक नई शैली का पूर्ण रीडिज़ाइन है जो लिखावट की नकल करता है। पाठ के लिए इटैलिक दो टैग द्वारा निर्धारित किया जाता है: और .
इटैलिक फ़ॉन्ट शैली पाठ चयन
यह ध्यान दिया जाना चाहिए कि टैग और , साथ ही और यद्यपि उनके प्रभाव में समान हैं, वे पूरी तरह से समकक्ष और विनिमेय नहीं हैं। पहला टैग - एक भौतिक मार्कअप टैग है और टेक्स्ट और टैग की बोल्ड शैली सेट करता है - एक तार्किक मार्कअप टैग के साथ और चिह्नित पाठ को हाइलाइट करता है। टैग का यह विभाजन तार्किक और में है भौतिक स्वरूपणमूल रूप से इसका उद्देश्य आउटपुट डिवाइस से स्वतंत्र सहित HTML को सार्वभौमिक बनाना था। सैद्धांतिक रूप से, यदि आप, उदाहरण के लिए, एक भाषण ब्राउज़र का उपयोग करते हैं, तो टैग का उपयोग करके पाठ को स्वरूपित किया जाता है और , अलग से चिह्नित किया जाएगा. हालाँकि, यह पता चला कि लोकप्रिय ब्राउज़रों में इन टैगों का उपयोग करने का परिणाम बराबर है।
उदाहरण 7.5 टैग का उपयोग दर्शाता है और पाठ स्वरूपण के लिए.
उदाहरण 7.5. टैग और
कुकीज़ और चांदनी कहाँ हैं?! - बैड बॉय चिल्लाया.
इस उदाहरण का परिणाम चित्र में दिखाया गया है। 7.5.
