 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML and CSS tutorial में आपका फिर स्वागत है। आज हम लेसन ३ सीखनेवाले हैं।
पिछले लेसन में हमने देखा की HTML की structure कैसी होती है। हम ने tags और elements के बारे में भी सीखा।
आज हम paragraph tag and break tag सीखनेवाले हैं।
Paragraph Tag
आइये paragraph tag से शुरू करेंगे। पहले एक छोटा प्रयोग करते हैं। मैं जो लिख रहा हूँ वह आपको लिखने की जरूरत नहीं है। आप सिर्फ ध्यान से देखिये। हम एक text फाइल ओपन करते हैं। इस फाइल में दो paragraphs हैं। |
| आकृति ३-१. लेसन ३ के लिए टेस्ट फाइल, paragraph tag |
हम इस फाइल को save करते हैं। इसी फाइल को ".html" के नाम से भी save करते हैं। अब windows explorer में जाकर HTML file पर double click करेंगे। इसका output web browser में display होगा। चलिए देखते हैं।
 |
| आकृति ३-२. Output of text file |
ओह ! यह तो अलग ही आया है। सब टेक्स्ट एक ही लाइन में है। Paragraphs तो है ही नहीं।
दोस्तों, यहाँ पर आता है paragraph tag।
तो आज का पहला tag है paragraph tag। एक नयी text file ओपन करते हैं। आप भी अपने कंप्यूटर में एक text file ओपन कीजिये। हम Lesson-०२ ओपन करेंगे और इस में से code copy करेंगे। <!doctype html> se <body> तक कॉपी करते हैं। इस लिए कोड ऐसा होगा।
<!DOCTYPE html>
<html>
<head>
<title>
My HTML Program
</title>
<body>
हमें यह सब tags मालूम है। हम इनको अब अच्छी तरह जानते हैं।
अब हम पहला paragraph शुरू करते हैं। <body> tag के नीचे <p> line 8 tag टाइप कीजिये। पहला paragraph टाइप कीजिये first paragraph 9, केवल दो लाइन्स हैं। यहाँ पर पहला paragraph समाप्त होता है। Close paragraph tag दीजिये - </p>।ine 10।
अब दूसरा paragraph शुरू करते हैं। फिर से <p> line 11 tag दीजिये, दूसरा paragraph टाइप कीजिये second paragraph 12, और paragraph close कीजिये - </p>।ine 13।
 |
| आकृति ३-३. HTML paragraph tag |
Source कोड की PDF फाइल देखने के लिए आकृति ३-३. पर क्लिक कीजिये। इस फाइल को "Lesson-03" नाम से save कीजिये। इसी फाइल को "Lesson-03.html" नाम से save कीजिये। Windows explorer में आइये। HTML document पर double click कीजिये। अब output में हमारे दो paragraphs हैं।
 |
| आकृति ३-४. Output of code with paragraph tags |
तो paragraph tag क्या करता है? यह वेब पेज में paragraphs दिखाता है।
ब्रेक tag
अब break tag सीखेंगे। फिर हमारे script में चलते हैं। दूसरे paragraph में एक शब्द है - "count". यहाँ enter कीजिये और नीचे टाइप कीजिये <br />. यह break tag है। फाइल को Lesson-03 के नाम से save कीजिये। फिर से इसी फाइल को Save As कीजिये और HTML Document save कीजिये। Windows explorer में जाकर HTML Document पर double click कीजिये। Output देखिए। "count" शब्द के बाद लाइन ब्रेक हुई है और बाकी का टेक्स्ट अगले लाइन से शुरू हो रहा है।तो break tag क्या करता है? यह एक लाइन को break करता है और बाकी का टेक्स्ट अगले लाइन से शुरू करता है।
फिर से हमारे script में जाते हैं। हमने दिया हुआ <br /> डिलीट करते हैं और टेक्स्ट को एक ही लाइन में लाते हैं। अब पहला paragraph जहाँ समाप्त होता है वहां जाते हैं। </p> के नीचे break tag <br /> देते हैं। (नीचे दिया हुआ चित्र ३-५ देखिये)।
इस फाइल को text and html में save करते हैं। HTML Document पर double click कीजिये। Output देखिए। अब दो paragraphs के बीच में एक blank line आयी है।
फिर से हम script में जाते हैं। <br /> tag के नीचे दो और <br /> tags देते हैं। फाइल को text and html फाइल में save करते हैं। Source कोड का PDF फाइल देखने के लिए आकृति ३-५. पर क्लिक कीजिये।
 |
| आकृति ३-५. Break tags given after first paragraph |
HTML Document पर double click कीजिये। Output देखिए।
 |
| आकृति ३-६. Output with break tags |
अब दो नयी blank lines इन्सर्ट हुई है।
<br /> tag का उपयोग वेब पेज में blank lines इन्सर्ट करने के लिए होता है।
अब एक महत्वपूर्ण बात: ब्रेक tag को कैसा लिखते हैं? <br />! इस tag को closing tag नहीं होता है। यह एक self ending tag है। यह एक empty element का उदाहरण है।
Important Points:
१. <p> paragraph tag वेब पेज में paragraph दिखता है।२. ब्रेक tag एक लाइन को ब्रेक करता है और बाकी का टेक्स्ट अगले लाइन से शुरू करता है।
३. ब्रेक tag से वेब पेज में एक blank line insert कर सकते हैं।
४. ब्रेक tag self ending tag है। इस को closing tag नहीं होता है। यह एक empty element का उदाहरण है।
लेसन २ लेसन ४
