HTML स्पैन:शुरुआती के लिए एक गाइड

निम्नलिखित अनुभाग में, हम कुछ उदाहरणों के माध्यम से चलेंगे जो यह दर्शाते हैं कि कैसे टैग HTML में काम करता है।

HTML उदाहरण टैग करें

आइए कोड के कुछ उदाहरणों के माध्यम से चलते हैं जो . का उपयोग करते हैं HTML में इनलाइन तत्वों को स्टाइल करने के लिए टैग करें। हमारा पहला उदाहरण . का उपयोग करेगा एक पैराग्राफ में टैग; हमारा दूसरा उदाहरण इसे सूची में उपयोग करेगा।

एक पैराग्राफ में HTML

मान लीजिए हम एक स्थानीय बेकरी- प्रिंगल एंड संस बेकरी के लिए एक वेब पेज डिजाइन कर रहे हैं। यह वेब पेज बेकरी के इतिहास की रूपरेखा तैयार करेगा। बेकरी के मालिक मि. प्रिंगल ने हमें कुछ खास तथ्यों पर लाल टेक्स्ट के साथ ज़ोर देने के लिए कहा।

हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

index.html

<p>Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves <span class="redText">delicious baked goods</span> and coffee to the Oakbridge area. It has served <span class="redText">thousands</span> of customers since its foundation.</p>

styles.css

.redText {
color: red;
}

हमारा कोड लौटाता है:

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

हमने

. में संलग्न टेक्स्ट की एक स्ट्रिंग को परिभाषित किया है एचटीएमएल टैग। यह पाठ प्रिंगल एंड संस बेकरी के इतिहास की रूपरेखा तैयार करता है। फिर, हमने उन शब्दों को संलग्न किया है जिन्हें हम लाल रंग में दिखाना चाहते हैं टैग।

हमारी CSS फ़ाइल में, हमने निर्दिष्ट किया है कि redText वर्ग को निर्दिष्ट किसी भी तत्व का रंग लाल होना चाहिए। जब हम का उपयोग करते हैं तो यह हमें हमारे टेक्स्ट के रंग को लाल रंग में बदलने की अनुमति देता है। टैग।

टैग इस मामले में उपयोगी है क्योंकि हम केवल अपने पाठ में विशेष शब्दों पर जोर देना चाहते थे। हम

. पर लाल टेक्स्ट स्टाइल लागू कर सकते थे खुद को टैग करें। लेकिन, इसके परिणामस्वरूप लाल पाठ का एक पूरा अनुच्छेद बन जाता।

सूची में HTML

मान लीजिए प्रिंगल एंड संस बेकरी ने हमें उनकी वेबसाइट पर उनके सोशल मीडिया पेजों के लिंक के साथ एक सूची जोड़ने के लिए कहा।

बेकरी ने उल्लेख किया कि उनके ट्विटर और फेसबुक पेजों के लिंक विशेष रूप से महत्वपूर्ण हैं क्योंकि टीम उन प्लेटफार्मों पर सबसे अधिक सक्रिय है। इसलिए, वे चाहते हैं कि हम उन लिंक्स को हल्के नीले रंग के टेक्स्ट में हाइलाइट करें।

हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

index.html

<ul>
	<li><span class="blue"><a href="twitter.com">Twitter</a></span></li>
	<li><span class="blue"><a href="facebook.com">Facebook</a></span></li>
	<li><a href="instagram.com">Instagram</a></li>
</ul>

styles.css

.blue {
	background: lightblue;
}

हमारा कोड लौटाता है:

हमारे एचटीएमएल कोड में, हमने

. का उपयोग करके एक अनियंत्रित सूची बनाई है उपनाम। इस सूची में तीन आइटम हैं, जिनमें से प्रत्येक
• . के भीतर समाहित है टैग।

  ट्विटर और फेसबुक के लिए सूची आइटम HTML स्पैन टैग्स ( and ) में संलग्न हैं। प्रत्येक सूची आइटम के लिए प्रारंभिक अवधि टैग एक वर्ग विशेषता निर्दिष्ट करता है। वर्ग विशेषता का मान "नीला" है।

  हमने .blue नामक एक शैली को परिभाषित किया है जो किसी भी तत्व की पृष्ठभूमि का रंग बदल देती है, जिस पर इसे हल्के नीले रंग पर लागू किया जाता है। इससे हमारे HTML कोड में CSS क्लास .ब्लू के साथ सभी लिंक्स का बैकग्राउंड कलर लाइट ब्लू में बदल गया।

  हमारे Instagram लिंक से संबद्ध पृष्ठभूमि का रंग नहीं बदला क्योंकि हमने उस लिंक के टेक्स्ट को के भीतर संलग्न नहीं किया था टैग।

  निष्कर्ष

  एचटीएमएल टैग एक सामान्य कंटेनर है जिसका उपयोग HTML पृष्ठ पर विशिष्ट तत्वों पर शैलियों को लागू करने के लिए किया जाता है। डिफ़ॉल्ट रूप से, टैग कुछ नहीं करता है, लेकिन तत्वों पर शैलियों को लागू करने के लिए इसका उपयोग सीएसएस के साथ संयोजन में किया जा सकता है।

  एक चुनौती के रूप में, एक टैग को परिभाषित करें जो एक वाक्य में एक शब्द को सभी बड़े अक्षरों में प्रकट करता है। आपको अपने टैग के साथ टेक्स्ट को अपरकेस में बदलने के लिए CSS नियम का उपयोग करना होगा।

  इस ट्यूटोरियल में, उदाहरणों के साथ, HTML <span> . का उपयोग कैसे करें, पर चर्चा की गई अपने कोड में टैग करें। अब आप . का इस्तेमाल शुरू करने के लिए तैयार हैं एक पेशेवर वेब डेवलपर की तरह टैग करें!

  HTML कैसे सीखें, इस पर मार्गदर्शन और समर्थन के लिए, हमारी संपूर्ण HTML कैसे सीखें मार्गदर्शिका पढ़ें।