html Tutorial in Hindi
आपका पहला वेब पेज
HTML Tutorial (एच.टी.एम.एल का शिक्षण)
HTML (एच.टी.एम.एल.) का फुल फॉर्म होता है "हाइपर टेक्स्ट मार्कअप लैंग्वेज" ("Hyper Text Markup Language"). अर्थात वह लैग्वेज या भाषा जो एक खास तरह के लिपि में लिखा जाय।
घबराइए नहीं यह कोई खास या विशेष लिपि नहीं हैं, बल्कि एक साधारण लिपि ही है, जिसे ABCD . . . अर्थात अंग्रेजी में लिखा जाता है। बस इसे लिखने का कुछ खास स्टाइल यानि तरीका है।
आपका पहला वेब पेज
चलिए अब हम अपना पहला वेब पेज बनाएं।
<!DOCTYPE html>
<html>
<body>
<h1>यह हमारा पहला वेब पेज है। </h1>
<h2>It is My First Web Page </h2>
<p>हेलो दोस्त ! !</p>
<p>Hello Friend ! !</p>
</body>
</html>
यह कोड HTML (एच.टी.एम.एल.) के बेसिक पेज का है।
इसे वेब ब्राउजर में देखने पर नीचे दिये गये पेज की तरह दीखता है।
ब्राउजर में देखने पर वेब पेज
यह हमारा पहला वेब पेज है।
हेलो दोस्त ! !
वेब पेज बनाने के चरण (Steps to make a web page)
वेबपेज बनाने के लिये सबसे पहले अपने कम्प्यूटर के डेस्कटॉप पर एक फोल्डर बनाइए|
तथा उस फोल्डर का नाम रखिये 'mywebsite'|
वैसे तो फोल्डर का आप कुछ भी नाम रख सकते हैं, परंतु यहाँ पर सुविधा के लिए उस फोल्डर का नाम 'mywebsite' रखते हैं।
अब नोट पैड खोलिए। नोट पैड विंडो ऑपरेटिंग सिस्टम वाले कम्प्यूटर में पहले से ही रहता है।
नोट पैड में उपर दिये गये कोड को लिखिए। सुविधा के लिए वह कोड पुन: दिया जा रहा है।
<!DOCTYPE html>
<html>
<body>
<h1>यह हमारा पहला वेब पेज है। </h1>
<h2>It is My First Web Page </h2>
<p>हेलो दोस्त ! !</p>
<p>Hello Friend ! !</p>
</body>
</html>
यदि आप कोड में लिखे हिन्दी वाली लाइन को नहीं लिख पा रहे हैं, तो केवल अंग्रेजी में दिये गये लाइनों को लिखिए।
यदि आप notepad (जो विंडो ऑपरेटिंग सिस्टम में रहता है) का उपयोग कर रहे हैं, तो हिन्दी वाली लाइन नहीं लिखें। हिन्दी वाली लाईन लिखने पर वह error देगा। बल्कि अभी केवल अंग्रेजी वाली लाइन लिखकर ही वेब पेज बनाइए।
नोटपैड की जगह notepad++ का उपयोग करते हैं, तो हिन्दी वाली लाइन भी लिख सकते हैं। नोटपैड++ (notepad++) को notepad-plus-plus.org से आप डाउनलोड कर अपने कम्प्यूटर पर इंस्टॉल (Install) कर सकते हैं। notepad++ ज्यादा अच्छा है। इसमें कोड को लिखने पर कोड के रंगीन हो जाने के कारण कोड को पढ़ने तथा समझने में आसानी होती है।
इस कोड को लिखने के बाद फाइल को सेव करें।
सेव करने के समय फाइल का नाम "index.html" रखें।
फाइल को एच.टी.एम.एल. के रूप में कैसे सेव (Save) करें?
नोट पैड के ऊपर भाग में दिये गये टैब में File पर क्लिक किजिए।
उसके बाद SaveAs पर क्लिक किजिए।
एक डायलॉग बॉक्स खुलेगा।
इस डायलॉग बॉक्स में Save वाले बटन के ऊपर आप Save as type: TextDocuments(*.txt) लिखा हुआ पायेंगे। इस TextDocuments(*.txt) पर क्लिक कीजिए।
एक मेनू खुलेगा। इसमें All Files को सेलेक्ट कीजिए अर्थात क्लिक कीजिए।
अब आप देखेंगे कि TextDocuments(*.txt) की जगह पर All Files आ गया है।
अब File name के बाद दिये गये स्थान पर अपने फाइल का नाम लिखिए।
फाइल का नाम लिखने में ध्यान रखन है कि फाइल के बाद .html लिखना जरूरी है।
उदारण: index.html या myfile.html या myfirstfile.html या meraweb.html आदि।
आप फाइल का नाम कुछ भी रख सकते हैं। परंतु यहाँ फाइल का नाम index.html लिखिए।
अपने फोल्डर को खोलिए (फाइल उसी फोल्डर में सेव (Save) क़रना है।)
अब Save बटन पर क्लिक किजिए।
आपका फाइल index.html के नाम से सेव (Save) हो गया है।
अब यदि आप गूगल क्रोम ब्राऊजर का उपयोग करते हैं, तो आपका फाइल गूगल के लोगो की तरह दिखेगा। तथा उसके नीचे आपके फाइल का नाम लिखा होगा।
उस फाइल पर डबल क्लिक कीजिए।
वेब ब्राऊजर में आपका पहला पेज खुल जायेगा। वैसे तो आप किसी भी ब्राउजर का उपयोग कर सकते हैं, परंतु इस समय गूगल क्रोम का उपयोग करें, इसमें पेज सही सही दिखेगा।
यदि ब्राऊजर में आपका पेज नहीं खुलता है, तो अपने कोड को ध्यान से देखिए कहीं कोई गलती तो नहीं है, अगर गलती है, तो उसे ठीक कीजिए। पेज को SAVE कीजिए तथा पुन: पेज खोलने का प्रयास कीजिए।
इस तरह आपने पहला वेब पेज बना लिया है।
आपने यह देखा कि एक वेब पेज बनाना कितना आसान है। हो सकता है, अभी पहले वेब पेज बनाने में आपको परेशानी हुई होगी, लेकिन यह सोचने वाली बात है, कि पहली बार किसी काम को करने में थोड़ी परेशानी आती ही है।
इस तरह कई वेब पेज मिलकर एक वेब साइट बनता है। अर्थात एक वेब साइट में कई पेज, हजारों पेज हो सकते हैं।
आप यह भी सोच रहे होंगे यह पेज अन्य वेब साइट के पेज जैसा नहीं दीख रहा है। दरअसल वेबसाइट जिन्हें आप देखते हैं के वेब पेज कई स्टाइल तथा डिजाइन में बने होते हैं। पहले वेब पेज बनाना सीख लेने बाद हमलोग उसके डिजाइन तथा स्टाइल की चर्चा करेंगे तथा उसे सीखकर डिजाइनर तथा स्टाइलिश वेब पेज बनाएंगे।
Reference: