LEARN WEB DESIGNING IN HINDI

Posts

Showing posts with the label सीएसएस सीखें

सीएसएस लिस्‍ट - 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)

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

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

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

सीएसएस सेलेक्‍टर (CSS SELECTOR)

सीएसएस सेलेक्‍टर वे डिफाइन्‍ड कोड होते हैं जिनके सहारे हमारी स्‍टाइल हमारे एचटीएमएल पेज पर अप्‍लाई होती है । तात्‍पर्य यह है कि वे प्रीडिफाइन्‍ड या डिफाइन्‍ड एचटीएमएल कोड जिनका प्रयोग करके हमारा सीएसएस कोड हमारे एचटीएमएल पेज को स्‍टाइल करता है उन्‍हे सेलेक्‍टर्स कहते हैं । उदाहरण - h1{color:red;} p{color:green; font-family:Times New Roman; font-size:20px;} इन दोनों ही कोड्स में h1 और p हमारे कोड के लिये प्रीडिफाइन्‍ड सेलेक्‍टर्स के रूप में काम करते हैं । इन के सामने कर्ली ब्रेकट में लिखे गये सीएसएस कोड इन ब्‍लाक्‍स को स्‍टाइल करता है । एचटीएमएल के सभी ब्‍लाककोड, हाइपरलिंक आदि अपने आप में सीएसएस के लिये सेलेक्‍टर का काम करते हैं । आप इन उपर्युक्‍त कोड को इन सभी ब्‍लाक्‍स पर अप्‍लाई कर सकते हैं । उदाहरण - h2{color:red;} h3{color:red;} h4{color:red;} h5{color:red;} h6{color:red;} span{color:red;} a{color:red;} p{color:red;} div{color...

सीएसएस कमेण्‍ट - (CSS Comment) ।।

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

सीएसएस सिन्‍टैक्‍स - (CSS Syntax)

सीएसएस क्‍या होता है व इसका प्रयोग क्‍यूँ किया जाता है इस विषय में हमने पर्याप्‍त जान लिया । सीएसएस के प्रयोग का तरीका क्‍या होता है यह भी हमने पीछे समझ लिया किन्‍तु सबसे महत्‍वपूर्ण बात अभी भी समझनी बाकी है । सीएसएस के कोड कैसे लिखे जाते हैं व इन्‍हे एचटीएमएल के साथ कैसे संयुक्‍त किया जाता है । अब हम इसी बात पर चर्चा करेंगे । यह एक महत्‍वपूर्ण ही नहीं बल्कि अनिवार्य बिन्‍दु है क्‍यूँकि इसके बिना हम कोडिंग कर ही नहीं सकते हैं । सीएसएस का प्रयोग एचटीएमएल में सेलेक्‍टर्स के सहारे किया जाता है । ये सेलेक्‍टर आईडी, क्‍लास या ब्‍लाक कुछ भी हो सकते हैं । यदि हमें किसी ब्‍लाक पर सीएसएस का प्रयोग करना है तो सबसे पहले हमें उस ब्‍लाक को सेलेक्‍टर का स्‍वरूप देना होगा । सेलेक्‍टर बनाने के लिये या तो हम उस ब्‍लाक की आईडी निर्धारित करें, या क्‍लास निर्धारित करें अथवा सीधे उस ब्‍लाक के प्रकार को ही सेलेक्‍टर बनाकर प्रयोग कर लें । उदाहरण - p {color:green; font-si...

सीएसएस का प्रयोग - 2 ( How to use CSS–2)

पीछे हमने देखा कि किस तरह हम अपने सीएसएस स्टाइलशीट को बाहर से अपने एचटीएमएल पेज में लिंक कर सकते हैं । <link rel="stylesheet" href="style.css" /> सीएसएस डाक्‍यूमेण्‍ट को लिंक करने के लिये इस कोड को एचटीएमएल पेज के हेड सेक्‍शन में लिखते हैं । आइये इस कोड को ठीक तरह से समझते हैं । <link - लिंक टैग का प्रारम्‍भ rel= - लिंक का रिलेशन (रिस्‍ता या प्रकार) दर्शाता है । ( ये लिखना महत्‍वपूर्ण है अन्‍यथा कोड काम नहीं करेगा )। "stylesheet" - लिंक का प्रकार स्‍टाइलशीट (ये ब्राउजर को बताता है कि लिंक किया गया पेज एक स्‍टाइलशीट पेज है) href= - सोर्स को डिफाइन करता है । "style.css" - ये आपका वास्‍तविक स्‍टाइलशीट डाक्‍यूमेण्‍ट है जो आपके डेस्‍कटाप या किसी फोल्‍डर में स्‍टाइल.सीएसएस नाम से सुरक्षित किया गया है । /> - लिंक को क्‍लोज करता है । आगे इसके विषय में और भी विस्‍तार से जानेंगे । 2 - सीएसएस का एचटीएमएल हेड सेक्‍शन में प्रयोग - सीएसएस स्‍टाइलकोडिंग को एचटीएमएल ...