एचटीएमएल - उन्नत अवधारणाएँ नोट्स | Class 10 Computer Hindi (Hindi Medium)

1. परिचय

एचटीएमएल (HTML - HyperText Markup Language) वेब पेज बनाने की सबसे बुनियादी भाषा है। इसका पूर्ण रूप हाइपरटेक्स्ट मार्कअप लैंग्वेज है। यह कोई प्रोग्रामिंग भाषा नहीं है, बल्कि एक मार्कअप भाषा है जिसका उपयोग वेब पेज की संरचना (Structure) बनाने के लिए किया जाता है। कक्षा 8 और 9 में हमने एचटीएमएल की मूलभूत टैगों का अध्ययन किया था। इस अध्याय में हम एचटीएमएल की उन्नत अवधारणाओं का अध्ययन करेंगे, जिनमें टेबल, फ्रेम्स, फॉर्म, लिंक, मल्टीमीडिया और एम्बेड तत्व शामिल हैं। एक अच्छा वेब पेज बनाने के लिए एचटीएमएल का गहन ज्ञान आवश्यक है। वेब विकास की यात्रा में एचटीएमएल पहला कदम है, जिसके बाद सीएसएस (CSS) स्टाइलिंग और जावास्क्रिप्ट (JavaScript) इंटरैक्टिविटी का कार्य संभालते हैं। वेब डिज़ाइन में एचटीएमएल को कंकाल और सीएसएस को उसकी सुंदरता कहा जाता है।

2. एचटीएमएल की मूल संरचना (Basic Structure of HTML)

प्रत्येक एचटीएमएल दस्तावेज़ एक निश्चित संरचना का अनुसरण करता है। सरल एचटीएमएल दस्तावेज़ का प्रारूप निम्न प्रकार होता है:

<!DOCTYPE html>
<html>
<head>
    <title>मेरा पहला वेब पेज</title>
</head>
<body>
    <h1>नमस्कार दुनिया</h1>
</body>
</html>

<!DOCTYPE html>: यह डिक्लेरेशन ब्राउज़र को बताता है कि दस्तावेज़ एचटीएमएल5 का है।
<html>: यह एचटीएमएल दस्तावेज़ का मूल तत्व (Root Element) है।
<head>: इसमें वेब पेज के बारे में मेटाडेटा, शीर्षक, और स्टाइल की जानकारी होती है।
<title>: यह वेब पेज का शीर्षक निर्धारित करता है जो ब्राउज़र के टैब पर दिखता है।
<body>: इसमें वेब पेज की वास्तविक सामग्री (जैसे पैराग्राफ, चित्र, लिंक) होती है।

3. एचटीएमएल टेबल (HTML Tables)

टेबल का उपयोग डेटा को पंक्तियों और स्तंभों में व्यवस्थित करने के लिए किया जाता है। टेबल बनाने के मुख्य टैग:

<table>: टेबल की शुरुआत और समाप्ति का संकेत देता है।
<tr>: टेबल रो (पंक्ति) बनाने के लिए।
<th>: टेबल हैडर (शीर्षक सेल) बनाने के लिए। इसमें टेक्स्ट स्वतः बोल्ड होता है।
<td>: टेबल डेटा (सामान्य सेल) बनाने के लिए।
<caption>: टेबल का शीर्षक (कैप्शन) जोड़ने के लिए।

उदाहरण:

<table border="1">
    <caption>छात्रों की सूची</caption>
    <tr>
        <th>रोल नंबर</th>
        <th>नाम</th>
        <th>प्राप्तांक</th>
    </tr>
    <tr>
        <td>1</td>
        <td>राहुल</td>
        <td>85</td>
    </tr>
    <tr>
        <td>2</td>
        <td>सीमा</td>
        <td>92</td>
    </tr>
</table>

विलय (Merge) के गुण

colspan: किसी सेल को कई स्तंभों तक फैलाने के लिए। जैसे colspan="2"।
rowspan: किसी सेल को कई पंक्तियों तक फैलाने के लिए। जैसे rowspan="2"।

4. एचटीएमएल लिंक (HTML Links)

लिंक (हाइपरलिंक) के द्वारा हम एक वेब पेज से दूसरे वेब पेज या वेबसाइट पर जा सकते हैं। लिंक बनाने के लिए <a> (Anchor) टैग का उपयोग होता है।

<a href="https://www.example.com">उदाहरण वेबसाइट</a>

href विशेषता गंतव्य पता (URL) निर्धारित करती है।
लिंक को नई विंडो में खोलने के लिए target="_blank" विशेषता का उपयोग होता है।
ईमेल लिंक: <a href="mailto:abc@example.com">ईमेल करें</a>
पेज के भीतर किसी विशेष स्थान पर जाने के लिए एंकर (Anchor) का उपयोग होता है। पहले id निर्धारित करें फिर href="#id" से जुड़ें।

5. एचटीएमएल फॉर्म (HTML Forms)

फॉर्म का उपयोग उपयोगकर्ता से जानकारी प्राप्त करने के लिए किया जाता है, जैसे लॉगिन, पंजीकरण, खोज इत्यादि। फॉर्म बनाने के मुख्य टैग:

<form>: फॉर्म बनाने के लिए। इसमें action (डेटा कहाँ भेजा जाए) और method (GET/POST) विशेषताएँ होती हैं।
<input>: इनपुट फील्ड के लिए। इसकी type विशेषता द्वारा इनपुट का प्रकार तय होता है:
type="text" – सामान्य टेक्स्ट
type="password" – गुप्त शब्द (बिंदुओं के रूप में दिखता है)
type="radio" – रेडियो बटन (एक ही विकल्प चुनना)
type="checkbox" – चेकबॉक्स (अनेक विकल्प)
type="submit" – सबमिट बटन
type="reset" – रीसेट बटन
<textarea>: बहु-पंक्ति वाला टेक्स्ट एरिया।
<select> और <option>: ड्रॉप-डाउन सूची बनाने के लिए।
<label>: किसी इनपुट के लिए लेबल परिभाषित करता है।

फॉर्म का उदाहरण:

<form action="process.php" method="post">
    <label>नाम: <input type="text" name="naam"></label><br>
    <label>पासवर्ड: <input type="password" name="pass"></label><br>
    <label><input type="radio" name="gender" value="male"> पुरुष</label>
    <label><input type="radio" name="gender" value="female"> महिला</label><br>
    <input type="submit" value="जमा करें">
    <input type="reset" value="साफ़ करें">
</form>

GET और POST में अंतर

GET: डेटा URL में दिखाई देता है। सीमित मात्रा में डेटा भेजा जा सकता है। सुरक्षित नहीं है।
POST: डेटा URL में नहीं दिखता, बॉडी में भेजा जाता है। अधिक मात्रा में डेटा भेजा जा सकता है। सुरक्षित है।

6. एचटीएमएल फ्रेम्स (HTML Frames)

फ्रेम्स के द्वारा ब्राउज़र विंडो को कई भागों में बाँटा जा सकता है, जिनमें प्रत्येक भाग एक अलग वेब पेज प्रदर्शित करता है। फ्रेम्स के लिए <frameset> और <frame> टैग का उपयोग होता है। rows और cols विशेषताओं द्वारा फ्रेम का विभाजन किया जाता है।

उदाहरण:

<frameset cols="25%, 75%">
    <frame src="menu.html" name="menu">
    <frame src="content.html" name="content">
</frameset>

आधुनिक एचटीएमएल5 में फ्रेम्स का उपयोग बंद कर दिया गया है, इनके स्थान पर इफ्रेम (iframe) का उपयोग होता है। इफ्रेम एक वेब पेज के अंदर दूसरा वेब पेज दिखाता है:

<iframe src="https://www.example.com" width="500" height="300"></iframe>

7. एचटीएमएल मल्टीमीडिया (HTML Multimedia)

मल्टीमीडिया का अर्थ है टेक्स्ट के साथ ध्वनि, चित्र, वीडियो और एनिमेशन का संयोजन।

चित्र (Images): <img src="image.jpg" alt="विवरण" width="200" height="150">
src चित्र का पता और alt चित्र के न दिखने पर दिखने वाला वैकल्पिक टेक्स्ट।
ऑडियो (Audio): <audio controls><source src="song.mp3" type="audio/mpeg"></audio>
वीडियो (Video): <video controls width="400"><source src="movie.mp4" type="video/mp4"></video>
एम्बेड (Embed): <embed src="file.pdf" width="400" height="300"> – बाहरी फाइल को पेज में दिखाता है।
मार्की (Marquee): <marquee> टैग से टेक्स्ट स्क्रॉल होता है (हालाँकि आधुनिक एचटीएमएल में इसे अप्रचलित माना गया है)।

8. सूचियाँ और विशेष तत्व (Lists and Other Tags)

क्रमबद्ध सूची (Ordered List): <ol> के अंदर <li> आइटम होते हैं। इसमें नंबरिंग होती है।
अक्रमबद्ध सूची (Unordered List): <ul> के अंदर <li> आइटम होते हैं। इसमें बुलेट होते हैं।
परिभाषा सूची (Definition List): <dl>, <dt> (शब्द), <dd> (परिभाषा)।
<div>: ब्लॉक स्तरीय कंटेनर। यह अन्य तत्वों को समूहबद्ध करता है।
<span>: इनलाइन कंटेनर। यह टेक्स्ट के एक छोटे हिस्से को स्टाइल करने में सहायक है।
<marquee>, <center> जैसे कुछ पुराने टैग अप्रचलित (Deprecated) घोषित किए गए हैं, इनके स्थान पर सीएसएस का उपयोग करना चाहिए।

9. एचटीएमएल विशेषताएँ (HTML Attributes)

एचटीएमएल टैग के बारे में अतिरिक्त जानकारी देने वाले गुण विशेषताएँ कहलाती हैं। कुछ महत्वपूर्ण सामान्य विशेषताएँ:

id: किसी तत्व को एक अनोखी पहचान देता है।
class: कई तत्वों को एक साथ समूहबद्ध करता है।
style: तत्व में सीधे सीएसएस स्टाइल जोड़ता है।
title: तत्व पर माउस ले जाने पर टूलटिप दिखाता है।
align: टेक्स्ट की स्थिति (left, center, right) निर्धारित करता है।
bgcolor: पृष्ठभूमि का रंग निर्धारित करता है।
font: फॉन्ट का आकार, रंग, प्रकार निर्धारित करता है।

10. आधुनिक एचटीएमएल5 तत्व

एचटीएमएल5 ने वेब पेज को अधिक सार्थक (Semantic) बनाने के लिए नए तत्व प्रस्तुत किए:

<header>: पेज का शीर्ष भाग।
<nav>: नेविगेशन लिंक।
<section>: सामग्री का एक भाग।
<article>: स्वतंत्र लेख।
<aside>: पार्श्व सामग्री।
<footer>: पेज का निचला भाग।
<figure> और <figcaption>: चित्र और उसका शीर्षक।

त्वरित पुनरावृत्ति तालिकाएँ

तालिका 1: इनपुट प्रकार और उनके उपयोग

input type	उपयोग
text	सामान्य टेक्स्ट इनपुट
password	गुप्त शब्द (छिपा हुआ)
radio	एक ही विकल्प चुनना
checkbox	एक से अधिक विकल्प चुनना
submit	डेटा जमा करने का बटन
reset	फॉर्म साफ़ करना

तालिका 2: टेबल और सूची टैग

टैग	पूर्ण रूप	कार्य
tr	Table Row	पंक्ति बनाना
th	Table Header	शीर्षक सेल
td	Table Data	सामान्य सेल
ol	Ordered List	क्रमांकित सूची
ul	Unordered List	बुलेट सूची
li	List Item	सूची का आइटम

तालिका 3: मल्टीमीडिया टैग

टैग	मीडिया प्रकार	महत्वपूर्ण विशेषताएँ
img	चित्र	src, alt, width, height
audio	ध्वनि	controls, autoplay
video	चलचित्र	controls, autoplay, loop
embed	बाहरी फाइल	src, width, height
iframe	वेब पेज	src, width, height

माइंड मैप

graph TD A["HTML - उन्नत"] --> B["टेबल"] B --> B1["tr, th, td"] B --> B2["colspan, rowspan"] A --> C["लिंक"] C --> C1["a tag, href"] C --> C2["target=_blank"] A --> D["फॉर्म"] D --> D1["input प्रकार"] D --> D2["GET और POST"] A --> E["फ्रेम्स"] E --> E1["frameset"] E --> E2["iframe"] A --> F["मल्टीमीडिया"] F --> F1["img, audio, video"] A --> G["HTML5 सिमेंटिक"] G --> G1["header, nav, footer"]

महत्वपूर्ण आरेख (SVG)

फॉर्म तत्वों की संरचना

वेब पेज का लेआउट (HTML5 सिमेंटिक)

सामान्य गलतियाँ

tr, th, td के क्रम में भ्रम; tr पंक्ति है, th शीर्षक सेल है और td सामान्य डेटा सेल है।
फॉर्म में action और method की भूमिका न समझना; action डेटा भेजने का पता है जबकि method भेजने की विधि (GET/POST)।
colspan और rowspan का उपयोग उल्टा कर देना; colspan स्तंभों में और rowspan पंक्तियों में फैलाता है।
<img> टैग को समाप्त टैग </img> लिखना गलत है; <img> एक खाली तत्व है, स्लैश के साथ /> में समाप्त होता है।
href और src में भ्रम; href लिंक में और src चित्र/फाइल में प्रयोग होता है।
रेडियो बटन में एक ही name देने पर ही केवल एक विकल्प चुनता है, अलग-अलग नाम देने पर सभी चुने जा सकते हैं - यह अक्सर भूल जाते हैं।
<title> टैग को <body> के अंदर लिखना; <title> सदैव <head> में होता है।

परीक्षा युक्तियाँ

टेबल और फॉर्म के कोड सैंपल को अभ्यास के लिए बार-बार लिखें; परीक्षा में कोड लिखने के प्रश्न अक्सर पूछे जाते हैं।
GET और POST के बीच के अंतर को स्पष्ट रूप से समझें; यह सबसे पूछा जाने वाला प्रश्न है।
प्रत्येक टैग के पूर्ण रूप (tr, th, td, ol, ul) याद करें।
मल्टीमीडिया टैग में controls, autoplay, loop जैसी विशेषताओं के अर्थ याद रखें।
सिमेंटिक टैग (header, nav, footer) के उद्देश्य को जानें क्योंकि HTML5 से संबंधित प्रश्न वर्ष 2020 के बाद लगातार पूछे जा रहे हैं।
कोड लिखते समय हर टैग को सही क्रम में बंद करें; अधूरा टैग पूरा पेज बिगाड़ देता है।
आउटपुट आधारित प्रश्नों (जैसे दिए गए कोड का आउटपुट क्या होगा) का अभ्यास करें, क्योंकि ये परीक्षाओं में सामान्य हैं।

निष्कर्ष

इस अध्याय में हमने एचटीएमएल की उन्नत अवधारणाओं का अध्ययन किया, जिसमें टेबल, लिंक, फॉर्म, फ्रेम्स, मल्टीमीडिया और HTML5 के सिमेंटिक तत्व शामिल हैं। एचटीएमएल वेब विकास की नींव है और इसका गहन ज्ञान हमें आकर्षक और कार्यात्मक वेब पेज बनाने में सक्षम बनाता है। अगले अध्यायों में हम सीएसएस और जावास्क्रिप्ट सीखेंगे, जो वेब पेजों को सुंदर और इंटरैक्टिव बनाते हैं। एचटीएमएल का अभ्यास नियमित रूप से करके हम वेब डिज़ाइन में महारत हासिल कर सकते हैं और स्वयं की वेबसाइट बना सकते हैं। याद रखें, वेब पेज केवल एचटीएमएल से संरचना पाता है, सुंदरता और कार्यक्षमता के लिए अन्य भाषाओं की भी आवश्यकता होती है।

एचटीएमएल - उन्नत अवधारणाएँ — अध्ययन नोट्स