Including W3.CSS via CDN In Hindi
एक एडवांस्ड कम्पलीट फोर्मेटेड कमर्शियल एचटीएमएल, जावास्क्रिप्ट वेबपेज डिज़ाइन करने के लिए W3.CSS एक लाइटवेट CSS फ्रेमवर्क लाइब्रेरी है, जिसे ऑफिशियली W3Schools कंपनी ने डेवलप और डिज़ाइन किया है। W3.CSS एक वेब डेवलपर को बहुत डिटेल में काम्प्लेक्स कस्टम CSS वेबपेज सोर्स कोड लिखे बिना एक कम्पलीट रिस्पॉन्सिव, मोबाइल-फ्रेंडली, और अट्रैक्टिव वेबपेज या वेबसाइट डिज़ाइन डेवलप करने में हेल्प करता है।
W3.CSS फ्रेमवर्क में CDN एक (कंटेंट डिलीवरी नेटवर्क) एचटीएमएल, जावास्क्रिप्ट वेब डेवलपर को W3.CSS फ्रेमवर्क लाइब्रेरी सोर्स कोड को अपने कंप्यूटर में डाउनलोड किए बिना डायरेक्ट ऑनलाइन इंटरनेट के माध्यम से W3.CSS फीचर्स को यूज़ करने देता है।
Why use a CDN in the W3.CSS framework?
- W3.CSS से एचटीएमएल, जावास्क्रिप्ट वेब डेवलपर को W3.CSS सोर्स कोड फ़ाइलें को अपने कंप्यूटर में डाउनलोड या इंस्टॉल करने की ज़रूरत नहीं है।
- W3.CSS फ्रेमवर्क लाइब्रेरी को अपने वेब प्रोजेक्ट में सेट अप और यूज़ करना इजी होता है।
- W3.CSS फ्रेमवर्क लाइब्रेरी फ़ास्ट लोडिंग और इम्प्लीमेंट होती है. क्योंकि W3.CSS CDN सर्वर ऑप्टिमाइज़्ड और ग्लोबली लेवल पर डिस्ट्रिब्यूटेड होते हैं।
- W3.CSS फ्रेमवर्क लाइब्रेरी से हमेशा लेटेस्ट वर्जन को अपने वेब प्रोजेक्ट में इम्प्लीमेंट कर सकते है।
Steps to include the W3.CSS Framework Library in an HTML or JavaScript webpage via a CDN.
Step 1 – First, create an HTML webpage file.
जैसे, index.html नाम की एक एचटीएमएल फ़ाइल क्रिएट करे।
Step 2 – Now add the W3.CSS CDN Framework link directly to your webpage.
अपने HTML डॉक्यूमेंट के <head> सेक्शन के अंदर यह <link> टैग को इन्सर्ट करे।
<!DOCTYPE html>
<html>
<head>
<title>Example of including W3.CSS framework in html webpage </title>
<!– adding a W3.CSS CDN network –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/5/w3.css”>
</head>
<body>
</body>
</html>
यहाँ एचटीएमएल वेबपेज में <link> टैग क्लाइंट वेब ब्राउज़र को CDN लिंक से W3.CSS फ्रेमवर्क लाइब्रेरी स्टाइलशीट को लोड या ऐड करने के लिए कमांड करता है।
Step 3 – Use the HTML W3.CSS class in your webpage.
अपने वेबपेज में W3.CSS CDN फ्रेमवर्क लिंक स्टाइलशीट को इन्क्लुड करने के बाद, वेब डेवलपर अपने HTML वेब एलिमेंट में W3.CSS क्लास का यूज़ कर सकते हैं।
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Implementation Example</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/5/w3.css”>
</head>
<body>
<div class=”w3-container w3-teal”>
<h1>Lets Explore the best features of W3.CSS Famework </h1>
</div>
<div class=”w3-container w3-yellow”>
<p>This webpage explain usages of W3.CSS framework from a CDN network.</p>
<button class=”w3-button w3-blue”>
Submit <button class=”w3-button w3-pink”> Reset
</button>
</div>
</body>
</html>
Common CSS framework library Classes explanation.
| # | W3.css class name | Why and where to use |
| 1. | W3-container | This w3.css class use to adds padding around the current webpage content |
| 2. | W3-button | This w3.css class use to apply styles a user defines webpage button |
| 3. | W3-blue | This w3.css class use to add a blue background color webpage object element |
| 4. | W3-green | This w3.css class use to add a green background color webpage object element |
| 5. | W3-red | This w3.css class use to add a red background color webpage object element |
| 6. | W3-card | This w3.css class use to creates a card with shadow effect |
| 7. | W3-center | This w3.css class use to align webpage centers text effect |
| 8. | W3-padding | This w3.css class use to adds padding around html webpage element |
| 9. | W3-margin | This w3.css class use to adds margin among around html webpage object |
| 10 | W3-round | This w3.css class use to add a rounds the corners object |
Advantages of using W3.CSS via a CDN with the W3.CSS CDN Framework Link.
- W3.CSS CDN फ्रेमवर्क को एचटीएमएल वेबपेज में कोड की एक लाइन से ऐड करना इजी है।
- वेब डेवलपर को अपने कंप्यूटर में W3.CSS CDN फ्रेमवर्क को इंस्टॉलेशन या डाउनलोड की ज़रूरत नहीं होती है।
- W3.CSS CDN फ्रेमवर्क लाइब्रेरी वेब डेवलपर को एक रिस्पॉन्सिव डिज़ाइन सपोर्ट प्रोवाइड करता है।
- W3.CSS CDN फ्रेमवर्क यूज़ में लाइटवेट और फ़ास्ट होता है।
- W3.CSS CDN फ्रेमवर्क वेब डेवलपर को कई बिल्ट-इन रेडीमेड स्टाइल क्लास प्रोवाइड करता है, जिसमे (वेबपेज बटन, कार्ड, टेबल, फ़ॉर्म, नेविगेशन बार, कलर) आदि ग्रुप है।
- W3.CSS CDN फ्रेमवर्क आज के सभी मॉडर्न क्लाइंट वेब ब्राउज़र को सपोर्ट करता है।
Disadvantages of the W3.CSS CDN Framework Link.
- अपने वेबपेज में W3.CSS CDN लिंक स्टाइलशीट को लोड करने के लिए एक फ़ास्ट इंटरनेट कनेक्शन की ज़रूरत होती है।
- यदि किसी समय W3.CSS CDN लिंक अवेलेबल नहीं है, तो आपके एचटीएमएल, जावास्क्रिप्ट वेबपेज में W3.CSS स्टाइल लोड नहीं हो सकते हैं।
- जब तक वेब डेवलपर एक स्पेसिफिक W3.CSS CDN यूआरएल का यूज़ नहीं करते है, तब तक आपका W3.CSS CDN फ्रेमवर्क नए वर्जन अपडेट पर कम कंट्रोल होता है।
Summary of Including W3.CSS via CDN.
- अपने एचटीएमएल, जावास्क्रिप्ट वेबपेज में CDN के ज़रिए W3.CSS को शामिल करने के लिए।
- अपने एचटीएमएल, जावास्क्रिप्ट वेबपेज के <head> सेक्शन के अंदर W3.CSS स्टाइलशीट लिंक को मैन्युअल ऐड करे।
- अब अपने एचटीएमएल, जावास्क्रिप्ट वेबपेज एलिमेंट्स में मौजूदा w3.CSS क्लासेस नेम जैसे w3-container, w3-button, और w3-card को यूज़ या अप्लाई कर सकते है।
- अपने एचटीएमएल, जावास्क्रिप्ट वेबपेज में अप्लाई w3.CSS स्टाइल्ड आउटपुट प्रीव्यू को देखने के लिए अपने कंप्यूटर में इन्सटाल्ड क्लाइंट वेब ब्राउज़र में HTML वेबपेज को ओपन करे।
- किसी एचटीएमएल, जावास्क्रिप्ट वेबपेज में CDN का यूज़ करना W3.CSS लाइब्रेरी फ्रेमवर्क के साथ एक रिस्पॉन्सिव वेबपेज क्रिएट करने का सबसे फ़ास्ट और इजी स्टेप है।
