Course मॉड्यूल 3 - Lecture: लोकप्रिय एचटीएमएल टैग

4.1 ए, href टैग

ठीक है, हम अभी भी यह नहीं भूलते हैं कि हम आपसे एक जावा प्रोग्रामर तैयार कर रहे हैं, इसलिए आपको केवल 5 टैग सीखने की जरूरत है।

सबसे पहले, यह सबसे महत्वपूर्ण टैग है जो टेक्स्ट को हाइपरटेक्स्ट में बदल देता है - लिंक । HTML में लिंक बनाने के लिए एक टैग <a>(एंकर, एंकर से) का उपयोग किया जाता है।

डिफ़ॉल्ट लिंक ऐसा दिखता है:

<a href="link-address">link text</a>

उपयोगकर्ता द्वारा देखा जाने वाला पाठ नीला कहां है, और हरा वह पता (लिंक) है जहां वह लिंक के पाठ पर क्लिक करने पर जाएगा।

लिंक वाला एक विशिष्ट HTML दस्तावेज़ ऐसा दिखता है:

<html>
    plain text
        <a href="http://codegym.cc/about">
            Link to something interesting
          </a>
     some other text...
</html>

नहीं, यह आमतौर पर ऐसा दिखता है:

<html>
    plain text  <a href="http://codegym.cc/about">Link to something interesting</a> some other text...
</html>

दुनिया परिपूर्ण नहीं है।

4.2 आईएमजी टैग और स्रोत विशेषता

एक HTML पृष्ठ में एक छवि डालने के लिए, एक टैग <img>(छवि शब्द से) का उपयोग किया जाता है। यह सिंगल टैग है, इसमें क्लोजिंग टैग नहीं है। टैग का सामान्य दृश्य:

<img src="image link">

सब कुछ बहुत आसान है। अपने HTML दस्तावेज़ में एक छवि प्रदर्शित करने के लिए, आपको बस उस छवि के लिंक को जानना होगा और img. इसे आज़माएं, आपको यह पसंद आएगा।

4.3 तालिका तत्व

साथ ही, एक HTML पेज में डेटा के साथ एक टेबल हो सकती है। लेकिन यहां आप एक टैग से नहीं चल सकते, अगर आप इसके बारे में सोचते हैं। आखिरकार, एक टेबल में हेडर, रो, कॉलम और सेल होते हैं। वे सभी अपने-अपने टैग के साथ आए:

<table>- टेबल ही;
<tr>( टेबल आर ओउ) - पंक्ति तालिका ;
<th>( टेबल एच हेडर ) - टेबल हेडर सेल;
<td>( टेबल डेटा ) - टेबल सेल।

यहाँ एक 3 बटा 3 तालिका कैसी दिखेगी html(एक अतिरिक्त हेडर पंक्ति के साथ)

<table>
    <tr> <th>Surname</th> <th>Name</th> <th>Surname</th> </tr>
    <tr> <td>Ivanov</td> <td>Ivan</td> <td>Ivanovich</td> </tr>
    <tr> <td>Petrov</td> <td>Peter</td> <td>Peterovich</td> </tr>
    <tr> <td>Sidorov</td> <td>Kolia</td> <td>Sidorenko</td> </tr>
</table>

हालाँकि अब तालिकाओं का उपयोग बहुत कम किया जाता है। बात यह है कि फ़ोन से पृष्ठ देखते समय, तालिका को एक अलग तरीके से प्रदर्शित करना उपयोगी हो सकता है (यह केवल स्क्रीन पर फिट नहीं होता है)। लेकिन आपको अभी भी यह जानने की जरूरत है कि तालिकाओं की व्यवस्था कैसे की जाती है।

4.4 आईडी और नाम विशेषताएँ

और दो और महत्वपूर्ण बिंदु हैं idऔर विशेषताएँ name। ये विशेषताएँ हैं, टैग नहीं, लेकिन इनका उपयोग बहुत बार किया जाता है।

idटैग विशेषता आपको इसे ऐसा नाम देने की अनुमति देती है जो पूरे दस्तावेज़ में अद्वितीय है । यह उपयोगी है अगर HTML दस्तावेज़ में कुछ जावास्क्रिप्ट है जो दिए गए टैग के मान या पैरामीटर को बदलता है। फिर, अद्वितीय की सहायता से, idआप वांछित टैग को सटीक रूप से संदर्भित कर सकते हैं।

एक विशेषता nameएक समान कार्य करती है, लेकिन पृष्ठ के भीतर इसका मान अद्वितीय नहीं होना चाहिए। यानी सैद्धांतिक रूप से एक ही नाम के कई टैग हो सकते हैं। यह तत्वों के समूहों के साथ काम करना आसान बनाने के लिए किया जाता है।

उदाहरण के लिए, एक पृष्ठ पर कई सूचियाँ हैं जिनमें से प्रत्येक में आप केवल एक आइटम का चयन कर सकते हैं। फिर, सूची में एक नया तत्व चुनते समय, आपको सूची के शेष तत्वों के चयन को रीसेट करना होगा। लेकिन अन्य सूचियों को मत छुओ। यह आसानी से किया जा सकता है यदि एक ही सूची के सभी तत्वों का नाम समान हो।

किसी भी टैग में एट्रिब्यूट idऔर दोनों हो सकते हैं name। उदाहरण:

<img id="image123" name="avatar" src="link to picture">