সুচিপত্র:
- সরবরাহ
- ধাপ 1: একটি পাঠ্য সম্পাদক নির্বাচন করুন
- ধাপ 2: আপনার নতুন প্রকল্প তৈরি করুন
- ধাপ 3: আপনার Index.html তৈরি করুন
- ধাপ 4: আপনার মানচিত্র পান
- ধাপ 5: ওয়েবসাইটে যোগ করুন
- কফি শপ আপনার কাছাকাছি
- ধাপ 6: প্রিভিউ
- ধাপ 7: এটি আরও ভাল করে দেখুন
- ধাপ 8: এটিকে আরও ভাল করে দেখা Pt2
- ধাপ 9: পুনর্বিবেচনা
ভিডিও: একটি কফি শপ লোকেটিং ওয়েবসাইট তৈরি করুন: 9 টি ধাপ
2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-02-01 14:39
এই নির্দেশনায় আমি আপনাকে দেখাব কিভাবে গুগল ম্যাপ, এইচটিএমএল এবং সিএসএস ব্যবহার করে আপনার কাছাকাছি কফি শপ প্রদর্শন করে একটি সাধারণ ওয়েবসাইট তৈরি করতে হয়।
সরবরাহ
একটি কম্পিউটার
একটি টেক্সট এডিটর (আমি Atom ব্যবহার করি)
একটি ওয়াইফাই সংযোগ
ধাপ 1: একটি পাঠ্য সম্পাদক নির্বাচন করুন
আমি Atom ব্যবহার করি, যা এখানে ডাউনলোড করা যাবে। একবার এটি ডাউনলোড হয়ে গেলে এটি একটি নতুন প্রকল্প তৈরি করে
ধাপ 2: আপনার নতুন প্রকল্প তৈরি করুন
- পরমাণু খুলুন
- ফাইল টি খুজো
- ফাইলের নিচে নতুন ক্লিক করুন
- নীচের বাম দিকে (ম্যাক) একটি নতুন ফোল্ডার তৈরির জন্য একটি বোতাম থাকবে
- আপনার ফোল্ডারের নাম 'ম্যাপ ওয়েবসাইট'
- নীচের ডানদিকে খোলা টিপুন
ধাপ 3: আপনার Index.html তৈরি করুন
- আপনার ফোল্ডারে একটি নতুন ফাইল যুক্ত করুন (পরমাণুতে ফোল্ডারে ডান ক্লিক করুন এবং নতুন টিপুন)
- এই ফাইলের নাম দিন 'Index.html'
- এই মৌলিক এইচটিএমএল কাঠামো যোগ করুন, এটি প্রতিটি এইচটিএমএল প্রকল্পে ব্যবহৃত হয়:
ধাপ 4: আপনার মানচিত্র পান
- এখানে গুগল ম্যাপ দেখুন: গুগল ম্যাপ
- কফির জন্য অনুসন্ধান করুন
- আপনার সাধারণ এলাকায় সমস্ত কফির দোকান পাওয়া উচিত
- কফির পাশে তিনটি লাইন ক্লিক করুন
- শেয়ার বা এম্বেড করা মানচিত্র খুঁজুন
- এম্বেড করা মানচিত্র নির্বাচন করুন
- মানচিত্রের আকার নির্বাচন করুন (আমি বড় ব্যবহার করেছি) এবং আপনার অবস্থান চূড়ান্ত করুন
- প্রেস কপি এইচটিএমএল
ধাপ 5: ওয়েবসাইটে যোগ করুন
- HTML ফাইলে ফিরে যান।
- দুই '' ট্যাগের মধ্যে এই কোডটি সন্নিবেশ করান:
'
কফি শপ আপনার কাছাকাছি
'Google মানচিত্র থেকে এম্বেড কোড'
'
ধাপ 6: প্রিভিউ
এটা প্রথম ভাগ সম্পন্ন!
ফাইলটি সংরক্ষণ করুন এবং এটি আপনার কম্পিউটারে খুঁজুন, এটিতে ডাবল ক্লিক করুন এবং এটি আপনার ডিফল্ট ব্রাউজারে পূর্বরূপ দেখতে খুলবে।
ধাপ 7: এটি আরও ভাল করে দেখুন
- দুটি ট্যাগের মধ্যে 'আমার কাছাকাছি কফি শপ' যোগ করুন
- আপনি যেভাবে 'Index.html' তৈরি করেছেন সেভাবেই একটি নতুন ফাইল যুক্ত করুন কিন্তু এর নাম দিন 'Style.css'
- আপনার HTML ফাইলে ফিরে, আপনার শিরোনামের উপরে এই কোডটি লিখুন,"
- গুগল চিত্রগুলিতে যান এবং এক কাপ কফির একটি সুন্দর ক্লিপআর্ট ডাউনলোড করুন
- আমাদের বাকি ফাইল সম্বলিত ফোল্ডারে ইমেজ যোগ করুন
- CSS ফাইলে, নিম্নলিখিত কোডটি লিখুন: 'body {
- ব্যাকগ্রাউন্ড-ইমেজ: url (ছবির নাম);
- পটভূমি আকার: কভার;
- }'
ধাপ 8: এটিকে আরও ভাল করে দেখা Pt2
- যদি আমরা এখন সংরক্ষণ করি এবং পূর্বরূপ দেখি, আমরা দেখতে পাচ্ছি যে ওয়েবসাইটের পটভূমি এখন আমাদের কফির কাপ দিয়ে টাইল করা হয়েছে
- দুlyখজনকভাবে আমাদের শিরোনাম পড়তে কষ্ট হচ্ছে
- সুতরাং CSS- এ, 'body {}' -এর নীচের কোডটি যোগ করুন: h1 {
- ব্যাকগ্রাউন্ড-কালার = rgb (255, 255, 255);
- ফন্ট-সাইজ = 40px;
- }
ধাপ 9: পুনর্বিবেচনা
এটাই! তুমি করেছ. আপনি এইচটিএমএল, সিএসএস এবং এমবেডেড কোডের বেসিক শিখেছেন, ভাল হয়েছে। আপনি আপনার স্বাদ অনুসারে কোডটি সম্পাদনা করতে পারেন এবং এটি আপনার পছন্দসই কিছু মানচিত্র প্রদর্শন করতে পারেন। তারপর থেকে আপনি আপনার ওয়েবসাইট নির্মাণ যাত্রা এবং চিরকাল উন্নতি চালিয়ে যেতে পারেন।
প্রস্তাবিত:
কিভাবে একটি ওয়েবসাইট তৈরি করবেন (একটি ধাপে ধাপে নির্দেশিকা): 4 টি ধাপ
কিভাবে একটি ওয়েবসাইট তৈরি করবেন আমি কিছু ভুল এড়াতে সাহায্য করেছি যা আমি শুরু করার সময় করেছি
কিভাবে একটি রাস্পবেরি পাই, Node.js, Express, এবং MongoDB সহ একটি ওয়েবসাইট তৈরি করতে হয় পর্ব 1: 6 ধাপ
কিভাবে একটি রাস্পবেরি পাই, Node.js, Express, এবং MongoDB এর মাধ্যমে একটি ওয়েবসাইট তৈরি করা যায় … পর্ব 1: আমার node.js ওয়েব অ্যাপ টিউটোরিয়ালের PART 1 এ স্বাগতম। পার্ট 1 node.js অ্যাপ ডেভেলপমেন্টের জন্য ব্যবহৃত প্রয়োজনীয় সফ্টওয়্যার, কিভাবে পোর্ট ফরওয়ার্ডিং ব্যবহার করতে হয়, কিভাবে এক্সপ্রেস ব্যবহার করে একটি অ্যাপ তৈরি করতে হয়, এবং কিভাবে আপনার অ্যাপটি চালাতে হয় তার মাধ্যমে যেতে যাচ্ছে। এর দ্বিতীয় অংশ
একটি 100% ফ্ল্যাশ ওয়েবসাইট তৈরি করুন !: 10 টি ধাপ
একটি 100% ফ্ল্যাশ ওয়েবসাইট তৈরি করুন !: এই টিউটোরিয়ালটি আপনাকে 100% ফ্ল্যাশ ওয়েবসাইট তৈরি করতে সাহায্য করবে। আমি এটি প্রকাশ করছি কারণ, আমি এখানে এই বিষয়ের টিউটোরিয়াল খুঁজে পাচ্ছি না। আমি কেবল " বিল্ডিং ফ্ল্যাশ ওয়েবসাইট টেমপ্লেট " এখানে প্রকাশিত, এটি একটি ভিন্ন বিষয় যা আমি অনুমান করি;)। এই আমি
বছরে 20 ডলারের মতো একটি ওয়েবসাইট তৈরি করুন !: 8 টি ধাপ
বছরে 20 ডলারের মতো একটি ওয়েবসাইট তৈরি করুন! আপনি যদি আমার কিছু কাজ দেখতে চান, তাহলে যান: webshawty.com একটি দম্পতি জিনিস যা আপনি চাইবেন: -ইন্টারনেট অ্যাক্সেস-একটি নতুন কম্প
একটি খুব ছোট রোবট তৈরি করুন: বিশ্বের সবচেয়ে ছোট চাকাযুক্ত রোবটটি একটি গ্রিপার দিয়ে তৈরি করুন।: 9 টি ধাপ (ছবি সহ)
একটি খুব ছোট রোবট তৈরি করুন: একটি গ্রিপার দিয়ে বিশ্বের সবচেয়ে ছোট চাকাযুক্ত রোবটটি তৈরি করুন: একটি গ্রিপার দিয়ে একটি 1/20 কিউবিক ইঞ্চি রোবট তৈরি করুন যা ছোট বস্তু তুলতে এবং সরাতে পারে। এটি একটি Picaxe মাইক্রোকন্ট্রোলার দ্বারা নিয়ন্ত্রিত হয়। এই মুহুর্তে, আমি বিশ্বাস করি এটি হতে পারে পৃথিবীর সবচেয়ে ছোট চাকাযুক্ত রোবট যার মধ্যে একটি গ্রিপার রয়েছে। এতে কোন সন্দেহ নেই ch