XHTML Attributes – Element Based Grouping

XHTML Attributes: Attributes किसी भी Element की कुछ Extra Properties को तय करने का काम करते हैं, तकि Element कुछ Extra काम कर सके। हर Attribute का एक नाम होता है और उसमें एक मान Store किया जाता है। उदाहरण के लिए xml:lang नाम का Attribute उस Language को Describe करता है, जिसे Element में उपयोग में लिया जा रहा है, जबकि कोई मान EN-US इस बात को Indicate करता है कि Element में उपयोग में ली जाने वाली Language U. S. English है।

XHTML Elements के Attributes को तीन भागों में बांटा जा सकता है। जैसाकि हम <html>, <head>, <title> व  <body> Element के Attributes को देख कर जान सकते हैं, कि इनमें ज्‍यादातर Attributes समान हैं। क्‍योंकि ये Attributes बहुत सारे Elements के लिए Common हैं, इसलिए इन्‍हें हमने यहां पर एक Group के रूप में समझाया है, ताकि हर Element के लिए इन्‍हें अलग से ना समझाना पडे। हमने विभिन्‍न Common Attributes को तीन Groups में विभाजित किया है, जो निम्‍नानुसार हैं:

Core Attributes: इस Group में class, id व title Attributes को रखा गया है।
Internationalization attributes: इस Group में dir, lang व xml:lang Attributes को रखा गया है।
UI Events : इस Group में विभिन्‍न प्रकार के Events को रखा गया है। जैसे onclick, ondoubleclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup आदि

Core Attributes व Internationalization Attributes के समूह को Universal Attributes कहते हैं।

Core Attributes

ज्‍यादातर XHTML Elements के साथ हम निम्‍न चार Attributes को सबसे ज्‍यादा उपयोग में लेते हैं:

id, title, class, style

इन Attributes का मतलब इनके उपयोग करने के तरीके के आधार पर बदल सकता है। इसलिए इन्‍हें हम जब जरूरत होगी, तब फिर से Revisit करेंगे। फिलहाल हम इनका General मतलब समझेंगे:

The id Attribute

किसी Page अथवा Style Sheet में किसी Element को Uniquely Identify करने के लिए हम id Attribute  का प्रयोग कर सकते हैं। id Attribute को उपयोग में लेने के दो मुख्‍य कारण हैं:

  • यदि एक Element में Unique Identifier के रूप में id Attribute का प्रयोग किया जाता है, तो हम अपनी किसी Requirement को पूरा करने के लिए उस Element व उसके Contents को उसके इस id Attribute द्वारा कभी भी Access कर सकते हैं।
  • यदि हमारे हों, Web Page या Style Sheet में एक ही नाम के दो Elements हों, तो हम id Attribute का प्रयोग करके इन दोनों Elements को अलग-अलग Uniquely Identify कर सकते हैं। सामान्‍यतया ऐसा Paragraphs के साथ होता है, क्‍योंकि एक Web Page में एक से ज्‍यादा Paragraphs होते हैं।

id Attribute का Syntax निम्‍नानुसार होता है, जहां “String” वह मान है, जिसे हम अपने id Attribute के लिए Select करते हैं:

      id=”String”

उदाहरण के लिए दो Paragraph Elements के बीच अन्‍तर करने के लिए हम id Attribute को निम्‍नानुसार Use कर सकते हैं:

<p id=”manager”>This paragraph is for manager department</p>
<p id=”account”>This paragraph is for Account department</p>

id Attribute का मान तय करते समय हैं, कुछ नियमों को ध्‍यान में रखना होता है। वे नियम ये हैं कि हम किसी भी मान के रूप में A-Z Small Letters, Capital Letters, Digits, Hyphen, Underscore, Colon व Periods का प्रयोग कर सकते हैं, लेकिन हम किसी भी ऐसे मान को id Attribute में Assign नहीं कर सकते हैं, जिसकी शुरूआत में Digits, Hyphen, Underscore, Colon या Periods का प्रयोग किया गया हो। साथ ही एक Document में दो id Attibutes में समान मान का प्रयोग नहीं किया जा सकता है।

जब id Attribute को Include नहीं किया गया था, तब यही काम HTML में name Attribute द्वारा किया जाता था। लेकिन XHTML Document में name Attribute को Deprecated कर दिया गया है और अब हमें name Attribute के स्‍थान पर id Attribute को Use करना होता है। यदि हम name Attribute का प्रयोग करना चाहें, तो ये Attribute Transitional XHTML Document में आज भी उपलब्‍ध है, लेकिन Strinct XHTML में ये Attribute उपलब्‍ध नहीं है।

The title Attribute

इस Attribute का प्रयोग करके हम हमारे किसी Element को कोई उचित Title प्रदान कर सकते हैं। इसका Syntax भी id Attribute की तरह ही होता है। यानी:

title=”String”

इस Attribute का Behavior उस Element पर निर्भर करता है, जिसमें इसे उपयोग में लिया जाता है, हालांकि ये Title अक्‍सर Tooltip के रूप में दिखाई देता है अथवा उस समय दिखाई देता है, जब Element Load हो रहा होता है। हमें हर उस Element के साथ इस Attribute को उपयोग में लेने की जरूरत नहीं होती है, जिसमें इसे उपयोग में लिया जा सकता है, इसलिए इस Attribute को कब और किस Element के साथ उपयोग में लेना चाहिए, इस‍की जानकारी हम आगे देंगे।

The class Attribute

जब हम किसी Element को किसी Style Sheet के साथ Associate करना चाहते हैं, तब हमें इस class Attribute को उपयोग में लेना होता है। इस Attribute का Syntax भी पिछले Attributes की तरह ही होता है। यानी

class=”className”

इस Attribute की Value को हम Class Names की Space से Separated List के रूप में निम्‍नानुसार भी लिख सकते हैं:

class=”className1 className2 className3”

The style Attribute (deprecated)

ये एक Deprecated Attribute है, इसलिए इस Attribute को हम एक Strict XHTML Document में Use नहीं कर सकते हैं। ये Attribute हमें किसी Element में किसी CSS Rule को Specify करने की सुविधा प्रदान करता है। जैसे:

<p style=”font-family:arial; color=#FFAA00;”>Element Style s</p>

हमें इस Attribute को अपने Document में उपयोग में नहीं लेना चाहिए, क्‍योंकि सभी Stylish Elements व  Attributesको उपयोग में लेने के लिए हम CSS File का प्रयोग ज्‍यादा बेहतर तरीके से कर सकते हैं।

Internationalization Attributes

इस Group में मूल रूप से तीन Attributes हैं। XHTML Documents के ज्‍यादातर Elements में हम इन तीन Elements को उपयोग में ले सकते हैं। इस Group के Attributes का प्रयोग करके हम Web Browser में दिखाई देने वाले Characters की दिशा तय कर सकते हैं, कि वे Texts Left To Right Display होंगे अथवा Right To Left Display होंगे। इस Attribute को भी हम अन्‍य Attribute की तरह ही उपयोग में लेते हैं। इस Group  के Attributes निम्‍नानुसार हैं:

dir, lang, xml:lang

The dir Attribute

ये Attribute Web Browser को इस बात का Indication देता है कि Web Server से आने वाले Texts को Browser में Left To Right Flow में Render करना है अथवा Right To Left Flow में। जब हम हमारे पूरे Document का Direction तय करना चाहते हैं, तब इस Attribute को हमें <html> Element में Use करना चाहिए, ना कि <body> Element में। ऐसा करने के दो कारण हैं:

  • <html> Element के लिए Web Browser में ज्‍यादा अच्‍छा Support होता है और
  • ऐसा करने पर ये Direction <head> Element के साथ ही <body> Element पर भी समान रूप से Apply हो जाता है।

इस Attribute को हम <body> Element में Use होने वाले विभिन्‍न Elements के साथ भी उपयोग में ले सकते हैं, ताकि हम Document के केवल किसी Selected हिस्‍से के Texts का ही Direction Change कर सकें। dir Attribute में हम Left To Right Direction को Set करने के लिए ltr व Right To Left Direction Set करने के लिए rtl मान को Use कर सकते हैं।

The lang Attribute

इस Attribute द्वारा हम इस बात का Indication करते हैं कि हमारे Web Document की मूल भाषा क्‍या है, लेकिन इस Attribute को XHTML में केवल Backwards Compatibility के लिए ही रखा गया है। XHTML में इस Attribute को xml:lang नाम के नए Attribute के साथ Replace कर दिया गया है।

हालांकि XHTML हमें Suggest करता है कि हम lang व xml:lang दोनों ही Attributes को <html> Element में ही Use करें। विभिन्‍न प्रकार की Languages को Specify करने के लिए हम दो अक्षरों के Code को उपयोग में ले सकते हैं। उदाहरण के लिए यदि हमारे Document में हम Hindi भाषा उपयोग में ले रहे हों, तो इस बात को हम हमारे Browser को निम्‍नानुसार Statement द्वारा बता सकते हैं:

<html lang=”hi”>

The xml:lang Attribute

इस Attribute को lang Attribute के Replacement के रूप में XHTML में Include किया गया है। ये एक ऐसा Attribute है, जो सभी XML Languages में Available है, इसीलिए इसके नाम के साथ xml: शब्‍द का प्रयोग किया गया है। इस Attribute को साथ भी हम Language Code को उसी तरह से Use कर सकते हैं, जिस तरह से lang Attribute के साथ किया है। यानी

<html xml:lang=”hi”>

User Interface Events

User Interface Event Attributes हमें किसी Element के साथ किसी Event को Associate करने की सुविधा प्रदान करते हैं। ये एक Script होता है, जो उस समय Execute हो जाता है, जब उससे Associated Event Trigger होता है। उदाहरण के लिए जब हम Mouse को किसी Element के किसी Content पर Move करते हैं, तब हम Content के Color को Change करने के लिए किसी User Interface Event Script को Execute कर सकते हैं। विभिन्‍न प्रकार के Events के बारे में हम आगे विस्‍तार से चर्चा करेंगे। मूल रूप से 10 Events ऐसे हैं, जिन्‍हें सबसे ज्‍यादा Use किया जाता है। ये Events निम्‍नानुसार हैं:

onclick, ondoubleclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

<body> व <frameset> Elements के साथ भी कुछ Events Associated होते हैं, जो निम्‍नानुसार हैं:

onload, onunload

इसी तरह से कुछ Events ऐसे हैं, जो पूरी तरह से Forms से Associated हैं:

onfocus, onblur, onsubmit, onreset, onselect, onchange

HTML5 with CSS3 in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF

BUY NOW GET DEMO REVIEWS