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

आर्टिकल डाउनलोड करें
सहयोगी लेखक द्वारा विकीहाउ स्टाफ

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

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

विधि 1
विधि 1 का 2:

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

आर्टिकल डाउनलोड करें
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/658928-1-1.jpg\/v4-460px-658928-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/658928-1-1.jpg\/v4-728px-658928-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    नोटपैड जैसे टेक्स्ट एडिटर के इस्तेमाल से एचटीएमएल डॉक्युमेंट्स (documents) को एडिट किया जा सकता है। आप अडोब ड्रीमवीवर (Adobe Dreamweaver) जैसे कोड एडिटर का इस्तेमाल भी कर सकते हैं। अपनी पसंद के प्रोग्राम में एचटीएमएल डॉकयुमेंट खोलने के लिए निम्न चरणों का इस्तेमाल करिए:
    • नोटपैड या अपनी पसंद का टेक्स्ट एडिटर/कोड एडिटर खोलिए।
    • File मेन्यू पर क्लिक करिए।
    • Open क्लिक करिए।
    • कोई एचटीएमएल फाइल चुनिए।
    • Open पर क्लिक करिए।
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/658928-2-1.jpg\/v4-460px-658928-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/658928-2-1.jpg\/v4-728px-658928-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    वह स्थान चुनिये जहां आप लाइन शामिल करना चाहते हैं: तब तक नीचे स्क्रोल करते रहिए, जब तक कि आप उस लाइन तक न पहुँच जाएँ जिसके ऊपर आप लाइन को शामिल करना चाहते हैं, तब कर्सर को लाइन की शुरुआत में पहुंचाने के लिए लाइन के बाईं ओर कोने में क्लिक करिए।
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/658928-3-1.jpg\/v4-460px-658928-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/658928-3-1.jpg\/v4-728px-658928-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    जिस टेक्स्ट के ऊपर आप लाइन बनाना चाहते हैं वहाँ तक पहुँचने के लिए दो बार ↵ Enter दबाइए, फिर कर्सर को ऊपर ब्लैंक स्पेस तक पहुंचाइए।
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/658928-4-1.jpg\/v4-460px-658928-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/658928-4-1.jpg\/v4-728px-658928-4-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    लाइन की शुरुआत से पहले वाली स्पेस में <hr> टाइप करिए। <hr> टैग ही पूरे पेज के एक सिरे से दूसरे सिरे तक हॉरिजॉन्टल (horizontal) लाइन बनाने के लिए जिम्मेदार होता है।
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/658928-5-1.jpg\/v4-460px-658928-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/658928-5-1.jpg\/v4-728px-658928-5-1.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ऐसा करने के लिए ↵ Enter को दबाइए। इस समय <hr> टैग को अपनी लाइन में होना चाहिए।
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/658928-6-1.jpg\/v4-460px-658928-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/658928-6-1.jpg\/v4-728px-658928-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    हॉरिजॉन्टल लाइन में एट्रिब्यूट्स (attributes) शामिल करिए (वैकल्पिक): आप होरिज़ोनटल लाइन में लंबाई, चौड़ाई, रंग और अलाइनमेंट (alignment) जैसे एट्रिब्यूट्स शामिल कर सकते हैं। कोड ब्रैकेट (code bracket) में "hr" के बाद निम्न कोड शामिल करिए। आप एक ब्रैकेट में, एट्रिब्यूट्स के बीच में स्पेस दे कर, एक से अधिक एट्रिब्यूट्स भी शामिल कर सकते हैं। [२]
    • लाइन की मोटाई बदलने के लिए <hr size="#"> टाइप करिए: # की जगह पर मोटाई का नंबर (जैसे कि साइज़= "10") लिखिए।
    • लाइन की चौड़ाई बदलने के लिए <hr width="#"> टाइप करिए: # के स्थान पर कितने पिक्सेल्स की चौड़ाई, या पेज की चौड़ाई का कितना प्रतिशत चाहिए (जैसे कि चौड़ाई="200", या चौड़ाई="75%") लिखिए।
    • लाइन का रंग बदलने केलिए <hr color="#"> टाइप करिए। # के स्थान पर रंग का नाम या रंग का हेक्साडेसिमल कोड (जैसे कि रंग="red" या रंग="#FF0000") लिखिए।
    • लाइन को अलाइन करने केलिए <hr align="#"> टाइप करिए: # के स्थान पर "right", "left", या "center" (जैसे कि <hr width="50%" align="center"> ) लिखिए।
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    किसी टेक्स्ट फ़ाइल को एचटीएमएल डॉकयुमेंट के रूप में सेव करने के लिए आपको फ़ाइल एक्सटेंशन (.txt, .docx) को ".html" से बदलना पड़ेगा। अपने एचटीएमएल डॉकयुमेंट को सेव करने के लिए निम्न चरणों का इस्तेमाल करिए:
    • File मेन्यू पर क्लिक करिए।
    • Save As पर क्लिक करिए।
    • फ़ाइल के लिए कोई नाम "File name" के बाद टाइप करिए।
    • फ़ाइल नेम के बाद .html टाइप करिए।
    • Save पर क्लिक करिए।
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/658928-8-1.jpg\/v4-460px-658928-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/658928-8-1.jpg\/v4-728px-658928-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अपनी एचटीएमएल फ़ाइल को टेस्ट करने के लिए, फ़ाइल पर राइट क्लिक करिए और Open with चुनिये। उसके बाद वेब ब्राउज़र चुनिये। जहां आप "hr" टैग प्लेस करेंगे वहाँ एक सॉलिड लाइन सामने आनी चाहिए। आपका एचटीएमएल कोड कुछ ऐसा लगना चाहिए: [३] 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
यह एक हेडिंग है </ 
 h1 
 > 
 < 
 hr 
 size 
 = 
 "6" 
 width 
 = 
 "50%" 
 align 
 = 
 "left" 
 color 
 = 
 "green" 
 > 
 < 
 p1 
 > 
यह एक पैराग्राफ़ टेक्स्ट है जिसे हेडिंग से एक लाइन द्वारा अलग किया गया है। </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
विधि 2
विधि 2 का 2:

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

आर्टिकल डाउनलोड करें
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    नोटपैड जैसे टेक्स्ट एडिटर का इस्तेमाल करके एचटीएमएल डॉक्युमेंट्स को एडिट किया जा सकता है। आप अडोब ड्रीमवीवर जैसे कोड एडिटर का भी इस्तेमाल कर सकते हैं। अपनी पसंद के प्रोग्राम में एचटीएमएल डॉकयुमेंट खोलने के लिए निम्न चरणों का इस्तेमाल करिए:
    • नोटपैड, या अपनी पसंद के टेक्स्ट एडिटर/कोड एडिटर को खोलिए।
    • File मेन्यू पर क्लिक करिए।
    • Open पर क्लिक करिए।
    • एचटीएमएल फ़ाइल चुनिये।
    • Open पर क्लिक करिए।
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/658928-10-1.jpg\/v4-460px-658928-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/658928-10-1.jpg\/v4-728px-658928-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अगर आपके एचटीएमएल डॉकयुमेंट में पहले से ही कोई शीर्ष नहीं है, तब उसमें शीर्ष शामिल करने के लिए निम्न चरणों का पालन करिए। "<html>" टैग के बाद और "<body>" टैग के पहले शीर्ष आयेगा।
    • डॉकयुमेंट के टॉप पर <head> टाइप करिए।
    • दो नई लाइनें जोड़ने के लिए ↵ Enter को दो बार दबाइए।
    • शीर्ष को संपन्न करने के लिए </head> टाइप करिए।
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    स्टाइल टैग, दो शीर्ष टैग्स के बीच में रहेगा। इससे वह जगह बन जाती है जहां आप अपने एचटीएमएल को स्टाइल करने के लिए सीएसएस कोड इनपुट कर सकते हैं।
    • इसके स्थान पर, आप कोई बाह्य स्टाइल शीट भी इस्तेमाल कर सकते हैं: अपनी एचटीएमएल फ़ाइल में बाह्य सीएसएस फ़ाइल लिंक करना सीखने के लिए " How to Add a CSS File to HTML " पढ़िये।
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/658928-12-1.jpg\/v4-460px-658928-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/658928-12-1.jpg\/v4-728px-658928-12-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    टाइप करिए: यह आपकी हॉरिजॉन्टल लाइन को स्टाइल करने के लिए सीएसएस टैग है। अपने शीर्ष में, या बाह्य सीएसएस फ़ाइल में, स्टाइल टैग के बाद इसे जोड़ दीजिये।
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ये "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: ##; टाइप करिए (वैकल्पिक): ## की जगह रंग का नाम लिखिए, या पाउंड चिन्ह (#) के बाद रंग का हेक्साडेसिमल कोड लिखिए।
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/658928-14-1.jpg\/v4-460px-658928-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/658928-14-1.jpg\/v4-728px-658928-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    इससे आपके <hr> टैग के लिए स्टाइल सेटिंग तय होती है।
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    एचटीएमएल डॉकयुमेंट की बॉडी में कहीं भी <hr> टाइप करिए: इससे आपके एचटीएमएल डॉकयुमेंट में एक हॉरिजॉन्टल लाइन शामिल हो जाती है। आप जब भी अपने एचटीएमएल में <hr> टैग का इस्तेमाल करेंगे तब सीएसएस स्टाइल सेटिंग उसमें लागू हो जाएगी। [४] आपका कोड कुछ ऐसा दिखना चाहिए: 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 type 
 = 
 "text/css" 
 > 
 hr 
 { 
 width 
 : 
 50 
 % 
 ; 
 height 
 : 
 20 
 px 
 ; 
 background-color 
 : 
 red 
 ; 
 margin-right 
 : 
 auto 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-top 
 : 
 5 
 px 
 ; 
 margin-bottom 
 : 
 5 
 px 
 ; 
 border-width 
 : 
 2 
 px 
 ; 
 border-color 
 : 
 green 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
यह एक शीर्षक है </ 
 h1 
 > 
 < 
 hr 
 > 
 < 
 p1 
 > 
यह एक पैराग्राफ़ टेक्स्ट है जो हॉरिजॉन्टल लाइन द्वारा अलग हुआ है </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >

संबंधित लेखों

कैसे
अपने सिम कार्ड से अपना मोबाइल नंबर पता करें
कैसे
उस व्यक्ति को कॉल करें जिसने आपका नंबर ब्लॉक कर दिया है (Call a Person That Has Blocked Your Number)
कैसे
इंस्टाग्राम पासवर्ड रीसेट करें (Reset Your Instagram Password)
कैसे
इंस्टाग्राम पर किसी लड़की से बात शुरू करें (Start a Conversation with a Girl on Instagram)
कैसे
ब्लॉक (block) किए हुये नंबर पर वापस कॉल करें
WhatsApp टिप्स: फेक नंबर से व्हाट्सअप चलायें
कैसे
फोटो की मदद से किसी की खोज करें (Search and Find About Someone Using Image Easily)
कैसे
यूट्यूब से गाने डाउनलोड करें (Kaise YouTube se Gaane Download Kare)
कैसे
लड़कियों से ऑनलाइन बातें करें (Talk to Girls Online)
कैसे
PC में हिंदी में टाइप करें (Type in Hindi on a PC)
कैसे
HTML का इस्तेमाल करके एक वेब पेज तैयार करें (Create a Simple Web Page with HTML)
कैसे
एंड्राइड में सेफ मोड बंद करें
कैसे
Pirate Bay से डाउनलोड करें (Download from Pirate Bay)
कैसे
इंस्टाग्राम अकाउंट को डिलीट करें

रेफरेन्स

  1. ↑ https://www.w3schools.com/tags/tag_hr.asp
  2. ↑ http://www.myhtmltutorials.com/line.html
  3. ↑ https://www.w3schools.com/TAGS/tag_hr.asp
  4. ↑ https://love2dev.com/blog/html-horizontal-line/

विकीहाउ के बारे में

अन्य भाषाओं में
सभी लेखकों को यह पृष्ठ बनाने के लिए धन्यवाद दें जो २,५०८ बार पढ़ा गया है।

यह लेख ने कैसे आपकी मदद की?