 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका फिर स्वागत है। आज हम लेसन ८ सीखनेवाले हैं।
पिछले लेसन में हमने टेक्स्ट formatting elements सीखे हैं। उस लेसन में हमने टेक्स्ट को bold, italic, underline, superscript, subscript डिस्प्ले किया है।
आज हम तीन विषयों को सीखेंगे. हम देखेंगे की HTML स्क्रिप्ट में comments कैसे लिखते हैं, दूसरी बात - टेक्स्ट को quotation marks में कैसे डिस्प्ले हैं, और तीसरा विषय है वेब पेज में abbreviations कैसे लिखते हैं।
HTML script में comments
HTML स्क्रिप्ट में लिखे हुए comments कोड के बारे में जानकारी देते हैं। इस से HTML कोड में clarity आ जाती है और कोड को समझना आसान होता है।
Comment लिखने के लिए comment tag होता है। यह इस तरह लिखा जाता है -
<!-- इसका opening tag होता है और --> इसका closing tag होता है। ध्यान से देखिये की opening tag में उद्गारवाचक चिन्ह (exclamation sign) होता है लेकिन closing tag में यह नहीं होता।
<!-- के बाद जो भी लिखते हैं वह comment होता है। वह वेब पेज में डिस्प्ले नहीं होता।
अब एक comment लिखेंगे-
<!-- This statement shows how to display text color -->
इस को हम हमारे स्क्रिप्ट में लिखते हैं। एक नयी Notepad फाइल ओपन कीजिये और इस में Lesson-06 का सब टेक्स्ट कॉपी कीजिये।
Heading tag के ऊपर लिखिए -
<!-- This statement shows how to display text color -->
और पहले <p> के ऊपर लिखिए -
<!-- This statement shows how to display background color -->
Lesson-06 में हमने gray के shades डिस्प्ले करने के लिए कोड लिखा है। वह सब डिलीट कीजिये। केवल </body> and </html> रहने दीजिये। अब हमारा कोड ऐसा दिखेगा।
 |
| आकृति ८-१. HTML comment tag |
Source कोड की PDF फाइल देखने के लिए आकृति ८-१. पर क्लिक कीजिये। हमारे फाइल को "Lesson-08" और "Lesson-08" के नाम से save कीजिये। Windows explorer में जाकर HTML document पर डबल क्लिक कीजिये। आउटपुट देखिये।
आप देख सकते हैं की Lesson-06 के आउटपुट में और इस आउटपुट में कुछ भी फरक नहीं है। हम ने केवल कॉमेंट्स लिखे हैं। इनका आउटपुट पर कुछ भी असर नहीं होता है।
Displaying text in quotation marks:
अब हम वेब पेज में quotation marks देंगे। दुसरे </p> के बाद लिखिये:
<p>
He said, <q>Let us go to picnic today</q>
</p>
टेक्स्ट को quotation marks देने के लिए <q> का उपयोग किया जाता है।
 |
| आकृति ८-२. HTML q tag for quotation marks |
Source कोड का PDF फाइल देखने के लिए आकृति ८-२. पर क्लिक कीजिये। फिर से स्क्रिप्ट को "Lesson-08" के नाम से save कीजिये और "Lesson-08.html" के नाम से save कीजिये।
 |
| आकृति ८-३. Text displayed in quotation marks |
HTML abbreviations
अब हम यह देखते हैं के वेब पेज में abbreviations कैसे डिस्प्ले करते हैं। पहले एक abbreviation देखेंगे। हमको मालूम है की HTML का full form होता है Hypertext Markup Language. HTML abbreviation है।HTML में abbreviations लिखने के लिए abbr tag होता है। जैसे
<abbr title= "Hypertext markup language">HTML</abbr> scripts display web pages.
इस कोड को ध्यान से देखिये। यहाँ हमने abbr tag में title दिया है - Hypertext markup language। इसको quotation marks में लिखते हैं। Opening tag के बाद हमने लिखा है "HTML" और उसके बाद closing tag दिया है। इसलिए वेब पेज में "HTML" डिस्प्ले होगा. इस पर माउस को ले जाने के बाद उसका फुल फॉर्म डिस्प्ले होगा। वेब पेज में यह वाक्य डिस्प्ले होगा। "HTML scripts display web pages"।
अब हमारे स्क्रिप्ट में इसे लिखेंगे। हमारे Lesson-08 के कोड में जाइये। हम ने last paragraph ऐसा लिखा है।
<p>
He said, <q>Let us go to picnic today</q>
</p>
इसके निचे लिखिए:
<br />
<p>
<abbr title= "Hypertext markup language">HTML</abbr> files display web pages.
</p>
फिर से इस फाइल को "Lesson-08" के नाम से save कीजिये और "Lesson-08.html" के नाम से save कीजिये। Source कोड का PDF फाइल देखने के लिए आकृति ८-३. पर क्लिक कीजिये।
 |
| आकृति ८-४. HTML abbr tag |
HTML document पर डबल क्लिक कीजिये। इसका आउटपुट देखिये।
 |
| आकृति ८-५. HTML abbr tag, abbreviation in web page |
इस में HTML शब्द के निचे एक dotted लाइन आयी है। यह लाइन बताती है की यह शब्द एक abbreviation है। इस पर माउस को लेकर आइये, full form डिस्प्ले होगा।
Important Points:
१. HTML में comment लिखने के लिए "!--" देते हैं। "!--" के बाद उस लाइन में जो भी लिखते हैं वह comment होता है।२. Comments HTML स्क्रिप्ट में कोड के बारे में information देते हैं जो code को समझने में बहुत उपयोगी होता है।
३. हम टेक्स्ट को quotation marks में display कर सकते हैं। इस के लिए q tag होता है।
४. abbr tag वेब पेज में abbreviation डिस्प्ले करने के लिए होता है। वेब पेज में डिस्प्ले किये गए abbreviation पर माउस लाने पर उसका full form डिस्प्ले होता है।
इसका आउटपुट देखिये। हमारा वाक्य में quotation mark आया है।
लेसन ७ लेसन ९
