HTML में एक हॉरिजॉन्टल लाइन कैसे जोड़ें

लेखक: Virginia Floyd
निर्माण की तारीख: 14 अगस्त 2021
डेट अपडेट करें: 1 जुलाई 2024
Anonim
HTML में हॉरिजॉन्टल लाइन कैसे जोड़ें - html कोडिंग हॉरिजॉन्टल लाइन | HTML ट्यूटोरियल Tags| व्याख्यान 4
वीडियो: HTML में हॉरिजॉन्टल लाइन कैसे जोड़ें - html कोडिंग हॉरिजॉन्टल लाइन | HTML ट्यूटोरियल Tags| व्याख्यान 4

विषय

यह लेख आपको दिखाएगा कि HTML में एक क्षैतिज रेखा कैसे जोड़ें। साइट पर सामग्री को अलग करने के लिए क्षैतिज रेखा का उपयोग किया जा सकता है। लाइन बनाने का कोड काफी सरल है। हालाँकि, HTML 4.01 में, आंतरिक कमांड का उपयोग करके लाइन के डिज़ाइन को बदलना संभव है। HTML5 में, आपको लाइन को स्टाइल करने के लिए CSS का उपयोग करना होगा।

कदम

विधि 1 में से 2: HTML 4.01 में कार्य करना

  1. 1 एक मौजूदा खोलें या एक नया HTML दस्तावेज़ बनाएं। HTML दस्तावेज़ों को एक टेक्स्ट एडिटर जैसे नोटपैड या एक विशेष कोड संपादक जैसे Adobe Dreamweaver के साथ संपादित किया जा सकता है। अपनी पसंद के प्रोग्राम में HTML दस्तावेज़ खोलने के लिए इन चरणों का पालन करें:
    • नोटपैड या कोई अन्य टेक्स्ट / कोड संपादक खोलें।
    • मेनू खोलें फ़ाइल.
    • पर क्लिक करें खोलना.
    • एचटीएमएल फ़ाइल का चयन करें।
    • पर क्लिक करें खोलना
  2. 2 उस स्थान का चयन करें जहाँ आप लाइन सम्मिलित करना चाहते हैं। नीचे स्क्रॉल करें जब तक आपको वह रेखा न मिल जाए जिसके ऊपर रेखा दिखाई देनी चाहिए, और फिर उस रेखा के सबसे बाईं ओर क्लिक करके कर्सर को सीधे उस रेखा की शुरुआत में ले जाएं।
  3. 3 एक खाली लाइन जोड़ें। दो बार टैप दर्ज करेंउस टेक्स्ट को नीचे ले जाने के लिए जिसके सामने आप एक लाइन डालना चाहते हैं, और फिर कर्सर को एक खाली लाइन पर रखें।
  4. 4 घंटा> टैग जोड़ें। प्रवेश करना घंटा> पंक्ति के आरंभ में रिक्त स्थान पर। उपनाम घंटा> आपको पूरे पृष्ठ पर एक क्षैतिज रेखा खींचने की अनुमति देता है।
  5. 5 "hr" टैग के बाद कर्सर को दबाकर नई लाइन पर ले जाएँ दर्ज करें. अब टैग घंटा> एक अलग लाइन पर होना चाहिए।
  6. 6 क्षैतिज रेखा में विशेषताएँ जोड़ें (वैकल्पिक)। लंबाई, मोटाई, रंग और संरेखण जैसी विशेषताएं जोड़ें। उन्हें "घंटा" के तुरंत बाद घुंघराले ब्रेसिज़ में संलग्न करें। अनेक विशेषताएँ जोड़ने के लिए, उन्हें रिक्त स्थान से अलग करें।
    • प्रवेश करना घंटा आकार = "#">लाइन की मोटाई बदलने के लिए। "#" को संख्यात्मक मोटाई मान से बदलें (उदाहरण के लिए, आकार = "10")।
    • प्रवेश करना घंटा चौड़ाई = "#">लाइन की चौड़ाई बदलने के लिए। "#" को पिक्सेल की संख्या या पृष्ठ की चौड़ाई के प्रतिशत से बदलें (उदाहरण के लिए, चौड़ाई = "200" या चौड़ाई = "75%")।
    • प्रवेश करना घंटा रंग = "#">लाइन का रंग बदलने के लिए। "#" को रंग या उसके हेक्साडेसिमल कोड के नाम से बदलें (उदाहरण के लिए, रंग = "लाल" या रंग = "# FF0000")।
    • प्रवेश करना घंटा संरेखित करें = "#">लाइन संरेखित करने के लिए। "#" को "दाएं" (दाएं), "बाएं" (बाएं), या "केंद्र" (केंद्र) से बदलें (उदाहरण के लिए, घंटा चौड़ाई = "50%" संरेखित करें = "केंद्र">).
  7. 7 एचटीएमएल फाइल को सेव करें। टेक्स्ट फ़ाइल को HTML दस्तावेज़ के रूप में सहेजने के लिए, आपको फ़ाइल एक्सटेंशन (.txt, .docx) को ".html" में बदलना होगा। अपने HTML दस्तावेज़ को सहेजने के लिए इन चरणों का पालन करें:
    • मेनू खोलें फ़ाइल.
    • पर क्लिक करें के रूप रक्षित करें.
    • फ़ाइल नाम फ़ील्ड में फ़ाइल के लिए एक नाम दर्ज करें।
    • जोड़ें .html फ़ाइल नाम के बाद।
    • पर क्लिक करें सहेजें.
  8. 8 अपने HTML दस्तावेज़ की जाँच करें। HTML फ़ाइल की जाँच करने के लिए, उस पर राइट-क्लिक करें और Open With चुनें। इसके बाद अपना वेब ब्राउजर चुनें। जहाँ आपने "hr" टैग डाला है वहाँ एक ठोस रेखा दिखाई देनी चाहिए। एचटीएमएल कोड कुछ इस तरह दिखेगा:

      ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> इस लाइन को एक लाइन द्वारा हेडिंग से अलग किया जाना चाहिए . / P1 > / शरीर> / html>

विधि २ का २: CSS / HTML5 में कार्य करना

  1. 1 एक मौजूदा खोलें या एक नया HTML दस्तावेज़ बनाएं। HTML दस्तावेज़ों को एक टेक्स्ट एडिटर जैसे नोटपैड या एक विशेष कोड संपादक जैसे Adobe Dreamweaver के साथ संपादित किया जा सकता है। अपनी पसंद के प्रोग्राम में HTML दस्तावेज़ खोलने के लिए इन चरणों का पालन करें:
    • नोटपैड या कोई अन्य टेक्स्ट / कोड संपादक खोलें।
    • मेनू खोलें फ़ाइल.
    • पर क्लिक करें खोलना.
    • एचटीएमएल फ़ाइल का चयन करें।
    • पर क्लिक करें खोलना
  2. 2 अपने HTML दस्तावेज़ में एक शीर्षक जोड़ें। यदि आपके HTML दस्तावेज़ में पहले से कोई शीर्षक नहीं है, तो एक जोड़ने के लिए इन चरणों का पालन करें। शीर्षक html> टैग के बाद और बॉडी> टैग से पहले जाना चाहिए।
    • प्रवेश करना सिर> दस्तावेज़ के शीर्ष पर।
    • दो बार टैप दर्ज करेंदो नई लाइनें जोड़ने के लिए।
    • प्रवेश करना / सिर>शीर्षक बंद करने के लिए।
  3. 3 प्रवेश करना शैली प्रकार = "पाठ / सीएसएस"> हेडर के अंदर। स्टाइल टैग को दो शीर्षक टैग के बीच एक जगह बनाने के लिए रखा जाता है जहां आप HTML डिज़ाइन को संशोधित करने के लिए CSS का उपयोग कर सकते हैं।
    • वैकल्पिक रूप से, आप बाहरी स्टाइल शीट का उपयोग कर सकते हैं। लेख पढ़ो "HTML में CSS फाइल कैसे डालें»बाहरी CSS फ़ाइल को HTML फ़ाइल से लिंक करने का तरीका जानने के लिए।
  4. 4 प्रवेश करना घंटा {. क्षैतिज रेखा को स्टाइल करने के लिए यह CSS टैग है। इसे अपने हेडर या बाहरी सीएसएस फ़ाइल में "शैली" टैग के बाद जोड़ें।
  5. 5 घंटा> टैग के लिए CSS शैलियाँ जोड़ें। उन्हें "hr {" टैग के बाद आना चाहिए। एक क्षैतिज रेखा को विभिन्न तरीकों से स्टाइल किया जा सकता है। नीचे उनमें से कुछ हैं।
    • प्रवेश करना चौड़ाई: ## पीएक्स;लाइन की चौड़ाई समायोजित करने के लिए। "##" को पिक्सेल में लाइन की चौड़ाई से बदलें। पिक्सल (पीएक्स) के बजाय, आप प्रतिशत (%) का उपयोग कर सकते हैं।
    • प्रवेश करना ऊंचाई: ## पीएक्स;लाइन वजन समायोजित करने के लिए। "##" को पिक्सेल में लाइन की चौड़ाई से बदलें।
    • प्रवेश करना पीछे का रंग: ##;लाइन रंग निर्दिष्ट करने के लिए। "##" को रंग के नाम या हैश (#) से बदलें और उसके बाद हेक्साडेसिमल रंग कोड डालें।
    • प्रवेश करना मार्जिन-दाएं: ## पीएक्स;दाहिने किनारे से पिक्सेल की संख्या निर्दिष्ट करने के लिए। "##" को पिक्सेल की संख्यात्मक संख्या या "ऑटो" कोड से बदलें। लाइन को बाईं ओर या केंद्र में संरेखित करने के लिए "ऑटो" दर्ज करें।
    • प्रवेश करना मार्जिन-बाएं: ## पीएक्स;बाएं किनारे से पिक्सेल की संख्या निर्दिष्ट करने के लिए। "##" को पिक्सेल की संख्यात्मक संख्या या "ऑटो" कोड से बदलें। लाइन को दाईं ओर या केंद्र में संरेखित करने के लिए "ऑटो" दर्ज करें।
    • प्रवेश करना मार्जिन-टॉप: ## पीएक्स; लाइन के लिए शीर्ष पैडिंग निर्दिष्ट करने के लिए। "##" को पिक्सेल में पैडिंग के अनुरूप संख्या से बदलें।
    • प्रवेश करना मार्जिन-बॉटम: ## px;लाइन के लिए निचला पैडिंग निर्दिष्ट करने के लिए। "##" को पिक्सेल में पैडिंग के अनुरूप संख्या से बदलें।
    • प्रवेश करना सीमा-चौड़ाई: ## पीएक्स;रेखा के चारों ओर एक बॉक्स बनाने के लिए (वैकल्पिक)। "##" को पिक्सेल में बॉर्डर की चौड़ाई के अनुरूप संख्या से बदलें।
    • प्रवेश करना सीमा रंग: ##;सीमा रंग निर्दिष्ट करने के लिए (वैकल्पिक)। "##" को रंग के नाम या हैश (#) से बदलें और उसके बाद हेक्साडेसिमल रंग कोड डालें।
  6. 6 प्रवेश करना } hr> टैग के लिए स्टाइल को पूरा करने के लिए स्टाइल एट्रिब्यूट्स के बाद।
  7. 7 प्रवेश करना घंटा> HTML दस्तावेज़ के मुख्य भाग में कहीं भी एक क्षैतिज रेखा जोड़ने के लिए। हर बार जब आप अपने HTML दस्तावेज़ में hr> टैग का उपयोग करेंगे तो CSS शैली सेटिंग्स लागू होंगी। आपका कोड कुछ इस तरह दिखना चाहिए:

      DOCTYPE html> html> हेड> स्टाइल टाइप = "टेक्स्ट / css"> घंटा {चौड़ाई: 50%; ऊंचाई: 20 पीएक्स; पृष्ठभूमि-रंग: लाल; मार्जिन-दाएं: ऑटो; मार्जिन-बाएं: ऑटो; मार्जिन-टॉप: 5px; मार्जिन-बॉटम: 5px; सीमा-चौड़ाई: 2px; सीमा-रंग: हरा; } / शैली> / सिर> शरीर> h1> शीर्षक / h1> घंटा> p1> इस पंक्ति को एक क्षैतिज रेखा द्वारा शीर्षक से अलग किया जाना चाहिए / p1> / शरीर> / html>