HTML क्या है – What is HTML in Hindi? क्या आपने कभी सोचा है की जो websites हम इंटरनेट पर देखते है, जिसपर जाकर हम जानकारी को पढ़ते है वोह कैसे बनती होगी? शायद आपको पता ना हो लेकिन किसी भी ब्लॉग को बनाने के पीछे एक प्रोग्रामिंग language होती है जिसे वेब लैंग्वेज में source कोड कहते है और इस language के बारे में जानना आपके लिए जरूरी हो जाता है यदि आप एक कस्टम वेबसाइट या एक ब्लॉग बना रहे है. इस आर्टिकल में मैं आपको इसी इम्पोर्टेन्ट वेब language के बारे में hindi मे जानकारी देने वाला हूँ जिसका नाम है HTML.
जब कोई ब्लॉगर किसी वेबसाइट को होस्ट करके पब्लिश करता है तब उसे कही सारी परेशानियों का सामना करना पड़ता है जैसे कस्टम साइज ठीक करना, ब्लॉग में फुटर ऐड करना, कलर ऐड करना जैसी कही सारी चीजे जिसके लिए वोह बार बार थीम को बदलते रहता है. हलाकि यह css code से होता है लेकिन जो फॉन्ट, कलर चेंज करने के लिए हम जिस कोड से एक्सेस लेते है वो लैंग्वेज HTML ही होती है.
आज हम इस आर्टिकल में html के बारे में विस्तार से जानेंगे क्यों की इंटरनेट पर मैंने काफी सारे आर्टिकल्स पढ़े जहाँ पर सिर्फ html क्या होती है और किस काम में आती है इसके बारे में जानकारी दी है, लेकिन किसीने इसे कैसे यूज करना है इसके बारे में किसी ने नहीं बताया। इस आर्टिकल मैं आपको इसीके बारे में बताने वाला हूँ और साथ में css की भी जानकारी दूंगा जिससे आप इनके डिफरेंस को अच्छे से समज सके.
HTML क्या है – What is HTML in Hindi
HTML यानी Hyper Text Markup Language एक standard वेब development language है, जो वेबसाइट क्रिएट करने के लिए यूज की जाती है. यह ब्राउज़र को आपके वेब पेजेस वेबसाइट पर कैसे दिखेंगे इसके बारे में जानकारी देती है.
HTML वेब पेजेस की संरचना को भी describe करती है. जैसे कहा header होना चाहिए, कहा साइडबार होना चाहिए या फिर फुटर किस जगह इन्सर्ट करना है. ये सभी चीजे एचटीएमएल language द्वारा ही की जाती है, जिसका मतलब यह है की किसी भी वेबसाइट को बनाने में ये लैंग्वेज एहम भूमिका निभाती है.
अगर आप एक ब्लॉगर हो तो ऐसे कोड को आप wordpress या html editor में भी चेक कर सकते है. पोस्ट लिखते वक्त जहा आप आर्टिकल लिख रहे है वहा पे text या html में switch करने का भी ऑप्शन दिया जाता है. लेकिन वहा पर आपको सिर्फ वही tags दिखाई देंगे (tags को निचे explain किया है) जो <body></body> tag के अंदर आते है. पोस्ट पब्लिश करने के बाद view source करके आप उसे चेक भी कर सकते है.
HTML को समझने के लिए आपको निचे दिए हुए सिंपल स्ट्रक्चर को पहले समजना होगा।
Simple HTML Structure
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Example का Explanation
<!DOCTYPE html> – Doctype टैग दिखता है की आपका जो भी डॉक्यूमेंट है वो एक HTML डॉक्यूमेंट है
<html>– यह किसी भी वेबसाइट का मेन tag होता है, जिसके बिना html पेज क्रिएट ही नहीं हो पता.
<head>– इस टैग में सभी एचटीएमएल page की meta-information आती है, जैसे url, keywords, title, seo tags, css का कोड इत्यादि।
<title>– ये टैग आपके वेबसाइट के पेज का टाइटल define करता है. उदाहरण के लिए मेरे वेबसाइट के इस पेज का टाइटल HTML क्या है – What is HTML in Hindi है, तो वो इस <title>आपका टाइटल</title> के अंदर ही आता है.
<body>- body टैग के अंदर वो चीजे आती है जो हमे ब्राउज़र पर दिखाई देती है, जैसे contents, headings, paragraphs, images, hyperlinks, tables, lists, etc. मतलब की बॉडी टैग ना हो आपको ब्राउज़र empty दिखाई देगा और आप उसके अंदर की जानकारी को पढ़ नहीं पाओगे।
<h1>- इसके बारे में तो हर एक ब्लॉगर जानता है क्यों की यह एक SEO का पार्ट है और आर्टिकल लिखते वक्त हम जानकरी को पैराग्राफ मे डिवाइड करने के लिए इसका इस्तेमाल करते ही है.
<p>– यह हमारे पैराग्राफ को डिफाइन करता है. मतलब इस टैग में जो भी जानकारी आएगी वोह ऑटोमेटिकली एक पैराग्राफ कंसीडर की जाएगी।
इसे जरूर पढ़े-
Dark Web क्या है? The Dark Side of Internet | Myths and Truth’s
Tags क्या होते है?
ऊपर पढ़ते वक्त आपके मन में एक सवाल आ रहा होगा की ये tags क्या होता है?
tags यानि html का एक element या एक पार्ट होता है जिसके जरिये इस कोड को लिखा जाता है और यह start tag, आपका content और end tag से परिभाषित किया जाता है.
<tagname> जानकारी.. </ tagname>
HTML में शुरुवात <tagname> से की जाती और उस </tagname> का end भी कही ना कही होता है. निचे दिए example से आप उसे समझ सकते है.
<h1> first heading </ h1>
<p> आपका first paragraph </ p>
लेकिन कुछ ऐसे भी tags होते है जिन्हे end tag नहीं होता है जैसे लाइन को ब्रेक करके new लाइन के लिए <br> tag.
यहां पर मैं आपको इन tags के बारे में पूरी जानकारी नहीं दे सकता क्यों की ऐसे 100 से ऊपर HTML tags होते है जिन्हे वेबसाइट बनाने के लिए यूज किया जाता है.
HTML web पेज कैसे बनाये
ज्यादातर websites प्रोफेशनल tools का इस्तेमाल करती है लेकिन हम इसे notepad जैसे टेक्स्ट एडिटर पर भी बना सकते है.
या फिर आप हमारे HTML website बनाने के online tool का भी इस्तेमाल कर सकते है.
Step 1: सबसे पहले आपके कंप्यूटर पर Start screen (अपनी स्क्रीन पर नीचे बाईं या विंडो सिंबल) को खोलें और notepad टाइप करें।
या फिर आप उसे Open Start > Programs > Accessories > Notepad पर से जाकर भी ओपन कर सकते है.
Step 2: notepad ओपन करने के बाद आपको वहाँ पे एक html का कोड टाइप करना है. आप ऊपर का कोड भी कॉपी (ctrl + c) करके नोटपैड में पेस्ट (ctrl + v) कर सकते है.
आप दूसरे tags को <body> टैग के अंदर ऐड किये बिना भी जानकारी लिख सकते हैं लेकिन आप जब कोड को रन करोगे तब वहा पर आपको सिर्फ टेक्स्ट ही दिखाई देगा जो आपने इस टैग के अंदर add किया है, ना की headings और paragraphs.
Step 3: कोड को नोटपैड में इन्सर्ट करने के बाद आपको उसे सेव करना होगा। अब यहां पर आपकी important स्टेप है क्यों की जब हम किसी फाइल को notepad से save करते है तब वो .txt से सेव होती जो एक टेक्स्ट फाइल होती है. लेकिन यहां पर हम एक वेबपेज बना रहे है इसलिए हमे उसे .html से सेव करना होगा।
example.html लिख के save करे. (your-pagename.html)
Step 4: जिस भी लोकेशन पर आपने फाइल सेव की है उसे double click करके ओपन करे. फाइल .html होने की वजह से browser पर ओपन होगी जहा पर आप सिर्फ <body> टैग ले अंदर add की हुयी जानकारी को देख सकोगे।
Reference tutorial – wikipedia
HTML History
एचटीएमएल के रिलीज़ होने के बाद इसके कही सारे versions पब्लिश हुए है, इसलिए यदि आप एक वेबसाइट बना रहे है तो इसके बारे में आपको पता होना चाहिए-
1989: www का इन्वेंशन
1991: HTML का Invention हुआ
1993: HTML+
1995: HTML 2.0
1997: HTML 3.2
1999: HTML 4.01
2000: XHTML 1.0
2008: HTML5 (started)
2012: HTML5 में चेंजेस हुए
2014: HTML5 (declared globally)
2016: HTML 5.1
2017: HTML5.1 2nd Edition
2017: HTML5.2 (हम जिसे यूज कर रहे है)
मुझे उम्मीद है आपको यह आर्टिकल पसंद आया होगा और आपको इससे एचटीएमएल क्या है (what is html) के बारे में पूरी जानकारी मिल गयी होगी। यदि आपको ऐसा लगता है की कोई महत्वपूर्ण जानकारी मुझसे miss हुयी है तो आप मुझे कमेंट करके बताइये मैंने उसे जरूर इसमें add करूँगा (with your reference name)।
यदि आपको यह आर्टिकल अच्छा लगा हो तो इसे अपने दोस्तों के साथ जरूर शेयर करे और अगर आप हमारे इस वेबसाइट का हिस्सा बनाना चाहते है तो मुझे contact us पेज पर जाकर अपनीं प्रोफाइल शेयर कीजिये जिससे आप भी इस वेबसाइट के साथ जुड़के hindi content लिखकर अपना योगदान दे सकते हैं.
Beautiful information very helpful
Informative article
Very good information about HTML