HTML language सीखने का हमारा purpose यही होता है, कि हम एक awesome web page create कर पाए। अब चूंकि, HTML tags एक web page को simple Structure देते है। इसीलिये उसके additional improvement के लिए हमे इन element के attributes की knowledge होना बहुत जरूरी है।
इस पोस्ट HTML ATTRIBUTES IN HINDI में आप जानेगें HTML Attribute क्या है? और इनका उपयोग Html में कैसे किया जाता है। तो चलिए let’s Start-
HTML Attribute क्या है (What is HTML Attribute in Hindi)
अभी तक आप HTML document बनाते वक्त किसी HTML element का उपयोग कैसे करते है? जाहिर है, उसके सरल रूप में। For example अगर आप किसी Web page में Image Add करते है, तो आप उसे <image> इस तरह से लिखेंगे। परन्तु अगर आपको उस image की height, width, URL, alt text, etc. set करना हो तो आप क्या करेंगे।
यहां पर काम आते है, Html element के यह attributes. कुल मिलाकर अगर देखा जाए तो Html attribute एक Html element (tag) को extra configure या कहे उस element के बारे में additional information provide करता है।
अच्छे से समझे तो Html element की विशेषताओं को define करने के लिए एक attribute का उपयोग किया जाता है। इन attributes को Html tag के opening tag के भीतर रखा जाता है।
Example-:
<img src="set-img-path" alt="alt-text" height="11" width="11"> </img>All attributes दो parts से मिलकर बनते है । a) name and b) value.
- name एक property है, जिसे आप set करना चाहते है। for example – image को extra configure करने के लिए src attribute का use किया जाता है। तो यहां पर image tag के attribute का name src है। जिसका उपयोग हम image को extra configure करने के लिए करेंगे।
- value वह है, जो आप property के द्वारा उस element में Set करना चाहते है। value को हमेशा quotation (” “) के भीतर लिखा जाता है। उप्पर उदाहरण में image attribute की value URL है, जहाँ पर image का URL set करने पर web page में image show होने लगती है।
- Hacking क्या है और Ethical Hacking क्या है?
- SEO क्या है और Search Engine Optimization कैसे करते है ?
All HTML tags के Attribute name व value को हमेशा small latter में ही लिखा जाता है।
Example-:
<! DOCTYPE html>
<html>
<head>
<title> image attribute example </titel>
</head>
<body>
<img> src= "set_mg_url" alt="set_alt_text" width="set_img_width" height="set_img_height"
</body>
</html>अब तक तो शायद आपको समझ आ गया होगा की HTML attribute क्या होता है? और इसका उपयोग हम Html element को additional information provide करने के लिए कैसे कर सकते है। तो चलिये अब Html में अधिकांश उपयोग होने वाले कुछ Html attribute के बारे में जानते है।
HTML Attribute List in Hindi
वैसे तो Html attribute list बहुत लंबी है, जिसे example के साथ एक पोस्ट में बता पाना मुश्किल है। लेकिन कुछ ऐसे HTML attribute है, जिनका उपयोग Html में सबसे ज्यादा होता है। इसीलिए उन्हें नीचे उदाहरण के साथ बताया गया है।
1. src attribute
Html में image insert करने के लिए <img> tag का use किया जाता है। src img tag का attribute है। image का source address set करने के लिए src attribute use किया जाता है। HTML में img का source address set करने के दो तरीके है।
अगर image आपके computer में same location पर save है। जहाँ आपने document file save की है, तो आप सिर्फ उसका नाम देकर image set कर सकते है। परन्तु अगर image computer पर different location में save है, तो फिर आपको उसका complete path देना होगा।
Example-:
<img src="set_img_path"> </img>2. Width and height Attribute
Html में image का आकार set करने के लिए size attribute का इस्तेमाल होता है। size attribute की help से image की height और width set की जाती है।
Example-:
<! DOCTYPE html>
<html>
<head>
<title> example of height and width attribute </title>
</head>
<body>
<img src="set-img-path" width="20" height="20"> html attribute </img>
</body>
</html>3. Alt Attribute
Alternative text specify करने के लिए alt attribute का use किया जाता है। Alt attribute किसी image के लिए alternative information provide करता है। अगर किसी कारण वश image web page पर show नही होती है, तो इससे user अपना mouse चित्र के ऊपर ले जा कर वह image किस बारे में है। यह पता कर सकता है।
Example-:
<! DOCTYPE html>
<html>
<head>
<title> alt attribute example </title>
</head>
<body>
<img src="set-img-path" alt="set-img-alt-text"> html attribute </img>
</body>
</html>4. href Attribute
Html Link को <a> से define किया जाता है। <a> tag में link को specified करने के लिए href attribute का use होता है।
Example-:
<!DOCTYPE html>
<html>
<head>
<title> href attribute example </title >
</head>
<body>
<a href="www.magicidea.in"> html attribute </a>
</body>
</html>5. lang Attribute
एक document की language को Html tag में lang attribute की help से declared किया जाता है। Accessibility applications और Search engine के लिए HTML document की language set करना अनिवार्य है।
Example-:
<! DOCTYPE html>
<html lang="hi-ind">
<head>
<title> lang attribute example </title>
</head>
<body>
....
</body>
</html>6. Style Attribute
Style attribute का उपयोग किसी element के Style ( Color, Font, Size, etc.) को specify करने के लिए किया जाता है।
Example-:
<! DOCTYPE html>
<html>
<head>
<title> Style attribute example </title>
</head>
<body>
<p style=colour:blue> paragraph </p>
</body>
</html>7. title Attribute
Title Attribute किसी element के बारे में extra information provide करता है। जब mouse उस element के ऊपर ले जाया जाता है, जिसमे title attribute use हुआ है, तो set की गयी जानकारी tool-tip text के रूप में show होती है।
Example-:
<! DOCTYPE html>
<html>
<head>
<title> title Attribute example </title>
<body>
<p title="html attribute"> this is title attribute </p>
</body>
</html>All HTML Attributes List – Html Global Attributes.
Html में कुछ ऐसे Attributes उपलब्ध है। जिनका उपयोग सभी HTML tags के साथ किया जाता है। ऐसे Html attributes को Html Global Attributes कहा जाता है। नीचे इसकी लिस्ट उनके example के साथ दी गयी है। किसी भी attribute का example देखने के लिए इसके name के उप्पर क्लिक करे।
1. Access key attribute: Html element को active और focus करने के लिए shortcut key specifies करता है।
2. Class attribute: किसी element को एक या अधिक class name निर्दिष्ट करता है।
3. contenteditable attribute: यह किसी Content की सामग्री editable योग्य है या नही यह specify करता है।
4. data-* attribute― page या application के custom data को Private store करने के लिए प्रयुक्त होता है।
5. dir attribute ― यह किसी element में content के लिए text direction specify करता है।
6. draggable attribute ― यह attribute निर्दिष्ट करता है, कि कोई element draggable है या नही।
7. dropzone attribute ― dropzone attribute एक enumerated attribute है। जो indicate करता है, कि drag and drop API का उपयोग करके element पर किस प्रकार का content dropped किया जा सकता है।
8. hidden attribute ― यह attribute निर्दिष्ट करता है, कि एक element अभी तक नही है या relevant नही है।
9. id attribute ― यह Html attribute एक element के लिए unique id specify करता है।
10. lang attribute ― एक document की language निर्दिष्ट करता है।
11. spellcheck attribute ― यह attribute specify करता है, कि क्या element इसकी spelling and grammar की जांच कर रहा है या नही।
12. style attribute ― किसी element के लिए एक inline CSS शैली निर्दिष्ट करता है।
13. tabindex attribute ― यह किसी element के tabbing order को specify करता है।
14. title attribute ― title attribute एक element के बारे में extra information provide करता है।
15. translate attribute ― यह attribute निर्दिष्ट करता है, कि किसी element के content का translate किया जाना चाहिए या नही।
Summary -:
- HTML attribute एक Html element को additional information provide करते है।
- सभी Html element के attribute होते है।
- HTML attribute name व value से define किये जाते है।
- HTML attribute की value को double quote (” “) के भीतर लिखा जाता है।
- HTML Attribute हमेशा element के Starting tag के भीतर ही लिखे जाते है।
Conclusion
इस पोस्ट में आपको ऐसे attribute के बारे में बताया गया है, जिसे Global attribute कहा जाता है। इन HTML attributes का उपयोग html के किसी भी element के साथ किया जा सकता है। वैसे यह complete html attribute list नही है। बाकी attributes आपको अगली दो पोस्ट में बताये गए है। किसी भी html attribute का example देखने के लिए attribute name के उप्पर क्लिक करे।
यहाँ भी जरूर पढ़े:-
One Reply to “Html Attribute क्या है? (Lesson 5)”