HTML Formatting

HTML Formatting क्या है?

HTML Formatting का उपयोग वेब पेज पर टेक्स्ट को सुंदर, व्यवस्थित और आकर्षक बनाने के लिए किया जाता है। जब हम HTML में टेक्स्ट को फ़ॉर्मेट करते हैं, तो हम उसे विशेष रूप से स्टाइल या सजाते हैं ताकि वह अधिक स्पष्ट और पठनीय हो। HTML में टेक्स्ट को फ़ॉर्मेट करने के लिए कई टैग्स और प्रॉपर्टीज का इस्तेमाल किया जाता है, जो टेक्स्ट के रूप, आकार, और स्थिति को नियंत्रित करते हैं।

HTML Formatting Tags

HTML में कुछ विशेष टैग्स होते हैं जो टेक्स्ट को विभिन्न रूपों में फ़ॉर्मेट करने के लिए उपयोग किए जाते हैं। इनमें से कुछ प्रमुख टैग्स निम्नलिखित हैं:

1. Bold Text (बोल्ड टेक्स्ट)

 या  टैग का उपयोग टेक्स्ट को बोल्ड करने के लिए किया जाता है।

 टैग सिर्फ दृश्य रूप से टेक्स्ट को बोल्ड करता है।
 टैग का उपयोग तब किया जाता है जब टेक्स्ट महत्वपूर्ण हो, और यह सर्च इंजन ऑप्टिमाइजेशन (SEO) के लिए भी लाभकारी है।

उदाहरण:

<p><b>यह बोल्ड टेक्स्ट है।</b></p>
<p><strong>यह महत्वपूर्ण बोल्ड टेक्स्ट है।</strong></p>

2. Italic Text (इटैलिक टेक्स्ट)

 या  टैग का उपयोग टेक्स्ट को इटैलिक बनाने के लिए किया जाता है।

 टैग केवल दृश्य रूप से टेक्स्ट को इटैलिक करता है।
 टैग का उपयोग तब किया जाता है जब टेक्स्ट को विशेष रूप से जोर देकर लिखा जाए।

उदाहरण:

<p><i>यह इटैलिक टेक्स्ट है।</i></p>
<p><em>यह विशेष रूप से जोर दिया गया टेक्स्ट है।</em></p>

3. Underlined Text (अंडरलाइन टेक्स्ट)

 टैग का उपयोग टेक्स्ट को अंडरलाइन करने के लिए किया जाता है।

उदाहरण:

<p><u>यह अंडरलाइन टेक्स्ट है।</u></p>

4. Strikethrough Text (स्ट्राइकथ्रू टेक्स्ट)

<s> या <del> टैग का उपयोग टेक्स्ट को स्ट्राइकथ्रू (line through) करने के लिए किया जाता है।

<s> टैग का उपयोग तब किया जाता है जब आप किसी टेक्स्ट को हटाना चाहते हैं।
<del> टैग का उपयोग तब किया जाता है जब आप किसी टेक्स्ट को संपादित करते हुए यह बताना चाहते हैं कि वह हटाया गया है।

उदाहरण:

<p><s>यह स्ट्राइकथ्रू टेक्स्ट है।</s></p>
<p><del>यह हटाया गया टेक्स्ट है।</del></p>

HTML Text Alignment

HTML में टेक्स्ट को विभिन्न दिशाओं में संरेखित (align) करने के लिए text-align प्रॉपर्टी का उपयोग किया जाता है। आप इसे CSS के माध्यम से भी लागू कर सकते हैं।

1. Left Alignment (बाएं संरेखण)

टेक्स्ट को बाएं संरेखित करने के लिए text-align: left; का उपयोग किया जाता है।

उदाहरण:

<p style="text-align: left;">यह बाएं संरेखित टेक्स्ट है।</p>

2. Center Alignment (केंद्र संरेखण)

टेक्स्ट को केंद्र में संरेखित करने के लिए text-align: center; का उपयोग किया जाता है।

उदाहरण:

<p style="text-align: center;">यह केंद्र में संरेखित टेक्स्ट है।</p>

3. Right Alignment (दाएं संरेखण)

टेक्स्ट को दाएं संरेखित करने के लिए text-align: right; का उपयोग किया जाता है।

उदाहरण:

<p style="text-align: right;">यह दाएं संरेखित टेक्स्ट है।</p>

HTML Subscript और Superscript

HTML में आप टेक्स्ट को subscript (नीचे) या superscript (ऊपर) रूप में दिखा सकते हैं। यह उपयोगी होता है जब आपको रासायनिक सूत्र (chemical formulas) या गणितीय समीकरण (mathematical equations) लिखने होते हैं।

1. Subscript (सबस्क्रिप्ट)

 टैग का उपयोग टेक्स्ट को सबस्क्रिप्ट बनाने के लिए किया जाता है, यानी टेक्स्ट नीचे दिखता है।

उदाहरण:

<p>H<sub>2</sub>O</p>

यह “H₂O” को प्रदर्शित करेगा, जिसमें “2” नीचे होगा।

2. Superscript (सुपरस्क्रिप्ट)

 टैग का उपयोग टेक्स्ट को सुपरस्क्रिप्ट बनाने के लिए किया जाता है, यानी टेक्स्ट ऊपर दिखता है।

उदाहरण:

<p>E = mc<sup>2</sup></p>

यह “E = mc²” को प्रदर्शित करेगा, जिसमें “2” ऊपर होगा।

HTML Line Breaks (लाइन ब्रेक्स)

HTML में आप   टैग का उपयोग करके टेक्स्ट के बीच में लाइन ब्रेक (new line) जोड़ सकते हैं। इसका उपयोग तब किया जाता है जब आप टेक्स्ट को एक नई लाइन पर प्रदर्शित करना चाहते हैं, बिना एक नया पैराग्राफ बनाए।

उदाहरण:

<p>यह पहली लाइन है।<br>यह दूसरी लाइन है।</p>

HTML Whitespace Formatting

HTML में अतिरिक्त व्हाइटस्पेस (स्पेस, टैब, या नई लाइन) को इग्नोर किया जाता है। इसका मतलब है कि अगर आप HTML को अधिक संगठित करने के लिए स्पेस या नई लाइन डालते हैं, तो यह वेबसाइट पर दिखाई नहीं देगा।
अगर आप चाहते हैं कि व्हाइटस्पेस वेबसाइट पर दिखाई दे, तो आप <pre> टैग का उपयोग कर सकते हैं। यह टैग टेक्स्ट को प्री-फॉर्मेटेड (pre-formatted) रूप में प्रदर्शित करता है, जिससे सभी अतिरिक्त स्पेस और नई लाइनों को रखा जाता है।

उदाहरण:

<pre>
  यह एक प्री-फॉर्मेटेड
  टेक्स्ट है।
  सभी अतिरिक्त
  स्पेस और नई
  लाइनों को रखा गया है।
</pre>

निष्कर्ष

HTML Formatting आपके वेब पेज पर टेक्स्ट को अधिक स्पष्ट और आकर्षक बनाने के लिए एक शक्तिशाली तरीका है। इस अध्याय में आपने HTML के विभिन्न फ़ॉर्मेटिंग टैग्स का उपयोग करना सीखा, जैसे कि बोल्ड, इटैलिक, अंडरलाइन, स्ट्राइकथ्रू, टेक्स्ट संरेखण, सबस्क्रिप्ट, और सुपरस्क्रिप्ट। इसके अलावा, आपने यह भी सीखा कि कैसे टेक्स्ट के बीच में लाइन ब्रेक्स डालें और व्हाइटस्पेस को नियंत्रित करें। अगले अध्याय में, हम HTML Links के बारे में जानेंगे।