Skip to main content

अपने वेबसाइट के टेक्स्ट को मनचाहे रूप रंग से सजाएँ ??

By SANSKRITJAGAT

पीछे हमने अपने वेबसाइट के बार्डर को मनचाहे रूप में सेट करना सीखा । वेबसाइट में सर्वाधिक महत्वपूर्ण होते हैं उसमें लिखे पोस्ट अथवा अन्य शब्द । इन्हें ठीक से डिजाइन करना महत्वपूर्ण होता है ।
उदाहरण स्वरूप यदि हमारे वेबसाइट का हेडर बिलकुल ही बेतरतीब और भद्दा लिखा हो तो वेबसाइट खोलते ही अधिक लोग वेबसाइट के विषय में खराब माइण्डसेट कर लेते हैं । इसी तरह यदि हमारे वेबसाइट के टेक्स्ट गलत फान्ट या रंग में हों तो भी हमारे विजिटर के लिये परेशानी खडी हो जाती है और बहुत बार इससे हमारे वेबसाइट की ट्रैफिक पर भी असर पडता है ।

यहाँ हम वेबसाइट के टेक्स्ट को केवल कुछ साधारण से सीएसएस कोड लिखकर ही सुन्दर और आकर्षक बनाना सीखेंगे ।
हमारे वेबसाइट का सोर्स कोड और उसका परिणाम निम्न है –

<!doctype html>
<html>
<head>
<title>My New Html Page </title>
 <style>
body{margin:0; padding:0; text-align:center;}
#container{width:100%;} 

#header{height: 150px; width:100%; background:linear-gradient(red, yellow); font-family:aparajita, kokila, utsaah; font-size:60px; color:blue; text-shadow:10px 10px 10px white; text-transform:uppercase; font-weight:bold;}

#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange);  border:2px groove purple; border-left:0px; border-right:0px; }

#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white); border:2px groove red; border-top:0px; border-bottom:0px;}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange); border:2px groove red; border-top:0px; border-bottom:0px; }

#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black); border:2px groove green; border-left:0px; border-right:0px;}

</style>

</head>

<body>
<div id="container">
<div id="header">SJweb Development Service</div>
<div id="menu"> Menu Bar </div>
<div id="sidebar">Left Sidebar</div>
<div id="post">Post Area</div>
<div id="footer">Footer</div>
</div>

</body>
</html>

अब इस वेबसाइट के टेक्स्ट को डिजाइन करने के लिये हम अपने वेबसाइट के प्रत्येक डिवीजन के सीएसएस कोड में कुछ अतिरिक्त कोड डालेंगे । सबसे पहले हम अपने वेबसाइट के हेडर डिवीजन के टेक्स्ट को डिजाइन करेंगे । 

हमारे हेडर डिवीजन का स्टाइल कोड निम्न है – 

#header{height: 150px; width:100%; background:linear-gradient(red, yellow);}

इसका परिणाम निम्न है – 

अब इसमें हम निम्न कोड जोड देते हैं – 

font-family:aparajita, kokila, utsaah; font-size:60px; color:blue;

अब आपका परिणाम कुछ इस तरह होगा – 

 

इसमें अब कुछ और कोड जोडते हैं – 

 text-shadow:10px 10px 10px white; text-transform:uppercase; font-weight:bold;

अब इसका परिणाम देखते हैं – 

आपको पहले चित्र‚ दूसरे चित्र आैर तीसरे चित्र में पर्याप्त अंतर दिखाई दे रहा होगा ।

अब हमारे हेडर डिवीजन का पूरा कोड कुछ इस तरह हो गया – 

#header{height: 150px; width:100%; background:linear-gradient(red, yellow); font-family:aparajita, kokila, utsaah; font-size:60px; color:blue; text-shadow:10px 10px 10px white; text-transform:uppercase; font-weight:bold;}

अब आपका पूरा कोड इस तरह दिखाई देगा । 

<!doctype html>
<html>
<head>
<title>My New Html Page </title>
 <style>
body{margin:0; padding:0; text-align:center;}
#container{width:100%;} 

#header{height: 150px; width:100%; background:linear-gradient(red, yellow); font-family:aparajita, kokila, utsaah; font-size:60px; color:blue; text-shadow:10px 10px 10px white; text-transform:uppercase; font-weight:bold;}

#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange);  border:2px groove purple; border-left:0px; border-right:0px; }

#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white); border:2px groove red; border-top:0px; border-bottom:0px;}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange); border:2px groove red; border-top:0px; border-bottom:0px; }

#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black); border:2px groove green; border-left:0px; border-right:0px;}

</style>

</head>

<body>
<div id="container">
<div id="header">SJweb Development Service</div>
<div id="menu"> Menu Bar </div>
<div id="sidebar">Left Sidebar</div>
<div id="post">Post Area</div>
<div id="footer">Footer</div>
</div>

</body>
</html>

हेडर सेक्‍शन के कोड को अन्‍य सेक्‍शन में भी अपनी आवश्‍यकतानुसार लगाकर परिणाम देखें । समझ में न आए तो टिप्‍पणीबाक्‍स में पूँछें ।

 

Labels:

Comments

Post a Comment

Popular posts from this blog

एचटीएमएल संरचना ।

By
पिछले पाठ में हमने एचटीएमएल का एक प्रारूप देखा । यहाँ पर उस प्रारूप की व्‍याख्‍या की जायेगी । इस अध्‍याय को लिखते समय हम यह मानकर चल रहे हैं कि वेबडिजाइनिंग सीखने की इच्‍छा रखने वाले को सामान्‍य कम्‍प्‍यूटर ज्ञान जैसे कि कम्‍प्‍यूटर की कोई फाइल या फोल्‍डर खोलना, बन्‍द करना, किसी प्रोग्राम को खोलना, नया फोल्‍डर बनाना, किसी फाइल को खोलना, उसपर काम करना, उसे सेव करना तथा डिलीट करना आदि । इसलिये हम इन सभी बातों को बताने की अपेक्षा सीधे एचटीएमएल की तरफ चलते हैं । एचटीएमएल का फुलफार्म - HTML = Hyper Text Markup Language एचटीएमएल संरचना - पिछले पाठ में हमने निम्‍न कोडिंग का प्रयोग किया था । <!DOCTYPE HTML> <html> <head> <title>My First Html Page</title> </head> <body> Hello World </body> </html> अब इस कोडिंग की पूरी व्‍याख्‍या यहाँ प्रस्‍तुत की जा रही है ताकि आप एचटीएमएल को पूरी तरह समझ सकें । यह ध्‍यान रखें कि एचटीएमएल वेबपेज बनाने का सर्वप्रथम सोपान है, बिना इसके सीखे आप वेबपेज नही बना सकते हैं । <!DOCTYPE ...
7 comments
Read more

सीएसएस का प्रयोग (How to Use CSS)

By
     सीएसएस का प्रयोग अत्‍यन्‍त सरल है । सीएसएस का प्रयोग आपका बहुत सारा समय व आपकी बहुत सारी मेहनत बचाने के साथ ही साथ आपके पेज को बेहतरीन सुन्‍दरता प्रदान करता है । इसके प्रयोग की तीन विधियाँ हैं । ये तीनों ही विधियाँ प्रयोज्य हैं अर्थात् इनमें से किसी भी विधि का प्रयोग आपको वांछित परिणाम प्रदान कर सकता है । सीएसएस प्रयोग विधि सीएसएस का प्रयोग निम्‍नलिखित तीन विधियों से किया जा सकता है । सीएसएस को एक अलग सीएसएस फाइल में लिखकर उसे एचटीएमएल पेज से लिंक करना । सीएसएस को एचटीएमएल पेज के हेड सेक्‍सन के अन्‍तर्गत स्‍टाइल टैग के अन्‍दर लिखना । सीएसएस को किसी भी टैग या एलीमेण्‍ट के अन्‍दर सीधे लिखना । सीएसएस का बाह्य प्रयोग -       सीएसएस को बाहर से लिंक करना सबसे बेहतरीन तरीका है । इस तरीके से आपकी कोडिंग फाइल बहुत बोझिल और बडी होने से बच जाती है । यदि हमें एक बहुत सारे ब्‍लाक्‍स का पेज बनाना है और हम हर ब्‍लाक को अलग अलग रंगों व तरीकों से सजाते हैं तो निश्चित ही हमारे पेज की कोडिंग फाइल बहुत बडी हो जायेगी जिसे सुधार कर...
2 comments
Read more

XMLHttpRequest आब्‍जेक्‍ट बनाना - एजाक्‍स सीखें हिन्‍दी में ।

By
XMLHttpRequest आब्‍जेक्‍ट प्राय: सभी आधुनिक ब्राउजर XMLHttpRequest आब्‍जेक्‍ट को सपोर्ट करते हैं । XMLHttpRequest आब्‍जेक्‍टका प्रयोग किसी सर्वर से डेटा बिना वेबपेज को अपडेट किये प्राप्‍त करने के लिये किया जाता है । तात्‍पर्य यह है कि इसकी सहायता से आपके पूरे पेज को रिफ्रेश किये बिना ही नया डाटा आपके पेज के किसी विशेष हिस्‍से में अपडेट हो सकता है । XMLHttpRequest आब्‍जेक्‍ट बनाना   प्राय: सभी ब्राउजर्स में XMLHttpRequest आब्‍जेक्‍ट इनबिल्‍ट रहता है । XMLHttpRequest आब्‍जेक्‍ट बनाने के लिये हमें दो तरीकों का प्रयोग करना होता है । एक तो सभी प्रकार के माडर्न ब्राउजर्स के लिये जो पहले ही इसे सपोर्ट करते हैं । तथा दूसरा पुराने ब्राउजर्स के लिये जिसमें एजाक्‍स इनबिल्‍ट नहीं होता है । नये ब्राउजर के लिये XMLHttpRequest आब्‍जेक्‍ट बनाना -    var NewBrowser = new XMLHttpRequest(); पुराने ब्राउजर्स के लिये XMLHttpRequest आब्‍जेक्‍ट बनाना - var OldBrowser = new ActiveXObject( "Microsoft.XMLHTTP" ); यहाँ हमने दो वैरियेबल्‍स बनाये । एक NewBrowser तथा दूसरा Old...
4 comments
Read more