एक कॉफी शॉप बनाने की वेबसाइट खोजें: 9 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-02-01 14:40

इस निर्देशयोग्य में मैं आपको दिखाऊंगा कि Google मानचित्र, HTML और CSS का उपयोग करके अपने आस-पास की कॉफी की दुकानों को प्रदर्शित करने वाली एक साधारण वेबसाइट कैसे बनाई जाती है

आपूर्ति

एक कंप्यूटर

एक टेक्स्ट एडिटर (मैं एटम का उपयोग करता हूं)

एक वाईफाई कनेक्शन

चरण 1: एक टेक्स्ट एडिटर चुनें

मैं एटम का उपयोग करता हूं, जिसे यहां से डाउनलोड किया जा सकता है। एक बार इसके डाउनलोड होने के बाद यह एक नया प्रोजेक्ट बनाता है

चरण 2: अपना नया प्रोजेक्ट बनाएं

1. खुला परमाणु
2. फ़ाइल ढूंढे
3. फ़ाइल के अंतर्गत नया क्लिक करें
4. नीचे बाईं ओर (मैक) एक नया फ़ोल्डर बनाने के लिए एक बटन होगा
5. अपने फोल्डर को नाम दें ''मैप वेबसाइट''
6. नीचे दाईं ओर खुला दबाएं

चरण 3: अपना इंडेक्स बनाएं.html

1. अपने फ़ोल्डर में एक नई फ़ाइल जोड़ें (परमाणु में फ़ोल्डर पर राइट-क्लिक करें और नया दबाएं)
2. इस फ़ाइल को 'Index.html' नाम दें
3. इस मूल HTML संरचना को जोड़ें, इसका उपयोग प्रत्येक HTML प्रोजेक्ट में किया जाता है:

चरण 4: अपना नक्शा प्राप्त करें

1. यहां गूगल मैप्स पर जाएं: गूगल मैप्स
2. कॉफी के लिए खोजें
3. आपको अपने सामान्य क्षेत्र में सभी कॉफी की दुकानें मिलनी चाहिए
4. कॉफी के आगे तीन पंक्तियों पर क्लिक करें
5. साझा करें या मानचित्र एम्बेड करें
6. एम्बेड नक्शा चुनें
7. मानचित्र का आकार चुनें (मैंने बड़े का उपयोग किया) और अपने स्थान को अंतिम रूप दें
8. प्रेस कॉपी एचटीएमएल

चरण 5: वेबसाइट में जोड़ें

1. HTML फ़ाइल पर वापस जाएं।
2. दो '' टैग के बीच यह कोड डालें:

'

आपके आस-पास कॉफी की दुकानें

'गूगल मैप्स से एम्बेड किया गया कोड'

'

चरण 6: पूर्वावलोकन

वह हिस्सा एक हो गया!

फ़ाइल को सहेजें और इसे अपने कंप्यूटर पर ढूंढें, इसे डबल क्लिक करें और यह पूर्वावलोकन के लिए आपके डिफ़ॉल्ट ब्राउज़र में खुल जाएगा।

चरण 7: इसे बेहतर बनाएं

1. दो '' टैग के बीच 'मेरे पास कॉफी की दुकानें' जोड़ें
2. एक नई फ़ाइल को उसी तरह जोड़ें जैसे आपने 'Index.html' बनाया था, लेकिन इसे 'Style.css' नाम दें।
3. अपनी HTML फ़ाइल पर वापस, इस कोड को अपने शीर्षक के ऊपर लिखें,"
4. Google छवियों पर जाएं और एक कप कॉफी का प्यारा क्लिपआर्ट डाउनलोड करें
5. हमारी बाकी फाइलों वाले फोल्डर में इमेज जोड़ें
6. CSS फ़ाइल में, निम्नलिखित कोड लिखें: 'body{
7. पृष्ठभूमि-छवि: यूआरएल (छवि का नाम);
8. पृष्ठभूमि-आकार: कवर;
9. }'

चरण 8: इसे बेहतर बनाना Pt2

1. अगर हम अभी सहेजते हैं और पूर्वावलोकन करते हैं, तो हम देख सकते हैं कि वेबसाइटों की पृष्ठभूमि अब हमारे कॉफी कप के साथ टाइल की गई है
2. दुख की बात है कि हमारे शीर्षक को पढ़ना मुश्किल है
3. तो सीएसएस में, 'बॉडी {}' के नीचे निम्नलिखित कोड जोड़ें: h1{
4. पृष्ठभूमि-रंग = आरजीबी (255, 255, 255);
5. फ़ॉन्ट-आकार = 40px;
6. }

चरण 9: संशोधन

इतना ही! हो गया। आपने HTML, CSS और एम्बेडेड कोड की मूल बातें सीख ली हैं, बहुत अच्छा। आप इसे अपने स्वाद के अनुकूल बनाने के लिए कोड को संपादित कर सकते हैं और इसे अपनी इच्छानुसार किसी भी चीज़ का मानचित्र प्रदर्शित कर सकते हैं। तब से आप अपनी वेबसाइट निर्माण यात्रा जारी रख सकते हैं और हमेशा के लिए सुधार कर सकते हैं।