 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो दोस्तों, KTL के HTML और CSS tutorial में फिर से स्वागत है। आज हम लेसन ६ सीखेंगे।
पिछले लेसन में हमने attributes सीखे हैं। हमने style attribute का उपयोग करके एक स्क्रिप्ट लिखी और टेक्स्ट को कलर दिया।
Different methods of specifying color
आज हम HTML में कलर specify करने के तरीके देखेंगे।कलर specify दो प्रकार से कर सकते हैं। १. कलर का नाम, २. कलर की value.
Specifying color with color names
हम ने Lesson-05 में header के लिए कलर का नाम दिया है। ऐसे ही red, green, black, blue वगैरह कलर के नाम हैं। हम इनको हमारे HTML में लिख सकते हैं।Specifying color with color values
अब कलर values देखेंगे। कलर values देने के ५ प्रकार होते हैं। वह ऐसे हैं:1. RGB value
2. HEX value
3. HSL value
4. RGBA value
5. HSLA value
1. RGB value
इसको लिखा जाता है - rgb(red, green, blue). इसका मतलब है - rgb(intensity of red, intensity of green, intensity of red). Intensity यह बताती है की रंग कितना गहरा या तीव्र होना चाहिए। Intensity ० से २५५ होती है। २५५ मतलब सबसे गहरा और ० मतलब ० गहरा। अगर हम rgb(255,0,0) लिखते हैं, तो लाल रंग सबसे गहरा है, नीला और हरा ० हैं। इस का मतलब यह लाल रंग है। वैसे ही rgb(0,0,255) का मतलब नीला रंग है। rgb(0,0,0) का मतलब है काला रंग और rgb(255, 255, 255) सफेद होता है।अगर हम rgb के लिए equal value देते हैं तो भूरे (gray) रंग की शेड्स आती है। उदहारण: rgb(0,0,0) - काला, rgb(60,60,60) - थोड़ा कम काला, rgb(120,120,120) - उससे कम काला, और rgb(255, 255, 255) मतलब ० काला याने पूरा सफेद रंग!
2. HEX value:
HEX का मतलब है hexadecimal । यह एक numbering system होती है। Decimal numbering system में अंकों के लिए १० symbols होते हैं - ० से ९। वैसे ही hexadecimal system में १६ symbols होते हैं - ० से ९ और और a से f । तो इस में गिनती कैसी होगी? ० से ९ आते हैं, उसके बाद १० के लिए आएगा a, ११ के लिए आएगा b, १३ = c, ,,,,, १५ = f. इस के बाद१६ होगा १०. इस का मतलब हेक्स में १० तो डेसीमल का १६ होता है, अगर ११ लिखते हैं तो डेसीमल का १७ होगा। हेक्स में गिनती ऐसी होती है। निचे दिखाया हुआ टेबल देखिये। |
| आकृति ६-१. Hex numbers |
ff मतलब कितना होगा? ff = १६ * १६ = २५६, हेक्स में ff = डेसीमल २५५ होता है क्योकि गिनती ० से शुरू होती है।
अब हम रंगों का value हेक्स में कैसा देंगे? rgb(255,0,0) - 255 = ff, 0, 0 यह HTML में लिखेंगे #ff0000. पहले # लिखते हैं, उसके बाद ff red - की value, 00 - green की value, और ०० - blue की value। Blue कलर का हेक्स कोड क्या होगा? #0000ff ।
3. HSL value:
इस प्रकार में कलर बताने के लिए हम use करते हैं -hsl(hue, saturation, lightness)
हम इन शब्दों को समझ लेते हैं। कलर व्हील में सारे रंग एक circle में होते हैं। हम यह देख सकते हैं की कौन सा रंग कितने डिग्री पर है। इसको hue कहते हैं। निचे दी हुई आकृति देखिये। इस में लाल रंग का hue 0 degrees है, हरे रंग का hue 90 degrees है।
 |
| आकृति ६-२. Color wheel |
तो कलर का hue डिग्री में दिया जाता है। Saturation % में दिया जाता है, जैसे १००% मतलब फुल कलर। Lightness भी % में होती है, जैसे १००% का मतलब है सफेद और ०% का मतलब है काला रंग। लाल रंग का hue होता है ०, हरे रंग का १००, नीले रंग का २४०। जैसे किसी भी कलर पिकर में शेड्स बदलते जाते हैं वैसे ही यहाँ भी होता है।
RGBA and HSLA: यहाँ पर "A" का मतलब है alpha। यह बताता है की कलर कितना पारदर्शक है। ० मतलब १००% transparent और ०% मतलब बिलकुल transparent नहीं।
Using rgb for specifying color
अब हम हमारे स्क्रिप्ट में rgb() देंगे और gray कलर के अलग अलग shades देखेंगे। Notepad का नयी फाइल ओपन कीजिये। इस में Lesson-05 का कोड कॉपी कीजिये।दूसरे </p> के नीचे कीजिये:
<p style="background-color:rgb(0,0,0);">Gray shade 1</p>
<p style="background-color:rgb(60,60,60);">Gray shade 2</p>
<p style="background-color:rgb(120,120,120);">Gray shade 3</p>
<p style="background-color:rgb(180,180,180);">Gray shade 4</p>
<p style="background-color:rgb(255,255,255);">Gray shade 5</p>
इस को "Lesson-06" के नाम से save कीजिये। फिर से ""Lesson-06.html" के नाम से save कीजिये। Source कोड की PDF फाइल देखने के लिए आकृति ६-३. पर क्लिक कीजिये।
 |
| आकृति ६-३. Specifying color with rgb |
Windows explorer में जाकर HTML document पर डबल क्लिक कीजिये।
 |
| आकृति ६-४. Shades of gray - equal values of rgb |
Gray कलर अलग अलग शेड्स में आया है। यह आउटपुट नए वेब पेज में देखने के लिए आकृति ६-४ पर क्लिक कीजिए।
Lesson-06 video देखने के लिए यहाँ क्लिक कीजिये।
Important Points:
१. HTML में कलर specify करने के दो तरीके हैं। कलर का नाम और कलर की value.२. कलर की value देने के लिए rgb, hex, hue, hexa, और hsla का उपयोग करते हैं।
३. किसी भी method में रेड, ग्रीन और ब्लू की equal values होती है तो वह ग्रे कलर होता है।
लेसन ५ लेसन ७
