जैसा कि आप जानते हैं, वेब पेजों की मुख्य सामग्री टेक्स्ट होती है। विशेष गैलरी साइटों के दुर्लभ अपवाद के साथ। इसलिए, यह आश्चर्य की बात नहीं है कि HTML में इतने सारे अलग-अलग टेक्स्ट डिस्प्ले नियंत्रण हैं।
वास्तव में, ब्राउज़र व्यूइंग विंडो में टेक्स्ट स्ट्रिंग प्रदर्शित करने के लिए, आपको किसी टैग का उपयोग करने की आवश्यकता नहीं है: आपको केवल टेक्स्ट ही लिखना होगा। लेकिन जब आपको इसे कम से कम अनुच्छेदों में विभाजित करने की आवश्यकता होती है, तो यहीं आपको टैग का उपयोग करने की आवश्यकता होती है। तथ्य यह है कि विभिन्न कंप्यूटर सिस्टम पाठ को पैराग्राफ में विभाजित करने के लिए विभिन्न वर्णों का उपयोग करते हैं, और HTML दस्तावेज़ों को हमेशा विभिन्न प्रकार के कंप्यूटर प्लेटफ़ॉर्म पर यथासंभव समान रूप से प्रदर्शित किया जाना चाहिए। इसीलिए हमें पैराग्राफ निर्दिष्ट करने के लिए टैग पेश करने पड़े।
प्रत्येक पैराग्राफ की शुरुआत में एक टैग होता है , और अंत में, समापन टैग . वहीं, टैग में स्वाभाविक रूप से कुछ पैरामीटर होते हैं। इनमें वे सामान्य पहचान पैरामीटर शामिल हैं जो हमें पहले से ज्ञात हैं कक्षाऔर पहचान, स्टाइलिंग पैरामीटर शैली, जिसे हम दूसरे अध्याय और संरेखण-पैरामीटर में देखेंगे संरेखित. हमें अंतिम पैरामीटर के बारे में थोड़ा और विस्तार से बात करनी चाहिए।
HTML में, "संरेखण" शब्द किसी तत्व की क्षैतिज और ऊर्ध्वाधर दोनों स्थिति को संदर्भित करता है। लेकिन पाठ के अनुच्छेदों के मामले में, केवल क्षैतिज संरेखण या, जैसा कि इसे "औचित्य" भी कहा जाता है, के बारे में बात करना समझ में आता है।
जस्टिफिकेशन आपको ब्राउज़र व्यूपोर्ट के बाएँ या दाएँ किनारे पर एक पैराग्राफ को दबाने, उसे केन्द्रित करने, या शब्दों को फैलाने की अनुमति देता है ताकि पाठ समान रूप से उसे आवंटित स्थान की पूरी चौड़ाई को भर दे। इन उद्देश्यों के लिए मूल्यों का उपयोग किया जाता है बाएँ, दाएँ, मध्यऔर औचित्य, क्रमश। आइए किसी अन्य HTML दस्तावेज़ के उदाहरण का उपयोग करके उनके उपयोग पर विचार करें।
सूची 1.4
क्षैतिज संरेखण a63acev
पैराग्राफ को बाएँ किनारे पर दबाया गया
पैराग्राफ को बाएँ किनारे पर दबाया गया
केन्द्रित अनुच्छेद
पैराग्राफ पूरी चौड़ाई में फैला हुआ है
इंटरनेट एक्सप्लोरर ब्राउज़र का उपयोग करके ऐसे कोड वाली फ़ाइल को देखने का परिणाम चित्र में दिखाया गया है। 1.4. जैसा कि आप देख सकते हैं, अंतिम पैराग्राफ, जिसे हमारे कोड के अनुसार चौड़ाई में बढ़ाया जाना चाहिए था, इंटरनेट एक्सप्लोरर द्वारा पहले की तरह ही प्रदर्शित किया जाता है। यह मामला इस बात का स्पष्ट उदाहरण बन सकता है कि ब्राउज़र HTML कोड को अलग तरीके से कैसे समझते हैं। हमारे मामले में, इंटरनेट एक्सप्लोरर ने मानक डिस्प्ले विकल्प का उपयोग करके अज्ञात पैरामीटर को अनदेखा कर दिया।
चावल। 1.4. ब्राउज़र विंडो लिस्टिंग 1.4 में दिखाई गई फ़ाइल का परिणाम दिखा रही है
कभी-कभी, एक पैराग्राफ को दूसरे से अलग करने के लिए, वेब पेज निर्माता रिक्त पैराग्राफ का उपयोग करने का प्रयास करते हैं, यानी पैराग्राफ के आरंभ और अंत टैग के बीच कुछ भी नहीं होता है। विशिष्टताओं के अनुसार, ब्राउज़रों को ऐसे निर्माणों को अनदेखा करना चाहिए। इसलिए, पैराग्राफ को अलग करने या एक पैराग्राफ के भीतर लाइन ब्रेक को मजबूर करने के लिए, आपको टैग का उपयोग करना चाहिए
. यह एक निर्देशात्मक टैग है. यह बस उस स्थान को चिह्नित करता है जहां डिस्प्ले को दूसरी लाइन पर ले जाने की आवश्यकता होती है। इन दोनों लक्ष्यों को प्राप्त करने के लिए इस टैग का उपयोग कैसे किया जा सकता है इसका एक उदाहरण HTML दस्तावेज़ में दिखाया गया है जिसका कोड लिस्टिंग 1.5 में दिखाया गया है।
लिस्टिंग 1.5
"http://www.w3.org/TR/html4/strict.dtd">
.
जबरन लाइन टूटती है
वह पैराग्राफ जो हम
जबरदस्ती फाड़ दिया गया
अगला अनुच्छेद
जबरन ब्रेक के बाद पैराग्राफ
और ब्राउज़र का उपयोग करके देखने पर यह फ़ाइल कैसी दिखती है यह चित्र में दिखाया गया है। 1.5.
चावल। 1.5. ब्राउज़र विंडो लिस्टिंग 1.5 में दिखाई गई फ़ाइल का परिणाम दिखा रही है
टैग
सामान्य पहचान मापदंडों के अलावा, इसमें पैरामीटर भी है स्पष्ट, जिसका उपयोग किसी ऑब्जेक्ट के चारों ओर लपेटे जाने पर टेक्स्ट को अधिक सटीक रूप से संरेखित करने के लिए किया जाता है, जैसे कि वेब पेज में एम्बेडेड ग्राफ़िक। इस पैरामीटर का मान चार पूर्वनिर्धारित कीवर्ड में से एक हो सकता है: कोई नहीं, बाएँ, दाएँ, सभी.
मान none डिफ़ॉल्ट है और इंगित करता है कि अगली पंक्ति वहीं से शुरू होगी जहां यह सामान्य रूप से इस पैरामीटर के बिना शुरू होती है। अर्थ बाएंइंगित करता है कि अगली पंक्ति पाठ-लिपटे ऑब्जेक्ट के बाएँ हाशिये पर शुरू होगी। यदि आपको इन उद्देश्यों के लिए सही मार्जिन का उपयोग करने की आवश्यकता है, तो आपको मूल्य का उपयोग करना चाहिए सही. और अर्थ सभीब्राउज़र को बताता है कि वह ऑब्जेक्ट के बाएँ और दाएँ दोनों मार्जिन का उपयोग कर सकता है, जब तक कि पाठ को यथासंभव संक्षिप्त रूप से प्रदर्शित किया जाता है।
अब आइए पाठ के फ़ॉन्ट डिज़ाइन पर विचार करने के लिए आगे बढ़ें। पैराग्राफ में किसी भी बिंदु पर, हम मापदंडों के एक निश्चित सेट के साथ एक टैग का उपयोग कर सकते हैं, जो उस फ़ॉन्ट की उपस्थिति निर्धारित करेगा जिसका उपयोग इस टैग के बाद स्थित पाठ को प्रदर्शित करने के लिए किया जाएगा। इस टैग का समापन इसके समापन जोड़े का उपयोग करके किया जाता है .
टैग इसमें निम्नलिखित पैरामीटर अंतर्निहित हैं: आकार, उपयोग किए जाने वाले फ़ॉन्ट के आकार को इंगित करने के लिए उपयोग किया जाता है, रंग- फ़ॉन्ट वर्णों का रंग सेट करने के लिए, और चेहरा, यह दर्शाता है कि पाठ प्रदर्शित करने के लिए किस फ़ॉन्ट का उपयोग किया जाएगा। आइए इन मापदंडों पर नजर डालें।
जैसा कि हमने अभी कहा, आकार पैरामीटर का उपयोग प्रयुक्त फ़ॉन्ट में वर्णों के आकार को निर्दिष्ट करने के लिए किया जाता है। इस पैरामीटर के मान एक से सात तक की संख्याएँ हैं। वे वर्णों के एक निश्चित सापेक्ष आकार का संकेत देते हैं। तथ्य यह है कि HTML में आप वर्णों का पूर्ण आकार बिंदुओं में सेट नहीं कर सकते, जैसा कि हम नियमित कार्यालय अनुप्रयोगों में करने के आदी हैं। उपयोगकर्ता अपने कंप्यूटर पर एक वेब पेज देख रहा होगा, और हम पहले से नहीं जानते कि उसने कौन से फ़ॉन्ट इंस्टॉल किए होंगे और कौन से आकार उपलब्ध हैं। इसलिए, हम केवल सापेक्ष फ़ॉन्ट आकार निर्दिष्ट कर सकते हैं, और उपयोगकर्ता का ब्राउज़र स्वयं सबसे उपयुक्त आकार का चयन करेगा।
हम आकार पैरामीटर के मान के रूप में फ़ॉन्ट आकार में परिवर्तन भी निर्दिष्ट कर सकते हैं। उदाहरण के लिए, फ़ॉन्ट आकार को एक स्तर तक बढ़ाने के लिए, निम्नलिखित निर्माण का उपयोग करें:
और वर्णों के आकार को दो स्तरों तक कम करने के लिए, निम्नलिखित कोड का उपयोग करें:
हालाँकि, ऐसी संरचनाओं का उपयोग करने के लिए एक निश्चित मूल आकार से शुरुआत करना आवश्यक है। इस आकार को सेट करने के लिए, टैग का उपयोग करें समान पैरामीटर के साथ आकार. यदि इस टैग का उपयोग नहीं किया जाता है, तो तीसरे स्तर का उपयोग आधार वर्ण आकार के रूप में किया जाएगा। आइए इन टैगों के उपयोग का एक उदाहरण दें।
सूचीकरण 1.6.
प्रतीक का आकार
चरित्र शैलियाँ
पाठ बोल्ड है या तिरछा
और शायद उसी समय बोल्ड और इटैलिक
ह ाेती है पर बल दियाऔर अनक्रॉस्ड आउट।
या मोनोस्पेस.
हम अक्षरों का आकार बढ़ा और घटा सकते हैं।
जैसा कि आप उदाहरण से देख सकते हैं, हम विभिन्न शैलियों को एक-दूसरे के साथ जोड़ सकते हैं। लेकिन आपको टैग लगाने के क्रम में सावधान रहना चाहिए। खुलने और बंद होने वाले टैग दोनों को पहले लागू किए गए अन्य टैग के भीतर समाहित होना चाहिए। इसका उदाहरण सूची की दसवीं पंक्ति में देखा जा सकता है। और ब्राउज़र का उपयोग करके देखने पर यह HTML दस्तावेज़ कैसा दिखता है, यह चित्र में दिखाया गया है। 1.7.
हमने उन तरीकों पर गौर किया जिनसे विभिन्न टेक्स्ट डिस्प्ले पैरामीटर सेट किए जाते हैं। हालाँकि, HTML टेक्स्ट प्रदर्शित करने के कुछ बुनियादी तरीके प्रदान करता है जिन्हें टैग के पूरे समूह के साथ निर्दिष्ट करने की आवश्यकता नहीं होती है। उनके अपने टैग होते हैं, यानी पाठ की कुछ श्रेणियां परिभाषित होती हैं जो पूर्वनिर्धारित तरीके से प्रदर्शित होती हैं। इन सभी श्रेणियों का उपयोग अक्सर वैज्ञानिक और कंप्यूटर उद्योगों में किया जाता है। आइए उन्हें सूचीबद्ध करें।
- टैग और की एक जोड़ी का उपयोग करके पाठ में एक शब्द को हाइलाइट किया गया है।
- "उन्नत" हाइलाइटिंग, जिसे ध्यान आकर्षित करने के लिए डिज़ाइन किया गया है, एक टैग और उसके समापन जुड़वां का उपयोग करके बनाया गया है।
- तथा टैग के प्रयोग से यह संकेत मिलता है कि इनके बीच स्थित पाठ एक उद्धरण है।
- किसी निश्चित शब्द की परिभाषा को टैग और का उपयोग करके हाइलाइट किया जाता है।
- किसी भी प्रोग्रामिंग भाषा में स्रोत कोड को उजागर करने के लिए टैग की एक जोड़ी का उपयोग किया जाता है।
- प्रोग्राम द्वारा टेक्स्ट सूचना आउटपुट को AND टैग का उपयोग करके स्वरूपित किया जाता है।
- उपयोगकर्ता द्वारा दर्ज किया गया पाठ और टैग द्वारा दर्शाया गया है। प्रोग्रामों के स्रोत कोड में P वेरिएबल्स को टैग और की एक जोड़ी का उपयोग करके निर्दिष्ट किया जाता है।
- टैग और संक्षिप्ताक्षरों को हाइलाइट करें।
- और स्थापित अक्षर संयोजन जो संक्षिप्त रूप नहीं हैं, यानी परिवर्णी शब्द, टैग और के साथ हाइलाइट किए गए हैं।
हालाँकि, टैग के नाम जानना ही पर्याप्त नहीं है; आपको यह भी स्पष्ट रूप से समझने की आवश्यकता है कि वे टेक्स्ट को वास्तव में कैसे प्रारूपित करते हैं। और यहां आप एक उदाहरण के बिना नहीं कर सकते।
चावल। 1.7. ब्राउज़र विंडो लिस्टिंग 1.7 में दिखाई गई फ़ाइल का परिणाम दिखा रही है
लिस्टिंग 1.8
मानक प्रदर्शन विकल्प
यह सामान्य पाठ है
यह एक चयन है. और अधिक ध्यान देने योग्य हाइलाइटिंग
ये एक उद्धरण है और ये एक परिभाषा है.
हम उपयोगकर्ता द्वारा प्रोग्राम कोड, टेक्स्ट लिख सकते हैं,
आउटपुट टेक्स्ट और गैर-चर
इस प्रकार संक्षिप्ताक्षर प्रदर्शित किये जाते हैं। और इसलिए - परिवर्णी शब्द।
ऐसे HTML दस्तावेज़ को प्रदर्शित करने का परिणाम चित्र में दिखाया गया है। 1.8.
चावल। 1.8. ब्राउज़र विंडो लिस्टिंग 1.8 में दिखाई गई फ़ाइल का परिणाम दिखा रही है
बहुत बार किसी ऐसे वेब पेज पर टेक्स्ट डालने की आवश्यकता होती है जो किसी ऐसे टेक्स्ट एडिटर का उपयोग करके पहले से तैयार किया गया हो जिसने टेक्स्ट को पहले से ही स्वतंत्र रूप से स्वरूपित किया हो। इस मामले में, पाठ का प्रारूप, उसके हाइफ़न और प्लेसमेंट सीधे इस पाठ संपादक में सेट किए गए वर्णों में पंक्ति की लंबाई पर निर्भर करते हैं। यदि टेक्स्ट को पारंपरिक तरीकों का उपयोग करके वेब पेज पर रखा जाता है, तो यह स्वरूपण स्वाभाविक रूप से टूट जाएगा। इसलिए, इन पूर्व-स्वरूपित स्निपेट्स के लिए एक कस्टम टैग पेश किया गया था। इस टैग में एक चौड़ाई पैरामीटर है, जिसका मान वर्णों में पंक्ति की लंबाई है। स्वाभाविक रूप से, इस टैग का उपयोग करने से पहले टेक्स्ट को फ़ॉर्मेट करते समय उपयोग किए गए सटीक फ़ॉन्ट को लागू करने की सलाह दी जाती है। इसलिए, पूर्व-स्वरूपित पाठ सम्मिलित करने के लिए, हम निम्नलिखित कोड स्निपेट का उपयोग कर सकते हैं:
मूलपाठ।
इस उदाहरण में, हम निर्दिष्ट करते हैं कि पाठ को इस धारणा के आधार पर प्रदर्शित किया जाना चाहिए कि पंक्ति साठ वर्ण लंबी है। हालाँकि, पूर्व-स्वरूपित पाठ में, "संक्षिप्त स्थान" के नियम भी लागू नहीं होते हैं। तथ्य यह है कि जब ब्राउज़र को किसी वेब पेज के सादे पाठ में लगातार कई रिक्त स्थान मिलते हैं, तो यह उन्हें एक स्थान में संक्षिप्त कर देता है। लेकिन पूर्व-स्वरूपित पाठ ऐसे परिवर्तन से नहीं गुजरता है, जो इसे अपने स्वरूपण को संरक्षित करने की अनुमति देता है, जो कि सबसे सरल पाठ संपादकों में व्हाइटस्पेस वर्णों का उपयोग करके किया जाता है। वैसे, HTML में टैब कैरेक्टर को स्पेस कैरेक्टर भी माना जाता है।
यह भी ध्यान दिया जाना चाहिए कि HTML ऊपरी उद्धरण चिह्नों को प्रदर्शित करने के लिए टैग का उपयोग करने की क्षमता प्रदान करता है, जो आमतौर पर प्रत्यक्ष भाषण और कुछ उद्धरणों को उजागर करने के लिए उपयोग किया जाता है। उद्धरणों को एक टैग के साथ प्रदान किया जाता है जिसके अंत में जुड़वाँ अक्षर होते हैं . और सीधे भाषण को फ्रेम करने के लिए, टैग और आमतौर पर उपयोग किए जाते हैं। उसी समय, टैग उद्धरण पैरामीटर है, जिसका मान इंटरनेट संसाधन का नेटवर्क पता, जिसे यूआरएल भी कहा जाता है, है जिस पर उद्धृत पाठ मूल रूप से स्थित था। और टैग के साथ, लैंग पैरामीटर का आमतौर पर उपयोग किया जाता है, जिसका मान भाषा का कोड पदनाम है, जिसके विराम चिह्न नियमों के अनुसार सीमित उद्धरण रखे जाते हैं। यह कोई रहस्य नहीं है कि अलग-अलग भाषाएँ अलग-अलग उद्धरण चिह्नों का उपयोग करती हैं।
तबादलों की समस्या का भी जिक्र होना चाहिए. आमतौर पर, वेब पेज निर्माता इस समस्या के बारे में सोचते भी नहीं हैं, और ब्राउज़र वर्ड रैपिंग से निपटते नहीं हैं। यदि कोई शब्द एक पंक्ति में फिट नहीं बैठता है, तो उसे बस दूसरी पंक्ति में ले जाया जाता है। लेकिन टेक्स्ट प्रदर्शित करने का यह एकमात्र सही तरीका नहीं है। ऐसी स्थिति उत्पन्न हो सकती है जब आपको शब्द हाइफ़नेशन का उपयोग करके पाठ प्रदर्शित करने की आवश्यकता हो। HTML दो प्रकार के हाइफ़न प्रदान करता है - स्पष्ट और तथाकथित "सॉफ्ट"। स्पष्ट हाइफ़नेशन एन डैश प्रतीक का उपयोग करके बनाया गया है, जिसे आमतौर पर संख्यात्मक पाठ प्रतिस्थापन "-" द्वारा प्रतिस्थापित किया जाता है। हालाँकि, स्पष्ट हाइफ़नेशन असुविधाजनक है क्योंकि जब ब्राउज़र देखने वाली विंडो का आकार बदलता है, तो लाइन की लंबाई भी बदल सकती है, लेकिन हाइफ़नेशन चिह्न अभी भी दृश्यमान रहेगा. भले ही वह लाइन के बीच में हो. इसलिए, वे अक्सर "सॉफ्ट" ट्रांसफ़र का उपयोग करते हैं। वे पाठ प्रतिस्थापन "-" का उपयोग करके बनाए गए हैं। इस मामले में, नरम हाइफ़न प्रतीक पाठ में दिखाई नहीं देते हैं, और केवल उस स्थिति में जब कोई भी शब्द जिसमें ये प्रतीक डाले गए थे, पूरी तरह से पंक्ति में फिट नहीं होता है, क्या यह हाइफ़न किया गया है, सम्मिलित के अनुसार, अक्षरों में टूट गया है। नरम" हाइफ़न। और इस शब्द में नरम हाइफ़नेशन प्रतीकों में से केवल एक ही दिखाई देता है।
HTML आपको इसके टैग का उपयोग करके सुपरस्क्रिप्ट और सबस्क्रिप्ट प्रदर्शित करने की भी अनुमति देता है। सुपरस्क्रिप्ट बनाने के लिए और टैग की एक जोड़ी का उपयोग किया जाता है, और एक सबस्क्रिप्ट को और टैग से घिरा होना चाहिए। आइए इन टैगों के उपयोग का एक उदाहरण देखें।
लिस्टिंग 1.9
बीईपीएक्स और सबस्क्रिप्ट
पानी H20 है
द्रव्यमान और ऊर्जा का अनुपात - E = mc2
ब्राउज़र वास्तव में इंडेक्स कैसे प्रदर्शित करता है यह चित्र में दिखाया गया है। 1.9.
चावल। 1.9. ब्राउज़र विंडो लिस्टिंग 1.9 में दिखाई गई फ़ाइल का परिणाम दिखा रही है
टेक्स्ट डिज़ाइन में क्षैतिज रेखाएँ भी शामिल होती हैं, जो अक्सर वेब पेजों की टेक्स्ट सामग्री के महत्वपूर्ण हिस्सों को अलग करती हैं। टैग का उपयोग करके HTML दस्तावेज़ के टेक्स्ट में एक पंक्ति डाली जाती है। टैग में कई पैरामीटर हैं जो आपको क्षैतिज रेखा की उपस्थिति को ठीक करने की अनुमति देते हैं।
संरेखण पैरामीटर आपको लाइन के क्षैतिज संरेखण को निर्दिष्ट करने की अनुमति देता है। पैरामीटर में तीन पूर्व निर्धारित मानों में से एक हो सकता है: बाएं, दाएं और केंद्र, जो क्षैतिज रेखा को क्रमशः व्यूपोर्ट के बाएं या दाएं किनारे पर धकेलते हैं, या इसे केंद्र में रखते हैं। डिफ़ॉल्ट मान केंद्र है. यदि टैग में नोशेड पैरामीटर शामिल है, तो प्रदर्शित क्षैतिज रेखा में छाया नहीं होगी। और अंतिम चौड़ाई पैरामीटर आपको क्षैतिज रेखा की लंबाई निर्धारित करने की अनुमति देता है। डिफ़ॉल्ट मान "100%" है. और पिक्सेल में लाइन की ऊंचाई आकार पैरामीटर का उपयोग करके सेट की जाती है। आइए एक उदाहरण का उपयोग करके इन सभी मापदंडों के उपयोग को देखें।
सूची 1.10
यह डिफ़ॉल्ट रूप से प्रदर्शित एक सामान्य रेखा है
यह बायीं ओर दबायी गयी एक छोटी रेखा है
यह केंद्र में स्थित एक छोटी रेखा है
यह दाहिनी ओर दबायी गयी एक छोटी रेखा है
यह छाया रहित एक मोटी रेखा है
ब्राउज़र का उपयोग करके देखने पर ऐसा HTML दस्तावेज़ कैसा दिखता है, यह चित्र में दिखाया गया है। 1.10.
और यहां, शायद, हम HTML में निहित पाठ स्वरूपण क्षमताओं पर अपना विचार समाप्त कर सकते हैं।
चावल। 1.10. ब्राउज़र विंडो लिस्टिंग 1.10 में दिखाई गई फ़ाइल का परिणाम दिखा रही है
यह लेख HTML टैग्स पर एक पूर्ण संदर्भ पुस्तक होने का दिखावा नहीं करता है, लेकिन यदि आप विषय में रुचि रखते हैं, तो मेरा सुझाव है कि आप टेक्स्ट को हाइलाइट करने के लिए आवश्यक अधिकांश टैग्स के अर्थ को समझें।
अक्सर, पृष्ठ पर पाठ को बोल्ड या इटैलिक में हाइलाइट किया जाता है। इसके लिए विशेष टैग और (बोल्ड में हाइलाइट किए गए) भी हैं (इटैलिक में)। वे सभी युग्मित हैं, अर्थात्, आवश्यक शब्दों को उद्घाटन और समापन टैग के बीच रखा जाना चाहिए। ऐसा प्रतीत होता है, वे एक ही कार्रवाई के लिए दो टैग क्यों लेकर आए?
वास्तव में, html में वे न केवल एक डिज़ाइन भूमिका निभाते हैं, बल्कि एक अर्थपूर्ण भूमिका भी निभाते हैं। तो, बी टैग केवल टैग को अधिक अर्थ दिए बिना बोल्ड बनाता है, लेकिन मजबूत, सरल हाइलाइटिंग के अलावा, शब्दों को विशेष महत्व भी देता है। इसलिए इस टैग को आधे टेक्स्ट को हाईलाइट नहीं करना चाहिए, बल्कि समझदारी से इस्तेमाल करना चाहिए।
सीएसएस में ऐसे गुण भी हैं जिनका प्रभाव सूचीबद्ध टैग के समान ही है। उदाहरण के लिए, फ़ॉन्ट-वेट: बोल्ड प्रॉपर्टी टेक्स्ट को बोल्ड बनाती है, और फॉन्ट-स्टाइल: इटैलिक प्रॉपर्टी इसे इटैलिक बनाती है।
पाठ को रेखांकित करना और हटानारेखांकित करने और आगे बढ़ाने के लिए टैग भी हैं। शब्दों को रेखांकित करता है और उन्हें काट देता है। सीएसएस के माध्यम से समान प्रभाव प्राप्त करने के लिए, टेक्स्ट-सजावट संपत्ति का उपयोग करें। इसके कई अर्थ हैं:
रेखांकित करें - नीचे से रेखांकित करें;
ओवरलाइन - शीर्ष पर रेखांकित करें;
लाइन-थ्रू - स्ट्राइकथ्रू;
और फिर भी, इस संपत्ति के लिए, आप एक स्थान से अलग किए गए कई मान निर्दिष्ट कर सकते हैं। वास्तव में, आप उसे तीनों प्रकार के अंडरस्कोर भी दे सकते हैं, लेकिन मुझे इसमें कोई मतलब नजर नहीं आता।
HTML 5 ने एक और टैग - मार्क पेश किया, जो आपको केवल टेक्स्ट को हाइलाइट करने की अनुमति देता है। डिफ़ॉल्ट रूप से इसे पीले रंग में हाइलाइट किया जाता है, हालांकि सीएसएस के माध्यम से आप इसे आसानी से ओवरराइड कर सकते हैं और एक कस्टम हाइलाइट बना सकते हैं जो आपकी साइट के डिज़ाइन से मेल खाता है।
सुपरस्क्रिप्ट और सबस्क्रिप्ट में टेक्स्ट प्रदर्शित करनाहमने इसे थोड़ा समझ लिया, लेकिन क्या होगा यदि आपको एक सूत्र या कुछ और लिखने की ज़रूरत है जहां आपको ऊपरी या निचले सूचकांक में कुछ संख्याएं या अक्षर प्रदर्शित करने की आवश्यकता है। बेशक, html हमें इसके लिए आवश्यक उपकरण प्रदान करता है। उप टैग फ़ॉन्ट को सबस्क्रिप्ट के रूप में और सुपर टैग को सुपरस्क्रिप्ट के रूप में प्रदर्शित करता है। यह सीएसएस के माध्यम से भी किया जा सकता है। ऐसा करने के लिए, आपको आवश्यक पाठ लिखना होगा:
लंबवत-संरेखण: उप | बहुत अच्छा
लंबवत - संरेखित करें : उप | बहुत अच्छा |
फ़ॉन्ट-आकार: फ़ॉन्ट का आकार नियमित पाठ से थोड़ा छोटा होता है
CSS का उपयोग करके टेक्स्ट को कैसे स्टाइल करें?यदि आपको सीएसएस का उपयोग करके किसी फ़ॉन्ट को स्टाइल करने की आवश्यकता है, तो आपको चयनकर्ता का उपयोग करके किसी तरह इसे एक्सेस करना होगा। यह एक बात है कि यदि आपको पूरे पैराग्राफ या लिंक को हाइलाइट करने की आवश्यकता है, तो आपके पास एक चयनकर्ता है, लेकिन क्या होगा यदि आपको लेख के बीच में कहीं एक शब्द को हाइलाइट करने की आवश्यकता है? इसके लिए एक अद्भुत युग्मित स्पैन टैग है, जो किसी भी तरह से इसकी सामग्री की उपस्थिति को प्रभावित नहीं करता है और इसे कोई अर्थ नहीं देता है।
तदनुसार, हम आपको डिज़ाइन के लिए आवश्यक टुकड़े को एक स्पैन में संलग्न करते हैं, एक मनमाना स्टाइल क्लास को इसमें बांधते हैं और बिना किसी समस्या के स्टाइल लिखते हैं!
आउटपुट टेक्स्ट रिक्त स्थान को संरक्षित करता है।HTML में एक प्री टैग होता है, जो आपको टेक्स्ट एडिटर में लिखी गई जानकारी को प्रदर्शित करने की अनुमति देता है। यदि आप कोई कविता लिख रहे हैं या कुछ स्थान जोड़ने की आवश्यकता है तो यह उपयोगी हो सकता है। आप CSS के माध्यम से टेक्स्ट फ़ॉर्मेटिंग को भी नियंत्रित कर सकते हैं। इसके लिए एक व्हाइट-स्पेस प्रॉपर्टी है। इसके अर्थ:
नॉरैप - शब्द बिना हाइफ़न के एक पंक्ति में प्रदर्शित होते हैं। यदि वे पंक्ति में फिट नहीं होते हैं, तो क्षैतिज स्क्रॉलिंग दिखाई देगी।
प्री - प्री टैग के समान कार्य करता है
प्री-रैप - पिछले मान के समान, लेकिन जब यह फिट नहीं बैठता तो स्वचालित रूप से टेक्स्ट को एक नई लाइन पर लपेट देता है (शायद सर्वोत्तम मान)
पाठ्य संरेखणहमने पहले ही टेक्स्ट के लिए कुछ HTML टैग्स को कवर कर लिया है, लेकिन यह संरेखण का उल्लेख करने लायक भी है। इसे टैग द्वारा नहीं, बल्कि टेक्स्ट-एलाइन सीएसएस प्रॉपर्टी के माध्यम से सेट किया गया है:
दाएँ - दाएँ किनारे पर।
बाएँ - बाएँ ओर।
केंद्र - केंद्र में (उदाहरण के लिए, शीर्षकों के लिए)
औचित्य - चौड़ाई में। इस मान का अर्थ है कि पंक्ति के शब्द पंक्ति की पूरी चौड़ाई तक खिंच जाएंगे।
पाठ का रंग और पृष्ठभूमिफिर, इसे अब html टैग का उपयोग करके सेट नहीं किया जा सकता है, लेकिन इसे CSS के माध्यम से किया जा सकता है। हम फिर इस निष्कर्ष पर पहुंचे कि HTML टेक्स्ट को संपादित करने के लिए टैग का उपयोग करना बहुत सुविधाजनक नहीं है। पाठ के रंग के लिए, एक रंग गुण होता है जिसके कई अर्थ होते हैं। रंग को या तो कीवर्ड (नारंगी, काला, लाल) का उपयोग करके या स्पष्ट रूप से रंग मोड निर्दिष्ट करके निर्दिष्ट किया जा सकता है: रंग: आरजीबी (130, 100, 12)। बैकग्राउंड बिल्कुल उसी तरह से सेट किया गया है, लेकिन केवल बैकग्राउंड प्रॉपर्टी का उपयोग करके।
पाठ का आकार और फ़ॉन्टफ़ॉन्ट-आकार संपत्ति फ़ॉन्ट आकार निर्दिष्ट करती है, और फ़ॉन्ट-परिवार संपत्ति आपको फ़ॉन्ट या उसके परिवार का चयन करने की अनुमति देती है। उदाहरण के लिए।
HTML टैग HTML भाषा का आधार हैं। मार्कअप में तत्वों की शुरुआत और अंत को सीमित करने के लिए टैग का उपयोग किया जाता है।
प्रत्येक HTML दस्तावेज़ में HTML तत्वों और पाठ का एक वृक्ष होता है। प्रत्येक HTML तत्व को प्रारंभ (उद्घाटन) और समाप्ति (समापन) टैग द्वारा पहचाना जाता है। खुलने और बंद होने वाले टैग में टैग का नाम होता है।
सभी HTML तत्वों को पाँच प्रकारों में विभाजित किया गया है:
- खाली तत्व - , ,
, , , ,, ,
पृष्ठ के बारे में अतिरिक्त जानकारी संग्रहीत करने के लिए उपयोग किया जाता है। इस जानकारी का उपयोग ब्राउज़र द्वारा पृष्ठ को संसाधित करने के लिए और खोज इंजन द्वारा इसे अनुक्रमित करने के लिए किया जाता है। एक ब्लॉक में कई टैग हो सकते हैं, क्योंकि उपयोग की गई विशेषताओं के आधार पर उनमें अलग-अलग जानकारी होती है। किसी दी गई सीमा में माप का सूचक. दस्तावेज़ का एक अनुभाग जिसमें साइट के लिए नेविगेशन लिंक शामिल हैं। एक अनुभाग को परिभाषित करता है जो स्क्रिप्टिंग का समर्थन नहीं करता है। मल्टीमीडिया एम्बेड करने के लिए कंटेनर (जैसे ऑडियो, वीडियो, जावा एप्लेट्स, एक्टिवएक्स, पीडीएफ और फ्लैश)। आप वर्तमान HTML दस्तावेज़ में एक अन्य वेब पेज भी सम्मिलित कर सकते हैं। टैग का उपयोग प्लगइन के पैरामीटर्स को पास करने के लिए किया जाता है। क्रमबद्ध क्रमांकित सूची। क्रमांकन संख्यात्मक या वर्णानुक्रमिक हो सकता है। तत्वों के समूह के शीर्षक वाला एक कंटेनर। , या , ड्रॉप-डाउन सूची से चयन करने के लिए एक विकल्प/विकल्प निर्दिष्ट करता है। स्क्रिप्ट का उपयोग करके की गई गणना के परिणाम को प्रदर्शित करने के लिए फ़ील्ड। पाठ में पैराग्राफ. तत्व का उपयोग करके एम्बेडेड प्लगइन्स के लिए पैरामीटर परिभाषित करता है। एक कंटेनर तत्व जिसमें एक तत्व होता है और शून्य या अधिक तत्व. अपने आप में यह कुछ भी प्रदर्शित नहीं करता. ब्राउज़र को सबसे उपयुक्त छवि का चयन करने की अनुमति देता है।
फ़ॉर्मेटिंग, रिक्त स्थान और टेक्स्ट ब्रेक को संरक्षित किए बिना टेक्स्ट आउटपुट करता है। कंप्यूटर कोड, ईमेल संदेश आदि प्रदर्शित करने के लिए उपयोग किया जा सकता है। किसी भी प्रकार के कार्य के पूर्ण होने का सूचक। एक संक्षिप्त उद्धरण परिभाषित करता है. पूर्वी एशियाई प्रतीकों और उनके डिकोडिंग के लिए कंटेनर। एनोटेशन के आधार घटक के रूप में इसके नेस्टेड टेक्स्ट को परिभाषित करता है। तत्व में मौजूद वर्णों के ऊपर या नीचे एक संक्षिप्त विवरण जोड़ता है, जो छोटे फ़ॉन्ट में प्रदर्शित होता है। एम्बेडेड टेक्स्ट को अतिरिक्त एनोटेशन के रूप में चिह्नित करता है। यदि ब्राउज़र तत्व का समर्थन नहीं करता है तो वैकल्पिक पाठ प्रदर्शित करता है। स्ट्राइकथ्रू के साथ वह पाठ प्रदर्शित करता है जो वर्तमान में नहीं है। प्रोग्राम कोड या स्क्रिप्ट निष्पादन के परिणाम के साथ-साथ सिस्टम संदेशों को दर्शाने वाले टेक्स्ट को प्रदर्शित करने के लिए उपयोग किया जाता है। मोनोस्पेस फ़ॉन्ट में प्रदर्शित. क्लाइंट-साइड स्क्रिप्ट (आमतौर पर जावास्क्रिप्ट) को परिभाषित करने के लिए उपयोग किया जाता है। इसमें या तो स्क्रिप्ट टेक्स्ट होता है या src विशेषता का उपयोग करके बाहरी स्क्रिप्ट फ़ाइल को इंगित करता है। किसी पृष्ठ के तार्किक क्षेत्र (अनुभाग) को परिभाषित करता है, आमतौर पर हेडर के साथ। एक नियंत्रण तत्व जो आपको प्रस्तावित सेट से मानों का चयन करने की अनुमति देता है। भिन्न मानों को रखा गया है। पाठ को छोटे फ़ॉन्ट आकार में प्रदर्शित करता है। , , के लिए वैकल्पिक मीडिया संसाधनों का स्थान और प्रकार निर्दिष्ट करता है। इनलाइन तत्वों के लिए कंटेनर. इसका उपयोग पाठ के अंशों को प्रारूपित करने के लिए किया जा सकता है, जैसे कि अलग-अलग शब्दों को हाइलाइट करना। टेक्स्ट पर जोर देता है, उसे बोल्ड में हाइलाइट करता है। एम्बेड करने योग्य स्टाइल शीट शामिल हैं। प्रतीकों के सबस्क्रिप्ट लेखन को निर्दिष्ट करता है, उदाहरण के लिए, रासायनिक सूत्रों में तत्व सूचकांक। टैग के लिए एक दृश्यमान शीर्षक बनाता है. यह एक भरे हुए त्रिकोण के साथ प्रदर्शित होता है, इस पर क्लिक करने से आप शीर्षक विवरण देख सकते हैं। वर्णों की सुपरस्क्रिप्ट वर्तनी निर्दिष्ट करता है। तालिका बनाने के लिए टैग. तालिका के मुख्य भाग को परिभाषित करता है. एक टेबल सेल बनाता है. HTML कोड अंशों को घोषित करने के लिए उपयोग किया जाता है जिन्हें क्लोन किया जा सकता है और एक स्क्रिप्ट द्वारा दस्तावेज़ में डाला जा सकता है। किसी टैग की सामग्री उसकी संतान नहीं है. बड़े टेक्स्ट इनपुट फ़ील्ड बनाता है. टेबल फ़ुटर को परिभाषित करता है. एक टेबल सेल शीर्षक बनाता है। तालिका शीर्षक को परिभाषित करता है. दिनांक/समय परिभाषित करता है. HTML दस्तावेज़ का शीर्षक जो ब्राउज़र के शीर्षक बार के शीर्ष पर दिखाई देता है। खोज परिणामों में भी दिखाई दे सकता है, इसलिए शीर्षक प्रदान करते समय इसे ध्यान में रखा जाना चाहिए। एक तालिका पंक्ति बनाता है. तत्वों और के लिए उपशीर्षक जोड़ता है। अतिरिक्त जोर दिए बिना, रेखांकित करके पाठ के एक अंश को हाइलाइट करता है। एक बुलेटेड सूची बनाता है. प्रोग्रामों के वेरिएबल्स को इटैलिक में प्रदर्शित करके उन्हें हाइलाइट करता है। पेज पर वीडियो फ़ाइलें जोड़ता है. 3 वीडियो प्रारूपों का समर्थन करता है: MP4, WebM, Ogg। ब्राउज़र को इंगित करता है कि एक लंबी लाइन कहाँ टूट सकती है। उपयोग में आसानी के लिए, मैंने प्रत्येक टैग के लिए प्रदर्शन संपत्ति मान जोड़कर, टैग को विषयगत अनुभागों में समूहीकृत किया। टेबल पर जाने के लिए चित्र पर क्लिक करें.
जब भी संभव हो, जहां आवश्यक हो अपना कोड समझाएं।अपने कोड को समझाने के लिए टिप्पणियों का उपयोग करें: यह क्या करता है, यह क्या करता है, और आपके द्वारा चुने गए समाधान का उपयोग क्यों किया जा रहा है।
(यह बिंदु वैकल्पिक है क्योंकि कोड को हमेशा अच्छी तरह से प्रलेखित करने की उम्मीद करने का कोई मतलब नहीं है। टिप्पणी करने की उपयोगिता परियोजना की जटिलता पर निर्भर करती है और HTML और CSS कोड के लिए भिन्न हो सकती है।)
कार्य TODO का उपयोग करके अपनी कार्य सूची के लिए कार्यों की जाँच करें।TODO कीवर्ड का उपयोग करके कार्यों को चिह्नित करें। @@ जैसे अन्य आमतौर पर उपयोग किए जाने वाले प्रारूपों का उपयोग न करें।
संपर्कों (उपयोगकर्ता नाम या मेलिंग सूची) को कोष्ठक में संलग्न करें: TODO(संपर्क) ।
कोलन के बाद कार्य का वर्णन करें, उदाहरण के लिए: TODO: कार्य।
अनुशंसित: (# TODO(इवान इवानोव): संरेखण से निपटें #) परीक्षण
अनुशंसित:- खीरे
- टमाटर
(पाठ/एचटीएमएल सामग्री प्रकार के साथ HTML का उपयोग करने की अनुशंसा की जाती है। XHTML का उपयोग न करें, क्योंकि एप्लिकेशन/xhtml+xml में खराब ब्राउज़र समर्थन है और अनुकूलन विकल्प सीमित हैं।)
HTML वैधता जब भी संभव हो वैध HTML का उपयोग करें।वैध HTML कोड का उपयोग करें जब तक कि उपयोग आपको प्रदर्शन के वांछित स्तर के लिए आवश्यक फ़ाइल आकार प्राप्त करने की अनुमति न दे।
कोड की वैधता की जांच करने के लिए W3C HTML सत्यापनकर्ता (अंग्रेजी)।
वैधता कोड का एक महत्वपूर्ण और मापने योग्य गुण है। वैध HTML लिखने से तकनीकी आवश्यकताओं और सीमाओं के बारे में सीखने को बढ़ावा मिलता है और HTML का उचित उपयोग सुनिश्चित होता है।
अनुशंसित नहीं: जाँचें बस जाँचें
शब्दार्थ HTML का उपयोग वैसे ही करें जैसा उसका इरादा था।
अनुशंसित: जाँच करें बस एक जाँच करें।तत्वों का उपयोग करें (कभी-कभी गलत तरीके से "टैग" कहा जाता है) उनके इच्छित उद्देश्यों के लिए: शीर्षकों के लिए शीर्षक, पैराग्राफ के लिए पी, लिंक के लिए ए, आदि।
इससे कोड को पढ़ना, संपादित करना और बनाए रखना आसान हो जाता है।
वैकल्पिक मीडिया में हमेशा वैकल्पिक मीडिया सामग्री शामिल होती है।मीडिया के लिए वैकल्पिक सामग्री प्रदान करने का प्रयास करें, जैसे कि चित्र, वीडियो, या कैनवास का उपयोग करके परिभाषित एनिमेशन। चित्रों के लिए, यह एक सार्थक वैकल्पिक पाठ (ऑल्ट) है, और वीडियो और ऑडियो के लिए, यदि संभव हो तो पाठ और कैप्शन का एक प्रतिलेख है।
वैकल्पिक सामग्री विकलांग लोगों की मदद कर सकती है। उदाहरण के लिए, कम दृष्टि वाले व्यक्ति के लिए यह समझना मुश्किल है कि चित्र में क्या है यदि इसके लिए @alt सेट नहीं है। अन्य लोगों को यह समझने में कठिनाई हो सकती है कि वीडियो या ऑडियो रिकॉर्डिंग में क्या कहा जा रहा है।
(यदि छवि का ऑल्ट अनावश्यक है, या इसका उपयोग केवल उन स्थानों पर सजावटी उद्देश्यों के लिए किया जा रहा है जहां सीएसएस का उपयोग नहीं किया जा सकता है, तो एक खाली ऑल्ट टेक्स्ट alt='' का उपयोग करें)
जिम्मेदारियों का पृथक्करण, अलग संरचना, डिज़ाइन और व्यवहार।संरचना (मार्कअप), उपस्थिति (शैलियाँ), और व्यवहार (स्क्रिप्ट) को अलग रखें और उनके बीच बातचीत को न्यूनतम रखने का प्रयास करें।
सुनिश्चित करें कि दस्तावेज़ों और टेम्प्लेट में केवल HTML शामिल है, और HTML केवल दस्तावेज़ की संरचना को परिभाषित करने के लिए कार्य करता है। डिज़ाइन के लिए ज़िम्मेदार सभी कोड को स्टाइल फ़ाइलों में और व्यवहार के लिए ज़िम्मेदार कोड को स्क्रिप्ट में ले जाएँ।
अपने टेम्प्लेट में न्यूनतम संख्या में स्टाइल फ़ाइलें और स्क्रिप्ट शामिल करके उनके अंतर्संबंधों को कम से कम करने का प्रयास करें।
प्रस्तुति और व्यवहार से संरचना को अलग करने से कोड को बनाए रखना आसान हो जाता है। टेम्प्लेट और HTML दस्तावेज़ बदलने में हमेशा स्टाइल फ़ाइलें या स्क्रिप्ट बदलने की तुलना में अधिक समय लगता है।
अनुशंसित नहीं: HTML बेकार है HTML बेकार है
मैंने इसके बारे में पहले कहीं पढ़ा था, लेकिन अब सब कुछ निश्चित रूप से स्पष्ट है: HTML पूर्णतया कूड़ा है!!1मैं विश्वास नहीं कर सकता कि डिज़ाइन बदलने के लिए, आपको हर बार सब कुछ दोबारा करना होगा।
अनुशंसित: मेरा पहला सीएसएस-केवल रीडिज़ाइन मेरा नया सीएसएस डिज़ाइनमैंने इसके बारे में पहले पढ़ा था, लेकिन अंततः मैंने इसे स्वयं किया: मैं चिंताओं को अलग करने के सिद्धांत का उपयोग करता हूं और डिज़ाइन को HTML में नहीं डालता हूं
कितना ठंडा है!
स्मरणीय लिंक स्मरणीय लिंक का प्रयोग न करें।इस नियम का एकमात्र अपवाद HTML सेवा वर्ण हैं (उदाहरण के लिए< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).
वैकल्पिक टैग वैकल्पिक टैग का प्रयोग न करें. (आवश्यक नहीं)फ़ाइल का आकार कम करने और कोड पठनीयता में सुधार करने के लिए, आप वैकल्पिक टैग हटा सकते हैं। HTML5 विनिर्देश में वैकल्पिक टैग की एक सूची है।
(इस दृष्टिकोण को व्यापक रूप से उपयोग करने में कुछ समय लग सकता है क्योंकि यह वेब डेवलपर्स को आमतौर पर जो सिखाया जाता है उससे बहुत अलग है। स्थिरता, कोड और सरलता के दृष्टिकोण से, उनमें से कुछ के बजाय सभी वैकल्पिक टैग को छोड़ना सबसे अच्छा है)।
अनुशंसित नहीं: हम बाइट्स बर्बाद करते हैं - हम पैसा बर्बाद करते हैं।
अनुशंसित: बाइट्स पैसा हैं!ताकि
"प्रकार" विशेषता किसी दस्तावेज़ में शैलियाँ और स्क्रिप्ट जोड़ते समय प्रकार विशेषता निर्दिष्ट न करें।शैलियों (सीएसएस के अलावा किसी अन्य चीज़ का उपयोग करने को छोड़कर) और स्क्रिप्ट (जावास्क्रिप्ट के अलावा किसी अन्य चीज़ का उपयोग करने को छोड़कर) को कनेक्ट करते समय प्रकार विशेषता का उपयोग न करें।
इस मामले में प्रकार विशेषता निर्दिष्ट करना आवश्यक नहीं है क्योंकि HTML5 डिफ़ॉल्ट रूप से टेक्स्ट/सीएसएस (अंग्रेजी) और टेक्स्ट/जावास्क्रिप्ट (अंग्रेजी) का उपयोग करता है। यह पुराने ब्राउज़र में भी काम करेगा.
सिफारिश नहीं की गई:
HTML फ़ॉर्मेटिंग नियमफ़ॉर्मेटिंग प्रत्येक ब्लॉक, तालिका या सूची तत्व के लिए एक नई लाइन बनाएं और प्रत्येक चाइल्ड तत्व को इंडेंट करें।
अनुशंसित:
सिफारिश नहीं की गई:
अनुशंसित:तत्व के लिए निर्दिष्ट शैलियों के बावजूद (सीएसएस आपको डिस्प्ले प्रॉपर्टी का उपयोग करके तत्व के व्यवहार को बदलने की अनुमति देता है), प्रत्येक ब्लॉक या तालिका तत्व को एक नई लाइन पर लपेटें।
साथ ही, किसी ब्लॉक या टेबल तत्व में निहित सभी तत्वों को इंडेंट करें।
(यदि आपको सूची तत्वों के बीच रिक्त स्थान से परेशानी है, तो आप सभी ली तत्वों को एक पंक्ति में रख सकते हैं। यह अनुशंसा की जाती है कि लिंट इस मामले में त्रुटि के बजाय चेतावनी जारी करे।
अनुशंसित:- माशा
- ग्लाशा
- चेबुराश
अनुशंसित:
सीएसएस शैली नियम सीएसएस वैधता जब भी संभव हो वैध सीएसएस कोड का उपयोग करें।लाभ कर $ 5.00 $ 4.50 ऐसे मामलों को छोड़कर जहां ब्राउज़र-निर्भर कोड की आवश्यकता होती है, या सत्यापनकर्ता त्रुटियां होती हैं, वैध सीएसएस कोड का उपयोग करें।
अपने कोड को सत्यापित करने के लिए W3C CSS Validator जैसे टूल का उपयोग करें।
वैधता कोड का एक महत्वपूर्ण और मापने योग्य गुण है। वैध सीएसएस लिखने से अनावश्यक कोड को खत्म करने में मदद मिलती है और स्टाइल शीट का उचित उपयोग सुनिश्चित होता है...
वर्ग पहचानकर्ता और नाम वाइल्डकार्ड या सार्थक वर्ग नाम और पहचानकर्ता का उपयोग करें।कोड का उपयोग करने या किसी तत्व की उपस्थिति का वर्णन करने के बजाय, किसी वर्ग या पहचानकर्ता के नाम पर इसके निर्माण के अर्थ को व्यक्त करने का प्रयास करें, या इसे एक टेम्पलेट नाम दें...
वाइल्डकार्ड नाम केवल उन तत्वों के भिन्न नाम हैं जिनका कोई विशेष उद्देश्य नहीं है या जो अपने भाई-बहनों से अप्रभेद्य हैं। उन्हें आमतौर पर "सहायक" के रूप में आवश्यकता होती है।
कार्यात्मक या टेम्प्लेट नामों का उपयोग करने से दस्तावेज़ या टेम्प्लेट में अनावश्यक परिवर्तनों की आवश्यकता कम हो जाती है।
अस्वीकृत: /* अस्वीकृत: अर्थहीन */ #yee-1901 () /* अस्वीकृत: उपस्थिति का विवरण */ .बटन-हरा() .स्पष्ट()
पहचानकर्ता और वर्ग के नाम पहचानकर्ताओं और वर्गों के लिए, ऐसे नामों का उपयोग करें जो यथासंभव लंबे लेकिन यथासंभव छोटे हों।
अनुशंसित: /* अनुशंसित: सटीक और सटीक */ #गैलरी () #लॉगिन () .वीडियो () /* अनुशंसित: टेम्पलेट नाम */ .aux () .alt ()यथासंभव संक्षिप्त रहते हुए यह तैयार करने का प्रयास करें कि इस तत्व को वास्तव में क्या करना चाहिए।
कक्षाओं और पहचानकर्ताओं का यह उपयोग कोड को समझने में आसान और अधिक कुशल बनाने में योगदान देता है।
प्रकार चयनकर्ता तत्व प्रकार (टैग) चयनकर्ताओं के साथ वर्ग नाम या पहचानकर्ताओं का उपयोग करने से बचें।जब तक बिल्कुल आवश्यक न हो (उदाहरण के लिए सहायक वर्गों के साथ), वर्ग नामों या पहचानकर्ताओं के साथ तत्व नामों का उपयोग न करें।
संपत्तियों के लिए शॉर्टकट जब भी संभव हो संपत्तियों के लिए शॉर्टकट का उपयोग करें।सीएसएस कई अलग-अलग शॉर्टहैंड फॉर्म (जैसे फ़ॉन्ट) प्रदान करता है, जिन्हें जहां भी संभव हो उपयोग करने की अनुशंसा की जाती है, भले ही केवल एक मान निर्दिष्ट किया गया हो।
शॉर्टहैंड प्रॉपर्टी नोटेशन का उपयोग आपके कोड की अधिक दक्षता और बेहतर समझ के लिए उपयोगी है।
अनुशंसित नहीं: /* अनुशंसित नहीं */ बॉर्डर-टॉप-स्टाइल: कोई नहीं; फ़ॉन्ट-परिवार: पैलेटिनो, जॉर्जिया, सेरिफ़; फ़ॉन्ट-आकार: 100%; लाइन-ऊंचाई: 1.6; पैडिंग-बॉटम: 2em; पैडिंग-बाएं: 1em; पैडिंग-दाएं: 1em; पैडिंग-टॉप: 0;
0 और इकाइयाँ शून्य मानों के लिए इकाइयाँ निर्दिष्ट न करें
अनुशंसित: /* अनुशंसित */ बॉर्डर-टॉप: 0; फ़ॉन्ट: 100%/1.6 पैलेटिनो, जॉर्जिया, सेरिफ़; पैडिंग: 0 1em 2em;जब तक ऐसा करने का कोई कारण न हो, शून्य मानों के लिए इकाइयाँ निर्दिष्ट न करें।
भिन्न के पूर्ण भाग में 0 भिन्न के पूर्ण भाग में "0" न लगाएं।-1 और 1 के बीच के मानों में पूर्णांक भाग में 0 न रखें।
लिंक में उद्धरण लिंक में उद्धरण का प्रयोग न करेंurl() के साथ उद्धरण ("" , "") का उपयोग न करें।
हेक्साडेसिमल रंग नाम जब भी संभव हो तीन-वर्ण हेक्साडेसिमल नोटेशन का उपयोग करें।रंगों के लिए तीन-अक्षर वाला हेक्साडेसिमल नोटेशन छोटा है और कम जगह लेता है।
वर्तमान एप्लिकेशन के लिए अद्वितीय उपसर्गों के साथ उपसर्ग उपसर्ग चयनकर्ता। (आवश्यक नहीं)बड़ी परियोजनाओं में, साथ ही कोड में जो अन्य परियोजनाओं या अन्य साइटों के लिए उपयोग किया जाएगा, पहचानकर्ताओं और वर्ग नामों के लिए उपसर्ग (नामस्थान के रूप में) का उपयोग करें। छोटे, अद्वितीय शीर्षकों के बाद हाइफ़न का उपयोग करें।
नेमस्पेस का उपयोग करने से नाम के टकराव को रोकने में मदद मिलती है और आपकी साइट को बनाए रखना आसान हो सकता है। उदाहरण के लिए, खोजते और प्रतिस्थापित करते समय।
वर्गों और पहचानकर्ताओं में विभाजक एक हाइफ़न का उपयोग करके पहचानकर्ताओं और वर्ग नामों में शब्दों को अलग करें।अपने कोड की पठनीयता और समझने में आसानी को बेहतर बनाने के लिए चयनकर्ताओं में शब्दों और संक्षिप्ताक्षरों को जोड़ने के लिए हाइफ़न के अलावा किसी अन्य चीज़ का उपयोग करने से बचें।
अनुशंसित नहीं: /* अनुशंसित नहीं: शब्द "डेमो" और "इमेज" अलग नहीं हैं */ .डेमोइमेज () /* अनुशंसित नहीं: हाइफ़न के बजाय अंडरस्कोर का उपयोग किया जाता है */ .error_status ()
हैक्स ब्राउज़र संस्करण जानकारी या सीएसएस हैक्स का उपयोग करने से बचें - पहले अन्य तरीकों का प्रयास करें।
अनुशंसित: /* अनुशंसित */ #video-id().ads-sample()सीएसएस फ़िल्टर, हैक या अन्य समाधानों के साथ ब्राउज़र अंतरों का मुकाबला करना आकर्षक हो सकता है। यदि आप एक कुशल और आसानी से बनाए रखने योग्य कोडबेस चाहते हैं तो इन सभी तरीकों को केवल अंतिम उपाय के रूप में माना जाना चाहिए। सीधे शब्दों में कहें तो, हैक और ब्राउज़र का पता लगाने की अनुमति देने से परियोजना को लंबे समय में नुकसान होगा, क्योंकि इसका मतलब है कि परियोजना कम से कम प्रतिरोध का रास्ता अपना रही है। जिससे हैक्स का उपयोग करना आसान हो जाता है और उन्हें अधिक से अधिक बार उपयोग करने की अनुमति मिलती है, जिसके परिणामस्वरूप उनका उपयोग बहुत बार किया जाएगा।
सीएसएस फ़ॉर्मेटिंग नियम विज्ञापनों को क्रमबद्ध करना विज्ञापनों को वर्णानुक्रम में क्रमबद्ध करें।सुसंगत कोड सुनिश्चित करने के लिए घोषणाओं को वर्णानुक्रम में परिभाषित करें जिसके साथ काम करना आसान हो।
सॉर्ट करते समय, ब्राउज़र उपसर्गों को अनदेखा करें। इसके अलावा, यदि एक संपत्ति के लिए कई ब्राउज़र उपसर्गों का उपयोग किया जाता है, तो उन्हें भी क्रमबद्ध किया जाना चाहिए (उदाहरण के लिए -moz को --webkit से पहले होना चाहिए)
ब्लॉकों में इंडेंट. हमेशा इंडेंट ब्लॉक सामग्री.पदानुक्रम दिखाने और कोड को समझने में आसान बनाने के लिए हमेशा किसी भी ब्लॉक सामग्री को इंडेंट करें, जैसे नियमों या घोषणाओं के भीतर नियम।
घोषणाओं के बाद प्रत्येक घोषणा के बाद अर्धविराम लगाएं।कोड की स्थिरता के लिए और नई संपत्तियों को जोड़ना आसान बनाने के लिए प्रत्येक घोषणा के बाद अर्धविराम का उपयोग करें।
संपत्ति के नाम के बाद घोषणाओं में कोलन के बाद रिक्त स्थान का उपयोग करें।कोड में ऑर्डर के लिए घोषणाओं में हमेशा कोलन के बाद एक स्थान का उपयोग करें (लेकिन पहले नहीं)।
चयनकर्ताओं और घोषणाओं को अलग करना चयनकर्ताओं और घोषणाओं को लाइन ब्रेक के साथ अलग करना।प्रत्येक चयनकर्ता या घोषणा को एक नई लाइन पर प्रारंभ करें।
नियमों को अलग करना लाइन ब्रेक के साथ नियमों को अलग करना।नियमों के बीच हमेशा एक लाइन ब्रेक रखें।
मेटा नियम CSSग्रुपिंग नियम समूह नियम और एक टिप्पणी के साथ समूहों को इंगित करते हैं। (आवश्यक नहीं)जब भी संभव हो, समूह एक साथ मिलकर शासन करता है। समूहों को टिप्पणियों से इंगित करें और उन्हें लाइन ब्रेक से अलग करें।
निष्कर्ष स्तिर रहोयदि आप कोड संपादित कर रहे हैं, तो यह समझने में कुछ मिनट का समय लें कि यह कैसे लिखा गया है। यदि गणितीय ऑपरेटरों को रिक्त स्थान से अलग किया गया है, तो वही करें। यदि टिप्पणियाँ कोष्ठक या डैश से घिरी हुई हैं, तो अपनी टिप्पणियों के साथ भी ऐसा ही करें।
इस गाइड का विचार एक सामान्य शब्दावली बनाना है जो डेवलपर्स को इस बात पर ध्यान केंद्रित करने की अनुमति देता है कि वे कैसे व्यक्त करना चाहते हैं, न कि कैसे।
हम समान डिज़ाइन नियम प्रदान करते हैं जो आपको एक ही शैली में कोड लिखने की अनुमति देते हैं, लेकिन प्रोजेक्ट में पहले से उपयोग की गई कोड शैली भी महत्वपूर्ण है।
यदि आपका कोड मौजूदा कोड से बहुत अलग है, तो यह पाठक की लय को बिगाड़ सकता है और पढ़ना मुश्किल कर सकता है। इससे बचने का प्रयास करें.
अनुवादक का नोट मैं यह भी नोट करना चाहूंगा कि Google मुख्य रूप से बड़ी, उच्च-लोड परियोजनाओं पर ध्यान केंद्रित करता है, जहां प्रत्येक बाइट महंगा है, इसलिए यह विचार करने योग्य है कि क्या वे प्रत्येक चयनकर्ता को एक नई लाइन पर शुरू करने, या इसके बजाय रिक्त स्थान का उपयोग करने की सलाह देते हैं टैब, तो इसका मुख्य रूप से तात्पर्य यह है कि साइट पर उपयोग करने से पहले कोड को आवश्यक रूप से छोटा और संपीड़ित किया जाएगा।अब तक इसे पढ़ने वाले सभी लोगों को धन्यवाद।
टैग:
- सीएसएस
- एचटीएमएल
- styleguides
परिचय
इस गाइड का उद्देश्य शुरुआती वेब डेवलपर्स और ब्लॉगर्स की मदद करना है। पेश किए गए उपकरण HTML टैग (हाइपरटेक्स्ट मार्कअप लैंग्वेज, इंटरनेट पर दस्तावेज़ों के लिए मानक मार्कअप लैंग्वेज) और सीएसएस फ़ॉर्मेटिंग विकल्प (कैस्केडिंग स्टाइल शीट्स, मार्कअप लैंग्वेज का उपयोग करके लिखे गए दस्तावेज़ की उपस्थिति का वर्णन करने के लिए एक औपचारिक भाषा) हैं। CSS फ़ॉर्मेटिंग विकल्प STYLE विशेषता का उपयोग करके HTML टैग में बनाए गए हैं।
यदि यह अनुस्मारक आपके लिए पर्याप्त नहीं है, तो हम HTML और CSS संदर्भ पुस्तकों का उपयोग करने की सलाह देते हैं।
* मेमो alex_inside की सामग्री पर आधारित है।
फ़ॉन्ट स्वरूपण
पाठ के साथ काम करने के लिए मूल टैग:
नीचे एक इंडेंट के साथ एक नियमित पैराग्राफ।
* आप टैग के साथ अन्य टैग का उपयोग कर सकते हैं, जैसे, , वगैरह।
* टैग के अंदरआप गुणों को बदलने के लिए विशेषताओं का उपयोग कर सकते हैं, जैसे संरेखित करें, शैली इत्यादि।
वह पाठ जिसके गुणों को शैली का उपयोग करके बदला जा सकता है।
एक सीमित क्षेत्र जहां आप गुण (स्थिति, सीमाएँ, पैडिंग, सामग्री गुण, आदि) बदल सकते हैं।
* डिफ़ॉल्ट रूप से, क्षेत्र की सीमाएँ दिखाई नहीं देती हैं। एक पृष्ठ पर एक साथ कई क्षेत्र हो सकते हैं।पाठ स्वरूपण:
मोटा पाठ्यांश
पाठ को इटैलिक करें
रेखांकित पाठ
स्ट्राइकथ्रू पाठ
छोटा फ़ॉन्ट
बड़ा फ़ॉन्ट
ऊपर फ़ुटनोट चिह्न या पाठ के नीचे अनुक्रमणिका
संकेत सहित पाठ
फ़ॉन्ट आकार:
13 बिंदु फ़ॉन्ट
15 प्वाइंट फ़ॉन्ट
फ़ॉन्ट का आकार 9 पिक्सेल
फ़ॉन्ट का आकार 12 पिक्सेल
फ़ॉन्ट का आकार 15 पिक्सेल
फ़ॉन्ट आकार 2 (1 से 7 तक हो सकता है)
फ़ॉन्ट आकार 4
फ़ॉन्ट सामान्य से 1 आकार बड़ा है
शीर्षक:
लेवल 1 हेडर
लेवल 2 हेडर
लेवल 3 हेडर
लेवल 4 हेडर
लेवल 5 हेडर
लेवल 6 हेडर
संभावित फ़ॉन्ट आकार विकल्प (दृश्य मूल्यांकन) उपलब्ध हैं।
फ़ॉन्ट का उपयोग करके टेक्स्ट को फ़ॉर्मेट करना:
कॉमिक सैंस एमएस फ़ॉन्ट
फ़ॉन्ट मोनोटाइप कोर्सिवा
ताहोमा, 13 पिक्सेल
फ़ॉन्ट प्रकार (नाम और दृश्य रेटिंग) के लिए संभावित विकल्प उपलब्ध हैं।
रंग का उपयोग करके पाठ को सजाना:
नीला पाठ
* RGB पैलेट में नंबर #0000ff का मतलब नीला है।लाल पाठ
* आप रंगों के लिए मानक मौखिक पदनामों का उपयोग कर सकते हैं: लाल, हरा, नीला, आदि।नीली पृष्ठभूमि
* बैकग्राउंड का रंग भी बदला जा सकता है। ध्यान दें कि स्टाइल विशेषता सीएसएस सिंटैक्स का उपयोग करती है।नीला पाठ, धूसर पृष्ठभूमि
कुछ पूर्वनिर्धारित रंग:
काला सफेद लाल हरा नीला बैंगनी फायरब्रिक मैरून नारंगी लाल मिडनाइट नीला कॉर्नफ्लावर नीला
सियान येलो मैजेंटा डार्कग्रीन डार्कगोल्डनरोड गोल्ड ऑर्किड ब्लूवायलेट बर्लीवुड पीचपफहेक्स कोड में कुछ रंग लाल, हरे और नीले (आरआर जीजी बीबी) की तीव्रता हैं:
#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE # 006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF
रंग पैलेट और उनके कोड/नामों के संभावित विकल्प उपलब्ध हैं।
छाया/हाइलाइट का उपयोग करके टेक्स्ट डिज़ाइन:
टेक्स्ट-शैडो प्रॉपर्टी के चार पैरामीटर हैं: XY आयाम रंग।
एक्स - पाठ की छाया/हाइलाइट का क्षैतिज ऑफसेट। सकारात्मक मान दाईं ओर ऑफसेट है, नकारात्मक मान बाईं ओर ऑफसेट है।
Y - पाठ की छाया/हाइलाइट का लंबवत ऑफसेट। एक सकारात्मक मान एक नीचे की ओर बदलाव है, एक नकारात्मक मान एक ऊपर की ओर बदलाव है।
आयाम - मान जितना अधिक होगा, धुंधलापन की डिग्री उतनी ही अधिक होगी।
रंग - गहरे रंग छाया देंगे, हल्के रंग "हाइलाइट" देंगे।उपयोग के उदाहरण:
केवल एक छाया
छाया के साथ ताहोमा
ताहोमा रूपरेखा के साथ
ताहोमा उदास
ताहोमा वॉल्यूमेट्रिक
ताहोमा नियॉन
ताहोमा नियॉन
ताहोमा नियॉन
ताहोमा, कई रंगपाठ को संरेखित करना और अनुच्छेदों को स्वरूपित करना
पाठ्य संरेखण:
पाठ को बाईं ओर संरेखित करें
केंद्र पाठ संरेखण
केन्द्रित पाठ
टेक्स्ट को दाईं ओर संरेखित करें
टेक्स्ट को दोनों तरफ संरेखित करें - एक पंक्ति से अधिक लंबे टेक्स्ट के लिए
सीएसएस फ़ॉर्मेटिंग विकल्प का उपयोग करके टेक्स्ट को दोनों तरफ संरेखित करने का विकल्प
पैराग्राफ़ इंडेंटेशन के साथ फ़ुटनोट्स (टिप्पणियाँ) को फ़ॉर्मेट करना:
पाठ को एक अलग ब्लॉक में उद्धृत किया गया है
जिसके बाईं ओर हल्का सा इंडेंटेशन होगा।
अनुच्छेदों और क्षेत्रों का प्रारूपण:
एंबेडेड, टेक्स्ट को अन्य टेक्स्ट के चारों ओर लपेटना, दाएँ किनारे वाले टेक्स्ट को बाईं ओर संरेखित करना, एक ग्रे बॉर्डर और बॉर्डर के बाहर से 8 px मार्जिन के साथ।
ध्यान! यह ब्लॉक टेक्स्ट में (!) शब्द "हैलो!" से पहले डाला गया है।
नमस्ते! इस अनुच्छेद में, पहला वाक्य "लाल" रेखा से होगा, अर्थात। दांतेदार. बिल्कुल किताब छपाई की तरह. सच है, इंटरनेट पर यह एक दुर्लभ प्रथा है। पैराग्राफ को केवल रिक्त स्थान से अलग किया जाना चाहिए।
पूर्व-स्वरूपित पाठ बाईं ओर और शब्दों के बीच इंडेंटेशन बनाए रखता है और रिक्त स्थान के साथ आपके द्वारा निर्दिष्ट इंडेंटेशन सेट करता है। चेतावनी! टैग स्वचालित रूप से लाइन नहीं तोड़ता!
सही संरेखण के साथ.
दाएँ किनारे पर दो पंक्तियों में पाठ,
बाएँ संरेखण के साथ.
< br clear="all" >बायीं ओर चल रही लाइन.
दाहिनी ओर चल रही लाइन.
एक किनारे से दूसरे किनारे तक चलने वाली एक रेखा।
ऊपर स्क्रॉल किया जा रहा है
उपयोगी के साथ पाठ
जानकारी।
नीचे स्क्रॉल
उपयोगी के साथ पाठ
जानकारी।
बड़े टेक्स्ट का वर्टिकल रिवाइंड:
लोरेन इपसाम डलार सिट आमेट,कंसेक्टेचर एडिपिसिंग एलीट, सेड डू ईयूसमॉड टेम्पोर इंसिडेंटिडंट यूटी लेबर एट डोलोर मैग्ना एलिकुआ। यूटी एनिम एड मिनिम वेनियम, क्यूस नोस्ट्रूड एक्सर्सिटाटयोन उलामको लेबोरिस निसी यूटी एलिक्विप एक्स ईए कमोडो कॉन्सकुएट। ड्यूस ऑउट इर्योर डोलोर इन रिप्रेहेंडरिट इन वोलुप्टेट वेलाइट निबंध किलम डोलोर ईयू फ्यूगिएट नल्लाह पारियाटुर। एक्सेप्टूर सिंट ओक्काएकैट क्यूपिडैटैट नॉन प्रोडेंट, सुंट इन कुल्पा कुय ऑफिसिया डेसेरंट मोलिट एनिम आईडी इस्ट लेबोरम।
HTML कोड के साथ बड़े टेक्स्ट का वर्टिकल रिवाइंड:
HTML के बिना पाठ, 55 अक्षर चौड़ा और 5 पंक्तियाँ ऊँचा।
आप स्क्रॉल भी कर सकते हैं, अच्छा, ठीक है!? लेकिन एचटीएमएल काम नहीं करता.
लेकिन यदि आपको केवल स्क्रॉल करने की आवश्यकता है तो पिछले उदाहरण से div का उपयोग करना बेहतर है...
पाठ का अग्रणी (पंक्ति रिक्ति):
लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम
नॉनमी निभ यूइस्मोड टिनसीडंट यूटी लैक्रिट डोलोर मैग्ना एलिगुआम एराट वोलुटपैट।
यूट वाइज एनिम एड मिनिम वेनियम, क्विस नॉस्ट्रूड एक्सरसाइज ट्यूशन उलामकोर्पर सस्पिटिट
लोबोर्टिस निस्ल यूटी एलिक्विप पूर्व ईए कमोडो कॉन्सक्वेट।लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम
नॉनमी निभ यूइस्मोड टिनसीडंट यूटी लैक्रिट डोलोर मैग्ना एलिगुआम एराट वोलुटपैट।
यूट वाइज एनिम एड मिनिम वेनियम, क्विस नॉस्ट्रूड एक्सरसाइज ट्यूशन उलामकोर्पर सस्पिटिट
लोबोर्टिस निस्ल यूटी एलिक्विप पूर्व ईए कमोडो कॉन्सक्वेट।ऑब्जेक्ट पैडिंग
इंडेंटेशन का आकलन करने के लिए अनुभाग में क्षेत्रों की सीमाओं को दृश्यमान (बिंदीदार) बनाया गया है।
शीर्ष पैडिंग क्षेत्र 10 पिक्सेल
20 पिक्सेल के बाएँ मार्जिन वाला क्षेत्र
250px दायां मार्जिन क्षेत्र
15 पिक्सेल के निचले मार्जिन वाला क्षेत्र
- सूची आइटमों में से एक
- ऐसी ही एक और वस्तु
- एक और बात.
* समापन टैगउपयोग के लिए आवश्यक नहीं है.आप शैली के माध्यम से विभिन्न प्रकार की सूचियाँ भी चुन सकते हैं:
- सूची आइटमों में से एक
- ऐसी ही एक और वस्तु
- एक और बात.
- सूची आइटमों में से एक
- ऐसी ही एक और वस्तु
- एक और बात.
सूचियों के लिए सूची-शैली-प्रकार मान:
वृत्त - एक वृत्त के रूप में मार्कर
डिस्क - एक बिंदु के रूप में मार्कर
वर्ग - एक वर्ग के रूप में मार्कर
दशमलव - अरबी संख्याएँ (1, 2, 3, 4,...)
दशमलव-अग्रणी-शून्य - दस से कम अंकों (01, 02, 03,...) के लिए अग्रणी शून्य वाली अरबी संख्याएँ
लोअर-अल्फा - लोअरकेस लैटिन अक्षर (ए, बी, सी, डी,…)
अपर-अल्फा - बड़े लैटिन अक्षर (ए, बी, सी, डी,...)
लोअर-ग्रीक - लोअरकेस ग्रीक अक्षर (α, β, γ, δ,...)
लोअर-रोमन - लोअरकेस रोमन अंक (i, ii, iii, iv, v,…)
अपर-रोमन - अपर केस में रोमन अंक (I, II, III, IV, V,...)
कोई नहीं—सूची के लिए बुलेट अक्षम करता है।इमेजिस
- चित्र डालने का उदाहरण.
width='200px' > - छवि चौड़ाई का आकार.ऊँचाई='500px' > - छवि की ऊँचाई का आकार।जब आप उस पर होवर करते हैं तो टेक्स्ट वाली एक छवि पॉप अप हो जाती है:
शीर्षक=' जब आप छवि पर होवर करेंगे तो यह टेक्स्ट दिखाई देगा!" alt="और यह उसकी अनुपस्थिति में"
>!}छवि बाईं ओर है, पाठ दाईं ओर छवि के चारों ओर बहता है और इसमें 6 पिक्सेल का क्षैतिज इंडेंट है:
शैली = "फ्लोट: बाएँ; मार्जिन: 0 6px 6px 0" > मूलपाठहम छवि पर पाठ लिखते हैं:
इस विकल्प का दुरुपयोग न करने का प्रयास करें,
क्योंकि यह विधि अक्सर इसे कठिन बना देती है
चित्र के आधार पर पाठ की पठनीयता।
स्क्रॉलिंग के साथ चयनित क्षेत्र में चित्र:
हम पिक्सेल में चौड़ाई विशेषता में बाहरी डिव कंटेनर की प्रदर्शित चौड़ाई निर्दिष्ट करते हैं। लंबवत स्क्रॉलिंग के लिए, ऊँचाई ऊँचाई निर्दिष्ट करें। चौड़ाई एवं ऊँचाई चित्र से कम होनी चाहिए।जब आप किसी लिंक पर होवर करते हैं तो टूलटिप दिखाई देती है: