Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Templates
Business

কিভাবে দ্রুত একটি এক পাতার ওয়েবসাইট তৈরি করবেনঃ একটি রেস্পন্সিভ টেমপ্লেট হতে

by
Length:MediumLanguages:

Bengali (বাংলা) translation by Nazmul Shuvo (you can also view the original English article)

আপনার ওয়েবসাইট সচল করা যে খুব জটিল হবে তা নয়। আসলে, আপনি নিজেই সাধারণ কিন্তু কার্জকর বিজনেস সাইট তৈরি করতে পারবেন এক পাতার ওয়েবসাইট টেমপ্লেটের সাহায্য নিয়ে। এক পাতার টেমপ্লেটের ব্যবহার আপনার ব্যবসাকে দিতে পারে অতি-প্রয়োজনীয় অনলাইন উপস্থিতি এবং আপনার দেওয়া বর্তমান সব সেবা এবং প্রোডাক্টের তথ্য।

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

এই টিউটোরিয়ালে, আমরা এক পাতার ওয়েবসাইটের HTML টেমপ্লেট দিয়ে ওয়েবসাইট সেটিংস করার ধাপগুলো অতিক্রম করব। প্রয়োজনীয় টুলস যা আপনার দরকার হবে, টেমপ্লেট কাস্টমাইজের জন্য টেকনিক্যাল ডিটেইলস, এবং কিভাবে আপনার সার্ভারে আপলোড করবেন এ সবকিছু আমরা কভার করবো। কিভাবে এক পাতার ওয়েবসাইট আরো বেশি কার্যকর হয় সেই বিষয়ে আমরা কিছু গুরুত্বপূর্ণ পরামর্শও দিবো। চলুন শুরু করা যাক!

শুরুর পুর্বে

এক পাতার ওয়েবসাইট তৈরির পুর্বে, কিছু জিনিস আপনার প্রয়োজন হবে। চলুন নিচে দেখে নেই।

১। ডোমেইন এর নাম

সবচাইতে সুস্পষ্ট পছন্দ হবে ডোমেইনের জন্য আপনার ব্যবসায়ের নামের ব্যবহার। ঘটনাক্রমে নাম নেয়া হয়ে গেলে, আপনি শব্দ যোগ করে চেষ্ঠা করতে পারেন যেমন কোম্পানি, এজেন্সি, অথবা স্টুডিও এবং তারপরে ডোমেইন নেমটি কিনতে পারেন। 

ব্যবহার করতে সুপারিশ করা হচ্ছে একটি .com এক্সটেনশান যা প্রাচীনতম এবং সবচাইতে বিশ্বাসযোগ্য এক্সটেনশান। যাই হোক, যদি আপনি .com দিয়ে একটি উপযুক্ত নাম খুজে না পান, একটি .net এক্সটেনশান ব্যবহারের জন্য বিবেচনা করার যোগ্য।

২। হোস্টিং কোম্পানি

প্রথমে একটি ভালো হোস্টিং কোম্পানি খুজে বের করা অসম্ভব মনে হতে পারে। সাধারনভাবে, আপনি একটি হোস্ট খুজবেন যার রিভিও তৃতীয় পক্ষের নিরপেক্ষ ওয়েবসাইটগুলোতে বেশ ভালো আছে। মনোযোগ দিন লোকজন তাদের আপটাইম, কাস্টমার সাপোর্ট এবং সহজবোধ্যতা নিয়ে কি বলছে। 

৩। HTML টেমপ্লেট

পরবর্তী স্টেপ আপনার ওয়েবসাইটের জন্য একটি টেমপ্লেট খুজে বের করা। খোজা শুরু করার জন্য থিমফরেস্ট মার্কেটপ্লেস একটি ভালো জায়গা। আপনি শত শত প্রফেশনাল এক পাতার ওয়েবসাইট টেমপ্লেটগুলো থেকে পছন্দ করতে পারেন যা বিভিন্নভাবে সাজানো, অথবা আমাদের কিছু সর্বোত্তম সংকলিত নির্বাচন ব্রাউজ করতে দেখতে পারেনঃ 

৪। কোড এডিটর এবং FTP ক্লায়েন্ট

তথ্য প্রতিস্থাপনের জন্য যখন আপনার টেমপ্লেট নিজে নিজে এডিট করার প্রয়োজন হবে, আপনার একটি কোড এডিটরের প্রয়োজন হবে। এটি কোড সিনট্যাক্স হাইলাইট করবে এবং কোডের কোন অংশটি মডিফাই করা প্রয়োজন তা খুজে পেতে সহজ করবে।

এই টিউটোরিয়ালের জন্য, আমি Sublime Text ব্যবহার করবো যা ম্যাক, উইন্ডোজ, এবং লিনাক্স এ ব্যবহার করা যাবে এবং পাওয়া যাবে একটি ফ্রি ট্রায়াল ভার্সনে।

আপনার আরো প্রয়োজন হবে একটি FileZilla র মতো FTP ক্লায়েন্ট যা আপনার সার্ভারের সাথে যুক্ত হয়ে এবং ওয়েবসাইটের ফাইলগুলো একবারে আপলোড করবে একটি একটি করে নয়। FileZilla ফ্রি এবং সকল অপারেটিং সিস্টেম এর জন্য পাওয়া যায়।

এখন চলুন দেখে নেই কিভাবে এক পাতার ওয়েবসাইট তৈরি করা যায়, ডাউনলোড থেকে শুরু করে সাইট টেমপ্লেট ঠিকঠাক করা পর্যন্ত বিস্তারিত।

কিভাবে আপনার ওয়েবসাইট টেমপ্লেটের কন্টেন্ট এডিট করবেন

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

Wander website template
কিভাবে Wander HTML টেমপ্লেট ব্যবহার করে এক পাতার ওয়েবসাইট তৈরি করা যায়।

যেহেতু এটি একটি মাল্টিপার্পাস টেমপ্লেট, এর ভিতর বেশ কয়েকটি ফাইল রয়েছে। আপনার টেমপ্লেটে হয়ত শুধু একটি HTML ফাইল এবং কয়েকটি ফোল্ডারে করে স্টাইলশিট, স্ক্রিপ্ট ফাইল এবং ছবি থাকতে পারে।

পছন্দমতো টেমপ্লেটটি এডিট করতে, আপনার মডিফাই করতে হবে HTML ফাইলটি যা সাধারনভাবে index.html। Wannder এর ক্ষেত্রে, আমি এডিট করব home-one-page.html নামের ফাইলটি, যেহেতু আমরা এক পাতার ওয়েবসাইট তৈরি করছি।

HTML নিয়ে কাজ করা

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

HTML একটি মার্কাপ ভাষা যা <h1>, <p>, <li> এবং এদের মতো আরো কিছু ট্যাগ নিয়ে গঠিত। ট্যাগগুলো জোরায় থাকে, প্রতিটার একটি ওপেনিং এবং একটি ক্লোজিং ট্যাগ আছে। ট্যাগগুলোর ভিতরে কি আছে কিভাবে তা প্রদর্শিত হবে তারা ব্রাউজারকে এটি বুঝতে সাহায্য করে।

একটি প্যারাগ্রাফ একটি HTML ডকুমেন্ট যা দেখতে এমনঃ <p>This is my paragraph.</p>। হেডিং বেষ্টিত থাকবে h ট্যাগ দ্বারা অনুষঙ্গী হিসেবে থাকবে 1-6 পর্যন্ত সংখ্যা যা যা হেডিং লেভেল 1 থেকে হেডিং লেভেল 6 নিদর্শন করে।

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

আপনার টেমপ্লেট এডিট করার সবচাইতে সহজ পথ হল ব্রাউজারে এটি খুলুন এবং কোড ইন্সপেক্ট করুন। প্রথমে, HTML ফাইলটিতে ডাবল ক্লিক করুন এটিকে ডিফল্ট ব্রাউজারে খোলার জন্য। শুরুতে, আপনি দেখতে পাবেন আপনার হেডার সেকশনের টেক্সট এডিট করতে হবে। We Make BRANDS Shine বাক্যটির উপরে রাইট ক্লিক করুন এবং Inspect সিলেক্ট করুন।

Inspecting HTML
ওয়েব ব্রাউজারে HTML ইনস্পেক্ট করা

একটি প্যানেল নিচ থেকে পপ-আপ হবে যা আমাদের টেমপ্লেটের HTML কোডগুলো দেখাবে। যে লাইনে আমাদের সিলেক্ট করা বাক্য থাকবে সেটি ইনস্পেক্টর প্যানেলের হাতের বাম দিকে থাকবে। আপনি দেখতে পাবেন বাক্যটি <h1> ট্যাগ দ্বারা বেষ্টিত এবং এর ক্লাস এখানে large mt20

এখন, কোড এডিটরে টেমপ্লেটটি খুলুন টেমপ্লেটের নামের উপর রাইট-ক্লিক করে এবং Open with Sublime Text নির্বাচন করে। একই লাইনের কোডটি খুজুন যা আপনি ইনস্পেক্টর প্যানেলে দেখেছেন, ট্যাগের মধ্যবর্তী টেক্সট প্রতিস্থাপিত করুন আপনার কোম্পানির ট্যাগলাইনের সাথে।

Editing HTML code
HTML কোড এডিটিং।

মাত্র পরিবর্তন করা হেডলাইনের ঠিক নিচের অনুচ্ছেদটি এডিট করতে, আপনার ব্রাউজারে ফিরে যান, অনুচ্ছেদটির উপরে রাইট ক্লিক করুন এবং ইন্সপেক্ট নির্বাচন করুন। এইবার, বাক্যটি <p> ট্যাগ দ্বারা পরিবেষ্টিত এবং এর ক্লাস হচ্ছে white । আপনার কোড এডিটরে ফিরে যান, ট্যাগেগুলোর মাঝে ক্লিক করুন এবং আপনার তথ্য যোগ করুন।

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

একইভাবে, আপনি যদি একটি অংশ দ্বিগুণ করতে চান, কোড খুজে বের করুন যা ঐ সেকশনটি ধারন করছে এবং ওপেনিং ট্যাগ থেকে শুরু করে ক্লোজিং ট্যাগ এর সবকিছু সিলেক্ট করুন, তারপর কপি করে পেস্ট করুন যেখানে আপনি এই কন্টেন্ট প্রদর্শন করাতে চান।

নিচের স্ক্রিনশটে, আমি আর একটি টেস্টিমনিয়াল যোগ করতে চেয়েছিলাম, তাই আমি তৃতীয় টেস্টিমনিয়াল এর কোড সিলেক্ট করে ঠিক তার নিচে অনুলিপি করেছি। 

লক্ষ করবেন যে, অধিকাংশ ক্ষেত্রে, একটি সেকশনের কোডগুলোতে হেডিং এবং প্যারাগ্রাফ ট্যাগ এর পুর্বে <div> ট্যাগ দ্বারা আবদ্ধ আছে। যদি আপনি একটি সেকশনের প্রতিলিপি করতে বা মুছে ফেলতে চান, আপনার <div> ট্যাগ ও সিলেক্ট করতে হবে; অন্যথায় আপনার কন্টেন্ট ঠিকমত প্রদর্শিত হবে না।

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

কিভাবে করবেন আপনার এক পাতার ওয়েবসাইটের টেমপ্লেট শৈলি

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

CSS ফাইল এডিটিং শুরু করতে, আপনি একই ধাপগুলো অনুসরণ করতে পারেন যা আমরা HTML ফাইল এডিটে করেছিলাম। একটি নির্দিষ্ট উপাদান কিভাবে শৈলি করা হয়েছে খুজতে, আপনার ব্রাউজারে উপাদানটিতে রাইট-ক্লিক করুন এবং Inspect ক্লিক করুন। এইবারে, ডান-হাতের পাশে দেখুন, আপনি লক্ষ করবেন উপাদানটির অনুরূপ শৈলি।একই প্যানেলে এ আরো রয়েছে স্টাইল ফাইলের নাম যা আপনি এডিট করতে পারবেন যে লাইনে কোডটি অবস্থিত তা সহ।

Inspecting CSS
ওয়েব ব্রাউজারে CSS ইনস্পেক্টিং

ফাইলটি আপনার কোড এডিটরে খুলুন। এটির ক্ষেত্রে ফাইলটি  theme.css। যেহেতু আমি দ্বিতীয় সেকশন যেখানে সব ফিচারগুলি আছে এর ব্যাকগ্রাউন্ড কালার এডিট করতে চাচ্ছি, আমাকে খুজত হবে ৫২৭৮ নং লাইন theme.css ফাইলে। চলুনে এটিকে কালো রঙে পরিবর্তন করি।

Editing CSS
CSS এ ঝটপট ব্যাকগ্রাউন্ড কালার সমন্বয় করুন।
যদি আপনি ঝটপট কালার সমন্বয় করতে চান, আপনার শুধু HTML ফাইল এর head এ স্টাইলশিট পরিবর্তন করতে হবে আপনার পছন্দের CSS ফাইলের নামের সাথে।

বুঝতে কোডের লাইনটি দেখুনঃ

<link href="css/colors/blue.css" id="color-scheme" rel="stylesheet" type="text/css">

নামটি green.css এ পরিবর্তন করলে এটি বাটন, লিংকগুলো এবং আইকনের রঙ সবুজে পরিবর্তন করবেঃ

Changing the CSS file
CSS ফাইলে বাটনের রঙ পরিবর্তন।

ফন্ট পরিবর্তন করতে, যে কোন টেক্সট এর অংশ ইনস্পেক্ট করুন এবং ইনস্পেক্টর প্যানেলের ডান অংশে দেখুন। টেক্সট যে ফন্ট ব্যবহার করছে আপনি তার নাম দেখতে পাবেন, সেই সাথে কোডের সেই লাইনটি যেখানে আপনি পছন্দের ফন্ট পরিবর্তন করতে পারবেন।

CSS code for fonts
CSS কোডে ফন্টের অবস্থান নির্ণয়।

কিভাবে আপনার সাইট টেমপ্লেট সার্ভারে আপলোড করবেন

এখন আপনার মডিফাই এবং শৈলি করা এক পাতার ওয়েবসাইট টেমপ্লেট, আপনার হোস্টিং সার্ভারে আপলোড করতে পারেন। আপনার হোস্ট আপনাকে FTP কানেকশন এ ব্যবহারের জন্য দরকারি username এবং password দিবে।

আপলোড প্রক্রিয়া শুরু করতে, FileZilla খুলুন এবং উপরের বারে সার্ভারের নাম, username এবং password প্রবেশ করান, তারপর QuickConnect এ ক্লিক করুন।

স্ক্রিনের বাম দিকে আপনার কম্পিউটারে থাকা টেমপ্লেট এর ফোল্ডারটির স্থান নির্ণয় করুন, এবং এটিকে এক্সপেন্ড করতে এটিতে ক্লিক করুন। বামদিকের নিচের অংশে, সকল ফাইল এবং ফোল্ডার সিলেক্ট করুন এবং ডানদিকে থাকা আপনার হোস্টিং সার্ভারের রুট ফোল্ডারে অবস্থিত public_html ফোল্ডারে তাদের টেনে নিয়ে আসুন।

Transferring your one page website template via FTP
আপনার এক পাতার ওয়েবসাইট টেমপ্লেট FTP দিয়ে স্থানান্তর করা

উত্তম এক পাতার ওয়েবসাইটের জন্য ৫ টি গুরুত্বপূর্ন পরামর্শ

এখন যখন আপনার ওয়েবসাইটটি সক্রিয়, এখানে কিছু নীতি পরামর্শ যা মনে রাখতে হবে।

১। আপনার বার্তা সংক্ষিপ্ত রাখুন

ট্র্যাডিশনাল সাইট থেকে ভিন্ন, একটি এক পাতার টেমপ্লেট এ সীমিত স্পেস থাকে, তার মানে কম জায়গার মধ্যে আপনার বার্তা জুড়তে হবে। তাই অর্থহীন বাক্য এবং অপ্রয়োজনীয় বিস্তারিত অপসারন করা অত্যন্ত গুরুত্বপূর্ণ, শুধুমাত্র সব প্রাসঙ্গিক তথ্য দিন। আপনি কি অফার করছেন এবং আপনার প্রোডাক্ট বা সার্ভিস কি কাজে আসবে তা সম্পর্কে পরিষ্কার ব্যাখ্যা দিন।

২। শক্তিশালী কল টু একশন এর ব্যবহার

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

৩। ন্যাভিগেশন সুবোধ্য এবং সাধারন রাখুন

আপনার ওয়েবসাইটের বিভিন্ন অংশে জাম্প করার জন্য আপনার ন্যাভিগেশন সেট করুন। আপনি গেমে এক ধাপ এগিয়ে থাকবেন যদি আপনি একটি টেমপ্লেট বেছে নেন যার ইতিমধ্যে একটি স্টিকি ন্যাভিগেশন আছে যা ভিজিটর স্ক্রল করার সময়ও একটি নির্দষ্ঠ স্থানে থাকে। শুধুমাত্র আপনার ওয়েবসাইটের অংশগুলি লিংক করুন এবং এক্সটার্নাল লিংক স্থাপন থেকে দূরে থাকুন যা যে কাউকে অন্যথায় নিক্ষেপ করবে যারা আপনার পেইজ ভিজিট করতে আসবে।

৪। ভিজ্যুয়াল এর ব্যবহার

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

৫। শ্রেণিক্রম বজায় রাখুন

সবচাইতে গুরুত্বপূর্ণ তথ্য সবার শীর্ষে রাখুন এবং ধীরে ধীরে ব্যবহারকারীকে পথ দেখান পেইজের নিচে নেমে আপনার কোর মেসেজ সম্পর্কিত আরো সুনির্দিষ্ঠ তথ্য পাবার জন্য। এটি আপনাকে যৌক্তিক উপায়ে শ্রেণিক্রম বজায় রাখতে এবং তথ্য উপস্থাপন করতে সাহায্য করবে।

শুরু করা যাক আপনার নিজের এক পাতার ওয়েবসাইট

আপনি যদি এই টিউটোরিয়াল অনুসরণ করে থাকেন, আপনার এখন রেস্পন্সিভ টেমপ্লেট ব্যবহার করে ঝটপট এক পাতার ওয়েবসাইট তৈরির জ্ঞান আছে।  যাত্রা শুরু করুন সঠিক ওয়েবসাইট টেমপ্লেট দিয়ে এবং দ্রুত সেট আপ করতে সাহাজ্যের জন্য এই টিউটোরিয়ালটি পড়ুন।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.