HTML के पहले कदम - HTML पाठ्यपुस्तक
HTML एक काफी सरल भाषा है — इसे तकनीकी और मानविकी दोनों विषयों के छात्र विश्वविद्यालयों में सीखते हैं, और आजकल तो मुझे लगता है कि इसे अधिकांश स्कूलों में भी पढ़ाया जाता है। सब कुछ सरल है क्योंकि HTML वास्तव में कोई प्रोग्रामिंग भाषा नहीं है।
HTML एक मार्कअप भाषा (markup language) है — जो हम लिखते हैं, वही स्क्रीन पर दिखाई देता है। इसमें कोई एल्गोरिदम, स्कीम, लूप, वेरिएबल या क्लास नहीं होते — बस टेक्स्ट, टेक्स्ट और टेक्स्ट। HTML में केवल टैग्स होते हैं, और वे भी बहुत अधिक नहीं हैं। अक्सर उपयोग किए जाने वाले टैग्स की संख्या शायद तीस से भी कम होगी। इसलिए, यदि आप प्रोग्रामिंग भाषाओं से संबंधित किसी सरल भाषा से शुरुआत करना चाहते हैं, तो HTML एक उत्कृष्ट विकल्प है।
HTML दस्तावेज़ बनाना शुरू करने के लिए हमें एक टेक्स्ट एडिटर (जैसे “ब्लॉकнот” — जो पहले से Windows या Linux में मौजूद होता है) और एक ब्राउज़र (Firefox, Opera, Chrome या Internet Explorer) की आवश्यकता होगी, ताकि हम अपना HTML पेज देख सकें। Windows पर मैं व्यक्तिगत रूप से Notepad++ एडिटर का उपयोग करता हूँ।
मुझे लगता है ऊपर की कुछ पंक्तियाँ आपको सीखने के लिए पर्याप्त रूप से तैयार कर चुकी हैं, इसलिए चलिए सीधे शुरुआत करते हैं।
मेरा पहला HTML दस्तावेज़
HTML दस्तावेज़ साधारण टेक्स्ट फाइलें होती हैं — जैसे readme.txt आदि। बस फर्क इतना है कि इनमें अलग एक्सटेंशन होता है: .html या .htm
नोट:
एक्सटेंशन क्या होता है?
फाइल एक्सटेंशन ग्राफिकल इंटरफेस वाली ऑपरेटिंग सिस्टम्स की सुविधा है। इनका मुख्य उद्देश्य होता है सिस्टम को बताना कि किसी विशेष फाइल को खोलने के लिए कौन-सी प्रोग्राम का उपयोग करना है। हम यहाँ केवल HTML फाइल एक्सटेंशन पर ध्यान देंगे, जो हैं: .HTML और .HTM.
अब दस्तावेज़ बनाने का समय आ गया है। किसी फोल्डर में जाएँ और खाली जगह पर राइट-क्लिक करें:
“नया टेक्स्ट डॉक्यूमेंट” बनाएं और उसका नाम दें index.html (या आप .htm भी लिख सकते हैं)।
संभव है कि आपकी सिस्टम सेटिंग्स एक्सटेंशन बदलने की अनुमति न दें, और फाइल index.txt के रूप में सेव हो जाए। उस स्थिति में आपको यह करना होगा:
- फाइल index.txt को ब्लॉकнот (Notepad) में खोलें।
- मेन्यू से “फ़ाइल → सहेजें как” (Save As) चुनें।
- जो विंडो खुलेगी उसमें फाइल का नाम index.html लिखें और “सहेजें” पर क्लिक करें।
अब जब फाइल index.html बन गई है, तो इसे ब्लॉकнот में खोलें और HTML मार्कअप लिखना शुरू करें। HTML मार्कअप टैग्स के माध्यम से बनाई जाती है। टैग्स इस प्रकार दिखते हैं:
<tag>कुछ टेक्स्ट</tag>
पहला टैग “ओपनिंग टैग” कहलाता है, जो < और > के चिन्हों के बीच लिखा जाता है। हम इन्हें “लेस दैन” और “ग्रेटर दैन” चिन्ह नहीं कहते, बल्कि बस “टैग” कहते हैं।
सबसे पहले और सबसे महत्वपूर्ण टैग है <html></html>। HTML दस्तावेज़ इसी टैग से शुरू होता है और इसी से समाप्त होता है:
<html> </html>
आप टैग्स को एक ही लाइन में भी लिख सकते हैं, लेकिन जब टैग्स को वर्टिकली एक के नीचे एक लिखा जाता है, तो पढ़ना आसान होता है और Notepad++ उन्हें हाइलाइट भी करता है।
अब <html> टैग के अंदर हम <body></body> टैग जोड़ेंगे। “Body” का अर्थ होता है “मुख्य भाग” — जो कुछ भी हम ब्राउज़र में देखते हैं, वह इसी बॉडी टैग के अंदर होता है। चलिए अब अपने index.html फाइल को संशोधित करते हैं और सहेजते हैं:
<html> <body> </body> </html>
ध्यान दें कि <body> टैग को मैंने <html> टैग से दो स्पेस दाईं ओर रखा है। ऐसा करने से HTML दस्तावेज़ पढ़ने में आसान बनता है। अब फाइल सेव करें और ब्राउज़र में खोलें।
आपको एक खाली स्क्रीन दिखाई देगी — और यह बिल्कुल सही है, क्योंकि हमने अभी तक कोई टेक्स्ट नहीं जोड़ा है।
अब चलिए टेक्स्ट जोड़ते हैं, सीधे <body> टैग के बीच:
<html>
<body>
HTML मेरे पहले कदम
</body>
</html>
फाइल सेव करें और ब्राउज़र में पेज रीफ्रेश करें। अब आप देखेंगे कि “HTML मेरे पहले कदम” टेक्स्ट दिखाई देगा — क्योंकि हमने उसे बॉडी टैग के अंदर रखा है, न कि उसके बाहर।
आपने शायद देखा होगा कि शीर्षक पट्टी (title bar) में केवल “Mozilla Firefox” लिखा है — यानी हमारे दस्तावेज़ का कोई शीर्षक नहीं है। चलिए इसे ठीक करते हैं और अपने HTML दस्तावेज़ में शीर्षक जोड़ते हैं।
इसके लिए हम एक और टैग <head></head> जोड़ेंगे, जो <body> से ऊपर रखा जाता है:
<html>
<head>
</head>
<body>
HTML मेरे पहले कदम
</body>
</html>
अगर आप अभी पेज रीफ्रेश करेंगे तो कुछ नहीं बदलेगा, क्योंकि हमें <head> के अंदर एक और टैग लिखना होगा — <title></title>, जो दस्तावेज़ का शीर्षक निर्धारित करता है:
<html>
<head>
<title>HTML पहले कदम - drupalbook.org</title>
</head>
<body>
HTML मेरे पहले कदम
</body>
</html>
फाइल सहेजें, ब्राउज़र में पेज अपडेट करें — और वॉयला! अब हमारे दस्तावेज़ में एक शीर्षक दिखाई देगा।
मुझे लगता है, एक प्रारंभिक पाठ के लिए इतना पर्याप्त है। अगले पाठों में हम HTML के और कई तत्वों को विस्तार से सीखेंगे।