 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन २६ सीखेंगे।
पिछले लेसन में हम ने CSS font properties सीखी है।
आज हम CSS का उपयोग करके hyperlinks को स्टाइल देना सीखेंगे।
CSS styling links
हमने पिछले दो लेसन्स में CSS text properties और CSS font properties सीखी है। हम इन में से color, font family, text decoration जैसी properties का उपयोग करके hyperlinks को स्टाइल कर सकते हैं।आइये हम कुछ CSS प्रॉपर्टीज का उसे करके hyperlink को स्टाइल देंगे। हम आज यह देखेंगे की hyperlinks को यह प्रॉपर्टीज कैसी दी जाती है।
Hyperlink के ४ states होते हैं। वह इस प्रकार है - १. link - यह original लिंक है जब पहले बार browser में डिस्प्ले हुई है। २. इस link को क्लिक करने के बाद इसका रंग बदल जाता है। हम इससे लिंक किये हुए पेज में जाते हैं। अब यह हो गयी "visited" लिंक। ३. लिंक का और एक स्टेटस है "hover"। Hover का मतलब है mouse को लिंक पर ले जाना। तो जब हम mouse को लिंक पर ले जायेंगे तब इस लिंक का कलर बदलेगा। क्लिक करने पर हमने जो "visited" में कलर दिया है वह आ जायेगा। ४. हम ने जिस लिंक पर mouse लाया है और क्लिक किया है वह हुई active लिंक। जब हम लिंक को क्लिक करते हैं तब वह कुछ ही समय के लिए active स्टेट में आती है और कुछ ही सेकण्ड्स में वह visited लिंक हो जाती है।
हम इन ४ states के लिए CSS स्टाइल लिखेंगे।
a:link {
color: yellow;
background-color: black;
font-size: 3vw;
}
a:visited {
color: darkgray;
background-color: black;
font-size: 3vw;
}
a:hover {
color: red;
background-color: yellow;
font-size: 6vw;
font-weight: bold;
}
a:active {
color: blue;
background-color: yellow;
font-size: 6vw;
font-weight: bold;
}
आप यह भी ध्यान से देखे की जब हम mouse को लिंक पर ले जायँगे तब उसके अक्षर बड़े हो जाएंगे क्यों की हम hover कर रहे हैं। माउस को फिर से लिंक से बाजू ले जाइये लिंक के अक्षर फिर पहले जैसे छोटे हो जाएंगे।
वैसे ही आप observe कीजिये की इस क्लिक करने पर कुछ ही seconds के लिए यह "active" रहती है और उसके बाद "visited" हो जाएगी और फिर से छोटे अक्षर आ जायेंगे। हमारा आउटपुट आने के बाद आउटपुट में यह सब ध्यान देकर करके देखिये और concept को अच्छा समझ लीजिये।
याद रखिये: हमको लिंक के status इसी क्रम में देने पड़ते हैं। इस हम ऊपर नीचे नहीं कर सकते।
आइये इसे हमारे कोडिंग में लिखते हैं। एक नयी Notepad फाइल ओपन कीजिये। इस में lesson-25 का सारा कोड कॉपी कीजिये। ऊपर लिखा हुआ लिंक style के कोड <style> के बिलकुल नीचे लिखिए।
अब body में </body> के पहले नीच दिया हुआ लिखिए।
<a href="lesson-17.html">Output of Lesson २५</a>
इस फाइल को "Lesson-26" और "Lesson-26.html" के नाम से save कीजिये। Source कोड की PDF फाइल देखने के लिए आकृति २६-१. पर क्लिक कीजिये।
 |
| आकृती २६-१ CSS styling link |
HTML फाइल पर डबल क्लिक कीजिये और आउटपुट देखिये। यह आउटपुट नए वेब पेज में देखने के लिए निचे डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
 |
| आकृती २६-२ CSS style for hyperlink |
हमें hyperlink के लिए जो स्टाइल लिखा है वह डिस्प्ले हुआ है। यह येलो कलर में है और background कलर ब्लैक आया है। इस पर माउस लेकर आइये। लिंक बड़ी होकर दिखेगी और इसके कलर्स भी बदल जाएंगे। निचे दिखाई हुई आकृति २६-३ देखिये। इस पर क्लिक कीजिये। कुछ ही सेकण्ड्स के लिए कलर बदल जाएगा जब तक लिंक "active" स्टेट में रहेगी। आप ने अगर फिर यह लिंक देखी तो यह "visited" हो जायेगी। यह सब आप ठीक से समझ लीजिये।
 |
| आकृती २६-२ CSS styling hyperlink - hover |
कभी भी hyperlink underline की हुई होती है। यह default होता है। अगर आप चाहते हैं की लिंक को underline डिस्प्ले ना हो तो आपको text-decoration: none देना पड़ेगा।
हम लिंक्स के लिए buttons का भी use कर सकते हैं। हमारे lessons में हम CSS box model के बारे में सीखेंगे। उस लेसन के बाद आप बटन्स डिस्प्ले करना सीख जाएंगे।
Important Points:
१. Hyperlink की चार states होती है - link, hover, active, और visited ।२. हम इन states के लिए CSS text प्रॉपर्टीज और CSS font properties दे सकते हैं।
लेसन २५ लेसन २७
