HTML कैसे सीखे ,HTML Formatting with examples in hindi

HTML कैसे सीखे ,HTML Formatting with examples in hindi

Hindi Line जून 01, 2020

Lesson  4: Formatting

HTML Formatting list with examples



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


Bold text

बोल्ड टेक्स्ट के लिए, <b>… </ b> टैग का उपयोग किया जाता है। ओपनिंग और क्लोजिंग टैग के बीच जो भी कंटेंट होता है, उसी के अनुसार फॉर्मेट किया जाता है। नमूना कोड यह वर्णन करने के लिए कि ये टैग कैसे काम करते हैं, आपके संदर्भ के लिए नीचे दिया गया है
<!doctype html>
<html>
<head>
<title>bold text demo</title>
</head>
<body>
<p>Example: <b>bold</b> text.</p>
 </body>
</html>
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा


Italic text 

पाठ को इटैलिक करने के लिए, <i>… </ i> टैग का उपयोग किया जाता है। ओपनिंग और क्लोजिंग टैग के बीच जो भी कंटेंट होता है, उसी के अनुसार फॉर्मेट किया जाता है। नमूना कोड यह वर्णन करने के लिए कि ये टैग आपके काम के संदर्भ में कैसे दिए गए हैं।
<!doctype html>
<html>
<head>
<title>Italic text demo</title>
</head>
 <body>
 <p>Example: <i>Italic</i> text.</p>
</body>
 </html>
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा



Underlined text 

पाठ को रेखांकित करने के लिए, <u>… </ u> टैग का उपयोग किया जाता है। ओपनिंग और क्लोजिंग टैग के बीच जो भी कंटेंट होता है, उसी के अनुसार फॉर्मेट किया जाता है। नमूना कोड यह वर्णन करने के लिए कि ये टैग आपके काम के संदर्भ में कैसे दिए गए हैं।
<!doctype html> 
<html> 
<head> 
<title>Underline text demo</title> 
</head> 
<body> 
<p>Example: <u>Underline</u> text.</p>
 </body> 
</html>
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा


Strike text 

पाठ को स्ट्राइक करने के लिए, <strike>…</strike> टैग का उपयोग किया जाता है। ओपनिंग और क्लोजिंग टैग के बीच जो भी कंटेंट होता है, उसी के अनुसार फॉर्मेट किया जाता है। नमूना कोड यह वर्णन करने के लिए कि ये टैग आपके काम के संदर्भ में कैसे दिए गए हैं।
<!doctype html> 
<html> 
<head> 
<title>Strike text demo</title> 
</head>
 <body> 
<p>Example: <strike>Strike</strike> text.</p> 
</body>
 </html>
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा



ᴍonospaced text 


बोल्ड टेक्स्ट के लिए, <tt>… </ tt> टैग का उपयोग किया जाता है। ओपनिंग और क्लोजिंग टैग के बीच जो भी कंटेंट होता है, उसी के अनुसार फॉर्मेट किया जाता है। नमूना कोड यह वर्णन करने के लिए कि ये टैग कैसे काम करते हैं, आपके संदर्भ के लिए नीचे दिया गया है।
<!doctype html>
 <html> 
<head>
 <title>monospaced text demo</title> 
</head> 
<body> <p>example: <tt>monospaced</tt> text.</p> </body>
 </html> 
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा



Superscript text


टेक्स्ट को सुपरस्क्रिप्ट के रूप में प्रारूपित करने के लिए, <sup>… </ sup> टैग का उपयोग किया जाता है। ओपनिंग और क्लोजिंग टैग के बीच जो भी कंटेंट होता है, उसी के अनुसार फॉर्मेट किया जाता है। नमूना कोड यह वर्णन करने के लिए कि ये टैग आपके काम के संदर्भ में कैसे दिए गए हैं।
<!doctype html> 
<html> 
<head> 
<title>Superscript text demo</title> 
</head> 
<body> <p>Example: <sup>Superscript</sup> text.</p> </body> 
</html>
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा


Subscript text 


एक सबस्क्रिप्ट के रूप में प्रदर्शित करने के लिए पाठ को प्रारूपित करने के लिए, <sub>…</sub> टैग का उपयोग किया जाता है। ओपनिंग और क्लोजिंग टैग के बीच जो भी कंटेंट होता है, उसी के अनुसार फॉर्मेट किया जाता है। नमूना कोड यह वर्णन करने के लिए कि ये टैग आपके काम के संदर्भ में कैसे दिए गए हैं।
<!doctype html> 
<html> 
<head>
 <title>Subscript text demo</title>
 </head>
 <body>
 <p>Example: <sub>Subscript</sub> text.</p> 
</body> 
</html> 
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा


Inserted text 


पाठ को प्रारूपित करने के लिए इसलिए यह सम्मिलित पाठ के रूप में प्रकट होता है, <ins>… </ ins> टैग का उपयोग किया जाता है। ओपनिंग और क्लोजिंग टैग के बीच जो भी कंटेंट होता है, उसी के अनुसार फॉर्मेट किया जाता है। नमूना कोड यह वर्णन करने के लिए कि ये टैग कैसे काम करते हैं, आपके संदर्भ के लिए नीचे दिया गया है।
<!doctype html> 
<html> 
<head>
 <title>Inserted text demo</title> 
</head> 
<body>
 <p>I want to learn <del>java</del> <ins>html</ins></p>
 </body> 
</html>
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा


deleted text

पाठ को प्रारूपित करने के लिए, क्योंकि यह हटाए गए पाठ के रूप में प्रकट होता है, <del>… </ del> टैग का उपयोग किया जाता है। ओपनिंग और क्लोजिंग टैग के बीच जो भी कंटेंट होता है, उसी के अनुसार फॉर्मेट किया जाता है। इसके उपयोग को पिछले उदाहरण में प्रदर्शित किया गया है

Larger text 

पाठ को प्रारूपित करने के लिए इसलिए यह बड़े पाठ के रूप में प्रकट होता है, <big>…</big>  टैग का उपयोग किया जाता है। उद्घाटन और समापन टैग के बीच स्थित कोई भी सामग्री ने स्वरूपित किया है कोई भी सामग्री जो उद्घाटन और समापन टैग के बीच स्थित होती है उसे इस तरह से स्वरूपित किया जाता है कि उसका फ़ॉन्ट आकार उसी HTML दस्तावेज़ के अन्य पाठ से बड़ा हो। नमूना कोड यह वर्णन करने के लिए कि ये टैग आपके काम के संदर्भ में कैसे दिए गए हैं।
 <!doctype html> 
<html> 
<head> 
<title>Larger text demo</title> 
</head>
<body> 
<p>Example: <big>big</big> text.</p> 
</body> 
</html>
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा


Small text


पाठ को प्रारूपित करने के लिए इसलिए यह छोटे पाठ के रूप में दिखाई देता है, <small>… </ small> टैग का उपयोग किया जाता है। उद्घाटन और समापन टैग के बीच निहित कोई भी सामग्री किसी भी सामग्री को स्वरूपित करती है जो उद्घाटन और समापन टैग के बीच निहित होती है, उसे इस तरह से स्वरूपित किया जाता है कि उसका फ़ॉन्ट आकार अन्य पाठ की तुलना में छोटा होता है यानी एक ही HTML दस्तावेज़। नमूना कोड यह वर्णन करने के लिए कि ये टैग आपके काम के संदर्भ में  दिए गए हैं।
<!doctype html> 
<html> 
<head> 
<title>Smaller text demo</title> 
</head> 
<body> 
<p>Example: <small>Small</small> text.</p>
</body> 
</html> 
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा


grouping content

एक HTML दस्तावेज़ को अनुभागों और उपखंडों में <div>… </ div> और <span>… </ span> टैग का उपयोग करके आयोजित किया जा सकता है। उदाहरण के लिए, सभी टैग जो फ़ुटनोट्स अनुभाग से संबंधित हैं, उन्हें एक <div>… </ div> के अंदर रखा जा सकता है ताकि यह इंगित किया जा सके कि वे फ़ुटनोट्स अनुभाग के सभी भाग हैं। इसके अलावा, आप उस विभाग या अनुभाग में विशिष्ट प्रारूपण नियम लागू कर सकते हैं। यह आपको HTML दस्तावेज़ के विभिन्न अनुभागों के प्रारूपण पर अधिक नियंत्रण रखने की अनुमति देता है। नीचे दिया गया नमूना कोड <div> टैग के व्यवहार को दर्शाता है।
<!doctype html>
 <html> 
<head> 
<title>div demo</title>
 </head>
 <body> <div id = "main" align = "middle" > <a href = "/index.htm">home</a> |
</div> <div id = "other" align = "left" bgcolor = "white"> <h5>text</h5> <p>Extra content…</p>
</div> </body>
 </html>
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा


जबकि <div> का उपयोग समूह के तत्वों को एक साथ करने के लिए किया जाता है, <span> का उपयोग इनलाइन तत्वों को एक साथ समूह में करने के लिए किया जाता है। उदाहरण के लिए, पैराग्राफ के एक हिस्से को अलग तरह से व्यवहार करने के लिए समूहित किया जा सकता है। नीचे दिया गया नमूना कोड दिखाता है कि स्पंदना  विभक्त होती है।
 <!doctype html> 
<html> 
<head> 
<title>Span demo</title> 
</head> 
<body> <p>Example: <span style = "color:green">span 1</span> and <span style = "color:red">span 2</span> text.</p> </body>
</html>
इस कोड के अनुरूप वेबपेज नीचे दिखाए गए चित्र की तरह दिखाई देगा




Tags

एक टिप्पणी भेजें

0 टिप्पणियाँ