html टैग का परिचय (चित्र, हाइपरलिंक, टेक्स्ट टैग आदि)

HTML का पूरा नाम Hyper Text Markup Language है और यह वेबसाइट बनाने के लिए आवश्यक भाषाओं में से एक है। HTML में मुख्य रूप से टैग की अवधारणा का उपयोग करके वेब दस्तावेज़ बनाए जाते हैं। इस सामग्री में वेबसाइट बनाने के लिए आवश्यक टैग को एक जगह एकत्र करके समझाया गया है।

टैग के कई प्रकार हैं, इसलिए हर एक का विस्तार से वर्णन करना कठिन है। इस सामग्री से HTML में मौजूद टैग और उनकी संरचना का एक व्यापक परिचय लेना उपयोगी होगा।

HTML की अवधारणा

HTML की संरचना

HTML टैग का उपयोग करते समय यह जानना उपयोगी है कि सामान्य प्रोग्रामिंग भाषाएँ बड़े और छोटे अक्षरों के अंतर के प्रति संवेदनशील होती हैं, जबकि टैग में बड़े और छोटे अक्षरों का भेद नहीं किया जाता, जिससे उनका उपयोग अपेक्षाकृत आसान होता है।

इसके अलावा, गलती होने पर भी कोई गंभीर त्रुटि उत्पन्न नहीं होती, इसलिए इस भाषा को सीखना काफी आसान माना जा सकता है।

सभी टैग < चिह्न से शुरू होकर > चिह्न पर समाप्त होते हैं। कई स्पेस देने पर भी केवल एक स्पेस लागू होता है। टैग का मूल ढाँचा <टैगनाम विशेषता="विशेषतामान"> ~ </टैगनाम> होता है।

इस सामग्री में प्रत्येक टैग की व्याख्या इसी अवधारणा के अनुसार html टैग के प्रारूप के भीतर लिखी जाएगी।

दस्तावेज़ संबंधी टैग

​

दस्तावेज़ संबंधी टैग

▣ दस्तावेज़ के मार्जिन निर्धारित करना (topmargin, leftmargin) - <body topmargin="0" leftmargin="0"> बिना मार्जिन वाला पेज बनाना</body>

▣ पृष्ठभूमि का रंग निर्धारित करना (bgcolor) - <body bgcolor="रंग"> पृष्ठभूमि को निर्धारित रंग देता है। </body>

▣ पृष्ठभूमि का चित्र निर्धारित करना (background) - <body background="फ़ाइलनाम.jpg"> चित्र की फ़ाइल और वेब दस्तावेज़ एक ही पथ पर होने चाहिए। अन्यथा पथ भी निर्धारित करना होगा। </body>

▣ पंक्ति बदलना (br, p) -

<body>

सामान्यतः वर्ड दस्तावेज़ में <br>

एंटर कुंजी दबाने पर अगली पंक्ति शुरू हो जाती है, लेकिन<br>

HTML दस्तावेज़ में br नाम के टैग का उपयोग करके<br>

पंक्ति बदली जा सकती है। वहीं p टैग से <p>

​

सामान्य पंक्ति परिवर्तन की तुलना में एक अतिरिक्त खाली पंक्ति छोड़कर नई पंक्ति शुरू की जा सकती है।

</body>

टेक्स्ट संबंधी टैग

टेक्स्ट संबंधी टैग

▣ टेक्स्ट को मोटे अक्षरों में दिखाना (b) - <b> टेक्स्ट से पहले b टैग लगाने पर उसे मोटे अक्षरों में दिखाया जा सकता है। </b>

▣ फ़ॉन्ट का आकार बदलना (font size) - <font size="1~7"> टेक्स्ट का आकार 1 से 7 तक निर्धारित करके बदला जा सकता है। </font>

<font size="12pt"> टेक्स्ट का आकार पॉइंट इकाई में भी निर्धारित किया जा सकता है। पॉइंट इकाई से आकार को अधिक व्यापक सीमा में और अधिक बारीकी से निर्धारित किया जा सकता है।></font>

▣ फ़ॉन्ट बदलना (font - face) - <font size="2" face="गुलिम"> फ़ॉन्ट वाले भाग में गुंगसो, बतांग, गुलिम, दोदुम आदि विभिन्न फ़ॉन्ट निर्धारित किए जा सकते हैं।</font>

▣ टेक्स्ट का रंग बदलना (color) - <font size="3" color="blue"> font टैग में color विशेषता जोड़कर टेक्स्ट का रंग अपनी पसंद के अनुसार बदला जा सकता है। लेकिन रंग का नाम अंग्रेज़ी में दर्ज करना होगा। </font>

▣ खाली स्थान जोड़ना (&nbsp ; ) - टेक्स्ट के बीच खाली स्थान जोड़ना चाहें तो &nbsp ; डालने पर स्पेस दर्ज करने जैसा खाली स्थान जोड़ा जा सकता है। वहीं html में स्पेसबार दबाने का प्रभाव केवल 1 बार लागू होता है। (ध्यान दें कि p और ; को बिना किसी खाली स्थान के साथ लिखना चाहिए। इस सामग्री में टैग को ज्यों का त्यों डालने पर वह दिखाई नहीं देता, इसलिए जानबूझकर बीच में खाली स्थान रखा गया है।)

चित्र संबंधी टैग

चित्र संबंधी टैग

▣ चित्र जोड़ना (src) - <img src="चित्र फ़ाइलनाम.jpg"> वेब दस्तावेज़ और चित्र एक ही पथ पर हों तो केवल फ़ाइलनाम दर्ज करें। यदि उनके पथ अलग हों, तो पथ भी दर्ज करना होगा।

▣ चित्र का बॉर्डर दिखाना (border) - <img src="चित्र फ़ाइलनाम.jpg" border="5"> चित्र जोड़ने वाले टैग के बाद border के माध्यम से चित्र के बॉर्डर की मोटाई निर्धारित की जा सकती है।

▣ चित्र का संरेखण (align) - <img src="चित्र फ़ाइलनाम.jpg" align="left"> Align विशेषता में left (बायाँ), right (दायाँ), middle (मध्य), baseline (आधार रेखा), top (ऊपरी भाग), bottom (निचला भाग), texttop (टेक्स्ट का ऊपरी भाग), absmiddle (टेक्स्ट का मध्य), absbottom (टेक्स्ट का निचला भाग) दर्ज करके चित्र की स्थिति का संरेखण किया जा सकता है।

▣ चित्र के आसपास खाली स्थान समायोजित करना (hspace, vspace) - <img src="चित्र फ़ाइलनाम.jpg" hspace="10" vspace="10"> चित्र के फ़ाइलनाम के बाद hspace (क्षैतिज), vpace (ऊर्ध्वाधर) के मान दर्ज करके खाली स्थान समायोजित किया जा सकता है।

▣ माउस ले जाने पर टेक्स्ट दिखाना (alt) - <img src="चित्र फ़ाइलनाम.jpg" alt="टेक्स्ट"> चित्र पर माउस ले जाने पर टेक्स्ट दिखाना चाहें तो alt विशेषता में अपनी पसंद का टेक्स्ट दर्ज करें।

हाइपरलिंक संबंधी टैग

हाइपरलिंक संबंधी टैग

▣ हाइपरलिंक जोड़ना (a href) - <a href="लिंकपता"> इस तरह a href टैग की विशेषता में इच्छित लिंक पता डालकर ऐसा हाइपरलिंक बनाया जा सकता है, जिस पर माउस से क्लिक करने पर संबंधित पते पर पहुँचा जा सके।</a>

▣ चित्र में हाइपरलिंक जोड़ना - <a href="लिंकपता"><img src="जापहाकसोगो.jpg"> हाइपरलिंक टैग के बाद चित्र का टैग डालने पर ऐसा बटन बनाया जा सकता है, जिसके चित्र पर क्लिक करने से संबंधित पते पर पहुँचा जा सके।</a>

▣ चित्र पर माउस ले जाने पर विवरण दिखाना (title) - <a href="लिंकपता" title="विवरण का टेक्स्ट"><img src="जापहाकसोगो.jpg"> हाइपरलिंक टैग की विशेषताओं वाले भाग में title विशेषता के माध्यम से बटन का विवरण जोड़ा जा सकता है।</a>

▣ नई विंडो में खोलना (target-_blank) - <a href="लिंकपता" target="_blank"><img src="जापहाकसोगो.jpg"> target विशेषता में _blank डालकर ऐसा बटन बनाया जा सकता है, जो पेज को नई विंडो में खोले।</a>

▣ हाइपरलिंक के रंग निर्धारित करना (link, vlink, alink) - <body link="blue" vlink="red" alink="green"> body टैग में link (हाइपरलिंक का रंग), vlink (पहले खोले गए लिंक का रंग), alink (खोले जा रहे लिंक का रंग) डालकर लिंक के रंग निर्धारित किए जा सकते हैं।</body>

▣ उसी पेज पर किसी विशिष्ट स्थान पर जाना (#, name) - यह टैग एक ही पेज पर स्क्रॉल होने वाली वेबसाइट बनाने में उपयोगी है।

<a href="#a"> A स्थान पर जाएँ</a>

<a name="a"> A </a>

तालिका संबंधी टैग

HTML तालिका टैग का उदाहरण

▣ <table> - यह तालिका शुरू करने वाला मूल टैग है।

▣ <thead> - यह तालिका के हेडर वाले भाग को समूहित करने वाला टैग है, जिसका उपयोग वैकल्पिक है।

▣ <tbody> - यह तालिका के मुख्य भाग को समूहित करने वाला टैग है। इसका उपयोग आम तौर पर <thead> या <tfoot> के साथ किया जाता है।

▣ <tfoot> - यह तालिका के फ़ुटर वाले भाग को समूहित करने वाला टैग है, जिसका उपयोग वैकल्पिक है।

▣ <tr> - यह तालिका की पंक्ति को परिभाषित करने वाला टैग है।

▣ <th> - यह तालिका के हेडर सेल को परिभाषित करने वाला टैग है। इस सेल की सामग्री डिफ़ॉल्ट रूप से मोटे अक्षरों में दिखाई जाती है।

▣ <td> - यह तालिका के डेटा सेल को परिभाषित करने वाला टैग है।

▣ <caption> - यह तालिका का शीर्षक या विवरण प्रदान करने वाला टैग है। इसे <table> टैग के ठीक बाद रखा जाना चाहिए।

उदाहरण के लिए लिखे गए कोड को लागू करने पर लगभग नीचे जैसी तालिका दिखाई देती है।

जापहाकसोगो की उदाहरण तालिका

इस प्रकार हमने वेबसाइट बनाने में उपयोग होने वाले HTML टैग का परिचय देखा। दस्तावेज़, टेक्स्ट, चित्र, हाइपरलिंक और तालिका संबंधी टैग को अच्छी तरह समझ लेने पर एक बुनियादी वेबसाइट बनाने में कोई बड़ी समस्या नहीं होनी चाहिए।

बेशक, IT क्षेत्र में HTML सबसे बुनियादी चीज़ों में से एक है, लेकिन कोडिंग या वेब संबंधी काम पहली बार करने वालों के लिए HTML से शुरुआत करने पर उनकी बुनियाद मज़बूत होगी।