HTML: ATTRIBUTES:

originclasses.com

HTML attributes:

मित्रों इस पोस्ट में हम HTML attributes के बारे में जानेंगे और प्रैक्टिस करेंगे. 

HTML elements में अतिरिक्त जानकारी जोड़ने के लिए attributes का प्रयोग किया जाता है.

  • सभी html elements में attributes जोड़ा जा सकता है.
  • Attributes, elements के बारे में अतिरिक्त जानकारी देते हैं.
  • Attributes को हमेशा शुरू वाले tag में रखते हैं.
  • Attributes सामान्य तौर पर name/value जोड़े में आते हैं.

जैसे- href=”index.php”

href attribute:

html लिंक को <a> tag से डिफाइंड करते हैं जहाँ लिंक href attribute में specified रहता है.

<a href="https://originclasses.com">यह लिंक origin classes पर जाने के लिए है.</a>

कोशिश करें

नोट: हम लिंक के बारे में आगे के टुटोरिअल में पढेंगे.

src attribute:

जैसा की आप पहले जानकारी ले चुके हैं की html image को <img> tag से डिफाइंड करते हैं. image का नाम जो image स्रोत(source) से आता है उसे हम src attribute में रखते हैं.

जैसे:

<img src="logo.png">

कोशिश करें

width and height attributes:

image के डायमेंशन को width and height attributes की सहायता से व्यवस्थित करते हैं.

जैसे:

<img src="logo.png' width="104" height="104">

कोशिश करें

यहां image का साइज़ पिक्सेल में है. यानी width=”104px” and height=”104px”



alt attribute:

alt attribute का प्रयोग image का alternate नाम रखने के लिए किया जाता है. जब image लोड नहीं हो पता तब इसका value डिस्प्ले होता है. इस attribute का value स्क्रीन रीडर्स के द्वारा पढ़ा जा सकता है. इस तरह से एक blind person भी सुनकर उस element के बारे में जानकारी ले सकता है.

जैसे:

<img src="logo.png" alt="originclasses.com">

कोशिश करें

नोट: जब image उपलब्ध ना हो तो alt attribute उपयोगी होता है.

जैसे:

<img src="l-ogo.png" alt="Logo">

कोशिश करें

style attribute:

html elements को सजाने के लिए style attribute का प्रयोग किया जाता है. जैसे color, size, font, इत्यादि.

जैसे:

<p style="color:blue">This is the paragraph.</p>

कोशिश करें

lang attribute:

Document के भाषा को <html> tag में परिभाषित किया जाता है. भाषा को lang attribute से declare किया जाता है. भाषा को declare करना Accessibility Applications के लिए महत्वपूर्ण होता है ताकि स्क्रीन रीडर्स या सर्च इंजन द्वारा पढ़ा जा सके.

<!DOCTYPE html>

<html lang="en-IN">

<body>

</body>

</html>

पहले दो अक्षर भाषा को  परिभाषित करते हैं जैसे- इंग्लिश के लिए “en”.

अगर भाषा डायलेक्ट फॉर्म में हो तो दो अक्षर और जोड़ते हैं.

जैसे: इंग्लिश इंडिया के लिए  “en-IN”.

title attribute:

जब हम माउस का कर्सर element कंटेंट पर ले जाते हैं तो title attribute का value tooltip की तरह डिस्प्ले होता है.

<p title="I am a tooltip">मेरे ऊपर कर्सर को लायें</p>

कोशिश करें

HTML 5 में lowercase और quotation required नहीं होते लेकिन बेहतर परिणाम के लिए lowercase letter का प्रयोग करें और attribute का value quote में डालें क्योंकि xhtml version strict रूल अपनाती है.

<a href="https://originclasses.com">This is the link.<a>

कोशिश करें

कभी कभी quote नहीं देने पर ठीक ढंग से डिस्प्ले नही हो पाता है. क्योंकि title attribute के value में स्पेस भी हो सकता है.

<p title=I am a tooltip>मेरे ऊपर कर्सर को लायें</p>

कोशिश करें

नोट: quote का हमेशा प्रयोग करें. आप single quote या double quote का प्रयोग कर सकते हैं. कभी- कभी दोनों का प्रयोग करना होता है.

<p title='Pradeep "kumar" Karn'> <p title="Pradeep 'kumar' Karn">

summary :

  • सभी html element में attribute हो सकते हैं.
  • title attribute elemnet के कंटेंट के लिए tooltip का काम करती है.
  • एड्रेस के लिए href एट्रिब्यूट का प्रयोग किया जाता है.
  • इमेज के dimension सेट करने के लिए  width और height attribute का प्रयोग किया जाता है.
  • Alt attribute स्क्रीन रीडर्स के लिए टेक्स्ट प्रदान करती है.
Attribute Description
alt स्क्रीन रीडर्स के लिए टेक्स्ट प्रदान करती है.
disabled इनपुट element disabled करने के लिए.
href Element के लिए यूआरएल एड्रेस प्रदान करती है.
id Element को id प्रदान कर यूनिक बनाती है.
src इमेज के लिए यूआरएल एड्रेस प्रदान करती है.
style Inline CSS style के लिए प्रयोग किया जाता है.
title Element के कंटेंट के लिए tooltip का काम करती है.

मुझे आशा है की आपलोग अच्छे से समझ रहे होंगे. यदि आपको टुटोरिअल अच्छा लग रहा हो तो शेयर करना मत भूलियेगा और आपके पास यदि कोई प्रश्न हो तो कमेंट बॉक्स में लिखना मत भूलियेगा.

Origin Classes पर Pradeep Karn के साथ बने रहने के लिए शुक्रिया.

Leave a Reply

Your email address will not be published. Required fields are marked *