Installing VS Code & Live Server Free web designing Course Tutorials #2
Installing VS Code & Live Server Free web designing Course
इस ट्यूटोरियल में, हम अपना पहला HTML ट्यूटोरियल शुरू करने जा रहे हैं। अंतिम ट्यूटोरियल में, हमने HTML, CSS और जावास्क्रिप्ट के बारे में जाना है और अनुरोध प्राप्त करने के बाद वेब सर्वर कैसे प्रतिक्रिया देता है। अब हम Visual Studio Code में HTML कोड लिखने के तरीके के बारे में जानेंगे।
यह Microsoft से एक मुक्त खुला स्रोत IDE है जो हमारे काम को बहुत आसान बनाता है। इसलिए, मैं सभी को इस सॉफ़्टवेयर को डाउनलोड करने और इसे स्थापित करने की सलाह देता हूं। "पूर्ण वेब विकास बूटकैम्प" नाम का एक फ़ोल्डर बनाएं और फिर उस फ़ोल्डर में दायाँ क्लिक करें> कोड के साथ खोलें दबाकर वीएस कोड खोलें। यदि आप विजुअल स्टूडियो के साथ किसी विशेष फ़ोल्डर को खोलने का विकल्प नहीं खोज पाते हैं, तो आप वीएस कोड स्थापित करने के बाद सुनिश्चित करने के लिए अपने पीसी या लैपटॉप को फिर से शुरू कर सकते हैं।
"Rk.Html" एक बहुत ही सरल HTML फ़ाइल का एक उदाहरण है जिसमें हम इसे पेशेवर दिखने के लिए और बदलाव करते हैं। हालाँकि आप सभी HTML, CSS और JavaScript कोड नोटपैड में लिख सकते हैं, लेकिन मैं ऐसा करने की सलाह नहीं दूंगा। ऐसा इसलिए होता है क्योंकि नोटपैड में आपको अलग-अलग फाइल बनाने होते हैं और उन्हें एक-एक करके एडिट करना होता है और साथ ही यह सिंटैक्स हाइलाइटिंग का विकल्प भी प्रदान नहीं करता है। और, मैं इसकी अच्छी कार्यक्षमता और अद्भुत देव उपकरणों के कारण क्रोम ब्राउज़र का उपयोग करने की सलाह दूंगा।
Free web designing Course Tutorials #2 Installing VS Code & Live Server
यद्यपि यह ट्यूटोरियल वीएस कोड की व्यापक व्याख्या नहीं है, मैं चाहता हूं कि आप इसकी कुछ बुनियादी कार्यक्षमताएं जान सकें। जैसे ही आप संपादक में विस्मयादिबोधक चिह्न (!) दर्ज करते हैं, यह आपको एमेट संक्षिप्तिकरण का विकल्प देता है। जब आप उस पर क्लिक करते हैं, तो आपको मूल HTML प्रारूप का बॉयलरप्लेट नमूना मिलता है जिसे आप एक पेशेवर वेबसाइट बनाने के लिए आगे संपादित कर सकते हैं।
यदि आप पहली बार विजुअल स्टूडियो कोड का उपयोग कर रहे हैं, तो यह आपको थोड़ा जटिल लग सकता है। लेकिन जैसा कि आप इस पर अभ्यास कर रहे हैं, मेरा विश्वास करो, यह आपके काम को सरल और आसान बना देगा। इसके अलावा, यदि आप भविष्य में पायथन या किसी अन्य भाषा के कोड लिखने जा रहे हैं, तो वीएस कोड आईडीई निश्चित रूप से आपकी मदद करने वाला है। आपको वीएस कोड के बाएं पैनल पर पांच मुख्य बटन मिलेंगे। ये एक्सप्लोरर, सर्च, गिट, डीबगर और एक्सटेंशन्स हैं।
सबसे महत्वपूर्ण एक्सटेंशन में से एक जिसे मैं स्थापित करने की सलाह दूंगा वह है लाइव सर्वर। इसे इंस्टॉल करने के बाद, विजुअल स्टूडियो कोड को रिफ्रेश करें और राइट बॉटम में गो लाइव ऑप्शन पर क्लिक करें। इस एक्सटेंशन का उपयोग करके हमें जो लाभ मिलता है, वह यह है कि यह HTML कोड में आपके द्वारा लिखे गए वेब पेज में स्वचालित रूप से बदलाव करता है।
Free web designing Course Tutorials #2 Installing VS Code & Live Server
Visual Studio Code में दो तरह के सेटिंग्स ऑप्शन होते हैं। सेटिंग्स का पहला सेट उपयोगकर्ता सेटिंग्स है जो उपयोगकर्ता और पूरे वीएस कोड को प्रबंधित करने के लिए उपयोग किया जाता है। दूसरा सेट कार्यक्षेत्र सेटिंग्स है जो केवल विशेष कार्यक्षेत्र (खोले गए फ़ोल्डर) के लिए है जिसमें आप वर्तमान में काम कर रहे हैं। आप अपने काम को कुशल बनाने के लिए अपनी आवश्यकताओं के अनुसार कीबोर्ड शॉर्टकट भी बदल सकते हैं।
तो ये Visual Studio कोड के बारे में कुछ बुनियादी ज्ञान और युक्तियां हैं। मुझे उम्मीद है कि आप सभी अवधारणाओं को बहुत आसानी से समझ गए होंगे। सॉफ्टवेयर macOS और लिनक्स में समान काम करता है।
वर्णित / लिखे अनुसार कोड:-
<!-- This is doctype -->
<!DOCTYPE html>
<!-- Our HTML code starts here -->
<html lang="en">
<!-- Our Head tag starts here -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>This is title</title>
</head>
<!-- Our Body tag starts here -->
<body>
Yeh meri body ka content hai
</body>
</html>
