ওয়েবপেজ তৈরি করা

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

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

এটা সবসময়ই সবচেয়ে কঠিন কাজ—দেখতে ভালো হওয়ার পাশাপাশি ওয়েবসাইটটি দেখতে অন্য ওয়েবসাইটগুলো থেকে আলাদা হবে। তুমি এটাকে ভয়ঙ্কর রকমের আলাদা করে তৈরি করতে পার যদি তুমি সবকিছু জেব্রার মত সাদাকালো দাগে কেটে দাও আর 64 পিক্সেল ফন্ট ব্যবহার কর, কিন্তু এরকম করা কি ঠিক হবে? অবশ্যই না।

পূর্ব-নির্ধারিতভাবে, ব্রাউজার ওয়েবপেজগুলোকে serif নামের জেনেরিক ফন্ট ফ্যামিলি দিয়ে উপস্থাপন করে থাকে, সাধারণত ওয়েবপেজে এটা ব্যবহার করা হয়। তুমি চাইলে এটাকে পরিবর্তন করে sans-serif নামের জেনেরিক ফন্ট ফ্যামিলি ব্যবহার করতে পার বা এমন কোন ফন্ট ফ্যামিলি তোমাকে নির্বাচন করতে হবে যেটা অধিকাংশ ব্যবহারকারীর কম্পিউটারেই থাকবে, যেমন Garamond বা Helvetica।

To give your webpage a more distinct look, you can also use a custom web font. For example, Khan Academy uses Lato on all of our pages, a nice sans-serif font:

যখন তুমি একটি ওয়েব ফন্ট ব্যবহার করছ, তুমি মুলত তোমার ব্যবহারকারীর কম্পিউটারে একটি ফন্ট ফাইল ডাউনলোড করাচ্ছ যাতে সিএসএস থেকে তুমি ঐ ফন্টটি ব্যবহার করার জন্য রেফারেন্স করতে পার। ব্রাউজারের জন্য এটা অতিরিক্ত একটি ডাউনলোড, তাই বেশি ফন্ট তোমার ব্যবহার করা উচিত নয় এবং ঐ ফন্ট ফাইলের ভিতরে তোমার এমন কোন ফন্ট অন্তর্ভুক্ত করা উচিত নয় যেটা তুমি তোমার ওয়েবপেজে ব্যবহার করতে চাইছ না। ওয়েব ফন্ট খুঁজে বের করার জন্য ভালো একটি জায়গা হল Google Web Fonts।খান একাডেমিতে থাকা এই example webpageটি দেখতে পার যেখানে দুইটি গুগোল ওয়েব ফন্ট ব্যবহার করা হয়েছে।

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

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

প্যালেট নির্বাচন করার জন্য তোমার কি সাহায্য দরকার? কোন কোন রঙ ব্যবহার করে তুমি প্যালেটটি তৈরি করতে চাইছ সেটা যদি আগে থেকেই তোমার জানা থাকে তাহলে তুমি এই Paletton ওয়েবসাইটে যেতে পার, এটি হল এমন একটি টুল যেটা দিয়ে বিভিন্ন রকম প্যালেট তুমি দেখতে পারবে যেমন: monochromatic, triads, adjacent colors এবং tetrads।

তুমি যদি একদম শুরু থেকে কাজ করা শুরু কর, তাহলে তুমি এই COLOURLovers নামের এই ওয়েবসাইটটি ব্রাউজ করতে পার, এটি এমন কিছু মানুষের একটি কমিউনিটি যারা রঙ নিয়ে কাজ করতে পছন্দ করে এবং বিভিন্ন রঙ, প্যালেট এবং প্যালেট সম্পর্কিত বিভিন্ন ধারণা একে অপরের সাথে ভাগাভাগি করে নিতে ভালবাসে। এখানে Giant Goldfish নামের একটি প্যালেটের উদাহরণ দেওয়া হল:

একটি প্যালেট নির্বাচন করা হয়ে গেলে, তোমাকে সবচেয়ে কঠিন কাজটি এখন করতে হবে: ওয়েবপেজের কোন অংশে তুমি কোন রঙ ব্যবহার করতে চাইছ তা তোমাকে নির্বাচন করতে হবে। শিরোনামগুলো কোন রঙের হবে? লিংকগুলো কোন রঙের? টেক্সটগুলো কোন রঙের? আর ব্যাকগ্রাউন্ড কোন রঙের হবে? Paletton এর সবচেয়ে ভালো ব্যাপারটি হল, তুমি যে প্যালেটটি নির্বাচন করেছ তারা তোমাকে সেই প্যালেটটি ব্যবহার করা হয়েছে এমন একটি ওয়েবপেজের উদাহরণ দিয়ে দিবে:

তুমি যখন সিদ্ধান্ত নিবে যে সিএসএসে প্যালেট কীভাবে নির্বাচন করবে তখন কয়েকটি বিষয় তোমাকে মাথায় রাখতে হবে:

রঙের প্যালেটটি তুমি কীভাবে ব্যবহার করবে তা যদি তুমি বুঝতে না পার তাহলে, তুমি কয়েকজন বন্ধুর কাছে প্যালেটটি পাঠাতে পার এবং তাদের মতামত জানতে চাও। তারা কি সবকিছু পড়তে পারছে? কোনটিতে ক্লিক করা যাবে সেটা কি তারা বুঝতে পারছে? কোন রঙ কি তাদের কাছে দৃষ্টিকটু লাগছে? তারা কোন রঙগুলো পছন্দ করছে?

আমি একবার আমার একজন সহকর্মীকে জিজ্ঞেস করেছিলাম—যিনি বর্তমানে গুগোলে একজন ডিজাইনার হিসেবে কাজ করছ—তার এই সুন্দর ডিজাইনের রহস্যটি কি। তার উত্তর কি ছিল? ফাঁকাস্থান!

হোয়াটস্পেস বলতে মুলত উপাদান এবং সিএসএস ল্যান্ডের মধ্যে থাকা ফাঁকাস্থানকে বোঝায়, মুলত এটি প্যাডিং, মার্জিন এবং লাইন-হাইটের বৈশিষ্ট্য থেকে আসে।

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

উদাহরণস্বরূপ, এখানে আমাদের কোর্সপেজের সাইডবারের ফাঁকাস্থানসহ এবং ফাঁকাস্থান বাদে কেমন দেখায় তার একটি তুলনা দেওয়া হল:

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

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

এইচটিএমএল এবং সিএসএস এ একটি টেম্পলেট হল, সম্পূর্ণ ওয়েবপেজের মত দেখতে একটি পেজ, যেখানে মাঝে মধ্যে বিভিন্ন অনুচ্ছেদ দিয়ে পূর্ণ থাকে। তুমি এখানে এই OpenDesigns.org সাইটে টেম্পলেট খুঁজে পেতে পার অথবা ওয়েবে "free webpage templates" লিখে খুঁজে দেখতে পার—এবং আশা করা যায় তুমি যে টেম্পলেটটি খুঁজে পাবে সেটা বিনামূল্যে! যখন তুমি টেম্পলেটটি ডাউনলোড করে ফেলবে, টেম্পলেটে থাকা অনুচ্ছেদগুলো তোমার নিজের অনুচ্ছেদ দিয়ে প্রতিস্থাপন করতে পারবে এবং তোমার প্রয়োজনমত অংশে সিএসএস পরিবর্তন করা চালিয়েই যাবে যতক্ষণ না তোমার প্রয়োজন পূরণ হয়।

একটি সিএসএস ফ্রেমওয়ার্ক হল, সিএসএসের কিছু নিয়মের সংগ্রহ, মসৃণভাবে একটি ওয়েবসাইট তৈরি করা শুরু করার জন্য যেটা খুবই ভালো। সিএসএস এর অনেক জনপ্রিয় ফ্রেমওয়ার্ক আছে যেটা তোমাকে সুন্দর স্টাইলের একটি ওয়েবসাইট তৈরি করতে সাহায্য করবে যেমন—Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat এবং এছাড়াও আরও অনেকগুলো রয়েছে। তুমি খান একাডেমিতে Twitter Bootstrap এবং ZURB foundation উদাহরণ দুইটি পরীক্ষা করে দেখতে পার।

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

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