- Introduction to HTML text formatting in Hindi
-
- Types of HTML text formatting in Hindi
- Styling HTML text in Hindi
Introduction to HTML Text Formatting
HTML formatting बेहतर दिखने और feel करने के लिए text को format करने की एक प्रक्रिया है। HTML हमें CSS का उपयोग किए बिना text को format करने की क्षमता प्रदान करता है। HTML में कई formatting टैग हैं। इन टैग का उपयोग text को bold, italicized या underline करने के लिए किया जाता है। लगभग 14 options उपलब्ध हैं कि HTML और XHTML में कैसे text दिखाई देता है।
HTML में formatting टैग दो श्रेणियों में विभाजित हैं:
- Physical tag: ये टैग text को visual appearance प्रदान करने के लिए उपयोग किए जाते हैं।
- Logical tag: ये टैग text में कुछ logical या semantic value जोड़ने के लिए उपयोग किए जाते हैं।
यहां, हम 14 HTML formatting tags सीखने जा रहे हैं। निम्नलिखित HTML formatting text की सूची है।
| Element name | Description |
| <b> | यह एक physical टैग है, जिसका इस्तेमाल इसके बीच लिखे गए text को bold करने के लिए किया जाता है। |
| <strong> | यह एक logical टैग है, जो ब्राउज़र को बताता है कि text महत्वपूर्ण है। |
| <i> | यह एक physical टैग है जिसका इस्तेमाल text italic बनाने के लिए किया जाता है। |
| <em> | यह एक logical टैग है जो italic में content प्रदर्शित करने के लिए उपयोग किया जाता है। |
| <mark> | इस टैग का उपयोग text को हाइलाइट करने के लिए किया जाता है। |
| <u> | इस टैग का उपयोग इसके बीच लिखे गए पाठ को underline करने के लिए किया जाता है। |
| <tt> | इस टैग का उपयोग teletype में एक text को दिखाने के लिए किया जाता है। (HTML5 में समर्थित नहीं) |
| <strike> | इस टैग का उपयोग text के एक section पर strikethrough खींचने के लिए किया जाता है। (HTML5 में समर्थित नहीं) |
| <sup> | यह सामान्य रेखा से थोड़ा ऊपर content को प्रदर्शित करता है। |
| <sub> | यह सामान्य रेखा से थोड़ा नीचे content को प्रदर्शित करता है। |
| <del> | इस टैग का उपयोग deleted सामग्री को प्रदर्शित करने के लिए किया जाता है। |
| <ins> | यह टैग उस सामग्री को प्रदर्शित करता है जिसे जोड़ा जाता है |
| <big> | यह टैग एक conventional unit द्वारा फ़ॉन्ट आकार बढ़ाने के लिए उपयोग किया जाता है। |
| <small> | इस टैग का उपयोग आधार फ़ॉन्ट आकार से फ़ॉन्ट आकार को एक इकाई कम करने के लिए किया जाता है। |
1) Bold Text
HTML <b> और <strong> formatting elements
HTML <b> element एक physical tag है जो बिना किसी logical महत्व के, bold अक्षरों में text प्रदर्शित करता है। यदि आप <b> ………… </ b> तत्व के भीतर कुछ भी लिखते हैं, तो मोटे अक्षरों में दिखाया जाता है।
इस उदाहरण को देखें:
<p> <b>Write Your First Paragraph in bold text.</b></p>
Output:
Write Your First Paragraph in bold text.
HTML <strong> टैग एक logical टैग है, जो सामग्री को बोल्ड फ़ॉन्ट में प्रदर्शित करता है और ब्राउज़र को इसके logical महत्व के बारे में सूचित करता है। यदि आप <strong> ??????? के बीच कुछ भी लिखते हैं। </ strong>, महत्वपूर्ण text दिखाया जाता है।
इस उदाहरण को देखें:
<p><strong>This is an important content</strong>, and this is normal content</p>
Output:
This is an important content, and this is normal content
Example
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of formatting element</h1>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html> output:
Explanation of formatting element
This is an important content, and this is normal content
2) Italic text
HTML <i> और <em> formatting elements
HTML <i> element physical element है, जो किसी भी अतिरिक्त महत्व के बिना, italic font में सामग्री को प्रदर्शित करता है। यदि आप <i> ………… </ i> तत्व के भीतर कुछ भी लिखते हैं, तो इटैलिक अक्षरों में दिखाया जाता है।
इस उदाहरण को देखें:
<p><i>Write Your First Paragraph in italic text.</i></p>
Output:
Write Your First Paragraph in italic text.
HTML <em> टैग एक logical element है, जो semantics importance के साथ italic फ़ॉन्ट में content को प्रदर्शित करेगा।
इस उदाहरण को देखें:
<p><em>This is an important content</em>, which displayed in italic font.</p>
Output:
This is an important content, which displayed in italic font.
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>, which displayed in italic font.</p>
</body>
</html>
output:Explanation of italic formatting element
This is an important content, which displayed in italic font.
3) HTML Marked formatting
यदि आप किसी text को mark या हाइलाइट करना चाहते हैं, तो आपको <mark> ……… </ mark> के भीतर सामग्री लिखना चाहिए।
इस उदाहरण को देखें:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put a Mark on your face
4) Underlined Text
यदि आप <u> ……… </ u> तत्व के भीतर कुछ भी लिखते हैं, तो underlined text में दिखाया गया है।
इस उदाहरण को देखें:
<p><u>Write Your First Paragraph in underlined text.</u></p>
Output:
Write Your First Paragraph in underlined text.
5) Strike Text
<strike> ………………….. </ strike> तत्व के भीतर लिखी गई कोई भी चीज़ strikethrough के साथ प्रदर्शित की जाती है। यह एक पतली रेखा है जो statement को काटती है।
इस उदाहरण को देखें:
<p><strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:
Write Your First Paragraph with strikethrough.
6) Monospaced Font
यदि आप चाहते हैं कि प्रत्येक अक्षर की चौड़ाई समान हो तो आपको <tt> …………. </ tt> तत्व के भीतर content लिखना चाहिए।
नोट: हम जानते हैं कि अधिकांश फोंट को variable-width fonts के रूप में जाना जाता है क्योंकि विभिन्न अक्षरों में अलग-अलग चौड़ाई होती है। (उदाहरण के लिए: ‘w’ ‘i’ से अधिक चौड़ा है)। Monospaced Font हर अक्षर के बीच समान स्थान प्रदान करता है।
इस उदाहरण को देखें:
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Output:
Hello Write Your First Paragraph in monospaced font.
7) Superscript Text
यदि आप सामग्री को <sup> ………….. </sup> element में रखते हैं, तो superscript में दिखाया जाता है; इसका मतलब यह है कि यह अन्य characters के ऊपर एक character की आधी ऊंचाई प्रदर्शित करता है।
इस उदाहरण को देखें:
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello Write Your First Paragraph in superscript.
8) Subscript Text
यदि आप सामग्री को <sub> ………….. </sub> तत्व के भीतर रखते हैं, तो इसे subscript में दिखाया जाता है; इसका अर्थ है कि यह अन्य characters के नीचे एक character की ऊँचाई को आधा प्रदर्शित करता है।
इस उदाहरण को देखें:
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
Output:
Hello Write Your First Paragraph in subscript.
9) Deleted Text
कुछ भी जो <del> ………. </ del> के भीतर रखा जाता है, उसे deleted text के रूप में प्रदर्शित किया जाता है।
इस उदाहरण को देखें:
<p>Hello <del>Delete your first paragraph.</del></p>
Output:
Hello
10) Inserted Text
जो कुछ भी <ins> ………. </ ins> के भीतर रखा जाता है, उसे inserted text के रूप में प्रदर्शित किया जाता है।
इस उदाहरण को देखें:
<p><del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
Output:
Delete your first paragraph.Write another paragraph.
11) Larger text
यदि आप अपने फॉन्ट साइज़ को बाकी text से बड़ा रखना चाहते हैं तो content को <big> ……… </ big> के अंदर रखें। यह पिछले font size एक point फॉन्ट साइज़ को बढ़ाता है।
इस उदाहरण को देखें:
<p>Hello <big>Write the paragraph in larger font.</big></p>
Output:
Hello Write the paragraph in larger font.
12) Smaller Text
यदि आप अपने फॉन्ट साइज को बाकी text से छोटा रखना चाहते हैं तो content को <small> ……… </ small> टैग के अंदर डालें। यह पिछले font size की तुलना में एक फ़ॉन्ट आकार को कम करता है।
इस उदाहरण को देखें:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
Output:
Hello Write the paragraph in smaller font.
