सामग्री

• पावले
• 2 पैकी 1 पद्धत: HTML 4.01 मध्ये काम करणे
• 2 पैकी 2 पद्धत: CSS / HTML5 मध्ये काम करणे

हा लेख तुम्हाला HTML मध्ये आडवी रेषा कशी जोडावी हे दाखवेल. क्षैतिज रेषा साइटवरील सामग्री विभक्त करण्यासाठी वापरली जाऊ शकते. ओळ तयार करण्यासाठी कोड अगदी सोपा आहे. तथापि, एचटीएमएल 4.01 मध्ये, अंतर्गत आदेशांचा वापर करून एका ओळीचे डिझाइन बदलणे शक्य आहे. HTML5 मध्ये, तुम्हाला रेषा स्टाईल करण्यासाठी CSS चा वापर करावा लागेल.

पावले

2 पैकी 1 पद्धत: HTML 4.01 मध्ये काम करणे

1. 1 विद्यमान उघडा किंवा नवीन HTML दस्तऐवज तयार करा. HTML दस्तऐवज नोटपॅड सारख्या मजकूर संपादक किंवा Adobe Dreamweaver सारख्या विशेष कोड संपादकासह संपादित केले जाऊ शकतात. आपल्या पसंतीच्या प्रोग्राममध्ये HTML दस्तऐवज उघडण्यासाठी या चरणांचे अनुसरण करा:
   • नोटपॅड किंवा दुसरा मजकूर / कोड संपादक उघडा.
   • मेनू उघडा फाइल.
   • वर क्लिक करा उघडा.
   • HTML फाईल निवडा.
   • वर क्लिक करा उघडा
2. 2 तुम्हाला ओळ कुठे घालायची आहे ते ठिकाण निवडा. जोपर्यंत वरील रेषा दिसली पाहिजे ती ओळ सापडत नाही तोपर्यंत खाली स्क्रोल करा आणि नंतर त्या ओळीच्या अगदी डावीकडे क्लिक करून कर्सर थेट त्या ओळीच्या सुरुवातीला हलवा.
3. 3 रिक्त ओळ जोडा. डबल टॅप करा प्रविष्ट करामजकूर खाली हलवण्यासाठी ज्याच्या आधी तुम्हाला एक ओळ घालायची आहे आणि नंतर कर्सर एका रिकाम्या ओळीवर ठेवा.
4. 4 Hr> टॅग जोडा. एंटर करा hr> ओळीच्या सुरुवातीला रिकाम्या जागेवर. टॅग करा hr> आपल्याला संपूर्ण पृष्ठावर एक आडवी रेषा काढण्याची परवानगी देते.
5. 5 "Hr" टॅग नंतर कर्सर एका नवीन ओळीवर दाबून हलवा प्रविष्ट करा. आता टॅग hr> वेगळ्या ओळीवर असावे.
6. 6 क्षैतिज रेषेमध्ये गुण जोडा (पर्यायी). लांबी, जाडी, रंग आणि संरेखन यासारखे गुण जोडा. "Hr" नंतर लगेच त्यांना कुरळे ब्रेसेसमध्ये बंद करा. एकाधिक गुण जोडण्यासाठी, त्यांना एका स्पेससह वेगळे करा.
   • एंटर करा hr size = "#">ओळीची जाडी बदलण्यासाठी. अंकीय जाडी मूल्यासह "#" पुनर्स्थित करा (उदाहरणार्थ, आकार = "10").
   • एंटर करा hr width = "#">ओळीची रुंदी बदलण्यासाठी. पिक्सेलची संख्या किंवा पृष्ठ रुंदीच्या टक्केवारीसह "#" पुनर्स्थित करा (उदाहरणार्थ, रुंदी = "200" किंवा रुंदी = "75%").
   • एंटर करा hr color = "#">रेषेचा रंग बदलण्यासाठी. रंगाच्या किंवा त्याच्या हेक्साडेसिमल कोडच्या नावासह "#" पुनर्स्थित करा (उदाहरणार्थ, रंग = "लाल" किंवा रंग = "# FF0000").
   • एंटर करा hr align = "#">ओळ संरेखित करण्यासाठी. "#" ला "उजवे" (उजवे), "डावे" (डावे) किंवा "मध्य" (मध्य) (उदाहरणार्थ, hr width = "50%" align = "center">).
7. 7 HTML फाईल सेव्ह करा. HTML दस्तऐवज म्हणून मजकूर फाइल जतन करण्यासाठी, आपण फाइल विस्तार (.txt, .docx) ".html" मध्ये बदलणे आवश्यक आहे. आपले HTML दस्तऐवज जतन करण्यासाठी या चरणांचे अनुसरण करा:
   • मेनू उघडा फाइल.
   • वर क्लिक करा म्हणून जतन करा.
   • फाइल नाव फील्डमध्ये फाईलसाठी नाव प्रविष्ट करा.
   • जोडा .html फाईलच्या नावानंतर.
   • वर क्लिक करा जतन करा.
8. 8 तुमचे HTML दस्तऐवज तपासा. HTML फाईल तपासण्यासाठी त्यावर राईट क्लिक करा आणि ओपन विथ निवडा. मग तुमचा वेब ब्राउझर निवडा. आपण "hr" टॅग घातला तेथे एक ठोस ओळ दिसली पाहिजे. HTML कोड असे दिसेल:

   ! DOCTYPE html> html> body> h1> शीर्षक / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> ही ओळ एका ओळीने मथळ्यापासून वेगळी केली पाहिजे < / P1> / body> / html>

2 पैकी 2 पद्धत: CSS / HTML5 मध्ये काम करणे

1. 1 विद्यमान उघडा किंवा नवीन HTML दस्तऐवज तयार करा. HTML दस्तऐवज नोटपॅड सारख्या मजकूर संपादक किंवा Adobe Dreamweaver सारख्या विशेष कोड संपादकासह संपादित केले जाऊ शकतात. आपल्या पसंतीच्या प्रोग्राममध्ये HTML दस्तऐवज उघडण्यासाठी या चरणांचे अनुसरण करा:
   • नोटपॅड किंवा दुसरा मजकूर / कोड संपादक उघडा.
   • मेनू उघडा फाइल.
   • वर क्लिक करा उघडा.
   • HTML फाईल निवडा.
   • वर क्लिक करा उघडा
2. 2 आपल्या HTML दस्तऐवजात शीर्षक जोडा. जर तुमच्या HTML दस्तऐवजाला आधीपासून शीर्षक नसेल, तर एक जोडण्यासाठी या चरणांचे अनुसरण करा. शीर्षक html> tag नंतर आणि body> tag च्या आधी गेले पाहिजे.
   • एंटर करा डोके> दस्तऐवजाच्या शीर्षस्थानी.
   • डबल टॅप करा प्रविष्ट करादोन नवीन ओळी जोडण्यासाठी.
   • एंटर करा / डोके>शीर्षक बंद करण्यासाठी.
3. 3 एंटर करा style type = "text / css"> शीर्षकाच्या आत. स्टाईल टॅग दोन हेडिंग टॅग दरम्यान ठेवण्यात आले आहे जेथे आपण HTML डिझाइन सुधारण्यासाठी CSS वापरू शकता.
   • वैकल्पिकरित्या, आपण बाह्य शैली पत्रक वापरू शकता. लेख वाचा "HTML मध्ये CSS फाइल कशी घालावीCS बाह्य CSS फाइल HTML फाइलशी कशी जोडावी हे जाणून घेण्यासाठी.
4. 4 एंटर करा तास {. क्षैतिज रेषा स्टाईल करण्यासाठी हा CSS टॅग आहे. आपल्या शीर्षलेख किंवा बाह्य CSS फाइलमध्ये "शैली" टॅग नंतर जोडा.
5. 5 Hr> टॅगसाठी CSS शैली जोडा. ते "hr {" टॅग नंतर आले पाहिजे. क्षैतिज रेषा विविध प्रकारे शैलीबद्ध केली जाऊ शकते. खाली त्यापैकी काही आहेत.
   • एंटर करा रुंदी: ## px;ओळीची रुंदी समायोजित करण्यासाठी. "##" लाईन रुंदीसह पिक्सेलमध्ये बदला. पिक्सेल (px) ऐवजी, तुम्ही टक्केवारी (%) वापरू शकता.
   • एंटर करा उंची: ## px;ओळीचे वजन समायोजित करण्यासाठी. "##" लाईन रुंदीसह पिक्सेलमध्ये बदला.
   • एंटर करा पार्श्वभूमी रंग: ##;ओळ रंग निर्दिष्ट करण्यासाठी. रंगाचे नाव किंवा हॅश (#) नंतर “##” ऐवजी हेक्साडेसिमल रंग कोड बदला.
   • एंटर करा मार्जिन-उजवा: ## px;उजव्या काठावरून पिक्सेलची संख्या निर्दिष्ट करण्यासाठी. "##" ची संख्यात्मक पिक्सेल किंवा कोड "ऑटो" सह पुनर्स्थित करा. डावीकडे किंवा मध्यभागी ओळ संरेखित करण्यासाठी "स्वयं" प्रविष्ट करा.
   • एंटर करा मार्जिन-डावे: ## px;डाव्या काठावरून पिक्सेलची संख्या निर्दिष्ट करण्यासाठी. "##" ची संख्यात्मक पिक्सेल किंवा कोड "ऑटो" सह पुनर्स्थित करा. ओळ उजवीकडे किंवा मध्यभागी संरेखित करण्यासाठी "ऑटो" प्रविष्ट करा.
   • एंटर करा मार्जिन-टॉप: ## px; ओळीसाठी शीर्ष पॅडिंग निर्दिष्ट करण्यासाठी. "##" ला पिक्सेलमध्ये पॅडिंगशी संबंधित संख्येने बदला.
   • एंटर करा मार्जिन-बॉटम: ## px;ओळीसाठी तळ पॅडिंग निर्दिष्ट करण्यासाठी. पिक्सेलमध्ये पॅडिंगशी संबंधित नंबरसह "##" पुनर्स्थित करा.
   • एंटर करा सीमा-रुंदी: ## px;ओळीभोवती बॉक्स काढणे (पर्यायी). "##" पिक्सेलमध्ये सीमेच्या रुंदीशी संबंधित संख्येने बदला.
   • एंटर करा सीमा-रंग: ##;सीमा रंग निर्दिष्ट करण्यासाठी (पर्यायी). रंगाचे नाव किंवा हॅश (#) नंतर “##” ऐवजी हेक्साडेसिमल रंग कोड बदला.
6. 6 एंटर करा } hr> टॅगसाठी स्टाईल पूर्ण करण्यासाठी शैली विशेषता नंतर.
7. 7 एंटर करा hr> आडव्या रेषा जोडण्यासाठी HTML दस्तऐवजाच्या मुख्य भागात कुठेही. प्रत्येक वेळी तुम्ही तुमच्या HTML दस्तऐवजात hr> टॅग वापरता तेव्हा CSS शैली सेटिंग्ज लागू होतील. तुमचा कोड यासारखा दिसला पाहिजे:

   ! DOCTYPE html> html> head> style type = "text / css"> hr {width: 50%; उंची: 20px; पार्श्वभूमी रंग: लाल; मार्जिन-उजवा: ऑटो; मार्जिन-डावे: ऑटो; मार्जिन-टॉप: 5px; मार्जिन-बॉटम: 5px; सीमा-रुंदी: 2px; सीमा-रंग: हिरवा; < / style> / head> body> h1> heading / h1> hr> p1> ही ओळ एका आडव्या ओळीने मथळ्यापासून वेगळी केली पाहिजे / p1> / body> / html>