गुरुवार, 25 मार्च 2010

सिखें एच.टी.एम.एल. प्रोग्रामिंग

 सिखें एच.टी.एम.एल. प्रोग्रामिंग

एच.टी.एम.एल. का पूर्ण अर्थ हाइपर टेक्‍स्‍ट मार्कअप लैंगवेज है। एमच.टी.एम.एल. कोड बेवपेज प्रोग्रामिंग का आधारभूत संरचना होती है। वेबपेज बनाने में एच.टी.एम.एल. टैग्‍स का जरूर प्रयोग होता है किन्‍तु सामान्‍यत: यह टैग्‍स वेबपेज पर प्रदर्शित नहीं होते हैं। 
<html>
<head>
<title>rajbhashagyandhara.blogspot.com</title>
</head>
</html>
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
   
वेबपेज के आरंभ एवं अंत में लिखे गए कोड को टैग्‍स कहा जाता है। यही एच.टी.एम.एल. प्रोग्रामिंग के आधार होते हैं। बिना फारवर्ड स्‍लैश वाले टैग अर्थात < > तथा फारवर्ड स्‍लैशयुक्‍त टैग यानी </> को क्रमश: फारवर्ड तथा एंडिंग टैग्‍स कहते हैं इन दो टैग्‍स के मध्‍य ही विविध एच.टी.एम.एल. टैग्‍स का प्रयोग कर टैक्‍स्‍ट एवं ग्राफिक्‍स प्रोग्राम्ड या प्रदर्शित किए जाते हैं। सभी वेबपेज में अनिवार्यत: यह दो टैग्‍स होते हैं। उपरोक्‍त उदाहरण में यह देखा जा सकता है कि आरंभिक दो टैग्‍स अर्थात <html>,<head> व अंतिम दो  टैग्‍स के मध्‍य में दो नये एच.टी.एम.एल. टैग्स क्रमश: <title></title> लिखे गए हैं। यह टैग्‍स आपके वेबपेज को परिलक्षित करते हैं तथा इन दो टैग्‍स के बीच वह नाम लिखा जाता जो आप अपने वेबपेज का रखना चाहते हैं। उदाहरणार्थ यहॉं rajbhashagyandhara.blogspot.com को वेबपेज का नाम बनाया गया है। इसे एच.टी.एम.एल. प्राग्रामिंग में हेड कहा जाता है।
वेबपेज की हेडिंग में अन्‍य बहुत सारे टैग्‍स हो सकते हैं जो कि वेबपेज में समाहित सामग्री तथा फार्मेटिंग को प्रभावित करती हैं। इसमें की-वर्ड का समावेश हो सकता है जो कि सर्चिंग में सहायक हो सकते हैं।
बोल्‍ड, इटेलिक, इन्‍डरलाइन तथा एमफेसिस टेग्‍स 
<b>,<i>,<u> तथा<em> आदि कुछ महत्‍वपूर्ण टैग्‍स हैं जो सामान्‍यत: अधिकांशत: फार्मेटिंग हेतु प्रयोग में लाए जाते हैं। इन टैग्‍स से पाठ्य को क्रमश: बोल्‍ड, इटेलिक, अनडरलाइन तथा एमफेसिस प्रभाव दिया जाता है। यहॉं उदाहरण में उपरोक्‍त टैग्‍स का प्रयोग किया गया है। <br> टैग्‍स का प्रयोग लाइन ब्रेक कर नए लाइन से पाठ्य आरंभ करने हेतु किया जाता है।
<html>
<head>
<title>rajbhashagyandhara.blogspot.com</title>
</head>
<body>
<b>my</b> <em>first</em><i> post</i>
<br>
<u>rajbhashagyandhara.blogspot.com</u>
</body>
</html>
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
 
हेडिंग्स एवं पैराग्राफ टैग्‍स
अगला महत्‍वपूर्ण टैग्‍स हैं पेराग्राफ टैग्‍स <p>  bldk iz;ksx u, iSjkxzkQ dks त  इसका प्रयोग वेबपेज प्रदर्शित पाठ्य में  नया पैराग्राफ बनाने के लिए किया जाता है। इस टेग का प्रयोगकर्ता आवश्‍यकता अनुसार उपयोग कर सकता है। इसको निम्‍नांकित कोड में सहजता से समझा जा सकता है।
<html>
<head>
<title>rajbhashagyandhara.blogspot.com</title>
</head>
<body>
<b>my</b> <em>first</em><i> post</i>
<br>
<u>rajbhashagyandhara.blogspot.com</u>
<p> राजभाषा विभाग, भारत सरकार द्वारा राजभाषा हिन्दी को सर्वव्यावपी बनाने तथा युनिकोड में हिन्दी टंकण को प्रोत्साहित करने हेतु समय-समय पर परिपत्र आदि परिचालित किए जाते हैं। वस्तुत: युनिकोड स्क्रीप्ट में ही हिन्दी भाषा की प्रगति संभव है क्योंकि युनिकोड में टंकित पाठ्यसामग्री को देखने अथवा पढ़ने के लिए कम्‍प्‍यूटर पर अलग से हिन्दी फॉन्ट् इन्स्‍टाल करने की आवश्याकता नहीं होती है । युनिकोड में टंकित पाठ्यसामग्री को वेबसाइट पर अपलोड करना तथा पढ़ पाना संभव हो पाता है। वर्तमान में युनिकोड फॉन्ट तो डिफाल्टत फॉन्ट के रूप में माइक्रोसाफ्ट कम्पनी द्वारा निर्मित माइक्रोसाफ्ट 2000 तथा उसके बाद के संस्करण वाले सॉफ्टवेयरों में विद्यमान रहता है।</p>
</body>
</html>
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
 
वेबपेज में विविध तरह के हेडिंग्स हो सकते हैं तथा इनका प्रयोग वेबपेज को सुव्‍यवस्थित करने हेतु किया जा सकता है। हेडिंग्‍स को <h>  टैग्‍स से परिलक्षित किया जाता है। हेडिंग्‍स की श्रेणी <h1>  से आरम्‍भ होकर <h6> पर समाप्‍त होती है। इनके प्रयोग के अनुसार ही हेडिंग्‍स का आकार निर्धारित होता है।  निम्‍न उदाहरण से यह स्‍पष्‍ट हो जाता है:-
<h1>blogspot.com</h1>
<h2>santosh</h2>
<h3>kapil</h3>
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
 
लिस्‍ट
अनआडर्ड, आर्डड तथा डेफिनेशन नामक 3 प्रकार के लिस्‍ट एच.टी.एम.एल. में समर्थित होते हैं।  इनमें प्रथम प्रकार का लिस्‍ट बुलेटेड अथवा अनआर्डड कहलाता है जिसे <ul>टैग्‍स से परिलक्षित किया जाता है। <il> टैग्‍स आर्डड व अनआडर्ड दोनों में लिस्‍ट आइटम को प्रदर्शित करने हेतु प्रयुक्‍त होता है। अनआडर्ड लिस्‍ट का प्रोग्रामिंग कोड निम्‍नानुसार होता है:-
<ul>
<li>santosh</li>
<li>kshitij></li>
<li>mamta</li> 
</ul>
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
दूसरे प्रकार का लिस्‍ट नम्‍बरड अथवा आर्डड लिस्‍ट होता है जिसे <ol> टैग्‍स से प्रतिबिंबित किया जाता है जिसका प्रोग्रामिंग कोड निम्‍नानुसार है:-
<ol>
<li>santosh</li>
<li>kshitij</li>
<li>mamta</li> 
</ol>
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
 
इस श्रेणी में तृतीय स्‍थान डेफिनेशन लिस्‍ट का आता है। इसका प्रयोग टर्म तथा उनके डेफिनेशन के लिए किया जाता है। डेफिनेशन लिस्‍ट से <dl> टैग से  आरम्‍भ तथा </dl> टैग पर समाप्‍त होते हैं  और डेफिनेशन टर्म </dt> टैग से  आरम्‍भ व </dt> टैग पर समाप्‍त होते हैं। डेफिनेशन टैग <dd> से  आरम्‍भ व </dd> टैग पर समाप्‍त होते हैं। डेफिनेशन लिस्‍ट का उदाहरण निम्‍नवत प्रस्‍तुत है।
<dl>
<dt>term1</dt>
<dd>definition1</dd>
<dt>term2</dt>
<dd>definition2</dd>
<dt>term3</dt>
<dd>definition3</dd>
</dl>
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
 
टेबल
टेबल का प्रयोग कॉलम एवं रो के अन्‍तर्गत जानकारी प्रदर्शित करने के लिए परम आवश्‍यक होता है। <table> तथा </table> टैग टेबल संबंधी टैग परिलक्षित करते हैं। <tr> तथा </tr> टैग टेबल के रो, <th> तथा </th> टैग टेबल के  हेडिंग और <td> तथा </td> टेबल के सेल को दर्शाते हैं। border=”1” पैरामीटर यह दर्शाता है कि बनाए जाने वाले टेबल का बार्डर 1.एम.एम. का होगा। यदि बिना बार्डर वाला टेबल बनाना चाहते हैं तो टेबल बार्डर वाला पैरामीटर न लिखें। टेबल संबंधी कोड का उदाहरण निम्‍नवत है:-
<table border=’’1’’>
<tr><th>name</th><th>marks</th><th>percentage</th></tr>
<tr><td>santosh</td><th>525</td><td>75</td></tr>
<tr><td>kshitij</td><td>599</td><td>99.9</td></tr>
<tr><td>mamta</td><td>575</td><td>94.9</td></tr>
</table>
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
अन्‍य वेबपेज को लिंक करना
वेबपेज को अन्‍य वेबपेज से लिंक करने की सुविधा वेबपेज महत्‍ता एवं उपयोगिता बढ़ा देती हैं। इसका प्रयोग कर आप अपने द्वारा बनाए वेबपेज को ही नहीं बल्कि अन्‍य लोगों के वेबपेज को भी लिंक कर सकते हैं। लिंकिंग के लिए <a> टैग निर्धारित है जिसका उपयोग कर आप अन्‍य वेबपेजों को अपने वेबपेज से लिंक अर्थात जोड़ सकते हैं।
<a href="hindi.rajbhasha.blogspot.com">हिन्‍दी राजभाषा</a>
<a> तथा</a> टैग्स के मध्‍य का भाग लिंक के लिए कैप्‍सन होता है। जिसे माउस द्वारा दबाने पर लिंक्‍ड वेबपेज ओपन हो जाता है।  इन्‍य पेज को लिंक करने के लिए आपको उस वेबपेज के पूर्ण वेब एड्रेस अथार्त यू.आर.एल. को <a href="(यहॉं लिंक किए जाने वाले वेबपेज का पूर्ण वेब एड्रेस अथार्त यू.आर.एल.लिखे) ">और (यहॉं उस लिंक के लिए अपनी पसंद का नाम दें जिसे दबाने पर वांछित वेबपेज ओपन हो जायेगा।)</a> 
<a href="hindi.rajbhasha.blogspot.com">हिन्‍दी राजभाषा</a>       
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
उपरोक्‍त कोड में इस उदाहरण के रूप में ‘’hindi.rajbhasha.blogspot.com’’ नामक वेबपेज को लिंक किया गया है तथा ‘’हिन्‍दी राजभाषा’’ वाक्‍यांश अथवा पदबंध को लिंक बनाया गया है जिसे माउस द्वारा दबाने पर ‘’hindi.rajbhasha.blogspot.com’’ नामक वेबपेज ओपन हो जायेगा।
ग्राफिक्‍स अथार्त फोटो जोड़ना
वेबपेज में इमेज अर्थात फोटो को भी जोड़ा जा सकता है इमेज को जोड़ने से वेबपेज और आकर्षक, रूचिकर एवं इंटरैक्टिव लगता है। इमेज फाइल जोड़ने के लिए <img> टेग निर्धारित किया गया है। यदि हमें D: ड्राइव के संतोष फोल्‍डर के अन्‍दर विद्यमान इमेज फोल्‍डर में सेव किए गए myphoto.jpg को जोड़ना है तो निम्‍नांनुसार कोड लिखना होगा।
<img src="D:\santosh\images\myphoto.jpg">  
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)
  
     इस कोड से संबंधित कुछ अन्‍य महत्‍वपूर्ण कोड भी हैं जिसके संबंध में हमें जानकारी होनी चाहिए। जैसे alt=", width="200" ,height="200" आदि। alt=" पैरामीटर फाटो के स्‍थान पर वैकल्पिक टेक्‍स्‍ट प्रदर्शित करने के काम आता है, कई बार प्रयोकर्ता द्वारा इमेज लोडिंग टर्न ऑफ करने की स्थिति में इस कामॅण्‍ड से फोटो के विकल्‍प में टेक्‍स्‍ट प्रदर्शित होता है। इसके   अतिरिक्‍त width="200" ,height="200 कोड में फोटो चौड़ाई तथा लम्‍बाई को उल्लिखित किया जाता है।  
 
............................................................................................................................ <html>
<head>
<title>rajbhashagyandhara.blogspot.com</title>
</head>
<body>
<b>my</b> <em>first</em><i> post</i>
<br>
<u>rajbhashagyandhara.blogspot.com</u>
<p>राजभाषा विभाग, भारत सरकार द्वारा राजभाषा हिन्दी को सर्वव्यावपी बनाने तथा युनिकोड में हिन्दी् टंकण को प्रोत्साहित करने हेतु समय-समय पर परिपत्र आदि परिचालित किए जाते हैं। वस्तुत: युनिकोड स्क्रीप्ट में ही हिन्दी भाषा की प्रगति संभव है क्योंकि युनिकोड में टंकित पाठ्यसामग्री को देखने अथवा पढ़ने के लिए कम्‍प्‍यूटर पर अलग से हिन्दी फॉन्ट् इन्स्‍टाल करने की आवश्याकता नहीं होती है । युनिकोड में टंकित पाठ्यसामग्री को वेबसाइट पर अपलोड करना तथा पढ़ पाना संभव हो पाता है। वर्तमान में युनिकोड फॉन्ट तो डिफाल्टत फॉन्ट के रूप में माइक्रोसाफ्ट कम्पनी द्वारा निर्मित माइक्रोसाफ्ट 2000 तथा उसके बाद के संस्करण वाले सॉफ्टवेयरों में विद्यमान रहता है।</p>
<h1>blogspot.com</h1>
<h2>santosh</h2>
<h3>kapil</h3>
<ul>
<li>santosh</li>
<li>kshitij</li>
<li>mamta</li> 
</ul>
 <ol>
<li>santosh</li>
<li>kshitij</li>
<li>mamta</li> 
</ol>
 <dl>
<dt>term1</dt>
<dd>definition1</dd>
<dt>term2</dt>
<dd>definition2</dd>
<dt>term3</dt>
<dd>definition3</dd>
</dl>
<table border=’’1’’>
<tr><th>name</th><th>marks</th><th>percentage</th></tr>
<tr><td>santosh</td><th>525</td><td>75</td></tr>
<tr><td>kshitij</td><td>599</td><td>99.9</td></tr>
<tr><td>mamta</td><td>575</td><td>94.9</td></tr>
</table>
<a href="hindi.rajbhasha.blogspot.com">हिन्‍दी राजभाषा</a>  
<img src="D:\santosh\images\myphoto.jpg">  
</body>
</html>
(इन टेग्‍स को कॉपी कर नोट पैड में पेस्‍ट कर इन्‍टरनेट एक्‍सप्‍लोरर में ओपन कर इनका प्रभाव देखें।)

2 टिप्‍पणियां: