TechnicalViews in Hindi: HTML Attributes in hindi

HTML Attributes

हमने कुछ HTML Tag और उनके use जैसे tags <h1>, <h2>, paragraph <p> और अन्य tags को देखा है, जिनका अब तक हम simply उपयोग करते आ रहे हैं, लेकिन अधिकांश HTML Tags में attribute भी हो सकते हैं, जिनमें अतिरिक्त बिट्स की जानकारी होती है।

किसी attribute का उपयोग HTML element की विशेषताओं को परिभाषित करने के लिए किया जाता है। और जिन्हें element के opening Tag के अंदर रखा जाता है। इसमें सभी attribute दो भागों से बने हैं: एक name और दूसरा value।

Name वह property है जिसे आप सेट करना चाहते हैं। उदाहरण के लिए, उदाहरण में पैराग्राफ़ <p> element एक attribute है, जिसका नाम align है। और जिसका उपयोग आप page पर paragraph के alignment को indicate करने के लिए कर सकते हैं।

Value वह है जिसे आप property की value में सेट करना चाहते हैं और इसे हमेशा कोटेशन के अंदर रखा जाता है। नीचे दिए गए उदाहरण से align attribute की तीन possible value दिखाई जाती है: left, center और right।

Attribute के names और values का मामला असंवेदनशील हैं। हालांकि, वर्ल्ड वाइड वेब कंसोर्टियम (W3C) अपने HTML 4, lowercase attributes/attribute वैल्यूज को recommend करता है।

उदाहरण

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
 
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
  </html>>

आउटपुट

This is left aligned

This is center aligned

This is right aligned

Core Attributes: इसमें चार प्रमुख attributes का उपयोग HTML elements (हालांकि सभी के लिए नहीं) अधिकांश पर किया जा सकता है:

title

class

style

id attribute: किसी HTML टैग की id attribute का उपयोग किसी HTML page के किसी भी element को विशिष्ट रूप से पहचानने के लिए किया जा सकता है। इसके 2 primary reason हैं, कि आप किसी element पर id attribute का उपयोग करना चाह सकते हैं:

यदि कोई element एक unique identifier के रूप में id attribute रखता है, तो इसके element और content की पहचान करना संभव है।

यदि आपके पास किसी webpage (या style sheet) के भीतर एक ही नाम के दो element हैं, तो आप id attribute का उपयोग एक ही नाम के elements के बीच अंतर करने के लिए कर सकते हो।

हम अलग-अलग topics में स्टाइल शीट पर चर्चा करेंगे। अभी के लिए, आइए id attribute को दो paragraph elements के बीच अंतर दिखाने के लिए नीचे दिखाए गए उदाहरण को देखें।

उदाहरण

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

title attribute: इसमें title attribute एलिमेंट के लिए suggested title देता है जहाँ सिंटैक्स को title attribute के लिए id attribute के जैसे ही समझया गया है:

इस attribute का व्यवहार उस element पर निर्भर करेगा, जो एलिमेंट द्वारा किया जाता है, हालांकि यह अक्सर टूलटिप के रूप में display होता है, जब कर्सर element पर आता या लोड होता है।

उदाहरण

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
 
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
 
</html>

अाउटपुट

Titled Heading Tag Example

अब "Titled Heading Tag Example" पर अपने कर्सर(cursor) को लाने का प्रयास करें और आप देखेंगे कि आपके कोड में जो कुछ भी इस्तेमाल हुआ है, वह कर्सर के टूलटिप के रूप में आ रहा है।

class attribute: इसमें क्लास attribute का उपयोग किसी element को स्टाइल शीट के साथ संबद्ध करने के लिए किया जाता है, जो element की क्लास को स्पेसिफाई करता है। जब आप कैस्केडिंग स्टाइल शीट (CSS) सीखेंगे, तो आप क्लास एट्रिब्यूट के उपयोग जानेंगे। इसलिए अब आप इसे avoid कर सकते हैं।

इसमें attribute का वैल्यू class names की space-separated लिस्ट भी हो सकती है। उदाहरण के लिए:

class = "className1 className2 className3"

style attribute: इसमें style attribute आपको element के भीतर कैस्केडिंग स्टाइल शीट (CSS) रुल को स्पेसिफाई करने की अनुमति देता है।

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
 
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
 
</html>

आउटपुट

Some text...

इस समय, हम CSS नहीं सीख रहे हैं, इसलिए उसके बारे में ज्यादा परेशान हुए बिना आगे बढ़ें। यहां आपको समझना है कि HTML attribute क्या है, और content की formatting करते समय उनका उपयोग कैसे किया जा सकता है।

Internationalization Attributes: वहाँ तीन इंटरनेशनलाइजेशन एट्रिब्यूट हैं, जो कि अधिकांश (हालांकि सभी के लिए नहीं) XHTML elements के लिए उपलब्ध हैं।

lang

xml:lang

dir attribute: यह dir attribute आपको उस browser की ओर इंडीकेट करने देता है जिसमें टेक्स्ट का फ्लो होना चाहिए। और इस dir attribute की दो में से एक वैल्यू हो सकती है, जैसा कि आप निम्न टेबल में देख सकते हैं:

Value	Meaning
ltr	इसमें टेक्स्ट डिफाल्ट रुप से लेफ्ट से राइट की ओर होता है।
rtl	इसमें टेक्स्ट राइटस से लेफ्ट की ओर होता है (भाषाओं के लिए हिब्रू या अरबी जो दाएं से बाएं पढ़ी जाती हैं)।

उदाहरण

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
 
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
 
</html>

आउटपुट

This is how IE 5 renders right-to-left directed text.

जब किसी <html> tag में dir attribute का उपयोग किया जाता है, तो यह निर्धारित करता है, कि पूरे डाक्यूमेंट में टेक्स्ट कैसे present किया जाएगा। जब इसको किसी अन्य टैग में उपयोग किया जाता है, तो वह उस टैग के कंटेंट के लिए टेक्स्ट की direction को control करता है।

lang attribute: इसमें lang attribute आपको किसी डाक्यूमेंट में उपयोग की जाने वाली मुख्य भाषा को इंडीटेट करने की अनुमति देती है, लेकिन यह attribute केवल HTML के पिछले वर्जनों के साथ बैकवर्ड कंपैटिबिलिटी (backwards compatibility) के लिए HTML में रखी गई थी। लेकिन अब इस attribute को नई XHTML documents में xml:lang द्वारा बदल दिया गया है:

lang attribute की वैल्यू ISO-639 स्टेडर्ड के दो-कैरेक्टर लैग्येज के कोड हैं, जहाँ आप Language Codes की पूरी लिस्ट के लिए html Language Codes: ISO 639 की जाँच करें।

उदाहरण

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

आउटपुट

This page is using English Language

xml:lang attributes: इसमें xml:lang attribute लैंग एट्रिब्यूट के लिए XHTML का replacement है। जिसमें xml:lang attribute की वैल्यू को किसी ISO -639 कंट्री कोड होना चाहिए जैसा कि पिछले section में मेंशन किया गया है।

Generic Attributes:

Attribute	Options	Function
align	Right, Left, Center	यह एक horizontally aligns tags होता है जिससे हम content को right, left, center से set कर सकते है।
valign	Top, Middle, Bottom	यह एक Vertically aligns tags होता है जिससे हम content को top, middle, bottom से set कर सकते है।
bgcolor	Numeric,Hexidecimal, RGB values	इसको element के पीछे वैकग्राउंड कलर रखने के लिए उपयोग किया जाता है।
background	URL	इसको किसी element के पीछे बैकग्राउंड इंमेज रखने के लिए उपयोग किया जाता है।
id	User Defined	इसके द्वारा किसी एलिमेंट के नाम को डिफाइन किया जाता है, और जिसको कैस्केडिंग स्टाइल शीट्स के साथ उपयोग किया जाता है।
class	User Defined	Class का उपयोग Cascading Style Sheets User define करने के लिये किया जाता है।
width	Numeric Value	Width का उपयोग tables, images, table cells को specify करने के लिये किया जाता है।
height	Numeric Value	इसके द्वारा टेबल, इमेंज या टेबल सेल की ऊंचाई को स्पेशिफाइ किया जाता है।
title	User Defined	इसके द्वारा एलिमेंट के "Pop-up" टाइटल को डिफाइन किया जाता है।

हम इससे संबंधित उदाहरण देखेंगे, क्योंकि हम अन्य HTML Tags का अध्ययन करने के लिए आगे बढ़ेंगे। HTML Tags और उससे संबंधित attributes की पूरी सूची के लिए कृपया HTML Tags list के रीफरेंस को देखें।



	भारतीय भाषाओं में सहजता से अनुवाद करने और किसी अन्य टूल की अपेक्षा दोगुना अनुवाद करने के लिए हमारे टूल https://transzaar.com/ का उपयोग कर अधिक से अधिक लाभ कमाएँ।

TechnicalViews in Hindi

Pages

HTML Attributes in hindi

Titled Heading Tag Example

2 comments: