कैसे एचटीएमएल (HTML) में एक लाइन शामिल करें

इस विकिहाऊ में आपको सिखाया गया है कि किस तरह आप किसी एचटीएमएल में एक हॉरिजॉन्टल (horizontal) लाइन की रचना कर सकते हैं। हॉरिजॉन्टल लाइन आपकी वेबसाइट पर कंटेन्ट (content) को अलग करने के काम आ सकती है। इस लाइन की रचना करने वाला कोड बहुत सरल है। अपनी लाइन को स्टाइल देने के लिए आप एचटीएमएल 4.01 में इन-लाइन कोड इस्तेमाल कर सकते हैं। एचटीएमएल 5 में, आपको अपनी लाइन को स्टाइल देने के लिए सीएसएस की ज़रूरत होगी।^{[१]Xरिसर्च सोर्स}

विधि 1

विधि 1 का 2:

एचटीएमएल 4.01 का इस्तेमाल करना

आर्टिकल डाउनलोड करें

1
एक नया एचटीएमएल डॉकयुमेंट खोलिए या बनाइए: नोटपैड जैसे टेक्स्ट एडिटर के इस्तेमाल से एचटीएमएल डॉक्युमेंट्स (documents) को एडिट किया जा सकता है। आप अडोब ड्रीमवीवर (Adobe Dreamweaver) जैसे कोड एडिटर का इस्तेमाल भी कर सकते हैं। अपनी पसंद के प्रोग्राम में एचटीएमएल डॉकयुमेंट खोलने के लिए निम्न चरणों का इस्तेमाल करिए:
- नोटपैड या अपनी पसंद का टेक्स्ट एडिटर/कोड एडिटर खोलिए।
- File मेन्यू पर क्लिक करिए।
- Open क्लिक करिए।
- कोई एचटीएमएल फाइल चुनिए।
- Open पर क्लिक करिए।
वह स्थान चुनिये जहां आप लाइन शामिल करना चाहते हैं: तब तक नीचे स्क्रोल करते रहिए, जब तक कि आप उस लाइन तक न पहुँच जाएँ जिसके ऊपर आप लाइन को शामिल करना चाहते हैं, तब कर्सर को लाइन की शुरुआत में पहुंचाने के लिए लाइन के बाईं ओर कोने में क्लिक करिए।
जिस टेक्स्ट के ऊपर आप लाइन बनाना चाहते हैं वहाँ तक पहुँचने के लिए दो बार ↵ Enter दबाइए, फिर कर्सर को ऊपर ब्लैंक स्पेस तक पहुंचाइए।
लाइन की शुरुआत से पहले वाली स्पेस में <hr> टाइप करिए। <hr> टैग ही पूरे पेज के एक सिरे से दूसरे सिरे तक हॉरिजॉन्टल (horizontal) लाइन बनाने के लिए जिम्मेदार होता है।
ऐसा करने के लिए ↵ Enter को दबाइए। इस समय <hr> टैग को अपनी लाइन में होना चाहिए।
6
हॉरिजॉन्टल लाइन में एट्रिब्यूट्स (attributes) शामिल करिए (वैकल्पिक): आप होरिज़ोनटल लाइन में लंबाई, चौड़ाई, रंग और अलाइनमेंट (alignment) जैसे एट्रिब्यूट्स शामिल कर सकते हैं। कोड ब्रैकेट (code bracket) में "hr" के बाद निम्न कोड शामिल करिए। आप एक ब्रैकेट में, एट्रिब्यूट्स के बीच में स्पेस दे कर, एक से अधिक एट्रिब्यूट्स भी शामिल कर सकते हैं।^{[२]Xरिसर्च सोर्स}
- लाइन की मोटाई बदलने के लिए <hr size="#"> टाइप करिए: # की जगह पर मोटाई का नंबर (जैसे कि साइज़= "10") लिखिए।
- लाइन की चौड़ाई बदलने के लिए <hr width="#"> टाइप करिए: # के स्थान पर कितने पिक्सेल्स की चौड़ाई, या पेज की चौड़ाई का कितना प्रतिशत चाहिए (जैसे कि चौड़ाई="200", या चौड़ाई="75%") लिखिए।
- लाइन का रंग बदलने केलिए <hr color="#"> टाइप करिए। # के स्थान पर रंग का नाम या रंग का हेक्साडेसिमल कोड (जैसे कि रंग="red" या रंग="#FF0000") लिखिए।
- लाइन को अलाइन करने केलिए <hr align="#"> टाइप करिए: # के स्थान पर "right", "left", या "center" (जैसे कि <hr width="50%" align="center">) लिखिए।
7
अपनी एचटीएमएल फ़ाइल को सेव करिए: किसी टेक्स्ट फ़ाइल को एचटीएमएल डॉकयुमेंट के रूप में सेव करने के लिए आपको फ़ाइल एक्सटेंशन (.txt, .docx) को ".html" से बदलना पड़ेगा। अपने एचटीएमएल डॉकयुमेंट को सेव करने के लिए निम्न चरणों का इस्तेमाल करिए:
- File मेन्यू पर क्लिक करिए।
- Save As पर क्लिक करिए।
- फ़ाइल के लिए कोई नाम "File name" के बाद टाइप करिए।
- फ़ाइल नेम के बाद .html टाइप करिए।
- Save पर क्लिक करिए।
8
अपने एचटीएमएल को टेस्ट करिए: अपनी एचटीएमएल फ़ाइल को टेस्ट करने के लिए, फ़ाइल पर राइट क्लिक करिए और Open with चुनिये। उसके बाद वेब ब्राउज़र चुनिये। जहां आप "hr" टैग प्लेस करेंगे वहाँ एक सॉलिड लाइन सामने आनी चाहिए। आपका एचटीएमएल कोड कुछ ऐसा लगना चाहिए:^{[३]Xरिसर्च सोर्स}

विधि 2

विधि 2 का 2:

CSS/HTML5 का इस्तेमाल करना

आर्टिकल डाउनलोड करें

1
एक नया एचटीएमएल डॉकयुमेंट खोलिए या बनाइये: नोटपैड जैसे टेक्स्ट एडिटर का इस्तेमाल करके एचटीएमएल डॉक्युमेंट्स को एडिट किया जा सकता है। आप अडोब ड्रीमवीवर जैसे कोड एडिटर का भी इस्तेमाल कर सकते हैं। अपनी पसंद के प्रोग्राम में एचटीएमएल डॉकयुमेंट खोलने के लिए निम्न चरणों का इस्तेमाल करिए:
- नोटपैड, या अपनी पसंद के टेक्स्ट एडिटर/कोड एडिटर को खोलिए।
- File मेन्यू पर क्लिक करिए।
- Open पर क्लिक करिए।
- एचटीएमएल फ़ाइल चुनिये।
- Open पर क्लिक करिए।
2
अपने एचटीएमएल डॉकयुमेंट को एक शीर्ष दीजिये: अगर आपके एचटीएमएल डॉकयुमेंट में पहले से ही कोई शीर्ष नहीं है, तब उसमें शीर्ष शामिल करने के लिए निम्न चरणों का पालन करिए। "<html>" टैग के बाद और "<body>" टैग के पहले शीर्ष आयेगा।
- डॉकयुमेंट के टॉप पर <head> टाइप करिए।
- दो नई लाइनें जोड़ने के लिए ↵ Enter को दो बार दबाइए।
- शीर्ष को संपन्न करने के लिए </head> टाइप करिए।
3
शीर्ष में <style type="text/css"> टाइप करिए: स्टाइल टैग, दो शीर्ष टैग्स के बीच में रहेगा। इससे वह जगह बन जाती है जहां आप अपने एचटीएमएल को स्टाइल करने के लिए सीएसएस कोड इनपुट कर सकते हैं।
- इसके स्थान पर, आप कोई बाह्य स्टाइल शीट भी इस्तेमाल कर सकते हैं: अपनी एचटीएमएल फ़ाइल में बाह्य सीएसएस फ़ाइल लिंक करना सीखने के लिए "How to Add a CSS File to HTML" पढ़िये।
hr { टाइप करिए: यह आपकी हॉरिजॉन्टल लाइन को स्टाइल करने के लिए सीएसएस टैग है। अपने शीर्ष में, या बाह्य सीएसएस फ़ाइल में, स्टाइल टैग के बाद इसे जोड़ दीजिये।
5
अपने "<hr>" टैग के लिए सीएसएस स्टाइल जोड़िए: ये "hr {" टैग के बाद आते हैं: आप हॉरिजॉन्टल लाइन को अनेक तरीकों से स्टाइल कर सकते हैं। ये उसके कुछ उदाहरण हैं।
- लाइन की चौड़ाई सेट करने के लिए width: ##px; टाइप करिए: लाइन जितने पिक्सेल चौड़ी हो उस संख्या को ## की जगह रखिए। पिक्सेल्स (px) की जगह आप पर्सेंटेज (%) का भी इस्तेमाल कर सकते हैं।
- लाइन की मोटाई सेट करने के लिए height: ##px; टाइप करिए: लाइन जितने पिक्सेल मोटी हो उस संख्या को ## की जगह रखिए।
- लाइन का रंग सेट करने के लिए background-color: ##; टाइप करिए: ## की जगह पर रंग का नाम लिखिए या पाउंड (#) के बाद हेक्साडेसिमल कलर कोड लिखिए।
- दाहिनी एज (edge) से पिक्सेल्स की संख्या सेट करने के लिए margin-right: ##px; टाइप करिए: ## की जगह पिक्सेल्स की संख्या या "auto" लिखिए। लाइन को बाएँ या सेंटर में अलाइन करने के लिए "auto" टाइप करिए।
- बाईं एज (edge) से पिक्सेल्स की संख्या सेट करने के लिए margin-left: ##px; टाइप करिए: ## की जगह पिक्सेल्स की संख्या या "auto" लिखिए। लाइन को दाएँ या सेंटर में अलाइन करने के लिए "auto" टाइप करिए।
- लाइन केलिए टॉप मार्जिन सेट करने के लिए margin-top: ##px; टाइप करिए: ## की जगह पर मार्जिन जितने पिक्सेल या चौड़ा हो वह संख्या लिखिए।
- लाइन के बॉटम मार्जिन को सेट करने के लिए margin-bottom: ##px; टाइप करिए: ## की जगह मार्जिन जितना चौड़ा हो उतने पिक्सेल्स की संख्या लिखिए।
- लाइन के चारों ओर बार्डर बनाने के लिए border-width: ##px; टाइप करिए (वैकल्पिक): बार्डर जितने पिक्सेल मोटा हो, ## की जगह पर वह संख्या लिखिए।
- बॉर्डर के रंग को सेट करने केलिए border-color: ##; टाइप करिए (वैकल्पिक): ## की जगह रंग का नाम लिखिए, या पाउंड चिन्ह (#) के बाद रंग का हेक्साडेसिमल कोड लिखिए।
इससे आपके <hr> टैग के लिए स्टाइल सेटिंग तय होती है।
7
एचटीएमएल डॉकयुमेंट की बॉडी में कहीं भी <hr> टाइप करिए: इससे आपके एचटीएमएल डॉकयुमेंट में एक हॉरिजॉन्टल लाइन शामिल हो जाती है। आप जब भी अपने एचटीएमएल में <hr> टैग का इस्तेमाल करेंगे तब सीएसएस स्टाइल सेटिंग उसमें लागू हो जाएगी।^{[४]Xरिसर्च सोर्स} आपका कोड कुछ ऐसा दिखना चाहिए: