आमतौर पर एचटीएमएल पेज में लगाये गये लिंक नीले रंग में और अंडरलाइन होते हैं। इन लिंक्स को यदि स्टाइल न किया जाए तो ये थोडे भद्दे दिखाई देते हैं । किन्तु स्टाइल कोड के प्रयोग से आप इन्हे मनचाहा व आकर्षक बना सकते हैं ।
आइये लिंक को स्टाइल करना सीखते हैं -
सबसे पहले हम एक एचटीएमएल पेज बनायेंगे जिसमें केवल लिंक लगा होगा ।
प्रयोग -
<!doctype html>
<html>
<head>
</head>
<body>
<a href="http://sjweb.in/">SJWEB</a>
<a href="http://sjweb.in/">SJWEB</a>
</body>
</html>
परिणाम -
लिंक को स्टाइल करने के लिये अभी इतना कोड ही पर्याप्त है । अधिक कोड डाल देने पर पाठक भ्रमित हो सकते हैं अत: लिंक का प्रयोग अन्य स्थानों पर जैसी जिसकी आवश्यकता हो वैसा स्वयं करें और इन स्टाइल कोड का प्रयोग करें ।
यहाँ हम सीएसएस कोड का प्रयोग हेड टैग में ही करेंगे ।
<!doctype html>
<html>
<head>
<style>
<------------ हमारा सीएसएस कोड यहाँ होगा ।
</style>
</head>
<body>
<a href="http://sjweb.in/">SJWEB</a>
<a href="http://sjweb.in/">SJWEB</a>
</body>
</html>
परिणाम -
यहाँ हमें यह जानने की आवश्यकता है कि हम एक लिंक के साथ क्या-क्या कर सकते हैं ।
हम एक लिंक के साथ निम्नलिखित स्टाइल कर सकते हैं -
- लिंक का अन्डरलाइन हटा सकते हैं ।
- लिंक का बैकग्राउन्ड बदल सकते हैं ।
- लिंक का मार्जिन और पैडिंग सेट कर सकते हैं ।
- लिंक को बार्डर कर सकते हैं ।
- लिंक के अक्षरों को विभिन्न रंगों से रंग सकते हैं ।
- लिंक का फान्ट बदल सकते हैं ।
अब हम इसे करके देखते हैं --
<!doctype html>
<html>
<head>
<style>
a
{
text-decoration:none;
font-family:algerian;
margin:5px;
padding:5px 15px;
background:lime;
color:red;
border:1px solid blue;
border-radius:15px;
}
</style>
</head>
<body>
<a href="http://sjweb.in/">SJWEB</a>
<a href="http://sjweb.in/">SJWEB</a>
</body>
</html>
परिणाम -
आप देख सकते हैं कि हमारा लिंक जो कि एकदम सामान्य सा दिख रहा था अब निश्चय ही विशिष्ट हो गया है । यह स्टाइलिश हो गया है तथा देखने में अधिक आकर्षक भी हो गया है ।
अब हम यह समझेंगे कि इसमें हमने क्या क्या किया और उससे क्या क्या परिवर्तन हुए । इसके लिये हम एक एक कोड को स्वतन्त्र रूप में समझेंगे । आप इन कोड्स को एक एक करके अप्लाई कर सकते हैं व इसका परिणाम देख सकते हैं ।
text-decoration:none;
टेक्स्ट डेकोरेशन का प्रयोग हम लिंक के अन्डरलाइन को हटाने के लिये करते हैं । लिंक का अन्डरलाइन हटाने के लिये इस कोड का प्रयोग अनिवार्य है । यदि इसका प्रयोग न किया जाए तो किसी भी तरीके से लिंक का अन्डरलाइन हटाना सम्भव नहीं होता है ।
font-family:algerian;
फान्ट फैमिली कोड का प्रयोग आपने पिछले लेखों में बखूबी सीखा है । इस कोड के प्रयोग से हमने लिंक का फान्ट मनचाहा कर लिया । आप अल्जीरियन की जगह किसी भी अन्य फान्ट का प्रयोग करने में स्वतन्त्र हैं ।
margin:5px;
मार्जिन का प्रयोग करके हमने लिंक से लिंक के बीच की दूरी को 5 पिक्सल सेट कर दिया जिससे कि दोनों लिंक आपस में सटे हुए न दिखाई दें ।
padding:5px 15px;
पैडिंग के प्रयोग से हमने लिंक के चारो ओर पैडिंग डाल दी जिससे बैकग्राउंड लिंक से सटा न दिखाई दे और लिंक देखने में सुन्दर लगे ।
background:lime;
बैकग्राउंड का रंग बदल दिया ।
color:red;
लिंक के फान्ट का रंग बदल दिया ।
border:1px solid blue;
लिंक के चारों ओर एक पिक्सल का पतला सा बार्डर डाला ।
और अन्त में
border-radius:15px;
लिंक के बार्डर को थोडा सा घुमावदार बना दिया ।
और इस तरह हमारा लिंक तैयार हो गया।
इसमें आप अपने पसन्द के रंग, पैडिंग, फान्ट, बार्डर आदि डालकर इसका प्रयोग करके देखें । यदि कहीं भी कोई भी चीज समझ में कम आ रही हो या न आ रही हो तो कृपया कमेण्टबाक्स में अपनी समस्या लिखें । आपकी समग्र समस्याओं का यथासम्भव समाधान किया जाएगा ।
अगले पाठ में हम लिंक के साथ कुछ और प्रयोग करके देखेंगे । तबतक के लिये -
नमस्कार
Expertise of Developing comes from Year's of Experience, with the experts of Designers & Developers we can create the Best Websites so let's hire our services for the design and development of the Mobile App / Website Designing. Create a good looking Design with Colour Moon Technologies.
ReplyDelete