TechnicalViews in Hindi: HTML Phrases Tags in hindi

Phrase tags को specific purpose के लिए डिज़ाइन किया गया हैं, जो कि basic tags , , <pre> और <tt> जैसे ही दिखाई देते हैं। जैसा कि आपने पिछले अध्याय में देखा होगा। यह चेप्टर आपको सभी महत्वपूर्ण phrase tags की जानकारी देगा, तो आइए उन्हें एक-एक करके देखना शुरू करें।

Emphasized Text: जो भी ... element के भीतर दिखाई देता है, उसी को एम्फासाइज्ड टेक्स्ट(emphasized Text) के रूप में डिस्प्ले किया जाता है।

उदाहरण

<!DOCTYPE html>
<html>

  <head>
     <title>Emphasized Text Example</title>
  </head>
 
  <body>
    <p>The following word uses an <em>emphasized</em> typeface.</p>
  </body>
 
</html>

अाउटपुट
The following word uses an emphasized typeface.

Marked Text: जो भी ... element में दिखाई देता है,उसको येलो इंक(yellow ink) से मार्क करके डिस्प्ले किया जाता है।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
 
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
 
</html>

अाउटपुट
The following word has been marked with yellow

Strong Text: इस ... element के भीतर जो भी दिखाई देगा, वह important text के रूप में डिस्प्ले होगा।

उदाहरण

<!DOCTYPE html>
<html>

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

आउटपुट
The following word uses a strong typeface.

Text Abbreviation: आप इसे opening <abbr> और closing </abbr> tags के अन्दर डालकर किसी टेक्स्ट को abbreviate कर सकते हैं। और यदि यह मौजूद है तो title attribute में इसकी फुल डिस्क्रिप्शन के अलावा कुछ नही होना चाहिए।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
 
   <body>
      <p>My best friend's name is  <abbr title = "Anil Kumar">Anil</abbr>.</p>
   </body>
 
</html>

आउटपुट
My best friend's name is Anil.

Acronym Element: इसमें <acronym> element आपको यह इंडीकेट करेगा, कि <acronym> और </acronym> tags के बीच का टेक्स्ट acronym होगा। वर्तमान में, प्रमुख ब्राउज़र <acronym> element के कंटेंट का रूप नहीं बदलते।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
 
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
 
</html>

आउटपुट
This chapter covers marking up text in XHTML.

Text Direction: इसमें <bdo>...</bdo> element को बाई-डाइरेक्सनल(Bi-Directional) और कंरट टेक्स्ट डाइरेक्सन(text direction) को ओवरराइड करने के लिए उपयोग किया जाता है।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

आउटपुट
This text will go left to right.
This text will go right to left.

Special Terms: इसमें <dfn>...</dfn> element या HTML डेफिनेशन एलिमेंट आपको स्पेसिफाई करने के लिए allows करता है कि आप स्पेशल टर्म का परिचय कर रहे हो। इसका उपयोग पैराग्राफ में इटैलिक शब्दों(italic words) के समान होता है।

आमतौर पर, जब आप <dfn>element का उपयोग पहली बार करेंगे, तो आप पहली बार key term से introduce होगें। हाल ही के ब्राउज़र किसी italic font में <dfn> element को रेंडर करते हैं।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
 
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
 
</html>

आउटपुट
The following word is a special term.

Quoting Text: जब आप दूसरे सोर्स से किसी passage का भाव बताना चाहते हैं, तो आपको इसे <blockquote>...</blockquote> tags के बीच में रखना चाहिए।

किसी <blockquote> element के अंदर text को आम तौर पर आसपास के text के बाएं और दाएं किनारों से इंडेंट किया जाता है। और कभी-कभी इसमें इटैलिसाइज़्ड फॉट (italicized font) का उपयोग करता है

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
 
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
 
</html>

आउटपुट
The following description of XHTML is taken from the W3C Web site:

XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML2.0.

Short Quotations: जब आप किसी सेनटेंस(sentence) के अंदर कोई डबल क्वेट(double quote) जोड़ना चाहते हैं, तो <q>...</q> element का उपयोग करें।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
 
   <body>
      <p>Anil is in Spain, <q>I think I am wrong</q>.</p>
   </body>
 
</html>

आउटपुट

Anil is in Spain, I think I am wrong.

Text Citations: यदि आप किसी Text को quote कर रहे हैं, तो आप उसे ओपनिंग टैग और क्लोजिंग टैग के बीच रखकर सोर्स को इंडीकेट कर सकते हैं।

जैसा कि आप किसी प्रिंट पब्लिकेशन में अपेक्षा करते हैं। जिसमें <cite> element के कंटेंट डिफ़ॉल्ट रूप से इटैलिसाइज्ड टेक्स्ट(italicized text) में रेंडर होते हैं।

उदाहरण

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

आउटपुट
This HTML tutorial is derived from W3 Standard for HTML.

Computer Code: वेब पेज पर appear होने के लिए कोई भी प्रोग्रामिंग कोड को <code>...</code> tags के अंदर रखा जाना चाहिए। क्योकि आम तौर पर <code> element के कंटेंट को मोनोस्पेस फॉन्ट(monospaced font) में प्रजेंट किया जाता है, जैसे अधिकांश प्रोग्रामिंग बाक्स में कोड को।

उदाहरण

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>

आउटपुट
Regular text. This is code. Regular text.

Keyboard Text: जब आप कंप्यूटर के बारे में बात कर रहे हैं। और यदि आप रीडर से यह कहना चाहते हैं कि कुछ टेक्स्ट को enter करें। तो आप इस उदाहरण के रूप में जो भी टाइप करना चाहते हैं, उसको <kbd>...</kbd> element के द्वारा इंडीकेट किया जा सकता है।

उदाहरण

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

आउटपुट
Regular text. This is inside kbd element Regular text.

Programming Variables: यह element आमतौर पर <pre> and <code> elements के साथ कनजंक्शन के रूप में प्रयोग किया जाता है। जो यह इंडीकेट(indicate) करता है कि उस element का content एक variable है।

उदाहरण

<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

आउटपुट
document.write("user-name")

Program Output: इसमें <samp>...</samp> element किसी प्रोग्राम से sample output और script आदि को इंडिकेट करता है। जिसको फिर मुख्य रूप से documenting programming या coding concepts के दौरान उपयोग किया जाता है।

उदाहरण

<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

आउटपुट
Result produced by the program is Hello World!

Address Text: इस <address>...</address> element को किसी भी address को शामिल करने के लिए उपयोग किया जाता है।

उदाहरण

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>B-77-78,Sindhuja Building, Sector-6, Noida,U.P. 201301, India</address>
   </body>
   
</html>