আপনার প্রথম ওয়েবসাইট তৈরি করা: 10 টি ধাপ

2025 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2025-01-23 14:36

এই টিউটোরিয়ালে আপনি একটি মৌলিক ওয়েব পেজ তৈরি করতে শিখবেন যার একটি লিঙ্কযুক্ত স্টাইল শীট এবং ইন্টারেক্টিভ জাভাস্ক্রিপ্ট ফাইল রয়েছে।

ধাপ 1: আপনার ফোল্ডার তৈরি করা

আমরা যে ফাইলগুলি সংরক্ষণ করব সেগুলির জন্য একটি ফোল্ডার তৈরি করুন। নির্দ্বিধায় নাম বলুন তবে আপনি দয়া করে মনে রাখবেন এটি কোথায় অবস্থিত কারণ আমরা পরে এটিতে ফাইল সংরক্ষণ করব।

ধাপ 2: আপনার প্রথম ফাইল তৈরি করা

আপনার প্রিয় টেক্সট এডিটর খুলুন। আমার ক্ষেত্রে আমি কেবল উইন্ডোজ ১০ এর অন্তর্নির্মিত নোটপ্যাড ব্যবহার করব।

এটি আমার প্রথম ওয়েব পেজ, একটি নির্দেশের মাধ্যমে আপনার কাছে আনা হয়েছে

এটিই একটি HTML ট্যাগ নামে পরিচিত। এটি শিরোনাম 1 এর জন্য দাঁড়িয়েছে। এটি এভাবে খোলা এবং বন্ধ করা হয়। দুটি ট্যাগের মধ্যে লেখাটি আপনার ওয়েব ব্রাউজারে প্রদর্শিত হবে। যে অংশটি বলছে সেই ট্যাগটিকে একটি বৈশিষ্ট্য দিচ্ছে যা আমরা ধাপ x এ উল্লেখ করব। একবার এটি হয়ে গেলে এগিয়ে যান এবং ফোল্ডারে ফাইলটি সংরক্ষণ করুন যা আমরা ধাপ 1 এ তৈরি করেছি index.html হিসাবে।

ধাপ 3: ফাইলটি খুলুন

এখন যেহেতু আমরা আমাদের তৈরি করা ফোল্ডারের মধ্যে ফাইলটিতে নেভিগেট সম্পন্ন করেছি, ফাইলটিতে ডান ক্লিক করুন এবং "ওপেন উইথ" বিকল্পটি নির্বাচন করুন এবং আপনি যে ওয়েব ব্রাউজারটি ব্যবহার করেন তা নির্বাচন করুন। আমার ক্ষেত্রে এটি গুগল ক্রোম। এখন পর্যন্ত আপনার পরিশ্রমের পরিশ্রম দেখুন!

ধাপ 4: আপনার পৃষ্ঠা স্টাইলিং

যেমন, আমাদের ওয়েবসাইট বেশ সাদামাটা। আমরা একটি ক্যাসকেডিং স্টাইল শীট হিসাবে পরিচিত যা কিছু যোগ করতে যাচ্ছি। একটি নতুন টেক্সট ফাইল তৈরি করুন এবং নিম্নলিখিত টাইপ করুন:

h1 {রঙ: নীল; পাঠ্য-সারিবদ্ধকরণ: কেন্দ্র;}

আমরা এখানে ব্রাউজারকে যা বলছি তা হল h1 ট্যাগের কোন উপাদান খুঁজে বের করা (যা আমরা ধাপ 2 এ শিখেছি) এবং এটিকে নীল রঙ দিন এবং পৃষ্ঠার কেন্দ্রে সারিবদ্ধ করুন। ধাপ 1 এ তৈরি করা ফোল্ডারে এই ফাইলটি style.css হিসেবে সংরক্ষণ করুন।

ধাপ 5: Style.css কে আপনার Index.html এর সাথে লিঙ্ক করুন

এই মুহুর্তে আমাদের কাছে দুটি পৃথক ফাইল রয়েছে যা একে অপরের সম্পর্কে জানে না। আমাদের আমাদের index.html ফাইলকে বলতে হবে যে আমাদের একটি style.css ফাইল আছে যা আমরা চাই এবং এটি থেকে কিছু স্টাইলিং দখল করি। এটি করার জন্য আমরা আমাদের index.html ফাইলটি আমাদের টেক্সট এডিটরে খুলতে যাচ্ছি, এবং আমাদের h1 ট্যাগের উপরে আমরা লিঙ্ক ট্যাগ হিসাবে পরিচিত যা যুক্ত করতে যাচ্ছি। লিংক ট্যাগটি যেমন তার নাম অনুসারে বোঝায়, এটি কোনও কিছুর সাথে লিঙ্ক করে। আমাদের ক্ষেত্রে একটি স্টাইলশীট। এগিয়ে যান এবং টাইপ করুন। লিঙ্ক ট্যাগ একটি স্ব -বন্ধ ট্যাগ তাই একটি শেষ ট্যাগ প্রয়োজন হয় না। Rel মানে রিলেশন এবং href সূচক ফাইলকে বলছে যেখানে আমাদের বাহ্যিক ফাইলটি আমরা উল্লেখ করছি। এখন সেই index.html ফাইলটি সেভ করুন।

ধাপ 6: আপনার নতুন স্টাইল করা পৃষ্ঠা দেখুন।

ধাপ 3 পুনরায় দেখুন এবং আপনার ওয়েব পৃষ্ঠাটি পুনরায় লোড করুন এবং পরিবর্তনগুলি কীভাবে প্রতিফলিত হয় তা একবার দেখুন।

ধাপ 7: একটি বোতাম তৈরি করা

আপনার index.html ফাইলটি আপনার টেক্সট এডিটরে পুনরায় খুলুন এবং নিম্নলিখিতটি টাইপ করুন:

আমাকে ক্লিক করুন!

এবং ফাইলটি সংরক্ষণ করুন। এটি পৃষ্ঠায় একটি বোতাম উপাদান তৈরি করে। একবার সংরক্ষণ করা হলে, ধাপ 3 এ দেখানো ফাইলটি আবার খুলুন এবং নিশ্চিত করুন যে বোতামটি আপনার পৃষ্ঠার নীচে বাম দিকে রয়েছে।

ধাপ 8: আপনার জাভাস্ক্রিপ্ট ফাইল তৈরি করুন

সবশেষে আমরা আমাদের জাভাস্ক্রিপ্ট ফাইল তৈরি করতে যাচ্ছি। এটিই আমাদের সাইটকে ইন্টারেক্টিভ করে তুলবে। একটি পাঠ্য সম্পাদক খুলুন এবং নিম্নলিখিত টাইপ করুন:

document.querySelector ("#button")। addEventListener ("click", function () {

document.querySelector ("#হেডিং")।

})

আমরা যা করছি তা হল ডকুমেন্টকে বাটনের আইডি সহ একটি উপাদান খুঁজে পেতে বলছি, এবং আমরা বোতামটি একটি ক্লিক ইভেন্টের প্রতিক্রিয়া জানাতে যাচ্ছি একটি এলিমেন্টের টেক্সটকে আইডি দিয়ে শিরোনামের আইডি দিয়ে "ফ্লাইতে হেডিং পরিবর্তন করা" "। আমরা ধাপ 1 এ তৈরি করা ফোল্ডারে button.js হিসাবে ফাইলটি সংরক্ষণ করুন।

ধাপ 9: আপনার জাভাস্ক্রিপ্ট এবং সূচক ফাইল লিঙ্ক করুন

আমরা যেমন style.css ফাইলের সাথে করেছি, আমাদের আমাদের index.html ফাইলকে আমাদের জাভাস্ক্রিপ্ট ফাইল সম্পর্কে বলতে হবে। আমরা এখন পর্যন্ত যা কিছু করেছি তার নীচে নীচে টাইপ করুন:

স্ক্রিপ্ট ট্যাগ আমাদের পৃষ্ঠায় কার্যকারিতা প্রদানের জন্য একটি স্ক্রিপ্টিং ভাষা (আমাদের ক্ষেত্রে, জাভাস্ক্রিপ্ট) যোগ করার অনুমতি দেয়। আমরা এটাকে বলছি button.js নামে একটি ফাইল খুঁজতে এবং এর মধ্যে থাকা সমস্ত কোড আমাদের ইনডেক্স ফাইলে যুক্ত করতে। একবার আপনি এটি টাইপ করার পরে, ফাইলটি সংরক্ষণ করুন এবং 3 য় ধাপে দেখানো ফাইলটি আবার খুলুন।

ধাপ 10: নতুন তৈরি বোতামটি পরীক্ষা করুন

এখন এগিয়ে যান এবং বোতামটি ক্লিক করুন এবং শিরোনাম পরিবর্তন দেখুন!

অভিনন্দন !! আপনি এখন আপনার প্রথম ইন্টারেক্টিভ ওয়েব পেজ তৈরি করেছেন! আমি অবাক হচ্ছি যে আপনি এখন যা জানেন তা জেনে আপনি এটিকে কতটা এগিয়ে নিতে পারেন ??