বিজনেস ওয়েবসাইট তৈরি করার বেশ কিছু ভিন্ন ভিন্ন উপায় আছে। এজন্য আপনি সাইট বিল্ডার বেছে নিতে পারেন অথবা আপনার ওয়েবসাইট তৈরি করার জন্য একজন ডিজাইনারকে নিয়োগ দিতে পারেন অথবা ওয়ার্ডপ্রেস এর মতো সিএমএস ব্যবহার করতে পারেন। যদিও এই অপশন গুলো ব্যবহার করার মধ্যে কোন ভুল নেই, কিন্তু আপনি যদি এমন একটি সিম্পল ওয়েবসাইট তৈরি করতে চান যা আপনার ব্যবসাটি কিসের সে সম্পর্কে তথ্য প্রদান করবে এবং আপনার সম্ভাব্য গ্রাহক এবং ক্লায়েন্টদেরকে আপনার সাথে যোগাযোগ করার একটি মাধ্যম হিসেবে কাজ করবে তাহলে এগুলো কিছুটা অতিরিক্ত।
যদি আপনার অনেক বেশি ফিচার দরকার না হয় এবং আপনি যদি নিয়মিতভাবে ব্লগিং অথবা অনলাইনে সেল করতে না চান তাহলে আপনার জন্য প্রয়োজন হবে একটি এইচটিএমএল রেস্পন্সিভ ওয়েবসাইট টেমপ্লেট। এখানে আমি আপনাকে সেট আপ করার ধাপগুলো দেখাবো যাতে আপনি খুব সহজে ও অল্প সময়ে এই ধরনের ওয়েবসাইট লাঞ্চ করতে পারেন।
কিভাবে এইচটিএমএল দিয়ে একটি রেস্পন্সিভ ওয়েবসাইট তৈরি করবেন
এইচটিএমএল রেস্পন্সিভ বিজনেস ওয়েবসাইট টেমপ্লেটের আসল সৌন্দর্য হচ্ছে এগুলো ব্যবহার করা খুব সহজ। এবং এই ধরনের ওয়েবসাইট আপনার হোস্টিং সার্ভারে আপলোড করার জন্য কোন স্পেশাল টেকনিক্যাল জ্ঞানের প্রয়োজন নেই। এবং এগুলো অন্যান্য ওয়েবসাইট বিল্ডার এবং সিএমএস এর তুলনায় মডিফাই করা খুব সহজ।
এই টিউটোরিয়ালে, আমি আপনাকে দেখাবো কিভাবে একটি এইচটিএমএল রেস্পন্সিভ ওয়েবসাইট টেমপ্লেট মডিফাই করে আপনার সার্ভারে আপলোড করবেন। এর ফলে আপনি খুব সহজেই রেস্পন্সিভ বিজনেস ওয়েবসাইট তৈরি করতে সক্ষম হবেন।
কাজ শুরু করার আগে যা জানা প্রয়োজন
রেস্পন্সিভ ওয়েবসাইট টেমপ্লেট মডিফিকেশন শুরু করার আগে বেশ কিছু জিনিস আছে যেগুলো আপনার প্রয়োজন হবে। এগুলো হচ্ছে একটি ডোমেইন নাম এবং হোস্টিং প্লান, একটি ফাইল ট্রান্সফার প্রোটোকল প্রোগ্রাম এবং কোড এডিটর, একটি এইচটিএমএল রেস্পন্সিভ বিজনেস ওয়েবসাইট টেমপ্লেট এবং পরিশেষে আপনার সাইটে যে সব কনটেন্ট ইমেজ ব্যবহার করা হবে তা। চলুন এগুলোর প্রত্যেকটি সম্পর্কে নিচে আরো বিস্তারিত আলোচনা করা যাক।
১। ডোমেইন নাম এবং হোস্টিং
প্রথমে আপনাকে যে কাজটি করতে হবে তা হচ্ছে একটি ডোমেইন নাম এবং হোস্টিং প্লান ক্রয় করা যাতে আপনার ওয়েবসাইটটি অনলাইনে খুঁজে পাওয়া যায়। বেশিরভাগ ক্ষেত্রেই, আপনি যখন কোন হোস্টিং প্রোভাইডার থেকে হোস্টিং প্লান এর জন্য সাইন আপ করবেন তখন সাথে একটি ফ্রী ডোমেইন নাম পাবেন। ডোমেইন নামের ক্ষেত্রে, আপনার মূল বিজনেস নাম ব্যবহার করাই সবচেয়ে ভালো।
সম্ভব হলে একটি .COM এক্সটেনশন নিতে চেষ্টা করুন। কারণ এটা সবচেয়ে বেশি জনপ্রিয়, কিন্তু সাথে সাথে এ কথাও মনে রাখবেন, আজকাল একটি জুতসই .COM ডোমেইন নাম খুঁজে পাওয়া আগের মতো অত সহজ নয়। এই ক্ষেত্রে, আপনি অন্যান্য এক্সটেনশন সমূহ যেমন .CO অথবা লোকাল ডোমেইন যেমন, .US ব্যবহার করতে পারেন।
হোস্টিং প্রোভাইডার এর ক্ষেত্রে আপনি এমন একটি হোস্টিং প্যাকেজ খুঁজে নিতে পারেন যা মাসিক ৫ ডলার থেকে শুরু হয়েছে। আপনি তাদের FAQs (প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী) পড়ে দেখতে পারেন যে, কিভাবে তারা কাস্টমার সার্ভিস প্রদান করে থাকেন এবং তাদের কি কি শর্ত আছে। এছাড়াও একটি নির্দিষ্ট হোস্টিং সম্পর্কে অন্যান্য থার্ড পার্টি ওয়েবসাইটে রিভিউ পড়ে দেখতে পারেন যে তাদের কাস্টমাররা এগুলো সম্পর্কে কি ধরনের মন্তব্য করেছে।
২। FTP ক্লায়েন্ট এবং কোড এডিটর
আমাদের লিস্টের পরবর্তী আইটেম হচ্ছে একটি FTP ক্লায়েন্ট যেমন, FileZilla এবং একটি কোড এডিটর যেমন, Sublime Text। একটি FTP ক্লায়েন্টের উদ্দেশ্য হচ্ছে আপনার কম্পিউটারকে হোস্টিং সার্ভারের সাথে সংযুক্ত করা এবং হোস্টের কন্ট্রোল প্যানেলের মাধ্যমে একটি একটি করে আপলোড না করে, আপনার ওয়েবসাইটের ফাইলগুলো সব একসাথে আপলোড করা। অপরদিকে, কোড এডিটর, আপনাকে টেম্পলেট ফাইলগুলো এডিট করতে ও কোডের যেই অংশগুলো এডিট করা প্রয়োজন তা সহজে খুঁজে পেতে সাহায্য করবে।
সাবলাইম টেক্সট এবং ফাইলযিলা দুটোই ফ্রি ডাউনলোড করা যায় এবং ম্যাক, উইণ্ডোজ, ও লিন্যাক্স বেইজড কম্পিউটারগুলোতে ব্যবহার করা যায়।
৩। আপনার নির্বাচিত এইচটিএমএল রেস্পন্সিভ ওয়েবসাইট টেমপ্লেট এবং ওয়েবসাইট কন্টেন্ট
অবশেষে, আপনার একটি HTML টেমপ্লেট এবং আপনি আপনার ওয়েবসাইটে যুক্ত করতে চান এমন কনটেন্ট বা বিষয়বস্তুর প্রয়োজন হবে। আপনি এনভেটো এলিমেণ্টের মত মার্কেটপ্লেসে প্রচুর পরিমানে রেস্পন্সিভ HTML টেম্পলেট খুঁজে পাবেন, যেগুলো বিশেষ করে বিজনেস ওয়েবসাইটের জন্যই তৈরি করা হয়েছে। আপনার পছন্দমত কোন একটি টেম্পলেট খুঁজে পাওয়া মাত্রই আপনি তা সহজেই ডাউনলোড করে নিতে পারেন, ফোল্ডারটি আনজিপ করে যে জায়গা থেকে আপনি সহজে এক্সেস করতে পারেন এমন কোনও জায়গাতে তা সংরক্ষন করতে পারেন।
কন্টেন্টের সাথে সাথে, আপনার পেইজের সাথে মানানসই লেখা তৈরি করুন যাতে আপনার কোম্পানি কি করে, কারা এতে কাজ করে, এবং কি ধরনের পন্য ও সার্ভিসের মাধ্যমে গ্রাহকদেরকে সহায়তা প্রদান করা হয়, সেসব বিষয় ব্যাখ্যা করুন। এছাড়াও, আপনি আপনার কোম্পানির মূল ব্যক্তিদের ব্যাপারে তথ্যসমূহ যুক্ত করতে পারেন। ইমেজ এবং লোগো এর মত ভিজুয়াল এলিমেন্ট যুক্ত করতে কিন্তু ভুলবেন না কিন্তু।
কিভাবে টেম্পলেটের কনটেন্ট বা বিষয়বস্তু কাস্টমাইজ করবেন
এবার টেম্পলেটের বিষয়বস্তু এডিট করা এবং ডামি তথ্যের পরিবর্তে আপনার নিজস্ব তথ্য যুক্ত করার পালা। এই টিউটোরিয়ালের জন্য, আমি Moose টেম্পলেটটি ব্যবহার করতে যাচ্ছি। এই রেস্পন্সিভ ওয়েবসাইট টেম্পলেটে একটি সাধারনত সমতল এবং রেস্পন্সিভ ডিজাইন আছে যা ব্যবসায়িক, ক্রিয়েটিভ এজেন্সি, ডিজিটাল স্টুডিও এবং অন্যান্য ওয়েবসাইটের উপযোগী।
১। কিভাবে রেস্পন্সিভ ওয়েবসাইট টেম্পলেটটি গঠন করা হয়েছে তা বুঝতে সক্ষম হওয়া
টেম্পলেট সম্পাদনা শুরু করার আগে, এর গঠন বোঝা গুরুত্বপূর্ণ, যাতে আপনি বুঝতে পারেন কোন ফাইলগুলো মডিফাই করা প্রয়োজন। নিচের স্ক্রিনশটে আপনি নিশ্চয়ই দেখতে পাচ্ছেন, আনজিপ করা ফোল্ডারে তিনটি সাবফোল্ডার আছে।
Template নামের সাবফোল্ডারে আমাদের রেস্পন্সিভ ওয়েবসাইট টেম্পলেট তৈরির জন্য দরকারী সবগুলো ফাইল এবং কিছু অতিরিক্ত সাবফোল্ডার আছে। আপনি যদি একটি ভিন্ন টেম্পলেট ব্যবহার করে, তাহলে হয়তোবা এই সবগুলো ফাইল এবং সাবফোল্ডার নাও পেতে পারেন। কিন্তু সাধারণত আপনি যেসব ফাইল খুঁজে পাবেন, তা হচ্ছে:
- একটি ইমেজ ফোল্ডার যাতে টেম্পলেটে ব্যবহৃত সব ডেমো ইমেজগুলো থাকবে।
- টেম্পলেটটি সঠিকভাবে কাজ করার জন্য প্রয়োজনীয় সমস্ত জাভাস্ক্রিপ্ট কোড সহ JS বা জাভাস্ক্রিপ্ট ফোল্ডার। সাধারনভাবে, আপনাকে এই ফোল্ডারের কোনও কিছুই এডিট করতে হবে না। কারন এই জাভাস্ক্রিপ্টগুলো অতিরিক্ত ফাংশনালিটি যেমন অ্যানিমেশন এবং ফরম ভেলিডেশনের জন্য ব্যবহার করা হয়েছে।
- সিএসএস বা স্টাইলস ফোল্ডারে সিএসএস ফাইল রয়েছে যা ফন্ট, রং এবং অন্যান্য ভিজ্যুয়াল স্টাইলসমূহ কাস্টমাইজ করতে আপনাকে সম্পাদনা করতে হবে।
- আপনার ওয়েবসাইটের ভিন্ন ভিন্ন পেইজসমূহের জন্য ভিন্ন ভিন্ন ফাইল যেমন, index.html, about.html, contact.html, এবং অন্যান্য ফাইলসমূহ।
২। ডামি কনটেন্ট পরিবর্তন করা
Index.html ফাইলে ডাবল ক্লিক করুন অথবা রাইট ক্লিক করে Open in Chrome সিলেক্ট করুন (অথবা আপনি যে ব্রাউজার ব্যবহার করেন তা)। যখন আপনি টেম্পলেটটি আপনার ব্রাউজারে খুলবেন, তখন দেখতে পাবেন এতে একটি স্লাইডার আছে যেখানে আপনাকে এর পরিবর্তে ইমেজ এবং ক্যাপশন, একটি সার্ভিস সেকশন যাতে আপনার নিজস্ব তথ্যাদি এবং অন্যান্য বিষয় যুক্ত করতে হবে।
এই তথ্যগুলো কোন জায়গা থেকে এডিট করতে হবে তা খুঁজে বের করার সহজ উপায় হচ্ছে নির্দিষ্ট লেখার উপর রাইট-ক্লিক করে তারপর কন্ট্যাক্সট মেনু থেকে Inspect লিঙ্কের উপর ক্লিক করা।
ইন্সপেক্টর উইন্ডো ভেসে উঠার পর, আপনার এইচটিএমএল রেস্পন্সিভ ওয়েবসাইট টেম্পলেটে যেই এইচটিএমএল ব্যবহার করা হয়েছে তা উইন্ডোর বাম পাশে দেখতে পাবেন এবং টেমপ্লেট এর ভিজুয়াল স্টাইলের জন্য যেই সিএসএস কোড ব্যবহার করা হয়েছে তা ইন্সপেক্টর উইন্ডোর ডান পাশে দেখতে পাবেন।
এইচটিএমএল কোড এর দিকে দেখুন এবং এখানে আপনি দেখতে পাবেন যে, সিলেক্ট করার টেক্সটের কোড লাইনটি হাইলাইট করা আছে। স্ক্রিনশটের উদাহরণে, আমি যেই হেডার টি ইনস্পেক্ট করছি তা ইন্সপেক্টর উইন্ডোতে <h3> ট্যাগদ্বয়ের মাঝে দেখাচ্ছে, যা হচ্ছে একটি এইচটিএমএল ট্যাগ। এইচটিএমএল ট্যাগগুলিতে একটি শুরুর এবং শেষের ট্যাগ থাকে এবং এবং দুটি ট্যাগের এক জোড়া ট্যাগ সংশ্লিষ্ট এইচটিএমএল এলিমেন্টটিকে ধারণ করে। যেমন, <h1> ট্যাগকে হেডিং ট্যাগ বলা হয় যা প্রথম লেভেলের হেডিং বা শিরোনাম ধারন করে। একইভাবে, <p> ট্যাগসমূহ প্যারাগ্রাফ এইচটিএমএল এলিমেন্টসমূহকে ধারণ করে।
টেমপ্লেটটি সংশোধন করতে, আপনি যে টেক্সটটি সম্পাদনা করতে চান তা কোন ট্যাগকে ধারণ করে তা আপনাকে জানতে হবে এবং কোড এডিটর থেকে তা খুঁজে বের করতে হবে। তারপর, আপনি এই টেক্সটগুলো আপনার নিজস্ব লেখা দ্বারা বদলে দিতে পারেন।
এখন আপনি নিশ্চয়ই জানেন কোন ট্যাগগুলো আমাদের এডিট করা প্রয়োজন, এবার সাবলাইম টেক্সট এর মত কোনও কোড এডিটরে index.html ফাইলটি খুলতে হবে। ফাইল এর উপর রাইট ক্লিক করুন এবং Open with Sublime Text ( অথবা অন্য কোন কোড এডিটরে) এ ক্লিক করুন।
তারপর, <span> ট্যাগদ্বয়ের মাঝে ক্লিক করুন, টেক্সটটি মুছে ফেলুন, এবং একটি সংক্ষিপ্ত ট্যাগলাইন অথবা বিস্তারিত টেক্সট প্রবেশ করান। এছাড়াও আপনি রেস্পন্সিভ ওয়েবসাইট টেমপ্লেটের যেসব অংশ দরকার নেই তা মুছে ফেলতে পারেন। যদি আপনি নিচের স্ক্রীনশটের দিকে তাকান, তাহলে দেখতে পাবেন যে, আমি হেডার থেকে টেক্সট বদলে দিয়েছি এবং সার্ভিসের নিচের সারি মুছে দিয়েছি।
হোমপেজ এর বাকি অংশ এবং ট্যাম্পলেটের অন্যান্য পেজ এডিট করতে আপনাকে একই প্রক্রিয়াটি বার বার অনুসরণ করতে হবে।
এখন, কিভাবে ডামি ইমেজ সহজেই প্রতিস্থাপন করতে হবে তা ব্যাখ্যা করা যাক। প্রথমে, আপনার সমস্ত ইমেজগুলো এইচটিএমএল রেস্পন্সিভ ওয়েবসাইট টেমপ্লেটের ইমেজ ফোল্ডারে রাখতে হবে। তারপর ব্রাউজারে ফিরে যান এবং পেইজের যে অংশে ইমেজ আছে তা ইনস্পেক্ট করুন।
ইন্সপেক্টর আপনাকে ইমেজ এর নাম এবং কোন ট্যাগের অধীনে ইমেজটি আছে তা বলে দিবে। এখন আপনি কোড এডিটরে যান এবং কোডের এই অংশটি খুঁজে বের করুন। তারপর ইমেজ এর নামটি আপনার নিজস্ব ইমেজ নাম দিয়ে বদলে দিন এবং পরিবর্তনটি সংরক্ষণ করুন।
কিভাবে একটি রেস্পন্সিভ ওয়েবসাইট টেম্পলেট স্টাইল করবেন
আপনার নিজস্ব কনটেন্ট প্রবেশ করানোর পর এবার কিভাবে টেমপ্লেটে স্টাইল করবেন তা নিয়ে আলোচনা করা যাক। আমার ক্ষেত্রে, Moose টেমপ্লেটে বেশকিছু প্রাক-নির্মিত রঙের স্কিম অন্তর্ভুক্ত করা হয়েছে যা style > CSS > color সাব-ফোল্ডারে আছে। তার মানে হচ্ছে আমি খুব সহজেই ডকুমেন্টের হেডার থেকে পছন্দমত রঙের স্টাইলশিট পরিবর্তন করার মাধ্যমে রং পরিবর্তন করতে পারি।
