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

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

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

<!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>

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

Comments

LEARN WEB DESIGNING IN HINDI