TechnicalViews in Hindi: HTML Formatting in hindi

HTML Formatting

HTML Formatting Tags, HTML Element को Organize करने के लिए capable है जिससे Webpage की Readability बढ़ती है।

Formatting Tags आपको Webpage पर present की जाने वाली जानकारी के लिए उचित format या structure को define करने की अनुमति देता है।

Formatting Tags organized information के Title, Paragraph, Listing Element आदि के combination होते है।

Formatting Tags का उपयोग करके आप Webpage पर Presentation और स्थिति को अच्छे से design कर सकते है।

HTML मे कुछ Tags सिर्फ Formatting Text को ही उपलब्ध कराए गए हैं।

Formatting Tags से आप किसी भी Text को Bold, Italic या Underline कर सकते हैं।

कुछ Common Formatting Tags की list नीचे दी जा रही है:

<del>
<ins>

और इन Tags का Use आप नीचे Table मे देख सकते है

Tags	Description	Example	Result
<b>	<b> tag का use text को bold करने के लिये किया जाता है.	<b>This paragraph is bold</b>	This paragraph is bold
<strong>	<strong> tag का use text को strong करने के लिये किया जाता है.	<strong>This paragraph is strong</strong>	This paragraph is strong
<i>	<i> tag का use text को italic करने के लिये किया जाता है.	<i>This paragraph is Italic text</i>	This paragraph is Italic text
<em>	<em> tag का use text को Emphasized करने के लिये किया जाता है.	<em>This paragraph is Emphasized text</em>	This paragraph is Emphasized text
<mark>	<mark> tag का use text को Marked करने के लिये किया जाता है.	<mark>This paragraph is Marked text</mark>	This paragraph is Marked text
<small>	<small> tag का use text को small करने के लिये किया जाता है.	<small>This paragraph is Small text</small>	This paragraph is Small text
<del>	<del> tag का use text को Delete करने के लिये किया जाता है.	<del>This paragraph is Deleted text</del>	~~This paragraph is Deleted text~~
<ins>	<ins> tag का use text को Inserte करने के लिये किया जाता है.	<ins>This paragraph is Inserted text</ins>	This paragraph is Inserted text
<sub>	<sub> tag का use text को Subscript करने के लिये किया जाता है.	<sub>This paragraph is Subscript text</sub>	_{This paragraph is Subscript text}
<sup>	<sup> tag का use text को Superscript करने के लिये किया जाता है.	<sup>This paragraph is Superscript text</sup>	^{This paragraph is Superscript text}

आप word processor के द्वारा text को bold, italicized या underline बना सकते हैं। क्योकि इसके दस विकल्प में से केवल तीन ही indicate करते हैं, कि HTML और XHTML में text कैसे दिखाया जायेगा।

Bold Text: इस ... element में जो भी दिखाई देता है, उसे नीचे उदाहरण के अनुसार bold में दिखाया गया है।

उदाहरण

<!DOCTYPE html>  
 <html>
   <head>
      <title>Bold Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
 
</html>

आउटपुट

The following word uses a bold typeface.

Italic Text: इस ... element के भीतर जो भी दिखाया गया है, वो नीचे उदाहरण के अनुसार italicized में दिखाया जायेगा।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
 
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
 
</html>

आउटपुट

The following word uses an italicized typeface.

Underlined Text: इस ... element में जो भी दिखाया गया है, उसे उदाहरण में underline के अनुसार नीचे दिखाया गया है।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
 
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
 
</html>

आउटपुट

The following word uses an underlined typeface.

Strike Text: इस <strike>...</strike> element में जो भी दिखाया गया है, वो strikethrough के साथ डिस्प्ले होगा। जो नीचे दिये गये text के अनुसार एक पतली रेखा है।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
 
</html>

अाउटपुट

The following word uses a ~~strikethrough~~ typeface.

Monospaced Font: <tt>...</tt> element के कंटेंट जो monospaced font में लिखे गयें हैं। उनके अधिकांश फॉट को variable-width फॉट के रूप में जाना जाता है। क्योंकि इसके letter अलग-अलग विड्थ के होते हैं। (उदाहरण के लिए, letter 'm' letter 'i' से अधिक चौड़ा है)। हालांकि monospaced font में हर एक अक्षर की समान चौड़ाई होती है।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
 
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
 
</html>

अाउटपुट

The following word uses a monospaced typeface.

Superscript Text: ... element के कंटेंट superscript में लिखे गयें है। इसलिये समान साइज के कैरेक्टर वाले font size का इस्तेमाल किया गया है। लेकिन दूसरे characters के ऊपर character की ऊंचाई आधी दिखाई जाती है।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
 
</html>

आउटपुट

The following word uses a ^superscript typeface.

Subscript Text: ... element के कंटेंट में जो subscript लिखी गई है, उसमें फ़ॉन्ट का इस्तेमाल किया गया है। और जिसका आकार इसके आसपास के कैरेक्टर के समान होता है। लेकिन अन्य कैरेक्टर के नीचे इसके कैरेक्टर की ऊंचाई आधी दिखाई जाती है।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
 
</html>

आउटपुट

The following word uses a _subscript typeface.

Inserted Text: इस element के अंदर जो भी डाला जायेगा वो element inserted text के रूप में दिखाई देगा।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
 
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
 
</html>

आउटपुट

I want to drink ~~cola~~ wine

Deleted Text: इस <del>...</del> element के भीतर दिखाई देने वाला कुछ भी deleted text. के रूप में दिखाई देगा।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
 
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
 
</html>

आउटपुट

I want to drink ~~cola~~ wine

Larger Text: इस <big>...</big> element के कंटेंट का साइज, आसपास के text की तुलना में फ़ॉन्ट को बड़ा दिखाया गया है।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
 
</html>

आउटपुट

The following word uses a big typeface.

Smaller Text: ... element के कंटेंट का साइज आसपास के बाकी टेक्स्ट की तुलना में इसके फॉन्ट का साइज़ छोटा है। जैसा कि नीचे दिखाया गया है:

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

आउटपुट

The following word uses a small typeface.

Grouping Content: <div> और element किसी पेज के section या subsection को बनाने के लिए कई elements को एक साथ समूह बनाने की अनुमति देते हैं।

उदाहरण के लिए, आपको पेज पर <div> element के साथ footnotes को डालना चाहिये, क्योकि जिससे यह संकेत मिलता है, कि उस element के सभी elements, footnotes से संबंधित हैं। फिर आपको इस स्टाइल को element में अटैच करना चाहिये, ताकि वे style rule के special set का उपयोग कर सकें।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
 
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" bgcolor = "white">
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
 
</html>

आउटपुट

Content Articles

Actual content goes here.....

दूसरी तरफ, इन एलिमेंट का उपयोग केवल ग्रुप इनलाइन एलिमेंट में किया जा सकता है। इसलिए, यदि आप वाक्य या पैराग्राफ को group के साथ रखना चाहते हैं, तो आप इस प्रकार element का use कर सकते हैं।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
 
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
 
</html>

आउटपुट

This is the example of span tag and the div tag alongwith CSS

इन tags को सामान्यतः CSS के साथ उपयोग किया जाता है ताकि आप किसी पेज के किसी section में style को attach कर सकें।

भारतीय भाषाओं में सहजता से अनुवाद करनें हेतु इस टूल का उपयोग करें https://transzaar.com/