Text Formatting in HTML - Phrase Elements - Learn HTML in hindi

HTML में Text Formatting - Phrase Elements

                 

The < b > Element

                      हमें जिस किसी भी Text को Bold दिखाना होता है, उसे हम <b></b> Tag Pair के बीच लिखते हैं। जैसे:

This is normal text - <b>and this is bold text</b>

            

                         इस Elements को उतना उपयोग में नहीं लिया जाता है, जितना पहले बताए गए Elements को उपयोग में लिया जाता है। जैसाकि इस Element के नाम से ही हम समझ सकते हैं, कि इन Elements को उनके Contents यानी Phrase को Describe करने के लिए Design किया गया है:

• <em> और <strong> emphasis के लिए
• <blockquote>, <cite> और <q> quotations और citations के लिए
• <abbr>, <acronym> और <dfn> abbreviations, acronyms, और key terms के लिए
• <code>, <kbd>, <var> और <samp> computer code और information के लिए
• <address> addresses के लिए

                           इन Phrase Elements में कुछ Elements एक समान काम करते हैं, जिनमें से कुछ को हम पहले ही देख चुके हैं। 

                            इन Elements का प्रयोग कम ही किया जाता है, इसलिए इन Elements को हम केवल अपनी जानकारी के लिए ही देख रहे हैं, ताकि जब भी जरूरत हो, हम इस Elements को उपयोग में ले सकें।

                             और जहां भी सम्‍भव हो, हमें इन Elements को जरूर उपयोग में लेना चाहिए, क्योंकि Google जैसे Search Engines हमारे Web Page के Contents को जब Read करते हैं, तब Presentational Elements के स्थान पर Phrase Elements को ज्यादा महत्व देते हैं। इसलिए यदि हम हमारे Page की Search Engine Ranking बढाना चाहते हैं, तो जहां भी सम्‍भव हो, हमें इन Phrase Elements को जरूर उपयोग में लेना चाहिए।

 

The <em> Element

इस Element के बीच लिखे Texts Italic दिखाई देते हैं और ये Element, Presentational Element <i>  की तरह काम करता है। इसे हम निम्नानुसार उपयोग में ले सकते हैं:

<em>This text is Italic </em>

 

The <strong> Element

इस Element के बीच लिखे Texts Bold दिखाई देते हैं और ये Element, Presentational Element <b>  की तरह काम करता है। इसे हम निम्नानुसार उपयोग में ले सकते हैं:

<strong>This text is bold </strong>

The <abbr> Element

                              कई बार हमें बडे नामों को उनके छोटे रूप यानी Short Form से Represent करने की जरूरत पडती है। उदाहरण के लिए यदि हम World Health Organization शब्द को WHO शब्द से Represent कर रहे हों, तो World Health Organization शब्द के इस छोटे रूप को इस Element के बीच लिख सकते हैं। जब हम इस तरह का कोई Abbreviation बना रहे होते हैं, तब उस छोटे शब्द के पूरे नाम को इस Element के Title Attribute में जरूर Define करना चाहिए। जैसे:

 

<abbr title="World Health Organization">WHO</abbr>

                  

                              यदि हम हमारे Document में किसी Foreighn शब्द को Abbrevitate कर रहे हों, तो हम इस जरूरत को पूरा करने के लिए xml:lang Attribute का भी प्रयोग कर सकते हैं। 

                   इस समय जितने भी Web Browsers उपयोग में आ रहे हैं, वे सभी Browsers इस Element के Content की Appearance को किसी भी तरह से Change नहीं करते हैं, इसलिए इस Element को उपयोग में लेने का हमें कोई प्रत्‍यक्ष प्रभाव अपने Web Browser में दिखाई नहीं देता है, लेकिन इस Element का उपयोग Google जैसे Search Engine जरूर करते हैं, इसलिए Google जैसे Search Engine में Ranking प्राप्त करने के लिए हमें हमारे Abbreviation को उपरोक्त तरीके से ही उपयोग में लेना चाहिए व पूरे नाम को Title Attribute में  जरूर Specify करना चाहिए।

                     एक बात ध्यान रखें कि हम यहां पर Abbraviation की बात कर रहे हैं, जहां हम स्वयं हमारी किसी जरूरत को पूरा करने के लिए किसी शब्द को नया या छोटा नाम देते हैं, ना कि किसी शब्द के छोटे नाम को Represent करते हैं। 

                         उदाहरण के लिए सामान्यतया हम Doctor को Dr. शब्द से Represent करते हैं, लेकिन हम इसे Abbraviation नहीं कह सकते। इसे हम Acronym कहते हैं और इसे Represent करने के लिए हमें हमारे अगले Element <acronym>  का प्रयोग करना होता है!

 

The <acronym> Element

                      सामान्यतया Hyper Text Markup Language को HTML शब्द से Represent किया जाता है। इसलिए HTML शब्द “Hyper Text Markup Language” का Acronym है। जब हम किसी Acronym का प्रयोग करते हैं, तब हमें <acronym> Element का प्रयोग करना होता है और इस Element के Title Attribute में भी हमें Acronym के पूरे नाम का प्रयोग करना चाहिए। जैसे:

<acronym title=” Hyper Text Markup Language”>HTML</acronym>

                 इस समय जितने भी Web Browsers उपयोग में आ रहे हैं, वे सभी Browsers इस Element के Content की Appearance को भी किसी भी तरह से Change नहीं करते हैं, इसलिए इस Element को उपयोग में लेने का हमें कोई प्रत्‍यक्ष प्रभाव अपने Web Browser में दिखाई नहीं देता है, लेकिन इस Element का उपयोग Google जैसे Search Engine जरूर करते हैं, इसलिए Google जैसे Search Engine में Ranking प्राप्त करने के लिए हमें हमारे Acronym को उपरोक्त तरीके से ही उपयोग में लेना चाहिए व पूरे नाम को Title Attribute में  जरूर Specify करना चाहिए।

 

The <dfn> Element

                      इस Element का प्रयोग करके हम ये Specify करते हैं कि हम किसी Special Term को Define कर रहे हैं। हम जब भी अपने Document में किसी नए शब्द को Introduce करते हैं, तब उसे इस Element के बीच लिख कर Web Browser को बता सकते हैं, कि हमने एक नया शब्द उपयोग में लिया है। जैसे:

You are learning html tutroial on <dfn>Indian books publication</dfn>

                 जब हम इस Element को उपयोग में लेते हैं, तब Web Browser हमारे द्वारा Define किए गए शब्द को थोडा Highlight करके Show करता है।

 

The <blockquote> Element

                   जब हमें हमारे Document में किसी Content की Indenting करनी होती है, तब हम उस Content को इस Element के बीच लिखते हैं। ये Element अपने Content की Indenting Left व Right दोनों तरफ से करता है। जैसे:

<blockquote> For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization. </blockquote>

The <q> Element

                        जब हमें हमारे Document में किसी Character के साथ Quote को Show करने की जरूरत पडती है, तब हम इस Element का प्रयोग करके Web Browser में एक Double Quote को Show कर सकते हैं। जैसे:

WWF's goal is to: <q> Build a future where people live in harmony with nature.</q> We hope they succeed.

                 यदि इस Element का प्रयोग करने के बावजूद दिखाई देने वाला Text Double Quotes के बीच दिखाई नहीं देता है, तो इस Element के बीच लिखे जाने वाले Content को Double Quotes के बीच लिखना चाहिए। ये Element भी Search Engine के लिए उपयोगी होता है।

 

The <cite> Element

                      जब हम हमारे Document में किसी Content के Resource की जानकारी देना चाहते हैं, तब उस Resource की जानकारी देने वाले Web Page या Site का Web Address हमें इस Element के बीच लिखना चाहिए। जब हम किसी Web Address को Specify करना चा‍हते हैं, तब हमें इस Element को <a> Element Pair के बीच लिखना चाहिए। जैसे:

WWF has been protecting the future of nature. <a href=http://www.worldwildlife.org><cite> WWF </cite></a>

                      इस Element के बीच लिखा गया Search Engine के लिए उपयोगी होता है, क्योंकि Search Engine इस Element के बीच लिखे गए Resource को किसी Required Keyword की Searching करने के लिए उपयोग में लेता है। सामान्यतया इस Element के बीच लिखे गए Texts Italic Form में दिखाई देते हैं। 

                <blockquote>, <q> व <cite> Elements को हम निम्नानुसार किसी HTML Document में उपयोग में ले सकते हैं:

<html> <head> <title>learn HTML in hindi – by Indian books publication</title> </head> <body> <h2>The blockquote Element</h2> <p>The blockquote element specifies a section that is quoted from another source.</p><p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html">  For 50 years, WWF has been protecting the future of nature. </blockquote>  <p> <b>Note:</b>  Browsers usually indent blockquote elements. </p> <h2>The q Element</h2> <p>The q element defines a short quotation.</p> <p>WWF's goal is to: <q> Build a future where people live in harmony with nature.</q> We hope they succeed.</p> <p><b>Note:</b> Browsers insert quotation marks around the q element.</p> </body> </html>

 

The <code> Element

                            जब हम हमारे Document में किसी Programming Language के Codes को Render करना चाहते हैं, तब हम इस Element को उपयोग में ले सकते हैं। इस Element के बीच लिखे गए सभी Contents की Formatting ज्‍यों की त्‍यों दिखाई देती है और इनके बीच लिखे गए Texts Monospaced Font में दिखाई देते हैं।

                    एक बात ध्यान रखें कि हम इस प्रयोग के Elements के बीच Opening व Closing Angle Brackets को दिखाने के लिए केवल <  व > Symbol का प्रयोग नहीं कर सकते हैं, बल्कि Left Angle Bracket के लिए हमें &lt व Right Angle Bracket के लिए &gt Code को उपयोग में लेना जरूरी होता है, क्योंकि HTML Web Page में इन दोनों Angle Brackets के बीच हमेंशा किसी ना किसी HTML Tag को लिखा जाता है। उदाहरण :

<html> <head> <title> learn HTML in hindi – by Indian books publication </title>   </head> <body> <code> &lt; HTML &gt; </code> <br /> <code> &lt; head &gt;</code> <br /> <code>&lt; p &gt; this is a new paragraph &lt; /p &gt;</code> <br /> </body> </html>

Text Formatting in HTML - Presentational Elements - Learn HTML in hindi

HTML  में Text Formatting - Presentational Elements

                        जिस तरह से हम किसी Word Processor में अपने Text को अच्‍छी तरह से प्रदर्शित करने के लिए विभिन्न प्रकार के Formatting Options प्रयोग करते हैं और विभिन्न Texts को Highlight करने के लिए Bold, Italic, Underline आदि करते हैं, ठीक उसी तरह से हम हमारे Web Page के किसी Text को भी Bold, Italic, Underline आदि करने के लिए विभिन्न प्रकार के Elements का प्रयोग कर सकते हैं। 

                     इन सभी Formatting Elements को Presentational Elements कहते हैं। अब हम इसी तरह के विभिन्न Presentational Elements के बारे में जानेंगे। 

                         ये Elements मूल रूप से केवल Document के Presentation से सम्बंधित होते हैं और Document के Structure से इनका कोई सम्बंध नहीं होता है। ये सभी Elements सभी Universal व UI Event Attributes को उपयोग में ले सकते हैं।

The < b > Element

               हमें जिस किसी भी Text को Bold दिखाना होता है, उसे हम <b></b> Tag Pair के बीच लिखते हैं। जैसे:

<b>This text is bold </b> <strong>This text is bold </strong>

               

इस Element को Use करने का मतलब ये नहीं है कि Browser किसी Text को Bold दिखाने के लिए Use किए जाने वाले Font का Boldface Version Use करता है, बल्कि कुछ Browsers कुछ Special Algorithms का प्रयोग करके Text को Bold बना देते हैं। 

              जबकि कुछ Browsers Text का Boldface Version Use करते हैं जबकि कुछ Browsers किसी और तरीके से हमारे Text को Highlight करते हैं। 

                      इस Element के स्थान पर हम <strong> Element का भी प्रयोग कर सकते हैं, जो Browser को ये बताते हैं कि उसके Content Bold Emphasis के रूप में Display होने चाहिए।

 

The < i > Element

                      हमें जिस किसी भी Text को Italic दिखाना होता है, उसे हम <i></i> Tag Pair के बीच लिखते हैं। जैसे: 

<i>This text is Italic </i> <em>This text is Italic </em>

                       इस Element के स्थान पर हम <em> Element का भी प्रयोग कर सकते हैं, जो Browser को ये बताते हैं कि उसके Content Italic Emphasis के रूप में Display होने चाहिए।

 

The < u > Element (Deprecated)

                   हमें जिस किसी भी Text को Underline दिखाना होता है, उसे हम <u></u> Tag Pair के बीच लिखते हैं। जैसे:

<u>This text is Underlined </u>

                    

                             इस Effect को प्राप्त करने के लिए हमें इस Element को Use नहीं करना चाहिए, बल्कि CSS Style को Use करना चाहिए।

The < sub > Element

जब हम किसी Text को इस Element के साथ लिखते हैं, तब वह Text हमें Subscript के रूप में दिखाई देता है। Subscript के रूप में दिखाई देने वाले Text की Size Actual Font की Size के समान ही होता है, लेकिन Font की Height Actual Font की Height से आधी ही होती है। इस Element को हम निम्नानुसार Use कर सकते हैं:

This text is <sub>subscript</sub> text.

The < sup > Element

                                 जब हम किसी Text को इस Element के साथ लिखते हैं, तब वह Text हमें घात (superscripted) के रूप में दिखाई देता है। घात के रूप में दिखाई देने वाले Text की Size Actual Font की Size के समान ही होता है, लेकिन Font की Height Actual Font की Height से आधी ही होती है। इस Element को हम निम्नानुसार Use कर सकते हैं:

This text is <sup>superscript</sup> text.

The < s > and < strike > Elements (Deprecated)

                     हमें जिस किसी भी Text को एक काटती हुई Line के साथ दिखाना होता है, उसे हम <s></s> Tag Pair या <strike></strike> Tag Pair के बीच लिखते हैं। जैसे:

<s> This text is strike </s> <strike>This text is strike </strike>

                                 ये दोनों ही Deprecated Elements हैं, इसलिए इन्‍हें CSS File में ही Use करना चाहिए, हालांकि IE व Netscape Navigator अभी भी इन Elements को Support करते हैं।

The < big > Element

                                            जब हम किसी Text को इस Element के साथ लिखते हैं, तब वह Text अन्‍य Text की तुलना में एक Point बडा होता है। यदि हम किसी Font की Largest Size को Use कर रहे हैं, तो फिर इस Element का Browser पर कोई Effect हमें दिखाई नहीं देता है। हम कई <big> Elements को एक दूसरे के अन्दर Nest कर सकते हैं। इस Element को हम निम्नानुसार Use कर सकते हैं:

this<big>text<big>is<big>big</big></big></big>

 

The < small > Element

जब हम किसी Text को इस Element के साथ लिखते हैं, तब वह Text अन्‍य Text की तुलना में एक Point छोटा होता है। यदि हम किसी Font की Smallest Size को Use कर रहे हैं, तो फिर इस Element का Browser पर कोई Effect हमें दिखाई नहीं देता है। हम कई <small> Elements को एक दूसरे के अन्दर Nest कर सकते हैं। इस Element को हम निम्नानुसार Use कर सकते हैं:

this<small>text<small>is<small>small</small></small></small>

 

The < tt > Element

                         जब हम किसी Text को इस Element के साथ लिखते हैं, तब वह Text हमें Monospaced Font में दिखाई देता है। Monospaced Font ऐसा Font होता है, जिसमें विभिन्न Characters की Width की Size एक समान नहीं होती है। उदाहरण के लिए इसमें Character m की Width  Character i की Widht से ज्यादा होती है। Monospaced Font का एक Common Example Courier Family के Fonts है। इस Element को हम निम्नानुसार Use कर सकते हैं: 

<tt>This text is Monospaced Font </tt>

 

The < hr / > Element

                       ये Element पूरे Page पर Left से लेकर Right तक एक Horizontal Line Create करता है। इस Element को हम निम्नानुसार Use कर सकते हैं:

<hr />

इन सभी Elements को हम निम्नानुसार एक HTML पेज के लिए में प्रयोग कर सकते हैं :

<html> <head> <title> learn HTML in hindi – by Indian books publication </title> </head> <body> <hr /> <b>This text is bold </b> <strong>This text is bold </strong><br /> <i>This text is Italic </i> <em>This text is Italic </em>  <br /> <u>This text is Underlined </u> <br /><br /> This text is <sup>superscript</sup> text.<br /> This text is <sub>subscript</sub> text. <br />  <hr /> <s> This text is strike </s> <strike>This text is strike </strike><br />  <hr /> this<big>text<big>is<big>big</big></big></big><br />   this<small>text<small>is<small>small</small></small></small> <br /> <tt>This text is Monospaced Font </tt> <br /> <hr /> </body> </html>