दोस्तों, Body Tag के अंदर आप जो भी लिखेंगे, वह प्रिंट हो जाएगा, परन्तु वह टेक्स्ट साधारण रहता है।जैसे कि हम हमारे किताबों में देखते हैं, Heading का साइज ज्यादा होता है, Paragraph का साइज छोटा होता है, कहीं पर टेस्ट बहुत Highlighted दिखता है अथवा गाढ़ा कलर में दिखता है।आदि अनेक तरह के Test Style हमारी किताबों में दिखता है। वह हम हमारे Web पेज में कैसे लगाएंगे, हम इस पेज में हम देखेंगे।

1. HTML Heading

        HTML Heading वेब पेज के अंदर टाइटल(Title) अथवा सबटाइटल (Subtitle) को लगाने के लिए उपयोग किया जाता है Heading को<h1> से <h6>टैग के अंदर लिखा जाता है। 
        <h1>...................</h1> से <h6>...................</h6> तक , Heading के लिए h Tag का उपयोग किया जाता है।

कोड(Code) :

<body>

    <h1>Heading 1</h1>

    <h2>Heading 2</h2>

    <h3>Heading 3</h3>

    <h4>Heading 4</h4>

    <h5>Heading 5</h5>

    <h6>Heading 6</h6>

</body>


कोड का आउटपुट(Code Output) :

        Code के Output में आप देख सकते हैं, H1 हेडिंग का Text Size सबसे बड़ा है। और H6 का Text Size सबसे छोटा है। अर्थात HTML में H1 हेडिंग सबसे बड़ी होती है।और H6 हेडिंग सबसे छोटी होती।

2. HTML Paragraph

            HTML में Paragraph Tag का उपयोग किसी भी Text को अथवा Set of Text को Web Page में लिखने के लिए किया जाता है।Paragraph Tag के अंदरआप जो भी लिखेंगे वह आपके Web Page पर दिखेगा।
            वैसे तो आप Body Tag के अंदरआप जो भी लिखते हैं वह Web पेज में दिखता है।परन्तु Paragraph Tag का उपयोग करने से हमें ध्यान रहता है कि लिखा हुआ टैक्स Paragraph है और आगे जब आप डिज़ाइनिंग करेंगे तो उसमें पैराग्राफ़ टैंक काफी मददगार होता है।
        <p>...................</p>, <p> Tag का उपयोग Paragraph के लिए किया जाता है।
कोड(Code) :

<body>

    <p>This is a paragraph.</p>

    <p>This is another paragraph.</p>

</body>


कोड का आउटपुट(Code Output) :


3. HTML Line Break

        Line Break Tag का उपयोग किसी भी लाइन को Break करके दूसरी लाइन में लिखने के लिए उपयोग किया जाता है। Line Break Tag को क्लोज़(Close) करने की आवश्यकता नहीं पड़ती है, जैसा कि बाकी Tags में है। Line Break Tag उपयोग आप किसी भी लाइन में उपयोग कर सकते हैं जहाँ से आपको सिंगल लाइन को दूसरी लाइन में लिखना है।
        .............<br>............, <br> Tag का उपयोग Line Break के लिए किया जाता है

कोड(Code) :

<body>

       <p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

<body>

कोड का आउटपुट(Code Output) :

4. HTML Bold Text

        यदि किसी लाइन काअत्यधिक महत्व है तो हम उसे Bold Text का उपयोग करके दिखा सकते है।Bold Text होने से Text का कलर गहरा हो जाता है।क्योंकि जो नॉर्मल टेस्ट(Normal Text) है।उसकी तुलना में Bold Text गहरे रंग का दिखता है तो जो यूजर हैं, उस लाइन की तरफ जल्दी ध्यान देगा।

टेक्स्ट को Bold करने के दो तरीके हैं।
  1. Bold :.<b>........................</b>, b Tag का उपयोग Bold Text के लिए किया जाता है |
  2. Strong :.<strong>........................</strong>, strong Tag का उपयोग Bold Text के लिए किया जाता है |

कोड(Code) :

<body>

    <p>This is a Normal Paragraph.</p>

    <p> <b>This is Bold paragraph.</b> </p>

    <p> <strong>This is a Strong Paragraph.</strong> </p>

</body>

कोड का आउटपुट(Code Output) :

             Code में आपको दिख रहा होगा, जिस पैराग्राफ़(Paragraph) में हमने स्ट्रांग(strong) या बोल्ट(bold) का उपयोग नहीं किया है वह नॉर्मल(Normal) दिख रहा है और जहाँ हमने स्ट्रांग(strong) या बोल्ट(bold) यूज़ किया है।वह पैराग्राफ(Paragraph) गहरे कलर में दिख रहा है।

5. HTML Italic Text

            Italic Text का उपयोग किसी भी लाइन को परिभाषित(Define) करने के लिए किया जाता है । Italic Tag से लिखा हुआ Text। 30 डिग्री वाह घूम जाता है।
टेक्स्ट को Italic करने के चार तरीके हैं।
  1. Italic :.<i>........................</i>, i Tag का उपयोग Italic Text के लिए किया जाता है |
  2. Emphasized Text :.<em>........................</em>, em Tag का उपयोग Italic Text के लिए किया जाता है |
  3. Definition Text : <dfn>........................</dfn>, dfn Tag का उपयोग Italic Text के लिए किया जाता है |
  4. Address Text : <address>........................</address>, address Tag का उपयोग Italic Text के लिए किया जाता है |

कोड(Code) :

<body>
    <p>This is a Normal Text.</p>
    <p> <i>This is a Italic Text.</i> </p>
    <p> <em>This is a Emphasized Text.</em> </p>
    <p> <dfn>This is a Definition Text.</dfn> </p>
    <p> <address>This is a Address Text.</address> </p>
</body>

कोड का आउटपुट(Code Output) :

        ऊपर दिए सारे Tags का आउटपुट(Output) एक जैसा ही दिख रहा होगा, परन्तु आपको टैग्स का उपयोग उनके नाम के अनुसार करना है।जैस- Address Tag का उपयोग Address लिखने के लिए करना है।Defination Tag का उपयोग Definition के अंदर यूज़ करना है। Italic Text का उपयोग नॉर्मल(Normal) जगह पे करना है।आदि।

6. HTML Underline Text

        Underline Text का उपयोग किसी भी Text के नीचे लाइन(Line) लगाने अथवा Text को अंडरलाइन(Underline) करने के लिए उपयोग किया जाता है।
        <u>.........................</u>, u Tag का उपयोग Text को Underline करने के लिए किया जाता है।

कोड(Code) :

<body>

    <p>This is a Normal Paragraph.</p>

    <p> <u>This is Bold paragraph.</u> </p>

    <p> This is <u>Underline Text</u>.</p>

</body>

कोड का आउटपुट(Code Output) :

7. HTML Highlight Text

       Highlight Text की मदद से आप किसी भी Text के बैकग्राउंड(Background) में पीला(Yellow) कलर लगा देते हैं, जैसा कि आप Highlighter Pen की मदद से बुक में Highlight करते हैं।इससे आपका Text अलग दिखता है। जिससे पढ़ने वाले की नज़र में जो आपने लाइन लिखा है, वह तुरंत आ जाती।
        <mark>.........................</mark> , mark Tag का उपयोग Text को Highlight करने के लिए किया जाता है।

कोड(Code) :

<body>
    <p>This is a Normal Paragraph.</p>
    <p> This is <mark>Highlighted Text</mark>.</p>
</body>

कोड का आउटपुट(Code Output) :
        Mark Tag के अंदर हमने Highlighted Text लिखा है जीससे Text के बैकग्राउंड(Background) में।येलो कलर दिख रहा है और बाकी जगह Normal Text दिख रहा है।इस तरह आप जरूरत के अनुसार Mark Tag का उपयोग करके Text को हाइलाइट(Highlight) कर सकते हैं।

8. HTML Code Text

        HTML में Code Text का उपयोग हम तब करते हैं। जब हमें अपने किसी भी वेबपेज में Code को Insert करना होता है। उदाहरण के लिए, इस वेबसाइट में हमने कई जगह आपको समझाने के लिए कोड लिखे हुए हैं, और उसके टेक्स्टाइल आपको अलग तरीके से दिख रहे होंगे।
        <code>.........................</code> , code Tag का उपयोग Coding के लिए किया जाता है।

कोड(Code) :

<body>
    <p>This is a Code Text.</p>
    <code>print("Hello World")</code>
</body>

कोड का आउटपुट(Code Output) :

9. HTML Keyboard Shortcut Text

        Keyboard Shortcut Text का भी आउटपुट(Output) Code की तरह ही आता है। इसका उपयोग कीबोर्ड(Keyboard) का शॉर्टकट(Shortcut) को बताने के लिए किया जाता है।

कोड(Code) :

<body>
    <p>Save File Press : <kbd> Ctrl + S </kbd> </p>

</body>

कोड का आउटपुट(Code Output) :


 ऊपर बताई गई जानकारी को और अच्छी तरह से समझने के लिए नीचे दिए वीडियो को देख सकते हैं।

आने वाले समय में हम कोर्स में और भी अपडेट करने वाले है कृपया हमसे जुड़े रहें और अगर कोई सुझाव या सवाल हो तो नीचे कमेंट में जरूर पूछे | 

|| धन्यावद ||