नमस्कार दोस्तों ! आपका स्वागत है मेरे HTML Coding Tutorial for Beginners in Hindi – Computer Languages Class I में. यह Computer Languages की Classes मैंने उन् Students के लिए शुरू की हैं, जो की HTML, Web Designing, Web Development सीखना चाहते हैं, पर उन्हेंComputer Languages, HTML, CSS, Java etc. के बारे में कुछ नहीं पता. और इसके लिए आपको पहले से आने वाली कोई जानकारी ज़रूरी नहीं है.
Browser वैसे तो आप कोई भी इस्तेमाल कर सकते हैं, जो आप चाहें. पर मैं सलाह दूंगा Google Chrome उसे करने की. क्युकी Chrome बहुत ही तेज़ होता है और मेरे हिसाब से हर Web Developer के लिए Google Chrome ही सबसे बढ़िया है.
और अब Sublime Text आपके PC में Install हो गया होने चाहिए. Windows पे click करके आप search कर सकते हैं.
Go to View > Advanced Settings में Hide extensions for known file types को uncheck करना होगा. अब Apply और OK पे click करते ही आपको .html extension दिख जाएगा.
मैं इस Tutorial Series की शुरुआत बिलकुल शुरू से करूँगा. आपको अगर Computer Languages के बारे में कुछ नहीं पता, आपने अगर HTML की एक भी line नहीं लिखी आज तक, तो कोई दिकत नहीं है. क्युकी मैं बिलकुल basics से शुरू करने जा रहा हु यह HTML Coding Tutorial.
शुरुआत करने से पहले कुछ ज़रूरी बातें:
- यह Tutorial बिलकुल शुरू से सीखने वाले (Beginners) Students के लिए है.
- इस Tutorial श्रृंखला (Series) में CSS ना के बराबर या फिर बिलकुल नहीं बताया जाएगा. मैं CSS के Tutorials अलग से शुरू करूँगा.
- हम HTML5 से ही शुरुआत करेंगे और HTML5 को ही उसे करेंगे. HTML4 या XHTML – कुछ और नहीं. सिर्फ HTML5 (latest) ही सीखेंगे.
- मैं इन Tutorials में आपको Live Examples भी बताऊंगा, ताकि आप साथ साथ practice कर सकें.
- सबसे ज़रूरी बात ये की आप HTML 2-4 दिन में नहीं सीख सकते. इसीलिए आपको Patience (सब्र) तो रखना ही होगा HTML / Web Designing / Web Development सीखने के लिए.
What is HTML? – HTML क्या है?
- HTML की full form है “Hyper Text Markup Language”
- बहुत से लोग शुरू करते हैं HTML को Programming Language समझ कर. पर HTML कोईProgramming Language नहीं है. HTML सिर्फ एक Markup Language है Web Pages और HTML Documents को बनाने के लिए.
- Programming Languages logic वाली Languages होती है. जिसमें आप प्रतिबन्ध लगा सकते हैं. जैसे की, अगर यह सही है तो ऐसा करो, अगर नहीं तो वैसा करो. मगर HTML में ऐसा कुछ नहीं है. HTML का इस्तेमाल सिर्फ एक Web Page को बनाने और दिखने में होता है. HTML का काम है सिर्फ एक Web Page को दिखने के लिए तैयार करना, चाहे वोह कोई Sentence हो, Paragraph हो, Bullet Points हो, Image हो etc.
Programming Languages के कुछexamples हैं:
- Javascript
- PHP
- C
- C++ etc.
यह सारी Languages चीज़ों को connect करने में, move करने में, login / logout करने में काम आती हैं. और इस हिसाब से देखा जाए तो सारी Programming Languages से कई ज्यादा ज़रूरी HTML होता है. HTML किसी भीWebsite की जड़, नीव (Root) रखने में मदद करता है. जितनी भी Websites आप देखते हो, सब की सब Browsers को HTML information ही भेजती हैं आपको पूरी Website दिखने के लिए.
What is Markup Language? – Markup Language क्या होती है?
कोई भी लेख आपने पढ़ा हो, चाहे वो एक Website हो, Book हो, Newspaper हो या कोई भी Document हो – उसमे Text (लेख) तो होता ही है, पर उस लेख को कैसे दर्शाया जाए, यह भी होता है. कुछ शब्द / lines छोटी होती है, तो कुछ बड़ी, कुछ Bold होती है, कुछ Headings होती हैं, कुछ Topics होते हैं, कुछ Italics में होती हैं, कुछ का color अलग होता है, तो कुछ का Font / Font Size etc.
यह लेख हम जिस भी file में, document में, website में या जहाँ भी save करते हैं, उसमें 2 चीज़ें save होती हैं:
- ऐसा लेख जिसे एक इंसान(Human) आसानी से पढ़ सके.
- उस लेख को कैसे दिखाया / दर्शाया जाना चाहिए किसी भी पढने वाले के लिए.
उदहारण के तौर पर, HTML में किसी भी text को Bold और Italic में लिखने के लिए हम क्या करेंगे? हम HTML Tags / Syntax के इस्तेमाल करेंगे. जैसे की:
मुझे HTML Coding Tutorial for Beginners in Hindi को Bold में लिखना है और इस HTML Coding Tutorial for Beginners in Hindi को Italics में.
तो मैं इस प्रकार HTML Tags का इस्तेमाल करूँगा:
मुझे <HTML Bold Tag>HTML Coding Tutorial for Beginners in Hindi<HTML Bold Tag end> को Bold में लिखना है और इस HTML Coding Tutorial for Beginners in Hindi को Italics में.
और मुझे जब रिजल्ट मिलेगा, तो कुछ ऐसा मिलेगा:
मुझे HTML Coding Tutorial for Beginners in Hindi को Bold में लिखना है और इस HTML Coding Tutorial for Beginners in Hindi को Italics में.
ये सिर्फ एक उदहारण दिया है, यह सही में कोई HTML Tag नहीं है. सिर्फ समझाने के लिए मैंने इस example को लिया है. जिससे में आपको ये बता सकू के HTML Tags होते क्या हैं. क्युकी HTML सीखने के लिए हमें HTML Tags को पूरी तरह से समझना ज़रूरी है.
दोस्तों शुरुआत करने के लिए हमें सिर्फ दो चीज़ों की ज़रुरत है:
- Web Browser – HTML को देखने व पढने के लिए,
- Text Editor – HTML को लिखने के लिए.
कोई भी एक Web Browser:
- Mozilla Firefox
- Google Chrome
- Safari
या कोई भी जो आप इस्तेमाल करते हों.
कोई भी एक Text Editor:
- Sublime Text
- Visual Studio Code
- Notepad++ (Windows)
- TextMate (Apple Mac)
- Atom.io
- Brackets
Browser वैसे तो आप कोई भी इस्तेमाल कर सकते हैं, जो आप चाहें. पर मैं सलाह दूंगा Google Chrome उसे करने की. क्युकी Chrome बहुत ही तेज़ होता है और मेरे हिसाब से हर Web Developer के लिए Google Chrome ही सबसे बढ़िया है.
Text Editor भी आप जो चाहें वोह इस्तेमाल कर सकते हैं. मुझेSublime Text और Notepad++ ही पसंद हैं. और इन् Tutorials में मैं Sublime Text का इस्तेमाल करूँगा. क्युकी Sublime Text बहुत ही कम जगह लेता है PC में, बहुत ही आसान है use करने में, line numbers दिखता है, और सारे HTML Lines पे अलग अलग रंग का प्रकाश डालता है, जिससे हमें HTML को समखने में काफी आसानी होती है.
How to install Sublime Text – Sublime Text install कैसे करें:
- www.sublimetext.com पे जाइए. ये Free है इस्तेमाल करने के लिए.
- नीचे दिए गए “Download for Windows” वाले Button पे click कीजिये,
- File जबdownload हो जाए तोह उसे Run / Open करिए,
- Next पर 3 बार click करिए,
- Install पे click करें और end में Finish पर.
और अब Sublime Text आपके PC में Install हो गया होने चाहिए. Windows पे click करके आप search कर सकते हैं.
HTML File Creation
अब हमनें आपने PC में HTML Editor install कर लिया है और अब हम एक HTML file तैयार कर सकते हैं. HTML की एक बहुत बढ़िया बात ये है के हमें किसी server की या Hosting की ज़रुरत नहीं होती HTML use / test करने के लिए. हम आसानी से अपने PC में ही एक HTML file बना सकते हैं, उसे .html file extension दे कर. और किसी भीBrowser (Chrome, Mozilla, Safari, etc.) में खोल सकते हैं.
जब आपकी पूरी वेबसाइट तैयार हो जाए तो आपको Domain की, hosting की ज़रुरत पढेगी अपनी website को Internet पे लाने के लिए. उससे पहले नहीं.
HTML file बनाने के लिए उसकाextension .html होना ज़रूरी है. आपको बस उस file को .html से end करना है. इसकी ही मदद से Web Browser आपके लेख को सही ढ़ंग से दर्शा पायेगा.
एक ज़रूरी बात जिसका ध्यान रखना बहुत आवश्यक है के आपके document का Home Page हमेशा index.html कहलाना चाहिए.
For Example:
- अगर आप किसी भी domain में जाते हैं, for example: www.domain.com और अपनीwebsite design की हुई HTML file upload करते हैं index.html तो यह file आपके Home Page पर ले कर जायेगी. पर अगर आप यह file about.html नाम से upload करते हैं, तो यह आपको www.domain.com/about.html par le kar jaayegi.
- Index File हमेशा Home Page की Root File होगी. ये default होता है और Browser Home Page पे जाने के लिए Index File को ही ढूंढता है सबसे पहले.
चलिए अब अपनी पहली HTML File बनाते हैं. मैं चाहता हु के जैसे जैसे मैं करता जाता हूँ, आप भी वैसे ही करते जाइए, ताकि आपको Practical Knowledge भी मिले, सिर्फ Theory से काम नहीं चलता.
अब मैं अपने Dekstop पर एक New Folder बना लेता हु जिसमें मैं यह file रखना पसंद करूँगा. मैंने अपने Dekstop पे एक New Folder बना लिया है, जिसका नाम रखा है My HTML File. अब उस Folder को खोलिए, Right Click कीजिये और New में जाकर एक Text Document बनाइये. अब उस Text document का नाम बदल कर index.html कर दीजिये और Yes click करिए. अब आप देखेंगे के उस file का icon बदल कर Chrome का Icon बन जाएगा. मेरा Chrome का ही icon बना है क्युकी मेरा default browser Chrome है.
कभी कभी Windows PC में ऐसा नहीं होगा. अगर आपको .html extension नहीं दिख रहा index के बाद, तो आपको Folder के top पर File Home Share View लिखा होता है, वहां View में कुछ सेटिंग्स चंगे करनी होंगी:
View > Option > Change Folder and Search Options – ऐसा करके एक Pop upखुलेगा.
Go to View > Advanced Settings में Hide extensions for known file types को uncheck करना होगा. अब Apply और OK पे click करते ही आपको .html extension दिख जाएगा.
अगर वो file आपको index.html.text दिखा रही हो, तो .text को delete कर दीजिये. File का पूरा नाम सिर्फ index.html ही होना चाहिए.
अब हमें इसी index.html file को Sublime Text में खोलना है. आप इस file पे right click कर के इसे Sublime text में खोल सकते हैं. दूसरा तरीका है के Sublime Text में File में Open File या ctrl+O से आप यह file खोल सकते हैं.
अब आप Sublime Text में टाइप कीजिये Hello World और save कर दीजिये. Save करने के लिए आप File > Save कर सकते हैं या फिर सिर्फ ctrl+s (keyboard shortcut) से save कर सकते हैं.
अब हम इसी text को Browser में देखेंगे. हमने जो Dekstop पे My HTML File नाम का एक Folder बनाया था, उसे खोल कर index.html को open कीजिये और वोह file Chrome browser में खुलेगी. और हम देख सकते हैं Hello World लिखा हुआ. इसका मतलब ये की अगर हम बिना किसी HTML Tags के सिर्फ text भी लिखेंगे तोह यह हमें Chrome में सिर्फ text भी दिखायेगा.
आज के लिए इतना ही, अब मैं अपने अगले पोस्ट में HTML Tags / Syntax के बारे में, HTML Page Structure के बारे में बताऊंगा और हम HTML Tags की live practice करेंगे.
आप अपने प्रस्ताव / सुझाव नीचे दिए गए Comment Box में ज़रूर छोडें
Please leave your valuable Suggestions & comments in the Comment Box below.
Please leave your valuable Suggestions & comments in the Comment Box below.