 |
| HTML and CSS tutorial for beginners in English |
फ्रेंड्स, हम HTML editors का उपयोग करके HTML और CSS लिख सकते सकते हैं। इसके लिए आप अपने mobile या computer का उपयोग कर सकते हैं। HTML editors को समझने के लिए यह लेसन पढ़िए।
HTML editors
हेलो फ्रेंड्स, KTL के HTML and CSS tutorial में आपका स्वागत है।आज हम Notepad++ और AnWriter के बारे में सीखनेवाले हैं। यह नि:शुल्क HTML editors हैं।
HTML editors एक प्रकार के text editors होते हैं जिनको कोडिंग करने के उद्देश्य से बनाया जाता है। हम इनका उपयोग करके HTML, CSS वगैरह languages में स्क्रिप्ट लिख सकते हैं। इन में स्क्रिप्ट लिखने के लिए विशेष सुविधाएं होती है जिनसे कोड लिखने में काफ़ी आसानी हो जाती है।
आप Google में "free html editors" दीजिये। आपके सामने कुछ HTML editors के नाम आएंगे जैसे CoffeeCup, Komodo, NetBeans, Notepad++ वगैरह।
Notepad++ HTML editor
आज हम Notepad++ के बारे में सीखेंगे। आप इस लेसन को ध्यान से पढ़िए। हम ने Notepad++ की विस्तार से जानकारी दी है। एक बार आपको Notepad++ के बारे में समझ में आएगा तो आप AnWriter का उपयोग करके आसानी से mobile phone पर HTML लिख सकेंगे।
हम Notepad++ में HTML वैसा ही लिखते हैं जैसे Windows के Notepad में लिखते हैं। यह बहुत आसान होता है। Notepad++ Windows operating system में काम करता है। इस के अलावा इस में कई ऐसी सुविधाएं होती है जो HTML टाइप करने में मदद करती है। Notepad++ के Android और Mac system के लिए भी versions उपलब्ध है।
Notepad++ सीखने के लिए आप के computer में Notepad++ होना जरूरी है। लेकिन install करने से पहले आप चेक कीजिये की यह आप के computer में है या नहीं।
आप Windows के "Start" पर क्लिक कीजिये। इस के सर्च बॉक्स में टाइप कीजिये "Notepad++". अगर यह आप के computer में है तो ऐसा डिस्प्ले होगा।
 |
| Figure 1. Check if Notepad++ is already there |
अगर यह डिस्प्ले नहीं होता है तो आप Notepad++ install कीजिये। इस के लिए यहाँ क्लिक कीजिये। Notepad++ की साइट ओपन हो जायेगी। यहाँ से आप डाउनलोड कर लीजिये और install कीजिये।
मोबाइल में डाउनलोड करने के लिए इस लिंक का उपयोग कीजिये। यहाँ से आप Android का version डाउनलोड कर सकते हैं।
अगर आप इन ऑपरेटिंग सिस्टम्स के अलावा दूसरी कोई use कर रहें हैं तो आप Google में HTML editor सर्च कीजिये जो आप के ऑपरेटिंग सिस्टम्स के लिए है और उसे डाउनलोड कीजिये। आप को बहुत सारे HTML editors मिलेंगे। एक बार आप को यह समझ में आया की HTML editors में कैसे काम करते हैं तो आप किसी भी editor को use कर सकेंगे।
अब हम Notepad++ में चलते हैं और उसकी कुछ विशेषताएं देखते हैं। हम यह सब Windows operating system के लिए सीख रहे हैं।
Notepad++ को ओपन कीजिये। निचे दिखाया हुआ स्क्रीन आएगा।
 |
| Figure 2. Notepad++ HTML editor |
इस window के बाएं में ऊपर window का title डिस्प्ले होता है। इसमें हमारा फाइल नाम आता है। इसके निचे menu items और tool bar डिस्प्ले होते हैं। इसमें standard menu items हैं जैसे File, Edit, Search वगैरह। "File" पर क्लिक कीजिये, आप new, open, close, save वगैरह options देखेंगे। "Edit" पर क्लिक कीजिये, copy, cut, paste, redo, undo वगैरह डिस्प्ले होंगे। Tool bar में हम open, print, save, cut, copy, paste, undo, redo वगैरह बटन्स देख सकते हैं। हम यह सब जानते हैं।
अब "Language" पर क्लिक कीजिये। "A" पर mouse को लेकर आइये, "A" से शुरू होनेवाले languages के नाम आ जाएंगे। इसी तरह से हम कई languages के नाम देख सकते हैं। यहाँ हम को किसी एक language को select करना पडता है। हम "HTML" select करेंगे। आप Notepad++ में सब से पहले यह कीजिये। यह बहुत महत्वपूर्ण होता है। Notepad++ select की हुई language के अनुसार कोड को डिस्प्ले करता है। Language के अनुसार colors डिस्प्ले होते हैं। इससे कोड को लिखना और पढ़ना बहुत आसान हो जाता है।
Writing HTML in Notepad++
अब हम Notepad++ में HTML कोड लिखेंगे।पहली लाइन लिखते हैं <!doctype html>। अगली लाइन है <html>। जैसा आप टाइप करना शुरू करेंगे suggestions आ जाएंगे। इन में से एक select करना है। Autocomplete एक बहुत ही उपयोगी सुविधा है।
 |
| Figure 3. Suggestions in Notepad++ |
HTML में कई tags, attributes, और values होती है। Notepad++ में हम को उन सबको याद रखने की जरूरत नहीं पड़ती है या उनको टाइप भी नहीं करना पड़ता है। हम suggestions में से select कर सकते हैं। इससे spelling की गलतियां भी नहीं होती या कम गलतियां होती है।
अगला लाइन होगा <head>. फिर से autocomplete का उपयोग कीजिये।
अब हम lesson-09 का सारा कोड Notepad++ में कॉपी करेंगे। आप इस लेसन की PDF फाइल ओपन कर सकते हैं और वहां से कोड ले सकते हैं।
 |
| Figure 4. HTML code in Notepad++ |
ध्यान दीजिये, बाएं में लाइन नंबर डिस्प्ले हुए हैं। यह भी बहुत उपयोगी होते है। बड़े स्क्रिप्ट में हम इन का उपयोग करके यह बता सकते हैं की कौन सी लाइन में error है या change करना चाहिए।
इस के बाजू में एक लाइन डिस्प्ले हुई है जिसमे "+" और "-" चिन्ह हैं। "title" के बाजू में "-" चिन्ह पर क्लिक कीजिये। यह "+" हो जाएगा और title element के कोड की जगह एक line आ जायेगी। हम इस चिन्ह पर क्लिक करके या तो उस element का कोड डिस्प्ले कर सकते हैं या छुपा सकते हैं।
Tool bar में एक बटन है - word wrap। इस पर क्लिक कीजिये। जो टेक्स्ट एक ही लाइन में है वह wrap हो जाएगा और एक से ज्यादा लाइन्स में डिस्प्ले होगा। इस बटन पर और एक बार क्लिक करने पर टेक्स्ट फिर से एक ही लाइन में डिस्प्ले होगा।
अब h1, p, और img tags देखिये। यहाँ attributes लाल रंग में डिस्प्ले हुए हैं और values नीले रंग में है। टेक्स्ट काले रंग में डिस्प्ले हुआ है और वह bold है।
अब आप language option से "CSS" select कीजिये। अब देखिये की कोड कैसा हुआ है देखिये। Color scheme बदल गयी है।
Tool बार में दो बटन हैं - "zoom in" और "zoom out"। इन बटन्स पर क्लिक करके देखिये। कोड के अक्षरों का साइज बड़ा या छोटा होगा। आप को जो convenient होगा वह साइज रखिये।
AnWriter for mobiles
हमने देखा है की बहुत सारे HTML editors होते हैं। अगर आप mobile का उपयोग करके HTML लिखना चाहते हैं तो आप AnWriter का उपयोग कीजिये। यह बहुत आसान और अच्छा HTML editor है।१. यह निःशुल्क होता है। इस का साइज भी सिर्फ २ Mb होता है।
२. इसमें हम HTML5 और CSS3 लिख सकते हैं।
३. आप इसको Google Play Store से डाउनलोड कर सकते हैं।
४. इसमें HTML लिखना बहुत आसान होता है।
५. इस में autocomplete होता है।
६. हम HTML फाइल्स को एक folder में save कर सकते हैं और उनको ओपन कर सकते हैं।
७. हम HTML को रन कर सकते हैं और output देख सकते हैं।
हम mobiles के लिए AnWriter recommend करते हैं।
दोस्तों, अब आपने HTML editors के बारे में सीखा है। उनका उपयोग करना शुरू कीजिये।
