Learn More

HTML attributes | टैग एट्रिब्यूट | HTML in Hindi

पिछले tutorial में हमने काफी tags के बारे में सिखा था जैसे –<h1>, <p> , <center> tag आदि । आपने HTML के टैग के बारे में तो सुना ही होता ओर उन tags को आपने उपयोग भी किया होगा परन्तु क्या आप जानते हैं की attributes क्या होता हैं ?

इस tutorial में हम HTML के attributes की ही बात करने वाले हैं जिस से आप समझ सकते हैं की किस तरह से HTML attributes का उपयोग करके HTML लेआउट (layout ,effect) को बदला जा सकता हैं । 

HTML attributes | HTML in Hindi 

HTML में बहुत सारे tags होते हैं जिनके खुद के attributes होते हैं जिनका उपयोग करके हम HTML पेज पर इफ़ेक्ट (effect) डाल सकते हैं । Attribute को टैग के साथ लिखा जाता हैं । टैग के साथ attrubute लिखने से पहले हमे एट्रिब्यूट का नाम और  उसकी वैल्यू (value) के बारे में पता होना बहुत जरूरी होता हैं ।

नाम – नाम एक तरह से टैग की प्रॉपर्टी (property)  को  दर्शाता करता हैं । साधारण Hindi भाषा में कहे तो attribute का नाम अन्य प्रकार के इफ़ेक्ट को दर्शाता हैं । उदाहरण के लिए जब हम कोई paragraph लिखते हैं तो उसमे हम <p> टैग का उपयोग  करते हैं <p> टैग के साथ हम align नामक attribute का भी उपयोग कर सकते हैं । align attribute का उपयोगे करके text को left , right या center में मैनेज किया जा सकता हैं जो की आप निचे दिए उदाहरण से आराम से समझ जायेंगे ।

वैल्यू – Value अलग अलग attributes की अलग अलग हो सकती हैं । वैल्यू से मतलब हैं की आप क्या कराना चाहते  हो किस तरह की प्रॉपर्टी देना चाहते हो या साधारण HINDI भाषा में कहे तो किस तरह का इफ़ेक्ट  (effect) आपको डालना हैं जैसे text center में रहे तो वैल्यू होगी center ऐसे ही left में रहे तो वैल्यू होगी left और यदि right में रहे तो वैल्यू होगी right ।

वैल्यू को हमेशा double quotation  मार्क के अंदर ही लिखते हैं ।

चलिए एक उदाहरण से समझते हैं जिस से आपको अच्छे से HTML attributes के बारे में समझ आजायेगा ।

<!DOCTYPE html>
<html>
<head>
<title> HTML attributes in Hindi  </title>
</head>
<body>

This is my first paragraph .

I am trying very much well.

I am learning HTML in Hindi.

</body> </html>

Output

 

This is my first paragraph .

I am trying very much well.

I am learning HTML in Hindi.

उपर दिए गए उदाहरण में हमने <p> टैग के साथ attribute एंड value दी हुई हैं जिनका इफ़ेक्ट आप आउटपुट में देख सकते हैं ।

left वैल्यू देने से टेक्स्ट left में रहता हैं , center वैल्यू देने से टेक्स्ट center में रहता हैं इस तरह right वैल्यू देने से टेक्स्ट right में रहता हैं ।

इसलिए HTML attribute का उपयोग करके ओर ज्यादा HTML पेज पर इफ़ेक्ट डाला जा सकता हैं ।

चलिए एक ओर उदाहरण से HTML attribute के बारे में समझते हैं ।

<!DOCTYPE html>
<html>
<head>
<title> HTML attributes in Hindi  </title>
</head>
<body>

This is my first heading .

This is my second heading .

I am learning heading attribute.

</body> </html>

Output

 

This is my first heading .

This is my second heading .

I am learning heading attribute.

उपर दिए गए उदाहरण में हमनें HTML <p> टैग की जगह <h1> हैडिंग टैग का उपयोग करके उसमे align attribute और  वैल्यू को दिया हैं ।

 

HTML कोर attributes | HTML core attributes 

HTML में वैसे तो बहुत सारे attributes होते हैं पर HTML में चार core attributes होते हैं जिन्हें HTML में सबसे ज्यादा उपयोग किया जाता हैं और जिनके बिना HTML की वेबसाइट बनाना आसान नही होता हैं इन attribute का उपयोग हर एक वेबसाइट में किया जाता हैं जब कोई वेबसाइट बनाते हैं ।

1. title 

2.Style

3. id

4. class

title-

title नाम से ही आप समझ सकते हैं की इस attribute को HTML में क्यों उपयोगे करते हैं । title attribute के द्वारा  किसी भी एलिमेंट (element) को एक title दिया जा सकता हैं जो की होवर  (Pointer hover) करने पर दिखाई देता हैं।   बहुत सारी वेबसाइट में title को इंस्ट्रक्शन (instruction) display करने के लिए उपयोग किया जाता हैं की इस एलिमेंट का  use या इस एलिमेंट को कहते क्या हैं ।

title attribute का उदाहरण –

<!DOCTYPE html>
<html>
<head>
<title> HTML title in Hindi  </title>
</head>
<body>

Please Hover

HTML in Hindi

</body> </html>

Output

 

Please Hover

HTML in Hindi

उपर दिए गए उदाहरण को यदि आप रन करे या माउस pointer को उस टेक्स्ट (text) पर ले जाये तो होवर में एक title आता हैं अब यहाँ पर आप कोई भी इंस्ट्रक्शन (instruction,अनुदेश)   display करा सकते हैं ।

 style attribute –

style attribute CSS के लिए उपयोग किया जाता हैं जो की inline CSS का पार्ट होता है । HTML पेज को डिजाईन करने के लिए हम CSS का उपयोग करने हैं । CSS को HTML में उपयोग करने के तीन प्रकार होते हैं जिनके बारे में हम सिख चुके हैं ।

जब हमे inline CSS (एक लाइन में ) के द्वारा किसी एलिमेंट को डिजाईन करना होता हैं तब हम HTML style attributes का उपयोगे करते हैं ।

<!DOCTYPE>
<html>
<head>
<title>style in HTML   </title>

<head>

Welcome to our Website

This is a simple paragraph

This is a paragraph without styling.

</body> </html>

Output

Welcome to our Website

This is a simple paragraph

This is a paragraph without styling.

उपर दिए गए उदाहरण में आपने देखा की किस तरह से हमने style attribute का उपयोग elements को डिजाईन किया हैं ।

यहाँ पर हमने CSS के कुछ attributes और उनकी वैल्यू को HTML element में उपयोग किया हैं ।

CSS के सभी attributes और उनकी वैल्यू के बारे में यहाँ पढ़िए । 

Id attribute – 

id attribute HTML एलिमेंट की एक यूनिक पहचान होती हैं जिसका उपयोग विभिन्न तरीके से एलिमेंट पर इफ़ेक्ट डालने से किया जाता हैं ।  यहं HTML टैग का एक ऐसा attribute हैं जिसमे वैल्यू कोई भी डिफाइन की जा सकती हैं उस वैल्यू का उपयोग करके उस एलिमेंट पर विभिन्न तरीके के इफ़ेक्ट डाले जा सकते हैं ।

हर एक एलिमेंट की एक यूनिक आईडी वैल्यू होती हैं जिसे हम यूनिक id के नाम से भी जानते हैं ।

 

id को किसी भी टैग या div ब्लॉग के साथ डिफाइन किया जा सकता हैं ।

id का उपयोग CSS class का इफ़ेक्ट HTML एलिमेंट पर डालने के लिए भी किया जाता हैं ।

 
id="myid" 

CSS id with HTML id

class  Attribute - 

Class attribute का उपयोग HTML  में CSS को जोड़ने या कह सकते हैं CSS क्लास का इफ़ेक्ट HTML में देखने के लिए किया जाता हैं ।

HTML के जिस भी HTML एलिमेंट या ब्लाक पर CSS class को apply करना होता हैं  उसे CSS class नाम दे दिया जाता हैं ।

 

 
class="class1 class2 class3" 

 

CSS class को किस तरह से HTML पर इफ़ेक्ट डाला जाता हैं यहाँ पढ़िए । 

CSS आईडी या CSS class में से आप कोई भी उपयोग कर सकते हैं ।

Recommended Posts:-

Previous Posts:-