Skip to main content

Posts

सीएसएस लिस्‍ट - Creating CSS List.

     एचटीएमएल लिस्‍ट वेबडिजाइनिंग का एक अत्‍यन्‍त महत्‍वपूर्ण तत्‍व है । इसका प्रयोग विभिन्‍न प्रकार से किया जाता है । पेज का मेन्‍यू भी प्राय: लिस्‍ट के द्वारा ही बनाया जाता है । इसके अतिरिक्‍त यदि कोई लिस्‍ट तैयार करनी हो तो भी इसका प्रयोग अनिवार्यत: किया जाता है । लिस्‍ट दो प्रकार का होता है । 1 - आर्डर्ड लिस्‍ट ordered lists (<ol>) - आर्डर्ड लिस्‍ट संख्‍यात्‍मक या वर्णात्‍मक  होते हैं । अर्थात् इसमें लिस्‍ट 1, 2, 3 या A, B, C प्रयुक्‍त होता है । 2 - अनआर्डर्ड लिस्‍ट unordered lists (<ul>) - अनआर्डर्ड लिस्‍ट में विभिन्‍न प्रकार की गोलियाँ (बुलेट्स) प्रयुक्‍त होती हैं । उदाहरण -  1 - आर्डर्ड लिस्‍ट ordered lists (<ol>) -  <ol> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> </ol> परिणाम -  2 - अनआर्डर्ड लिस्‍ट unordered lists (<ul>) - <ul> <li>Text</li> <li...

सीएसएस लिंक - Styling Links with CSS.

       पिछले लेख में हमने सीएसएस फान्‍ट स्‍टाइल करना सीखा । इस लेख में हम लिंक को सीएसएस द्वारा स्‍टाइल करना सीखेंगे ।        आमतौर पर एचटीएमएल पेज में लगाये गये लिंक नीले रंग में और अंडरलाइन होते हैं। इन लिंक्स को यदि स्‍टाइल न किया जाए तो ये थोडे भद्दे दिखाई देते हैं । किन्‍तु स्‍टाइल कोड के प्रयोग से आप इन्‍हे मनचाहा व आकर्षक बना सकते हैं ।        आइये लिंक को स्‍टाइल करना सीखते हैं - सबसे पहले हम एक एचटीएमएल पेज बनायेंगे जिसमें केवल लिंक लगा होगा । प्रयोग - <!doctype html> <html> <head> </head> <body> <a href="http://sjweb.in/">SJWEB</a> <a href="http://sjweb.in/">SJWEB</a> </body> </html> परिणाम - लिंक को स्‍टाइल करने के लिये अभी इतना कोड ही पर्याप्‍त है । अधिक कोड डाल देने पर पाठक भ्रमित हो सकते हैं अत: लिंक का प्रयोग अन्‍य स्‍थानों पर जैसी जिसकी आवश्‍यकता हो वैसा स्‍वयं करें और इन स्‍टाइल कोड का प...

सीएसएस फॉन्‍ट - CSS Font Style

     पिछली पोस्‍ट में हमने टेक्‍स्‍ट स्‍टाइल करना सीखा था । इस पोस्‍ट में हम फान्‍ट (वर्ण) परिवर्तन व डिजाइन करना सीखेंगे । टेक्‍स्‍ट और फॉन्‍ट में सामान्‍य तौर पर देखा जाय तो कोई अन्‍तर विशेष नहीं है किन्‍तु वेब डिजाइनिंग में दोनों दो यूनिट हैं । टेक्‍स्‍ट से आशय किसी भी टेक्‍स्‍ट से होता है किन्‍तु फान्‍ट का विशेष प्रकार होता है जैसे - टाइम्‍स न्‍यू रोमन, क्रुतिदेव आदि । अर्थात् टेक्‍स्‍ट का डिजाइन करते समय हम केवल फॉन्‍ट के किसी व्‍यक्तिगत प्रकार को इधर उधर करते हैं या उसके स्‍थान आदि में परिवर्तन करते हैं, रंग आदि परिवर्तित करते हैं किन्‍तु फॉन्‍ट स्‍टाइल करते समय हम टेक्‍स्‍ट के बेस स्‍टाइल को ही बदल देते हैं । इसके साथ ही हम टेक्‍स्‍ट को छोटा, बडा, पतला, मोटा, तिरछा, सीधा आदि करते हैं । आइये इसे करके देखें - <!doctype html> <html> <head> <title>Learn CSS </title> <style> </style> </head> <body> <p id="p1">This is Paragraph One</p> <p id="p2">This is Paragraph One...

सीएसएस टेक्‍स्‍ट स्‍टाइल - (CSS Text Styling)

पिछली पोस्‍ट में हमने अपने वेबसाइट के टेक्‍स्‍ट को विभिन्‍न स्‍टाइल में करना सीखा । कुछ और स्‍टाइलकोड यहाँ दिये जा रहे हैं जिनकी कभी कभार आवश्‍यकता पड ही जाती है । किन्‍तु जब इनकी आवश्‍यकता पडती है तो फिर इनका महत्‍व समझ में आता है । ये निम्‍नलिखित हैं - अक्षरों के लिखने की दिशा परिवर्तन । अक्षरों के बीच में जगह बढाना या घटाना । पंक्तियों के बीच में जगह बढाना या घटाना । शब्‍दों के बीच में जगह बढाना या घटाना । शब्‍दों को किसी निश्चित सीमा में लपेटना । अक्षरों की छाया बनाना । अक्षरों का दिशा परिवर्तन (टेक्‍स्‍ट डायरेक्‍शन)   p{direction:rtl; unicode-bidi:bidi-override;} परिणाम - अक्षरों के बीच जगह (लेटर स्‍पेसिंग) p{letter-spacing:5px;} p{letter-spacing:-3px;} परिणाम - पंक्तियों की बीच जगह (लाइन स्‍पेसिंग) p{line-height:150%;} p{line-height:50%;} परिणाम - शब्‍दों के बीच जगह (वर्ड स्‍पेसिंग) p{word-spacing:30px;} परिणाम - शब्‍दों को किसी निश्चित सीमा में न लपेटना (वर्ड रैपिंग) p{white-space:nowrap;} परिणाम - अक्षरों की छाया...

सीएसएस टेक्‍स्‍ट (CSS TEXT STYLING)

       सीएसएस कैसे प्रयोग किया जाये यह हम लगभग पूरी तरह से सीख चुके हैं । अब हमें केवल विभिन्‍न ब्‍लाक्‍स को डिजाइन करने के कोड सीखना बाकी है । इन कोड्स को हम क्रम से सीखेंगे । यहाँ एक बात का निवेदन करना चाहता हूँ । क्‍यूँकि हर उदाहरण के लिये पूरे एचटीएमएल पेज की कोडिंग लिखने पर पेज का आकार बहुत बढ जाता है इ‍सलिये अब हम यहाँ पर केवल सीएसएस कोडिंग को ही लिखा करेंगे । इस कोडिंग को आप हेड सेक्‍सन के स्‍टाइल टैग के बीच में रखकर अपने पेज पर अप्‍लाई कर सकेंगे । साथ ही साथ जो आवश्‍यक निर्देश होंगे वे भी अलग से बता दिये जाएँगे । इससे लाभ यह है कि हमारा लेख काफी छोटा हो जाएगा और क्‍यूँकि हमें सीएसएस के प्रयोग के विषय में कोई सन्‍देह नहीं है इसलिये बिना वजह की लम्‍बी कोडिंग बार-बार पढने से भी फुर्सत मिल जाएगी । इसलिये अब से हर पोस्‍ट के शुरूआत में पहली कोडिंग को ही पूरा लिखा जाएगा जिससे कि हमारे एचटीएमएल पेज का स्‍वरूप स्‍पष्‍ट हो जाए और यह भी पता लग जाए कि हम क्‍या और किस पर स्‍टाइल करने जा रहे हैं । यदि आपको समझने में कठिनाई हो तो कृपया हमें अ...

।। नववर्ष मंगलमय हो ।।

आप सभी  को नवसंवत्‍सर 2072, युगाब्‍द 5117 तथा वासन्‍ती नवरात्र प्रारम्‍भ की  हार्दिक शुभकामनाएँ।।  ईश्‍वर आपके लिये इस नव वर्ष को सुखदायक, शान्तिदायक, कल्‍याणप्रद, प्रगतिदायक व आनन्‍ददायक बनाये । ।। नववर्ष मंगलमय हो ।।

सीएसएस पृष्‍ठभूमि - (CSS Background)

        सीएसएस के प्रयोग की विधियाँ सीखने के बाद अब हम इस योग्‍य हो गये हैं कि सीएसएस का प्रयोग करना शुरू करें । इस क्रम में सबसे पहली चीज होती है पृष्‍ठभूमि, जिसका कि हमें परिवर्तन अपनी इच्‍छानुसार करना होता है ।         पृष्‍ठभूमि का इच्‍छानुसार परिवर्तन, उसमें इच्छित रंग भरना, इच्छित चित्र लगाना आदि अनेक बातें होती हैं जिससे आपका वेबपेज आकर्षक बनता है । दर्शक का पहला परिचय आपके पेज के पृष्‍ठभूमि के प्रकार से ही होता है अत: पृष्‍ठभूमि का आकर्षण सर्वाधिक महत्‍वपूर्ण है । आज हम यहाँ पृष्‍ठभूमि को अपने अनुरूप बनाना सीखेंगे ।         पृष्‍ठभूमि परिवर्तन के अन्‍तर्गत पृष्‍ठभूमि का रंग व चित्र लगाना व परिवर्तित करना ही मुख्‍य होता है । इन चित्रों को लगाने के लिये इनके स्‍थान का चयन, इनकी चौडाई, उँचाई आदि भी महत्‍वपूर्ण बिन्‍दु होते हैं । यहाँ पर सीएसएस कोडिंग को एचटीएमएल पेज में हेड सेक्‍सन के अन्‍दर स्‍टाइल टैग में लिखने को वरीयता दी जा रह...