अध्याय 1: HTML का परिचय

वेब पेज क्या होते हैं? (What are Web Pages?)

वेब पेज इंटरनेट पर उपलब्ध एक प्रकार की डिजिटल दस्तावेज़ होती है जिसे वेब ब्राउज़र के माध्यम से देखा जा सकता है। ये वेब पेज आमतौर पर HTML (Hypertext Markup Language) में लिखे जाते हैं और वेब सर्वर पर होस्ट किए जाते हैं। वेब पेजों पर विभिन्न प्रकार की जानकारी हो सकती है, जैसे टेक्स्ट, चित्र, वीडियो, लिंक, और अन्य मल्टीमीडिया सामग्री।

वेब पेज मुख्यतः दो प्रकार के होते हैं:

1. स्टेटिक वेब पेज (Static Web Pages): ये पेज स्थिर होते हैं और इनकी सामग्री बदलती नहीं है। इन्हें एक बार बनाया जाता है और यह सभी उपयोगकर्ताओं को एक ही सामग्री प्रदर्शित करते हैं।
2. डायनेमिक वेब पेज (Dynamic Web Pages): ये पेज इंटरैक्टिव होते हैं और इनमें सामग्री उपयोगकर्ता के इनपुट या अन्य कारकों के आधार पर बदल सकती है। इन्हें सर्वर-साइड स्क्रिप्टिंग (जैसे PHP, ASP.NET) या क्लाइंट-साइड स्क्रिप्टिंग (जैसे JavaScript) के माध्यम से बनाया जाता है।

वेब पेज किसी वेबसाइट का हिस्सा होते हैं और वेबसाइट एक डोमेन नाम के अंतर्गत कई वेब पेजों का संग्रह होती है। प्रत्येक वेब पेज का एक विशिष्ट URL (Uniform Resource Locator) होता है, जिससे उसे इंटरनेट पर एक्सेस किया जा सकता है।

HTML क्या है?

HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) वेब पेज बनाने की एक मानक मार्कअप भाषा है। यह वेब पेजों की संरचना को निर्धारित करता है और विभिन्न तत्वों जैसे टेक्स्ट, इमेज, लिंक, टेबल्स, और अन्य मीडिया को जोड़ने का तरीका प्रदान करता है। HTML टैग्स और एट्रिब्यूट्स का उपयोग करके वेब पेज की सामग्री को संरचित और शैलीबद्ध किया जाता है।

HTML का इतिहास

HTML का विकास 1991 में टिम बर्नर्स-ली द्वारा किया गया था, जो वर्ल्ड वाइड वेब (WWW) के जनक माने जाते हैं। प्रारंभिक HTML संस्करणों में केवल कुछ बुनियादी टैग्स थे, लेकिन समय के साथ HTML का विकास हुआ और इसमें नई सुविधाएँ और क्षमताएँ जोड़ी गईं। वर्तमान में, HTML5 इसका नवीनतम संस्करण है, जो वेब विकास की दुनिया में व्यापक रूप से उपयोग किया जाता है।

HTML का टाइमलाइन (इतिहास)

1990

• टिम बर्नर्स-ली द्वारा वर्ल्ड वाइड वेब का आविष्कार: टिम बर्नर्स-ली ने वर्ल्ड वाइड वेब का आविष्कार किया और पहला वेब ब्राउज़र और वेब सर्वर विकसित किया।

1991

• पहला HTML दस्तावेज़: टिम बर्नर्स-ली ने पहला HTML दस्तावेज़ “HTML टैग्स” लिखा। इसमें केवल 18 टैग्स थे।

1993

• NCSA मोज़ेक वेब ब्राउज़र का परिचय: मोज़ेक ब्राउज़र ने वेब को मुख्यधारा में लाने में महत्वपूर्ण भूमिका निभाई। इसने ग्राफिकल यूजर इंटरफेस के साथ वेब ब्राउज़िंग को आसान बनाया।

1995

• HTML 2.0 का परिचय: इंटरनेट इंजीनियरिंग टास्क फोर्स (IETF) द्वारा HTML 2.0 को मानकीकृत किया गया। इसमें HTML 1.0 की सभी विशेषताएँ शामिल थीं और कुछ नई सुविधाएँ जोड़ी गईं।

1997

• HTML 3.2 का परिचय: वर्ल्ड वाइड वेब कंसोर्टियम (W3C) ने HTML 3.2 को जारी किया, जिसमें टेबल्स, एप्पलेट्स और टेक्स्ट फ्लो जैसी नई सुविधाएँ शामिल थीं।
• HTML 4.0 का परिचय: HTML 4.0 को W3C द्वारा जारी किया गया, जिसमें फ़्रेम्स, स्टाइल शीट्स, और मल्टीमीडिया तत्वों के लिए समर्थन शामिल था। HTML 4.0 तीन संस्करणों में आया: स्ट्रिक्ट, ट्रांजिशनल, और फ्रेमसेट।

1999

• HTML 4.01 का अपडेट: HTML 4.01 को HTML 4.0 के छोटे सुधारों और बग फिक्स के साथ जारी किया गया।

2000

• XHTML 1.0 का परिचय: XHTML 1.0, HTML 4.01 का XML आधारित संस्करण था। इसे W3C द्वारा जारी किया गया और यह वेब दस्तावेज़ों को XML के कठोरता के साथ लिखने की अनुमति देता है।

2008

• HTML5 का परिचय: HTML5 का प्रारंभिक ड्राफ्ट जारी किया गया। इसका उद्देश्य पुराने HTML संस्करणों की कमियों को दूर करना और नई वेब तकनीकों के लिए समर्थन जोड़ना था।

2014

• HTML5 की अंतिम अनुशंसा: W3C ने HTML5 को आधिकारिक अंतिम अनुशंसा के रूप में प्रकाशित किया। इसमें नई सुविधाओं का परिचय हुआ, जैसे कि वीडियो और ऑडियो टैग्स, कैनवास एलिमेंट, और स्थानीय स्टोरेज।

2016

• HTML 5.1 का परिचय: W3C ने HTML 5.1 को जारी किया, जिसमें HTML5 की छोटी सुधारें और नई सुविधाएँ शामिल थीं।

2017

• HTML 5.2 का परिचय: W3C ने HTML 5.2 को जारी किया, जिसमें सुरक्षा और इंटरऑपरेबिलिटी के लिए सुधारें शामिल थीं।

HTML का भविष्य

HTML का विकास निरंतर जारी है और वेब तकनीकों में सुधार और नई सुविधाओं को जोड़ने के लिए W3C और WHATWG (वेब हाइपरटेक्स्ट एप्लिकेशन टेक्नोलॉजी वर्किंग ग्रुप) मिलकर काम कर रहे हैं। भविष्य में, हम HTML के और भी उन्नत संस्करणों की अपेक्षा कर सकते हैं जो वेब विकास को और भी सरल और शक्तिशाली बनाएंगे।

इस टाइमलाइन के माध्यम से, आप HTML के विकास और विभिन्न संस्करणों के इतिहास को समझ सकते हैं। HTML का यह निरंतर विकास वेब को और भी समृद्ध और इंटरैक्टिव बना रहा है।

HTML के उपयोग और महत्व

HTML का उपयोग वेब पेजों की संरचना और सामग्री को प्रस्तुत करने के लिए किया जाता है। यह वेब विकास का मूलभूत तत्व है और बिना HTML के, कोई भी वेब पेज अस्तित्व में नहीं हो सकता। HTML के उपयोग और महत्व के कुछ प्रमुख बिंदु निम्नलिखित हैं:

• वेब पेज निर्माण: HTML का उपयोग करके वेब पेज की सामग्री को संरचित किया जाता है, जैसे कि हेडिंग्स, पैराग्राफ, लिस्ट्स, इमेजेज, और लिंक।
• वेब ब्राउज़र संगतता: HTML वेब ब्राउज़र द्वारा समझा और प्रस्तुत किया जाता है, जिससे उपयोगकर्ताओं को वेब पेज देखने और इंटरैक्ट करने की सुविधा मिलती है।
• SEO (सर्च इंजन ऑप्टिमाइजेशन): HTML टैग्स और एट्रिब्यूट्स का सही उपयोग सर्च इंजन में वेब पेज की रैंकिंग को सुधार सकता है।
• प्रतिक्रियाशीलता: HTML का उपयोग अन्य वेब तकनीकों जैसे CSS और जावास्क्रिप्ट के साथ मिलकर प्रतिक्रियाशील और इंटरैक्टिव वेब पेज बनाने में किया जाता है।

HTML और वेब ब्राउज़र

वेब ब्राउज़र एक सॉफ़्टवेयर एप्लिकेशन होता है जो उपयोगकर्ताओं को इंटरनेट पर वेब पेजों और वेबसाइटों को एक्सेस और देखने की सुविधा प्रदान करता है। वेब ब्राउज़र की प्रमुख भूमिकाएं निम्नलिखित हैं:

1. वेब पेज लोड करना और प्रदर्शित करना: वेब ब्राउज़र उपयोगकर्ता द्वारा अनुरोधित URL (Uniform Resource Locator) के आधार पर वेब सर्वर से वेब पेज की HTML, CSS, और JavaScript फाइलें डाउनलोड करता है और उन्हें प्रोसेस करके उपयोगकर्ता को दिखाता है।
2. इंटरप्रेटेशन और रेंडरिंग: ब्राउज़र HTML, CSS और JavaScript कोड को इंटरप्रेट (व्याख्या) करता है और उसे एक दृश्य रूप में रेंडर (प्रदर्शित) करता है, जिससे उपयोगकर्ता वेब पेज को ग्राफिकल इंटरफेस में देख सकते हैं।
3. यूजर इंटरफेस (UI) प्रदान करना: वेब ब्राउज़र एक उपयोगकर्ता इंटरफेस प्रदान करता है जिसमें एड्रेस बार, बैक और फॉरवर्ड बटन, बुकमार्क्स, और टैब जैसी सुविधाएं होती हैं, जो वेब नेविगेशन को आसान बनाती हैं।
4. सुरक्षा और गोपनीयता: ब्राउज़र उपयोगकर्ताओं की सुरक्षा और गोपनीयता की रक्षा करने के लिए कई उपाय करता है, जैसे कि HTTPS के माध्यम से सुरक्षित कनेक्शन स्थापित करना, पॉप-अप ब्लॉकिंग, और गोपनीयता मोड (इन्कॉग्निटो मोड) प्रदान करना।
5. स्टोरेज और कुकीज़ प्रबंधन: वेब ब्राउज़र उपयोगकर्ता की प्राथमिकताओं और वेब पेजों की जानकारी को स्टोर करने के लिए लोकल स्टोरेज और कुकीज़ का प्रबंधन करता है, जिससे उपयोगकर्ता का अनुभव अधिक व्यक्तिगत और कुशल हो जाता है।
6. प्लगइन्स और एक्सटेंशन: ब्राउज़र अतिरिक्त सुविधाओं को जोड़ने के लिए प्लगइन्स और एक्सटेंशन को सपोर्ट करता है, जो उपयोगकर्ता की कार्यक्षमता को बढ़ा सकते हैं।

वेब ब्राउज़र के कुछ लोकप्रिय उदाहरणों में Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, और Opera शामिल हैं।

HTML पेज संरचना का बुनियादी दृश्य

HTML पेज की संरचना को समझने के लिए हम एक साधारण HTML दस्तावेज़ का उदाहरण देख सकते हैं। यह उदाहरण HTML पेज की मूलभूत संरचना और टैग्स का उपयोग दिखाता है।

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>मेरा पहला HTML पेज</title>
</head>
<body>
<header>
<h1>स्वागत है मेरे HTML पेज पर</h1>
</header>

<nav>
<ul>
<li><a href="#home">मुखपृष्ठ</a></li>
<li><a href="#about">हमारे बारे में</a></li>
<li><a href="#services">सेवाएँ</a></li>
<li><a href="#contact">संपर्क करें</a></li>
</ul>
</nav>

<main>
<section id="home">
<h2>मुखपृष्ठ</h2>
<p>यह हमारा मुख्य पृष्ठ है जहाँ आप हमारे बारे में अधिक जान सकते हैं।</p>
</section>

<section id="about">
<h2>हमारे बारे में</h2>
<p>हम एक वेब विकास कंपनी हैं जो आपके लिए उत्कृष्ट वेब समाधान प्रदान करती है।</p>
</section>

<section id="services">
<h2>सेवाएँ</h2>
<p>हम विभिन्न प्रकार की सेवाएँ प्रदान करते हैं, जैसे वेब डिजाइनिंग, वेब विकास, और SEO सेवाएँ।</p>
</section>
</main>

<footer>
<p>© 2023 हमारा HTML पेज. सर्वाधिकार सुरक्षित.</p>
</footer>
</body>
</html>

HTML पेज संरचना का विवरण

1. <!DOCTYPE html>:
   • यह डॉक्सटाइप घोषणा HTML5 दस्तावेज़ को निर्दिष्ट करती है।
2. <html>:
   • यह रूट तत्व है जो पूरे HTML दस्तावेज़ को घेरता है।
   • lang="en" ऐट्रिब्यूट भाषा को इंगित करता है (यहाँ अंग्रेजी)।
3. <head>:
   • इसमें मेटाडेटा शामिल होता है जैसे कि चरसेट, viewport सेटिंग्स, और पेज का शीर्षक।
   • <title> टैग पेज का शीर्षक सेट करता है जो ब्राउज़र टैब पर दिखता है।
4. <body>:
   • यह पेज की मुख्य सामग्री को घेरता है, जो उपयोगकर्ताओं को दिखाई देती है।
   • इसमें हेडर, नेविगेशन, मुख्य सामग्री, और फूटर शामिल हैं।
5. <header>:
   • इसमें पेज का शीर्षक और स्वागत संदेश होता है।
6. <nav>:
   • नेविगेशन बार, जिसमें लिंक की सूची शामिल होती है।
   • <ul> (unordered list) और <li> (list item) टैग्स का उपयोग करके नेविगेशन मेनू बनाया गया है।
7. <main>:
   • पेज की मुख्य सामग्री को घेरता है।
   • <section> टैग का उपयोग विभिन्न अनुभागों को विभाजित करने के लिए किया गया है।
8. <footer>:
   • पेज के निचले हिस्से में फूटर सामग्री, जैसे कॉपीराइट जानकारी, शामिल होती है।

यह HTML पेज संरचना का एक बुनियादी उदाहरण है। इसमें दिखाए गए टैग्स और तत्व HTML दस्तावेज़ को सही तरीके से संरचित करने में मदद करते हैं, जिससे पेज को बेहतर ढंग से प्रस्तुत किया जा सकता है और उपयोगकर्ता को नेविगेट करने में आसानी होती है।