Basic Text Formatting in HTML: अभी तक हमने विभिन्न प्रकार की जरूरी Basic बातों को जाना। अब हम Web Browser में दिखाई देने वाले Contents के Texts को Format करने से सम्बंधित विभिन्न प्रकार के Tags को उपयोग में लेना सीखेंगे।
XHTML में कई ऐसे Elements हैं, जिनका प्रयोग Document के Texts को Markup करने व Structure करने के लिए किया जाता है। लेकिन एक बात ध्यान रखें कि हम जो भी Document Create करते हैं, वे सभी Documents विभिन्न प्रकार के Browsers में अलग तरीके से दिखाई देते हैं। इसलिए यहां हम केवल Text को Markup व Structure करने से सम्बंधित Elements की बात कर रहे हैं, Document के Appearance से सम्बंधित किसी तरह की कोई जानकारी हम यहां प्राप्त नहीं कर रहे हैं। ये जानकारी हम CSS Files Create करते समय प्राप्त करेंगे। इस Section में हम जिन Basic Text Formatting Elements के बारे में जानेंगे, वे निम्नानुसार हैं:
- h1, h2, h3, h4, h5, h6
- p, br, pre
यदि हम चाहते हैं कि लोग हमारे Web Page के Content को ठीक तरह से पढ सकें, तो हमें हमारे Text के Structuring का विशेष ध्यान रखना होता है क्योंकि ज्यादा बडे, ज्यादा छोटे, बिखरे हुए और जो Text ठीक से दिखाई ना दे, ऐसे Text को लोग नहीं पढते हैं। इसलिए उपरोक्त Elements का प्रयोग करके हम हमारे Document के Texts को इस तरह Manage कर सकते हैं, ताकि हमारे Content को पढना व समझना लोगों के लिए आसान हो।
Whitespaces and Flow
इससे पहले कि हम हमारे Text को Markup करना सीखें, हमारे लिए ये समझ लेना जरूरी है कि XHTML हमारे द्वारा हमारे Content में लिखे गए Extra Spaces को नहीं पहचानता है। यानी यदि हम किसी Paragraph में दो शब्दों के बीच एक से ज्यादा Spaces रखते हैं, तो भी XHTML उन Extra Spaces को Ignore कर देता है और By Default दो शब्दों के बीच केवल एक ही Space दिखाई देता है। इस प्रक्रिया को Whitespace Collapsing कहा जाता है।
ठीक इसी तरह से यदि हम हमारे Source Paragraph में एक New Line लेते हैं, तो XHTML उस New Line को भी Ignore कर देता है और हमारे Source Paragraph में ली गई New Line या New Paragraph का Effect हमारे Web Browser में नहीं आता है। इस प्रक्रिया को हम निम्न उदाहरण प्रोग्राम द्वारा समझ सकते हैं:
<html> <head> <title>HTML – Fast Track Course </title> </head> <body> <h1>HTML – Introduction </h1> <p> यदि हम चाहें, तो विभिन्न CSS Rules को HTML Page के <head> Element में भी लिख सकते हैं, लेकिन इस तरीके की तुलना में एक अलग CSS File Create कर लेना ज्यादा सुविधाजनक होता है, क्योंकि इस एक ही CSS File को हम एक से ज्यादा Pages में उपयोग में ले सकते हैं, जबकि यदि हम CSS Rules को <head> Element के बीच लिखेंगे, तो हर Web Page के लिए हमें बार-बार समान CSS Rules को लिखना पडेगा। </p> </body> </html>
यदि हम इस Example को Web Browser में Run करें, तो हमें निम्नानुसार Output प्राप्त होता है, जिसमें कोई भी Extra Space नहीं है, जबकि हमने हमारे Source Web Page में शब्दों के बीच में काफी Spaces दिए हैं और नए Paragraphs भी लिए हैं।
XHTML की इस विशेषता का फायदा ये है कि हमारे Source File में जिस तरह से चाहें, उस तरह से Contents व Codes को लिख सकते हैं, जिसका प्रभाव Web Browser पर नहीं पडता है।
Heading Creation – <hn> Elements
हम चाहे जिस प्रकार का Document Create कर रहे हों, उनमें किसी ना किसी तरह का Heading जरूर होता है, जो हमारे Content के Theme को सरल तरीके से Represent करने का काम करते हैं। जब Content काफी बडा होता है, तब उस Content को विभिन्न प्रकार की Heading के अन्तर्गत लिखकर हम हमारे Content को ज्यादा बेहतर तरीके से Represent कर सकते हैं।
XHTML Document में हम 6 Level तक की Heading बना सकते हैं, जिनके लिए हमें <h1>,<h2>,<h3>,<h4>,<h5> व <h6> Elements Use कर सकते हैं। <h1> Element के बीच लिखे गए Text अन्य सभी Headings की तुलना में ज्यादा बडे दिखाई देते हैं और सभी Headings की Size क्रम से कम होती जाती है।
हालांकि हम चाहें तो CSS Rules का प्रयोग करके इन सभी Headings की Size, Color आदि को Change कर सकते हैं। इन सभी Heading Elements में हम सभी Universal Attributes का प्रयोग कर सकते हैं, जो कि निम्नानुसार हैं:
align class id style title dir lang xml:lang
<html> <head> <title>HTML – Fast Track Course </title> </head> <body> <h1>This is Heading 1</h1> <h2>This is Heading 1</h2> <h3>This is Heading 1</h3> <h4>This is Heading 1</h4> <h5>This is Heading 1</h5> <h6>This is Heading 1</h6> </body> </html>
The align Attribute (Deprecated)
हम हमारी Heading को Left, Center अथवा Right में से जिस स्थान पर Display करना चाहते हैं, align Attribute के साथ Left, Right अथवा Center में से किसी मान को Specify करके हम अपनी Heading को उसी स्थान पर Display कर सकते हैं। चूंकि ये Attribute Document के Structure से सम्बंधित नहीं है, बल्कि Document के Style से सम्बंधित है, इसलिए इस Attribute को XHTML से Deprecate करके Cascading Style Sheet में Include कर लिया गया है।
Paragraph Creation – <p> Element
ये Element हमें अपने Text को Structure करने का एक और तरीका प्रदान करता है। हमें जिस किसी भी Text को Paragraph के रूप में Render करना होता है, उस Paragraph Text को हम <p></p> Tag Pair के बीच लिख सकते हैं। Browser जब भी किसी <p> Tag को प्राप्त करता है, वह अगले Paragraph के Content को Display करने से पहले एक नई Insert कर देता है। इसलिए हर Paragraph एक नई Line से शुरू होता है। इस <p> Elements के साथ भी हम सभी निम्न Universal Attributes का प्रयोग कर सकते हैं:
align class id style title dir lang xml:lang
<html> <head> <title>HTML – Fast Track Course </title> </head> <body> <p>This is First Paragraph</p> <p>This is Second Paragraph</p> <p>This is Third Paragraph</p> </body> </html>
Line Break Creation – <br /> Element
हम हमारे Content को जब भी कभी एक नई Line में Display करवाना चाहते हैं, तब हम इस Element का प्रयोग कर सकते हैं। इस Element का कोई Closing Tag नहीं होता है बल्कि एक ही Tag में Tag के नाम के बाद एक Space देकर Forword Slash का प्रयोग किया जाता है, जो कि Tag के अन्त को Represent करता है। इस प्रकार के Tags, जिनका कोई Closing Tag ना हो, Empty Tags कहलाते हैं। यदि हमें हमारे Text के बीच एक से ज्यादा Blank Lines की जरूरत हो, तो हम इस Element को एक से ज्यादा बार उपयोग में ले सकते हैं।
यदि हम <p> Element का प्रयोग ना करें तो ये Element Paragraph Element की तरह का ही Effect देता है। लेकिन जब हम <p> Element का प्रयोग नहीं करते हैं, तब हमें पता नहीं चल पाता है कि कौनसा Paragraph कहा से शुरू हो रहा है। इसलिए Strict XHTML में <br /> Element को केवल किसी Block Level Element के साथ ही Use किया जा सकता है। Block Level Elements के बारे में हम बाद में जानेंगे, जहां <p> भी एक Block Level Element होता है। इस Element के साथ हम Core Attributes का प्रयोग करने के साथ ही clear Attribute का भी प्रयोग कर सकते हैं, जिसका प्रयोग Images के साथ किया जाता है और Images के बादे में हम आगे जानेंगे।
clear class id style title
<html> <head> <title>HTML – Fast Track Course </title> </head> <body> This is First Line Break<br/> This is Second Line Break<br /><br /> This is Third Line Break<br /> </body> </html>
Preformatted Text Creation – <pre> Element
कई बार हम चाहते हैं कि जिस तरह से हम किसी Text को Source File में लिख रहे हैं, वह Text ज्यों का त्यों Browser में दिखाई दे, क्योंकि हमारे Texts को Web Browser स्वयं ही Wrap करता रहता है और हम चाहते हैं कि Browser हमारे Text को Automatically Wrap ना करे। इस तरह की जरूरत को पूरा करने के लिए हम <pre> Element का प्रयोग कर सकते हैं। इस Element के बीच लिखा गया कोई भी Text ज्यों का त्यों Web Browser में Render होता है। सामान्यतया ज्यादातर Browsers इस Element में लिखे गए Contents को Default रूप से Monospaced Font में ही Display करते हैं।
<pre> Element का सबसे Common उपयोग Tabular Data को बिना Tables का प्रयोग किए हुए Table की तरह Display करने व किसी Programming Language के Computer Codes को ज्यों का त्यों Display करने के लिए किया जाता है।
<html>
<head>
<title>HTML – Fast Track Course </title>
</head>
<body>
<pre>
void main()
{
printf(“Hello HTML”);
}
</pre>
</body>
</html>
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
