HTML 5 क्या है? एक शुरुआती गाइड (Introduction to HTML 5 in Hindi)

क्या आपने कभी सोचा है कि इंटरनेट पर दिखने वाली वेबसाइट्स कैसे बनती हैं? जब आप किसी लिंक पर क्लिक करते हैं और एक नया पेज खुलता है, तो उसके पीछे कौन सी तकनीक काम करती है? इसका जवाब है— HTML।

आज के इस ब्लॉग पोस्ट में, हम HTML 5 के बेसिक्स, इसके इतिहास और आप अपना पहला वेब पेज कैसे बना सकते हैं, यह सब सरल हिंदी में सीखेंगे।

1. HTML क्या है? (What is HTML?)

HTML का पूरा नाम Hyper Text Markup Language है । यह कोई प्रोग्रामिंग भाषा (Programming Language) नहीं है, बल्कि एक मार्कअप लैंग्वेज (Markup Language) है। इसका उपयोग वेब पेजों का ढांचा (structure) तैयार करने के लिए किया जाता है ।

Hypertext: इसका मतलब है टेक्स्ट के अंदर छिपा हुआ लिंक। जब आप किसी शब्द पर क्लिक करते हैं और दूसरा पेज खुलता है, तो उसे हाइपरटेक्स्ट कहते हैं ।
Markup Language: यह टैग्स (Tags) का उपयोग करती है जो ब्राउज़र को बताते हैं कि पेज पर टेक्स्ट, इमेज या वीडियो को कैसे दिखाना है ।

सरल शब्दों में, जैसे इंसान की बॉडी में कंकाल (Skeleton) होता है, वैसे ही किसी भी वेबसाइट का कंकाल HTML होता है।

2. HTML का इतिहास (Brief History)

HTML की शुरुआत 1980 के दशक में GML (General Markup Language) के रूप में हुई थी। बाद में 1989 में Tim Berners-Lee और उनकी टीम ने इसे HTML का नाम दिया ।

HTML 2.0: 1995 में आया और यह स्टैंडर्ड वर्जन बना ।
HTML 5: यह सबसे नया और एडवांस वर्जन है, जिसे 2008 के आसपास पेश किया गया । HTML 5 की खासियत यह है कि इसमें ऑडियो और वीडियो को बिना किसी बाहरी प्लगइन (जैसे Flash Player) के आसानी से जोड़ा जा सकता है ।

3. HTML के लिए ज़रूरी टूल्स (Tools Required)

HTML पर काम करने के लिए आपको किसी महंगे सॉफ्टवेयर की ज़रूरत नहीं है। आपको बस दो चीज़ें चाहिए:

HTML Editor: कोड लिखने के लिए। (जैसे: Notepad, Notepad++, या VS Code) ।
Web Browser: रिजल्ट देखने के लिए। (जैसे: Google Chrome, Mozilla Firefox, Microsoft Edge) ।

4. अपना पहला HTML पेज कैसे बनाएं? (Step-by-Step)

चलिए, नोटपैड (Notepad) का उपयोग करके अपना पहला वेब पेज बनाते हैं।

स्टेप 1: अपने कंप्यूटर पर Notepad खोलें । स्टेप 2: नीचे दिया गया कोड टाइप करें:

HTML

<html>

<head>

    <title>My First Web Page</title>

</head>

<body bgcolor="yellow">

    <h1>India is a Great Country</h1>

    <p>Yeh mera pehla HTML web page hai.</p>

</body>

</html>

स्टेप 3: फाइल को सेव करें।

File > Save As पर क्लिक करें।
फाइल का नाम दें, जैसे index.html (ध्यान रहे, नाम के अंत में .html लगाना ज़रूरी है) ।

स्टेप 4: अब उस सेव की गई फाइल पर राइट क्लिक करें और Open with Google Chrome चुनें। आपको अपना बनाया हुआ वेब पेज दिखाई देगा!

5. HTML डॉक्यूमेंट का स्ट्रक्चर (Document Structure)

HTML कोड हमेशा कुछ मुख्य टैग्स के साथ लिखा जाता है। आइए इसे समझते हैं:

<html>: यह बताता है कि डॉक्यूमेंट HTML में लिखा गया है। यह पेज की शुरुआत और अंत को दर्शाता है ।
<head>: इसमें पेज की जानकारी (Metadata) होती है जो ब्राउज़र को चाहिए, लेकिन यह यूजर को सीधे पेज पर नहीं दिखती (सिवाय टाइटल के) ।
<title>: यह <head> के अंदर लिखा जाता है। यह ब्राउज़र के सबसे ऊपरी टैब में पेज का नाम दिखाता है ।
<body>: यह सबसे मुख्य भाग है। आप वेबसाइट पर जो भी टेक्स्ट, इमेज या लिंक देखते हैं, वह सब <body> टैग के अंदर लिखा जाता है ।

6. टैग्स और उनके प्रकार (Types of Tags)

HTML में दो तरह के टैग होते हैं:

A. कंटेनर टैग्स (Container Elements)

इनमें एक ओपनिंग टैग होता है और एक क्लोजिंग टैग होता है।

उदाहरण: <b> (शुरुआत) और </b> (अंत)।
अगर आप <b>Hello</b> लिखेंगे, तो Hello बोल्ड (मोटा) दिखेगा ।

B. एम्प्टी टैग्स (Empty Elements)

इनमें क्लोजिंग टैग की ज़रूरत नहीं होती। ये अकेले काम करते हैं।

उदाहरण: <br> (लाइन ब्रेक) और <hr> (हॉरिजॉन्टल लाइन) ।

7. कुछ महत्वपूर्ण टैग्स जो आपको जानने चाहिए

अपने पेज को सुंदर बनाने के लिए आप इन टैग्स का इस्तेमाल कर सकते हैं:

Heading Tags (<h1>से <h6>): हेडलाइन देने के लिए। <h1> सबसे बड़ी हेडिंग होती है और <h6> सबसे छोटी ।
Paragraph Tag (<p>): पैराग्राफ लिखने के लिए। आप align एट्रिब्यूट का उपयोग करके टेक्स्ट को Left, Center या Right में सेट कर सकते हैं ।
Bold, Italic, Underline:
- <b>: टेक्स्ट को बोल्ड करने के लिए ।
- <i>: टेक्स्ट को तिरछा (Italic) करने के लिए ।
- <u>: टेक्स्ट के नीचे <u>लाइन (Underline)</u> खींचने के लिए ।
Line Break (<br>): नई लाइन शुरू करने के लिए ।
Horizontal Rule (<hr>): पेज पर एक सीधी रेखा (Divider) खींचने के लिए ।

8. पेज को रंगीन कैसे बनाएं? (Styling the Page)

आप <body> टैग में कुछ “एट्रिब्यूट्स” (Attributes) जोड़कर पेज का रंग बदल सकते हैं ।

बैकग्राउंड कलर: <body bgcolor=”skyblue”> लिखने से पूरा पेज नीले रंग का हो जाएगा ।
टेक्स्ट कलर: <body text=”red”> लिखने से पेज का सारा टेक्स्ट लाल रंग का हो जाएगा ।
बैकग्राउंड इमेज: आप कलर की जगह फोटो भी लगा सकते हैं: <body background=”image.jpg”> ।

निष्कर्ष (Conclusion)

दोस्तों, HTML सीखना वेब डेवलपमेंट की दुनिया में पहला कदम है। यह बहुत ही आसान और मजेदार है। आप ऊपर दिए गए कोड्स को अपने नोटपैड में लिखकर प्रैक्टिस करें।

क्या आप HTML के बारे में और जानना चाहते हैं? कमेंट में बताएं, और हम अगले ब्लॉग में “इमेज और लिंक” जोड़ने के तरीके पर बात करेंगे!

अक्सर पूछे जाने वाले प्रश्न (FAQ)

Q1: HTML का फुल फॉर्म क्या है?

Ans: HTML का मतलब Hyper Text Markup Language है । यह एक कोड पैकेज है जिसका उपयोग टेक्स्ट और ग्राफिक्स वाले वेब पेज बनाने के लिए किया जाता है ।

Q2: HTML कोडिंग शुरू करने के लिए मुझे किन टूल्स की आवश्यकता है?

Ans: आपको केवल दो बुनियादी टूल्स की आवश्यकता है: डॉक्यूमेंट बनाने के लिए एक HTML Editor (जैसे नोटपैड या वर्डपैड) और वेब पेज देखने के लिए एक Web Browser (जैसे गूगल क्रोम या माइक्रोसॉफ्ट एज) ।

Q3: HTML5 पुराने वर्ज़न से कैसे अलग है?

Ans: HTML5 नवीनतम वर्ज़न है जिसमें वेब पेजों में ऑडियो और वीडियो क्लिप जोड़ना बहुत आसान है, जो पुराने वर्ज़न में बिना बाहरी प्लगइन्स (जैसे फ्लैश प्लेयर) के मुश्किल था । इसमें सीधे पेज पर ड्राइंग करने के लिए CANVAS जैसा फीचर भी है|

Q4: HTML फाइल को सेव करने के लिए सही एक्सटेंशन क्या है?

Ans: HTML फाइल सेव करते समय, आपको फाइल नाम के बाद .htm या .html एक्सटेंशन का उपयोग करना चाहिए ।

Q5: कंटेनर (Container) और एम्प्टी (Empty) एलिमेंट्स में क्या अंतर है?

Ans: कंटेनर एलिमेंट्स में ओपनिंग और क्लोजिंग दोनों टैग होते हैं (जैसे <b> और </b>), जबकि एम्प्टी एलिमेंट्स में केवल ओपनिंग टैग होता है और वे किसी डेटा को बंद नहीं करते (जैसे <br> या <hr>) ।

वेब डिजाइनिंग की शुरुआत: HTML 5 के साथ अपनी पहली वेबसाइट बनाएं |