ভাল ডোমেইন নেইম নির্বাচন করা

ব্যক্তিগত অথবা ব্যবসায়িক কারনে ডোমেইন কিনতে চাচ্ছেন কিন্তু ভাল ডোমেইন নেইম নির্বাচন করাটা অনেক সময় পেইনফুল হয়ে যায়। নিজে নিজে ব্রেইস্ট্রোমিং করলেন অথবা পরিচিত কারো থেকে নেইম সাজেশন চেয়ে পরে দেখলেন ডোমেইন নেইমটি পূর্বেই কেউ বুক করে রেখেছে। আর তাই এ সমস্যা সমাধানে আজ আপনাদের নিকট শেয়ার করছি পারফেক্ট ডোমেইন নেইম সাজেশন পাওয়ার দরকারি কয়েকটি টুলস –
১. Domize - https://domize.com/
২. Squurl - http://www.squurl.com/
৩. Domainr - https://domainr.com/
৪. DomainsBot - http://www.domainsbot.com/
৫. Dot-o-mator - http://www.dotomator.com/
৬. Bust a Name - http://www.bustaname.com/
৭. Nameboy - http://www.nameboy.com/
৮. Domaintyper - https://domaintyper.com/
৯. Wordoid - http://wordoid.com/
১০. Sedo - https://sedo.com/
পোস্টটি ভাল লাগলে শেয়ার করতে ভুলবেন না 😊

Read More

য়ার্ডপ্রেসে পোস্ট এক্সসার্প্ট সুবিধা ব্যবহৃত হয়ে থাকে পোস্টের বিষয়বস্তু সংক্ষিপ্ত করার জন্য।

ও এতে করে পাঠকেরা
পোস্টের সারসংক্ষেপ দেখে নির্ধারণ
করতে পারবে পুরো পোস্টটি পড়বে কি না।
একটি পোস্টের কতটুকু অংশ প্রদর্শিত হবে
তার জন্য অনেক ধরনের স্ট্যান্ডার্ড পদ্ধতি
আছে ওয়ার্ডপ্রেসে। নিচে তার কয়েকটি
নিয়ে আলোচনা করা হলঃ
More ট্যাগ ব্যবহার করা
কোন একটি পোস্ট লেখার সময় more ট্যাগ
ব্যবহার করা হয়। এটি পোস্টের ভূমিকার
পরপরি দেওয়া যেতে পারে নিচের মতো
করেঃ
এটা আমার ব্লগ পোস্টের ভূমিকা
এটা আমার ব্লগ পোস্টের বাঁকি অংশ
ওয়ার্ডপ্রেস এই ট্যাগটিকে ব্রেক পয়েন্ট
হিসেবে ধরে নেয় এবং ব্লগ পেজে শুধুমাত্র
ট্যাগের উপরের অংশটুকু প্রদর্শন করে।
বাঁকি অংশের জন্য স্বয়ংক্রিয়ভাবে রিড
মোর যুক্ত হয়ে যায়।
এক্সসার্প্ট ফিল্ড ব্যবহার করা
এক্সসার্প্ট ফিল্ড ব্যবহার করা যেতে পারে
যা পোস্ট এডিটরের মধ্যেই পাওয়া যাবে।
যদি এটি সেখানে না পাওয়া যায়, তাহলে
উপরে ডানদিকে অবস্থিত স্ক্রীন
অপশনে ক্লিক করে সেখান থেকে
এক্সসার্প্ট চেকবক্সটি মার্ক করে নিতে
হবে। এরপর এক্সসার্প্ট ফিল্ডের মধ্যে
পোস্টের সারসংক্ষেপ লিখে দিতে হবে।
এক্সসার্প্ট ফিল্ড ব্যবহারের একটি সুবিধা
হল এর মাধ্যমে পোস্টের বিষয়বস্তু আলাদা
করে ফুটিয়ে তোলা সম্ভব, যাতে করে
পাঠকেরা পোস্টের বাঁকি অংশ পড়ার
ব্যাপারে আগ্রহী হয়।
the_excerpt() ফাংশন ব্যবহার করা
the_excerpt() ফাংশন ব্যবহার করা যেতে
পারে। ডিফল্টভাবে ওয়ার্ডপ্রেস একটি
পোস্টের পুরোটি প্রদর্শন করে ব্লগ পেজে।
কারন পোস্টের বিষয়বস্তু প্রদর্শনের জন্য
ওয়ার্ডপ্রেস the_content() ফাংশনটি
ব্যবহার করে। এটিকে পরিবর্তন করে the_
excerpt() ব্যবহার করলেই ব্লগ পেজে সম্পূর্ণ
পোস্টের পরিবর্তে পোস্টের অংশবিশেষ
প্রদর্শিত হবে।
যদি প্রথম দুইটি পদ্ধতি প্রয়োগ না করা হয়ে
থাকে, তাহলে the_excerpt() ফাংশন
ব্যবহারের ফলে মূল পোস্টের প্রথম ৫৫ টি
শব্দ প্রদর্শিত হবে এবং সবশেষে [...]
দ্বারা চিহ্নিত হবে।
এখন অনেকেই হয়তো চাইবে প্রথম কতটি শব্দ
প্রদর্শিত হবে সেটা নির্ধারণ করে দিতে।
এটি করার জন্য functions.php ফাইলে নিচের
কোড স্নিপেট যুক্ত করতে হবেঃ
function t4b_excerpt_length($length)
{ return 40; }
add_filter( 'excerpt_length', 't4b_excerpt_
length' );
এর ফলে মূল পোস্টের প্রথম ৪০ টি শব্দ
প্রদর্শিত হবে। একটি বিষয় এখনও রয়ে
গেছে। যখন পোস্টের বিষয়বস্তু এক্সসার্প্ট
দৈর্ঘ্যের সীমাবদ্ধতা ছাড়িয়ে যাবে, তখন
স্বয়ংক্রিয়ভাবে ব্রেক পয়েন্ট [...] দ্বারা
চিহ্নিত হয়ে যাবে, যা পাঠকদের ইঙ্গিত
করে যে আরও পড়ার আছে। পাঠকদের একটু
সুবিধা করে দেওয়ার জন্য আমরা [...] এর
পরিবর্তে রিড মোর বা আরও
পড়ুন বা বিস্তারিত এগুলো ব্যবহার করতে
পারি। এটা করার জন্য functions.php ফাইলে
নিচের কোড স্নিপেট বসিয়ে দিতে হবেঃ
function t4b_excerpt_more($more) {
global $post;
return '' . 'বিস্তারিত' . '';
}
add_filter('excerpt_more', ' t4b_excerpt_
more ' );
এখন [...] এই চিহ্নর পরিবর্তে ব্রেক
পয়েন্টে বিস্তারিত লেখা থাকবে।
একাধিক এক্সসার্প্ট দৈর্ঘ্য পরিচালনা করা
ধরুন কেউ চাচ্ছে ফ্রন্ট পেজে এক্সসার্প্ট
দৈর্ঘ্য প্রদর্শিত হবে ৪০ শব্দের, কিন্তু অন্য
আর একটি পেজে তা প্রদর্শিত হবে ৫০
শব্দের মধ্যে। এরকম আরও অন্য কোন পেজে
ভিন্ন পরিমাণ শব্দ। এখন এই ক্ষেত্রে কি
করবে সে? এর জন্য প্রথমে প্রয়োজনীয় মান
অনুযায়ী functions.php ফাইলে ফিল্টার
ফাংশন লিখতে হবে নিচের কোড স্নিপেট
অনুযায়ীঃ
function t4b_excerptlength_index($length)
{ return 40; }
function t4b_excerptlength_aside($length)
{ return 25; }
function t4b_excerptlength_featp($length)
{ return 50; }
function t4b_excerpt_more($more) {
return '' . 'বিস্তারিত' . '';
}
এরপরে নতুন এক্সসার্প্ট ফাংশন বসিয়ে
দিতে হবে নিচের কোড স্নিপেট অনুযায়ীঃ
function t4b_excerpt($length_callback='', $
more_callback='') {
global $post;
if(function_exists($length_callback)) {
add_filter('excerpt_length', $length_
callback);
    }
    if(function_exists($more_callback)) {
add_filter('excerpt_more', $more_
callback);
    }
    $output = get_the_excerpt();
$output = apply_filters('wptexturize', $
output);
    $output = apply_filters('convert_chars', $
output);
    $output = '
'.$output.'
';
    echo $output;
}
এই ফাংশনে দুইটি প্যারামিটার ব্যবহার
করা হয়েছে। প্রথমটিতে এক্সসার্প্ট দৈর্ঘ্য
দিতে হবে এবং পরেরটিতে রিড মোর
দিতে হবে। এখন আপনি যেই দৈর্ঘ্যের
এক্সসার্প্ট দিবেন সেই পরিমাণ শব্দ
প্রদর্শিত হবে। যদি কিছু না দিয়ে ফাঁকা
রাখা হয়, তাহলে ডিফল্ট ৫৫ টি শব্দ
প্রদর্শিত হবে।
এখন ফাংশনটি থিমে প্রয়োগ করা বাঁকি।
ব্লগের যেই পেজে পোস্টের অংশবিশেষ
প্রদর্শন করাতে হবে সেখানে নিচের কোড
স্নিপেট বসিয়ে দিতে হবেঃ
// অন্য আর একটি
ব্যাস কাজ শেষ! এভাবে যত ইচ্ছা ততো
এক্সসার্প্ট দৈর্ঘ্য ব্যবহার করা যাবে।

(collected from alom)

Read More

# ওয়ার্ডপ্রেসের বিভিন্ন # User_Role

আপনি নিশ্চয়ই লক্ষ্য করেছেন
ওয়ার্ডপ্রেসে ৫ ধরণের User Role থাকে।
Administrator, Editor, Author, Contributor এবং
Subscriber.
যদিও আপনি ইচ্ছা করলে নতুন ধরণের User
Role তৈরি করতে পারবেন।
এই ৫ ধরণের ব্যবহারকারীর প্রত্যেকের
কাজের পরিধি, ক্ষমতা এবং সীমাবদ্ধতা
আলাদা। ক্ষমতার ক্রমানুসারে
ওয়ার্ডপ্রেসের বিভিন্ন User Role-এর
তালিকাটা এরকমঃ
# Subscriber:
এই ধরণের ব্যবহারকারীরা কার্যত কিছু
করতে পারে না। নিবন্ধন (রেজিস্ট্রেশন)
করার মাধ্যমে তারা সেই সাইটের সদস্য হয়
বটে, কোনো ধরণের পোস্ট করতে পারে না।
এমন যদি হয় যে, আপনি আপনার সাইটে
রেজিস্টার্ড ইউজার ছাড়া মন্তব্য করতে
দিবেন না; কিন্তু আপনি চান না যে তারা
পোস্ট করুক, সেক্ষেত্রে এই রোল ব্যবহার
করতে পারেন।
*.এরা মন্তব্য করতে পারবে।
*.নিজের প্রোফাইল হালনাগাদ/আপডেট
করতে পারবে।
# Contributor :
এই ধরণের ইউজাররা পোস্ট করতে পারবে।
কিন্তু তাদের পোস্ট সরাসরি প্রকাশিত
(Published) হবে না।
*.এরা মন্তব্য করতে পারবে।
*.নিজের প্রোফাইল আপডেট করতে পারবে।
*.পোস্ট করতে পারবে। পোস্ট সরাসরি
Publish হবে না, Pending থাকবে। Publish
হওয়ার আগ পর্যন্ত লেখা Edit বা Delete
করতে পারবে; কিন্তু Publish হলে আর Edit বা
Delete করতে পারবে না। ছবির সাথে Media
(ছবি বা অন্যান্য ফাইল) যোগ করতে পারবে
না।
*.নিজের এবং অন্য পোস্টের মন্তব্য দেখতে
পারবে।
# Author:
এরা পোস্ট করতে পারবে এবং পোস্ট
সরাসরি পাবলিশ হবে। ব্লগগুলোতে
সাধারণত এই রোল ব্যবহার করা হয়।
*.মন্তব্য করতে পারবে।
*.নিজের প্রোফাইল হালনাগাদ করতে
পারবে।
*.পোস্ট করতে পারবে, পোস্ট সরাসরি Publish
হবে। প্রকাশিত লেখা এডিট কিংবা
ডিলিট করতে পারবে। পোস্টের সাথে Media
যোগ করতে পারবে।
*.নিজের এবং অন্য পোস্টের মন্তব্য দেখতে
পারবে। নিজের পোস্টের মন্তব্য Delete,
Edit, Unapprove করতে পারবে।
# Editor :
এরা মূলত Moderation জাতীয় কাজ করে
থাকে।
*.মন্তব্য করতে পারবে।
*.নিজের প্রোফাইল হালনাগাদ করতে
পারবে।
*.পোস্ট করতে পারবে, পোস্ট সরাসরি Publish
হবে। প্রকাশিত লেখা এডিট কিংবা
ডিলিট করতে পারবে। পোস্টের সাথে Media
যোগ করতে পারবে।
*.অন্যের লেখা ডিলিট, এডিট ইত্যাদি
করতে পারবে। Contributor লেভেলের কারঅ
পোস্ট Pending থাকলে সেটা পাবলিশ করতে
পারবে।
*.Page তৈরি করতে পারবে। নিজের কিংবা
অন্যের Page ডিলিট, এডিট ইত্যাদি করতে
পারবে।
*.পোস্টের ক্যাটাগরি ডিলিট কিংবা নতুন
ক্যাটাগরি যোগ করতে পারবে।
# Administrator :
এরা সব করতে পারবে। Editor লেভেলের সব
কিছুর পাশাপাশি থীম পরিবর্তন করা, নতুন
থীম যোগ করা বা ডিলিট করা, প্লাগিন
Activate, Deactivate বা Delete করা ইত্যাদি
কাজ করতে পারবে। এছাড়াও Widget, Menu
ইত্যাদি নিয়ন্ত্রণ করা, বিভিন্ন রকমের
সেটিং, এমনকি সাইটের কন্টেন্ট (পোস্ট,
পেইজ, ইউজার ইত্যাদি) Export, Import করাও
Administrator-এর কাজ।

Read More

ল্যাপটপ কেনার পূর্বে লক্ষণীয় কিছু বিষয়:-

বর্তমানে ডেস্কটপ পিসির
থেকে ল্যাপটপের চাহিদা দিন
দিন বাড়ছে। স্কুল, কলেজ, অফিস-
আদালত থেকে শুরু করে ঘরে-
বাইরে অনেকেই ল্যাপটপ ব্যবহার
করছে। বর্তমানে ল্যাপটপের দাম
অনেক কমে যাওয়ায় ল্যাপটপের
গ্রাহক বেড়েছে। আসুন দেখে
নেই ল্যাপটপের বাজার দর : google
search:::: laptop price in Bangladesh.
আর ল্যাপটপের বহনযোগ্যতার
সুবিধা ও রাখার জন্য কম জায়গার
প্রয়োজন হয় বলে অনেকেই
ডেস্কটপ পিসির চেয়ে
ল্যাপটপকে বেশী প্রাধন্য
দিচ্ছে। ল্যাপটপ ও নোটবুক দুটি
প্রায় এক। তবে ল্যাপটপকে নোটবুক
বলাটা ঠিক নয়। কারন আকার ও
কনফিগারেশন অনুযায়ী এরা
খানিকটা ভিন্ন।
ল্যাপটপগুলোতে বেশ কিছু
বাড়তি সুবিধা দেয়া হয়, যেমন-
টাচ স্ক্রিন,ফিঙ্গারপ্রিন্ট
রিকগনিশন,কার্ড রিডার,
ওয়েবক্যাম, লাইটযুক্ত ভাল
মানের কীবোর্ড ইত্যাদি। আজ
আমি ল্যাপটপ কেনার পূর্বে যে
যে বিষয়গুলো লক্ষ্য রাখতে হবে
তা নিয়ে আলোচনা করব। এই
আলোচনার ম্যাধ্যমে আপনি
আপনার সঠিক মডেলের ল্যাপটপ
বেছে নিতে সহয়তা পাবেন।
আসুন দেখে নেই এই লক্ষণীয়
বিষয়গুলো:
১. ব্যাটারি ব্যাকআপ ল্যাপটপের
জন্য খুব প্রয়োজনীয় একটি
ব্যাপার। যারা অফিস বা
ব্যক্তিগত কাজে বেশির ভাগ সময়
বাহিরে কাজ করেন তাদের জন্য
বেশি ব্যাটারি ব্যাকআপ সম্পন্ন
ল্যাপটপ কেনাই অ্যাবশক।
অধিকাংশ ল্যাপটপের
ব্যাটারি লিথিয়াম আয়নের
হয়ে থাকে। ব্যাটারিতে যত
বেশি সেল থাকবে , ব্যাটারির
ব্যাকআপ সময় ততটাই বেশি হবে।
তাই ল্যাপটপ কেনার সময় এর
ব্যাকআপ সময়টা দেখে কেনা
উচিৎ।
২.সাধারন কাজ যেমন-গান
শোনা, ইন্টারনেট ব্রাউজ করা,
মুভি দেখা অন্যান্য ছোটখাটো
কাজের জন্য কম বাজেটের
ল্যাপটপ কেনাটাই সঠিক
সিদ্ধান্ত। তবে মুভি দেখা যদি
আপনার নেশা হয় তাহলে একটু বড়
স্ক্রিন দেখে ল্যাপটপ নেওয়া
ভাল।
৩. গেম খেলা, ভিডিও
এডিটিং বা গ্রাফিক্সের
কাজের জন্য একটু হাই-
কনফিগারেশনের ল্যাপটপ দরকার।
এজন্য ল্যাপটপ কেনার বাজেটটা
বড়াতে হবে। কারন হাই-
কনফিগারেশনের ল্যাপটপের
দাম খানিকটা বেশী।
ল্যাপটপের CPU ও GPU এর সক্ষমতা
কেমন তা দেখে নিতে হবে।
এছাড়া প্রসেসরের ক্লক স্পিড
বেশী হলে ল্যাপটপের কাজের
স্পীড বেশী হবে। কিন্তু সাধারণ
কাজের জন্য এই স্পীড লক্ষণীয় নয়।
ভিডিও এডিটিং বা
গ্রাফিক্সের মত ভারী কাজের
জন্য Core i3, i5, i7 সিরিজের
ল্যাপটপ কেনা অত্যাবশ্যক।
৪. ল্যাপটপ কেনার সময় এর
হার্ডডিস্ক, র্যাম কত তা দেখে
নিতে হবে। কারন গেম খেলা,
ভিডিও এডিটিং বা
গ্রাফিক্সের কাজের জন্য
কমপক্ষে 4 GB DDR3 র্যাম নেবার
চেষ্টা করতে হবে। DDR3 র্যামের
স্পিড ভালো।
৫.ল্যাপটপে কি কি পোর্ট আছে
তা দেখে কেনা ভাল। যেমন-
USB port, HDMI port, LAN port ,
ইত্যাদি পোর্ট আছে কিনা তা
চেক করে নেওয়া উচিৎ।
বর্তমানে হাই ডেফিনেশন মুভি
ও গেমস খেলার জন্য HDMI Port
দরকার।
৬. বহনযোগ্যতা ল্যাপটপের অন্যতম
একটি দিক। ল্যাপটপের ওজন একটু
কম দেখে কেনা ভাল। এতে
ল্যাপটপ বহন করতে সুবিধা হবে।
এছাড়া কেনার সময় অবশ্যই
ওয়ারেন্টি কার্ড, চার্জার,
ব্যাগ ইত্যাদি অন্যান্য
জিনিসপত্র ল্যাপটপের সঙ্গে
আছে কিনা তা বুঝে নিতে
হবে। এছাড়া অনুমোদিত ডিলার,
আমদানিকারক, বিশ্বস্ত দোকান
থেকে ল্যাপটপ কিনতে হবে।
এতে ওয়ারেন্টি পেতে কোন
ঝামেলা হয় না।
আর পুরনো বা সেকেন্ড হ্যান্ড
ল্যাপটপ কখনই কেনা উচিৎ নয়।
অর্থের বা বাজেটের সমস্যা
থাকলে অপেক্ষা করুন ও ভাল
বাজেটের নতুন ল্যাপটপ কিনুন।
এছাড়া ল্যাপটপ কেনার সময়
আপনি আপনার কোন অভিজ্ঞ বন্ধু
বা আত্মীয় স্বজনের সহযোগিতা
নিতে পারেন।
ল্যাপটপ ক্রয় করার পূর্বে
পূর্বোল্লিখিত লক্ষণীয় বিষয়
গুলো বিবেচনায় রাখা উচিৎ।
আশা করি এই আর্টিকেলের
ম্যাধ্যমে ল্যাপটপ ক্রয়করতে
সুবিধা পাবেন। ধন্যবাদ।

(collected : shomrat)

Read More

How to play NFS MOSTWANTED using LAN(ETHERNET CABLE): nfs most wanted

How to play NFS MOSTWANTED using LAN(ETHERNET CABLE): nfs most wanted:   Connect Two Windows 7 Computers On LAN Using Ethernet Cable and enjoy nfsmw   Step 1 . In order to start the connection, you’ll have ...

Read More

প্রস্নের উত্তরঃ পর্ব-১

প্রশ্নঃ

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



উত্তরঃ

আপনার এইচটিএমএল টেমপ্লেট এর ফুটারে এই কোডটি দিয়ে দিন। আর কিছু করতে হবে না।

*নিচে দেখুন এক জায়গায় 1200 লিখা আছে, ঐ খানে মান পরিবর্তনের মাধ্যমে গতি কমাতে/বাড়াতে পারবেন।



$(document).ready(function(){

$('a[href*=#]:not([href=#])').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

var target = $(this.hash);

target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

if (target.length) {

$('html,body').animate({

scrollTop: target.offset().top

}, 1200);

return false;

}

}

});

});

Read More

আসুন আপনার টেম্পলেটকে কিভাবে ক্রস ব্রাউজার সাপোর্ট করবেন তা দেখি !

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



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



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



১. ক্রস ব্রাউজার এর অন্যতম প্রধান বা আমার কাছে প্রথম শর্ত সেটা হল মার্কআপ(HTML) ও স্টাইল(CSS) পরিপূর্ণ ভ্যালিডেশন থাকা। এখানে মার্কআপ(HTML) এ কোন প্রকার এরোর বা ওয়ার্নিং থাকা যাবে না এবং স্টাইল(CSS) এর ক্ষেত্রে ওয়ার্নিং গুলা না হলেও এরোর গুলা অবশ্যই ঠিক করতে হবে এবং আপনার যত স্টাইল(CSS) ফাইল থাকবে সব গুলাই চেক করবেন। এখানে একটা কথা বলে রাখি সকল এরোর বা ভুল কিন্তু এই কাজে ততটা হেল্প করে না তবে এটা একটা স্ট্যান্ডার্ড প্র্যাকটিস এবং সবচেয়ে বড় বিষয় এটা SEO এর জন্যে অনেক সাহায্য করে। কারণ প্রধান সার্চইঞ্জিন গুলা ভ্যালিডেশন রিকমান্ড করে ।



যা দ্বারা করবেনঃ

HTML Validation -> http://validator.w3.org/

or use for html validation for mozila -> https://addons.mozilla.org/en-US/firefox...validator/

CSS Validation -> http://jigsaw.w3.org/css-validator/



2. HTML এবং CSS প্রতিনিয়ত আপডেট হইতেছে এবং তার সাথে পাল্লা দিয়ে ব্রাউজার গুলাও এই সব নতুন নতুন ইন্টারফেস তাদের সাথে যুক্ত করছে। কিন্তু এটা তো পাওয়া যাই নতুন ব্রাউজার গুলাতে কিন্তু পুরাতন ব্রাউজার গুলা কি ভাবে বুজতে পারবে যে এই নতুন কোড গুলো কি এবং এর কাজ কি ? তখন স্বাভাবিক ভাবে সেটা কাজ করা থেকে বিরত থাকবে। আর এই জন্যে আমরা সাধারণত নতুন কোড গুলা CSS বা Javascript দিয়ে তা ব্রাউজারকে বুজানোর চেষ্টা করি। নোটঃ টেমপ্লেটে বা সাইটকে ক্রস বাউজার সাপোর্ট করতে চাইলে খুব খুব বেশি প্রয়োজন না হলে Javascript ব্যাবহার থেকে বিরত থাকতে হবে (ব্যাগ্তিগত মতামত) । আসলে এই বিষয়টা নিয়ে অনেক বিতর্ক আছে তবে আমি এটা সব সময় এড়িয়ে চলি আর এর প্রধান কারণ হল ব্রাউজারে অনেকেই Javascript ইন্টারফেস ডিজাবল করে রাখে বা কারও ব্রাউজারে করা থাকে তখন ওই ইউজারের ব্রাউজারে আপনার কাজটা যদি Javascript দ্বারা হই স্বাভাবিক ভাবে সেটা সেখানে কাজ করবে না এবং এটা সাইটকে অনেক বেশি ভারি করে ফেলে। যাই হোক আমাদের ব্রাউজারকে আমাদের HTML ও CSS নতুত্ত বুজানোর জন্যে CSS ব্যাবহার করা ভাল।

যেমনঃ header, footer, aside, nav, article {display: block;} এগুলা দ্বারা আমরা ব্রাউজারকে জানিয়ে দিলাম যে এই সব এলিমেন্ট সব block এলিমেন্ট। প্রত্যেক বাউজার তাদের নিজের নিজের ধরণ ও তা প্রকাশ ভিন্ন ভিন্ন ভাবে করে থাকে। তাই প্রত্যেক বাউজার এর জন্যে আলাদা আলাদা CSS লিখা অনেক কষ্ট সাধ্যের তাই আমরা সকল ব্রাউজার কে একই behaviour করার জন্যে আমরা আমাদের CSS প্রথমেই একটা বা একগুলা কোড ব্যবহার করে থাকি এগুলাকে Reset Code বলা হইয়ে ত্থাকে। এখন আবার এই জাইগাই অনেক তর্ক বিতর্ক কোন Reset Code টা ভাল। তবে আমার জানা মতে দুইটা রিসেট কোড সবাই তাদের পছন্দের প্রথমে রেখেছে। সেগুলা হল ->

1. Universal Reset Code .কোড *{margin:0;padding:0}

2. Meyer Reset . রিসেট কোড প্যাক http://meyerweb.com/eric/tools/css/reset/

৩. Normalize রিসেট কোড প্যাক http://necolas.github.io/normalize.css/



কিন্তু আমার মতে এবং বর্তমানে অনেক বড় বড় কম্পানি এবং ওয়েব পোর্টাল সবাই Normalize টা বেশি ব্যবহার করতেছে আমি নিজেও করি তাতে পূর্বের থেকে অনেক কম ফিক্সিং করা লাগে সকল ব্রাউজার এর জন্যে, Bootstrap 3, tympanus.net , html5boilerplate ইত্যাদি জনপ্রিয় ফ্রেময়াক এবং সাইট গুলা এই Normalize রিসেট কোডটা বর্তমানে ব্যবহার করে ।



৩. আমাদের টেম্পলেট টা মুটামুটি সব মডার্ন ব্রাউজারেই ভাল ভাবে দেখাই তবে সব চেয়ে বেশি সমস্যা হই ইন্টারনেট এক্সপ্লোরারে। আসলে এর নাম সুনলেই জ্বর এসে যাই । তবে আমি ব্যাগ্তিগত এটাকে ভেলিডেটের হিসাবে ব্যাবহার করি । মানে এখানে আপনার কোন সমস্যা না থাকলে বুজবেন আপনার কাজে কোন বড় রকম ভুল নাই। কিন্তু অনেক সময় সব ঠিক থাকার ও পরেও এটাতে সমস্যা করে বিভিন্ন জাইগাই। আসলে এটাতে অনেক বাগ আছে তার ভিতরে আমি কিছু আলোচনা করবো । আলোচনাই ঠিক না শুধুমাত্র কইটা সাধারন টিপস দিবো যেগুলা অনেক সমস্যার সমাধান অটো মসাধান দিয়ে দিবে আর আলাদা আলাদা ভাবে আলোচনা করতে গেলে সবাই পোস্টটি না পড়েই দৌড় মারবে । টিপস গুলোঃ



#ক্রসব্রাউজার এর জন্যে এই মেটা ট্যাগ অনেক হেল্প ফুল

দুইটাই দিতে হবে । তবে প্রথমটা w3 Validation এ এরোর দেখাই এর কি কারণ আমি অনেক চেষ্টা করেছি জানার তবে তা জানতে পারি নাই। কারও জানা থাকলে দয়াকরে আমাকে অবহিত কইরেন।



# কোড গুলা যতটুকু সম্ভব সিম্পল রাখুন কম div বা কম মার্কআপে যদি কাজ করা যাই তাই করুন এবং কোড গুলা পরিষ্কার রাখুন এবং অপ্রয়োজনীয় কোড ব্যাবহার থেকে বিরত থাকুন। অনেকেই form filed এর কাজ করে নাই তার পরেও সিএসএস এর প্রথমেই তা স্টাইলের জনে ডিক্লার করে রাখে এই গুলা পরিত্যাগ করুন। যেমন কেও তার টেম্পলেট বা ফাইলে কোন filed কাজ করে নাই কিন্তু প্রথমে

input[type=text],input[type=password],input[type=email], textarea{} এভাবে প্রতিনিয়ত ডিক্লায়ার করে রাখে । এটা না প্রয়োজন হলে ব্যাবহার করার কোন কারনই নাই। এরকম অপ্রয়োজনীয় কোড ব্যাবহার থেকে বিরত থাকুন।

যেটা লাগবে সেটাই ব্যাবহার করুন।



# nested elements কম ব্যাবহার এর অভ্যাস করুন। তবে সব nested elements কে আমি বুজাই নাই যেমন ধরেন





কোড:

This is my sentence of text.

এটা একটা খারাপ স্ট্রাকচার । অর্থাৎ গ্রুপিং nested elements ব্যাবহার না করাই ইন্টারনেট ইক্সপ্লোরারের জন্যে ভাল। এটাতে অনেক সময় সমস্যা করে।



# সিএসএস এতে img{border:none} ব্যাবহার করুন এতে ইন্টারনেট এক্সপ্লোরার এর একটা বাগ যেটা অটো png ইমেজের বর্ডার দেখাই টা আর করবে না।



# খুব বেশি প্রয়োজন না হলে ইমেজ html অথবা css দিয়ে রিসাইজ কইরেন না। এটা ইন্টারনেট এক্সপ্লোরার এর পুরাতন ভার্সনে অনেক সমস্যা করে এমনকি আমি একদিন IE9 এবং সাফারি তেও এই জন্যে সমস্যাই পড়েছিলাম। অর্থাৎ আপনি যদি কোন ইমেজ ব্যাবহার করেন তাহলে টা আগে সাইজ করে ব্যাবহার করেন কিন্তু যদি html অথবা css দিয়ে সাইজ করেন তাহলে অনেক সময় টা ইন্টারনেট এক্সপ্লোরে সমস্যা করে । তবে আমার জানা মতে এই html অথবা css দিয়ে ইমেজ রিসাইজ করা সাটের লোদিং ঠিক থাকে এবং এসইওর জন্যেও এটা উপকারি। তবে কিছু পাওয়ার জন্যে কিছু হারাইলে সমস্যা নাই তবে সব সময় এই মেথড ব্যাবহার করার দরকার নাই । যদি কখন ইমেজ সাইজ এর সমস্যা হই IEতে তাহলে মেথডটা ব্যাবহার করবেন।



# আর টেমপ্লেট এর কাজ করার সময় অবশ্যই মডার্ন ব্রাউজার ব্যাবহার করবেন । কারণ তাহলে ওটা একদম স্টান্ডার্ট কোডিং প্র্যাকটিস এবং টা সিউর হতে পারবেন। আর আমার জানা মতে সব চেয়ে মডার্ন ব্রাউজার এর দৌরে মিজিলা সবার আগে আছে তাই এটা ব্যাবহার করেই সাইট এর কাজ করা উত্তম।



# ইন্টারনেট ইক্সপ্লোরারের বাগ গুলা মধ্য অন্যতম হচ্ছে Floating Problem এবং Double Margin on Floated Elements এই সমস্যাই পরে নাই এমন লোক কমই আছে তবে এটা খুব সহজেই সমাধান করা যাই জধুমাত্র যেই div কে Floating করা হই তাতে display:inline and overflow:hidden যুক্ত রাখলেই হবে।



#টেমপ্লেট পরিক্ষার জন্যে যত সম্ভব ব্রাউজার এবং ভার্সন ব্যাবহার করেন আর যেহেতু IE তে সমস্যা বেশি হই তাই সম্ভব হলে এক্তাদিন ভার্সন IE তে চেস্ট করে । আর যেহেতু এক পিসিতে একাধিক ইনটারনেট এক্সপ্লোরার ব্যাবহার করা যাই না তাই এটা http://tredosoft.com/Multiple_IE অথবা http://utilu.com/IECollection/ দ্বারা করতে পারবেন তবে টা বাধ্যতামূলক নই।



#খুব খুব বেশি প্রয়োজন না হলে Lucida ফোন্ট ব্যাবহার করবেন না । আর এটা ব্যাবহার করলে কি সমস্যা হই টা নিজে একটু দেখে নেন IE পুরাতন ভার্সনে।



#ইমেজ এর জন্যে alt tag অবশ্যই ব্যাবহার করবে হবে এটা শুধু সার্চ ইঞ্জিনকেই পড়তে সাহায্য করে না এটা একটা গুড প্র্যাকটিস আর Flash and Javascript ব্যাবহার করা থেকে যত দূর সভব দূরে থাকতে হবে বিশেষত Navigation এ কোন ভাবেই ফ্ল্যাশ ব্যাবহার করা যাবে না ।



#আমাদের গ্রুপে অনেকেই গুগল ফোন্টের নিয়ে অনেক সময় সমস্যা পরার কথা শেয়ার করে তাদের জন্যে বলতেছি আপনারা এখানে একটু চোখ বুলিয়ে নেন কিভাবে আসলে গুগল ফোন্ট কাজ ও ব্যাবহার করা যাই এবং আরও অনেক কিছু। আর কেউ কেউ দেখি css যেই জাইগাই ইচ্ছা @import tag দ্বারা গুগল ফোন্ট ব্যাবহার করেন। আপনারা একটু আনে বানে ব্যাবহার করে এখানে http://jigsaw.w3.org/css-validator একটু চেক করে নিয়ে যে উনারে কি বলে। যাই হোক এটা অবশ্যই প্রথমে কল করাটাই স্টান্ডার্ট।



#আমারা অনেকেই Dreamweaver এবং KompoZer ব্যাবহার করি । আমি অনেক জাইগাই দেখিছি এটা ক্রস ব্রাউজার এর জন্যে নাকি অনেক ভাল। অর্থাৎ অটো Vendor prefix এবং নানা রকম কোড জেনারেট করে এগুলা যতই তাইরে নাইরে কোড জেনারেট করুক না কেন ভাল মানের টেম্পলেট এর ক্ষেত্রে এটা কখনই সম্পূর্ণ রুপে ক্রস ব্রাউজার সাপোর্ট করতে পারে নাই সামনেও পারবে না। যখন পারবে তখন ওয়েব ডিজাইনার আর থাকবে না । সব সফটওয়্যার দিয়েই করা হবে। তাই এই গুলা পরিত্যাগ করুন(ব্যাগ্তিগত মতামত)।



#আরও কিছু ইন্টারনেট এর বাগ এবং তার সমাধান পেতে এই পোস্ট দুইটি পড়ুন অতি মনোযোগ সহিত।

http://net.tutsplus.com/tutorials/html-c...-fix-them/

http://coding.smashingmagazine.com/2010/...ss-coding/



৪. এতক্ষন অনেক স্টান্ডার বিষয় নিয়ে কথা বললাম এখন একটু হাতুড়ে বিষয় নিয়ে কথা বলি আমি এইটারে বলি Hard Way মানে সুজা আঙ্গুলে ঘি না উটলে আঙ্গুল বাকানো। সেটা হল কিন্ডিশনাল মন্তব্য(Conditional Comments/Stylesheet)। অনেকেই এর সাথে পরিচিত তাই বেশি কিছু এটা আলোচনা করবো না। এটা তখনই ব্যাবহার করা উচিত এবং করার নিয়ম যখন আপনি সকল কিছু ঠিক ভাবে করার পরেও সমস্যা করলে তখন কোন শেষ এটা একটা অনেক কার্যকরি একটা পন্থা এবং শেষ পন্থা । আর এটা কি ভাবে ব্যাবহার করতে হবে তার জন্যে এই দুইটা টিউটোরিয়াল যথেষ্ট

1. http://webdesignerwall.com/tutorials/css...t-explorer

2. http://css-tricks.com/how-to-create-an-i...tylesheet/



৫. এখন প্রশ্ন হল সব সমস্যা কি শুধু ইন্টারনেট এক্সপ্লোরারের অন্য ব্রাউজারের কি হই এই সব সমস্যা হই না ? আসলে প্রত্যক ব্রাউজারই বাগ আছে তবে ইন্টারনেট এক্সপ্লোরারের এত বেশি যে তা শুরু করলে শেষ করা সম্ভব না। হ্যা অন্ন ব্রাউজারে ও সমস্যা আছে । এমন অনেক ফিচার্ড আছে যা মজিলাতে একদম ১০০% ঠিক ভাবে শোঁ করে না সেটা আবার অন্য ব্রাউজার যেমন সাফারিতে করে। উদাহারন স্রুপ বলা যাই যে মোবাইল ওয়েব এপ্লিকেশন এবং মোবাইল এর যে কোন কাজ যেমন রেস্পন্সিভ এর জন্যেও সব চেয়ে ভাল ব্রাউজার হচ্চে সাফারি । এটাতে সেই সব এফেক্ট/যেই ভাবে শো করে তা ট্যাবলেট এবং আইপেড এ প্রাই সেম এফেক্ট শোঁ করে যা অন্য ব্রাউজারে পাওয়া সম্ভব না তাই অনেকে মোবাইল কাজ টেস্ট করার জনে এটা ব্যাবহার করে। তবে ওয়েব টেম্পলেট এ তুলনা মূলক একটু কমই পার্থক্য হই তবে অনেক ক্ষেত্রেই হতে পারে । আমি নিজেও এর ভুক্ত ভুগি। এখন কথা হইতেছে ইন্টারনেট এক্সপ্লোরারের এর জন্যে তোঁ কন্ডিশনাল কমেন্টস বা সিএসএস ব্যাবহার করা যাই এগুলা জন্যে কিভাবে ব্যাবহার করা যাই যদি প্রয়োজন হই। আর প্রয়োজন হবে না বললে ভুল আমি যত গুলা বেশি ফিচার্ড কাজ/প্রেক্টিস করেছি তার ৭০%ই একটু না একটু ভিন্নতা পাইছি সেই গুলা ঠিক করার জনেও আমার Hard Way ব্যাবহার করেছি। তবে এই ব্রাউজার গুলার জন্যে ইন্টারনেট এক্সপ্লোরারের এর মত সিএসএস করে ব্যাবহার করা যাই না এটা করতে হলে একটা javascript ফাইল কল করতে হবে তার পরে সিএসএস এ কাজ করতে হবে আর এটা করা অনেক সহজ শুধুমাত্র এই http://rafael.adm.br/css_browser_selector/ টিউটোরিয়ালটা দেখেন তাহলেই পারবেন। আর একটা এখানে যদিও একটা জিনিষ দেওয়া নাই তবে সব দেওয়া থাকবে এটা আশা করা ঠিক না। আর সেটা হল সিলেক্টর এবং আমি যে ভাবে এই সিলেক্টর গুলা ব্যাবহার করি যেমন Chrome এর জন্যে আলাদা ভাবে শুধু chrome না লিখে এভাবে লিখেন webkit, safari, chrome তার পরে তার স্টাইল। তাহলে এক সাথে safari,chrome ও webkit জাতিয় সব ব্রাউজার এর জন্যে একবারে কাজ হইয়ে যাবে যদি আলাদা আলাদা প্রয়োজন হই তাহলে তোঁ কিছু করার নাই তবে আমি আজ পর্যন্ত এদের নিজেদের জাতের মধ্যে যথেষ্ট মিল পাইছি । আর এটা ডাউনলোড লিংক http://github.com/rafaelp/css_browser_se...elector.js



--------------------------------------------------------------------------------------------------------------------------------------

এই গুলা সবই একদম বিগিনার দের জন্যে জানি সবাই এর সম্পর্কে ধারনা আছে তার পরেও নতুন দের জন্যে লিখা আর যদি ভাল সারা পাই তাহলে এর এডভান্স পার্ট টাও তারাতারই দিবো। আর একটা কথা আমি নিজে এখন শিকতেছি তাই এখানে ভুল ইনফরমেশন থাকতেই পারে আর লেখার কথা তো বললামই না বাব দাদার আমলেও লিখি নাই । আর এত বড়তো নাই !! । ভুল হলে ক্ষমা করবেন। আর একটা ছোট্ট কথা আপনারা যারা শিকতে চান তারা w3schools তারে বাদে শিকেন কারণ এখানে এত সহজে সব কিছু শিখান হইয়েছে। মানে অনেক বিস্তারিত বা বলে কোন রকম ছোট ছোট উদাহারন এবং অল্প পরিমাণ বিবরন দিয়ে শুরু চলে গেছে এবং এর থেকে দেখে যারা শিকতেছে তাদের থেকে যারা আবার অন্য জাইগাই নিজেদের জালাই না করে কাজে লেগে বা বলে যে ভাই HTML CSS শেষ করে ফেলেছি। তার কাজে গেলে অনেক সমস্যায় পরে। বই এর মত পিস্টা উলটাইয়ে চলে গেলে নিজেরই ক্ষতি কারান এখানে আপনি কাজ না জানলে পারবেন না আর না পারলে আপনি কি পড়েছেন তারও লাভ হবে না। এটা তো স্কুল এর মত সার্টিফিকেট হলেই সে ভাল ছাত্র হওয়ার কোন যাইগা না। জানি এই বিষয়ে অনেকেই এর তিব্র প্রতিবাদ করবেন। তাই যারা w3schools এর ভক্ত তারা ওখান থেকে শিকেন ওটাও ভাল তবে যদি একবারে শিকতে চান তাহলে সরাসরি প্রত্যক্টা অফিসিয়াল সাইট থেকে শিকুন। যেমন। http://w3.org, http://php.net/, http://jquery.com/ ইত্যাদি। ধন্যবাদ


লেখাঃ লিমন ভাই

Read More

WordPress Shortcode এর জন্য কিছু প্রয়োজনীয় কোড।

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

শোট কোডের মধ্যে কাস্টম পোস্টঃ শটকোডের মধ্যে কাস্টম পোস্ট নিয়ে আসার জন্য নিছের কোডটি ব্যবহার করুন।

function department_shortcod($atts){
extract( shortcode_atts( array(
'category' => '',
), $atts, 'department' ) );
    $q = new WP_Query(
        array('posts_per_page' => '6',
'post_type' => 'department',/* Here use post-type*/
'department_cat' => $category,
)
        );
$list = '
';/* Here use befour div of your post */
while($q->have_posts()) : $q->the_post();
$idd = get_the_ID();

$list .= '/* Here use your code for post */';       
endwhile;
$list.= '
';
wp_reset_query();
return $list;
}


add_shortcode('deparment', 'department_shortcod');



আরো প্রয়োজনিয় কিছু কোডঃ
# শটকোডের মধ্যে পোস্টের ডাইনামিক টাইটেল আনতে get_the_title(); এই কোডটি ব্যবহার করুন।
# শটকোডের মধ্যে পোস্টের ডাইনামিক লিঙ্ক  আনতে get_permalink(); এই কোডটি ব্যবহার করুন।
# উইজেডের মধ্যে শটকোড সাপোট করাতে add_filter('widget_text', 'do_shortcode'); এই কোডটি ব্যবহার করুন।
# কমান্টের  মধ্যে শটকোড সাপোট করাতে add_filter( 'comment_text', 'do_shortcode' ); এই কোডটি ব্যবহার করুন।
# এক্সা প্টের  মধ্যে শটকোড সাপোট করাতে add_filter( 'the_excerpt', 'do_shortcode'); এই কোডটি ব্যবহার করুন।

Read More

রেস্পন্সিভ ভিডিও ওয়েব ডিজাইন

In css:

.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.videowrapper iframe,
.videowrapper object,
.videowrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Read More

আমরা কি CSS Shorthand গুলো সঠিকভাবে ব্যবহার করছি আসুন জেনে নেই

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



BACKGROUND

____________________________________________________





ধরুন কোন একটি এলিমেন্টের  background  দিতে হবে । আমরা অনেক ভাবেই কাজটি করতে পারি । background  দেয়ার সময় আমরা অনেক ধরনের  property ব্যবহার করি । যেমন -



element {



  background-color: color || #hex || (rgb / % || 0-255);

  background-image:url(URI);

  background-repeat: repeat || repeat-x || repeat-y || no-repeat;

  background-position: X Y || (top||bottom||center) (left||right||center);

  background-attachment: scroll || fixed;



}



উপরে যে  background  property  গুলো ব্যবহার করা হয়েছে সেগুলো  মাত্র একটি লাইনের মাধম্যেও দেয়া যায় । যেমন -



BACKGROUND SHORTHAND:



element {



background: #fff url(image.png) no-repeat 20px 100px fixed;



}



***এখানে ধারাবাহিকতা আপনাকে ঠিক রাখতে হবে ।  color >> image >> repeat >> position >> attachment





আর একটি ব্যাপার হচ্ছে কোন একটি  property যদি আমরা না দেই তাহলে কি হবে । default  background property  গুলো হচ্ছে -



DEFAULT BACKGROUND PROPERTY VALUES:



element {



  background-color: transparent;

  background-image: none;

  background-repeat: repeat;

  background-position: top left;

  background-attachment: scroll;



}



যেমন ধরুন আপনি শুধু  background property  হিসেবে color এবং  image দিলেন ।



element {



background:red url(image.png);



}



আসলে ব্রাউজার এটা দেখাবে এভাবে -



element {



background:red url(image.png) repeat top left scroll;



}



লক্ষ্য করুন এখানে repeat, positon  এবং attachment  property এর default values দেখাবে ।



FONT

________________________________________





Font  এর  ব্যাপারটা অনেকটা  background  এর মতই । Font  এর আমরা  সাধারনত যেসব property ব্যবহার করি -



FONT PROPERTIES:



element {



font-style: normal || italic || oblique;

font-variant:normal || small-caps; font-weight: normal || bold || bolder || || lighter || (100-900);

font-size: (number+unit) || (xx-small - xx-large); line-height: normal || (number+unit); font- family:name,"more names";



}



FONT DEFAULT PROPERTIES:



element {



font-style: normal;

font-variant:normal;

font-weight: normal;

font-size: inherit;

line-height: normal;

font-family:inherit;



}



FONT SHORTHAND PROPERTY:



element {



font: normal normal normal inhert/ normal inherit;



}



// font-style >> font-variant >> font-weight >> font-size >> line-height >> font-family



BORDER

_____________________________________________________________________





BORDER PROPERTIES:



element {



border-width: number+unit;

border-style: (numerous);

border-color: color || #hex || (rgb / % || 0-255);



}



THE BORDER SHORTHAND PROPERTIES:



element {



border: 4px groove #fff;



}



// width >> style >> color



একটা উদাহরন দেখলে  এই ব্যাপারগুলো বুঝতে সুবিধা হবে -



p { border:solid blue; }/* will create a '3px' solid blue border... who knows where 3px came from?? */



p { border:5px solid; }/* will create 5px solid 'black' border... default must be black?? */



p { border:dashed; } /* will create a '3px' dashed 'black' border... 3px black lines unite! */



p { border:10px red; } p { border:10px; } p { border:red; } /* তিনটি কোড কাজ করবে না কারন হচ্ছে আপনাকে অবশ্যই border-style দিতে হবে । যদি color না দেন তবে ডিফল্টভাবে black color দেখাবে । */





এই উদাহরনটি দেখেন -



p { border:dotted; color:red; } /* will create a 3px dotted red border */



body { color:blue; } body p { border:5px solid; } /* will create a 5px solid blue border */



***একটা বিষয় লক্ষ্য করেন, এখানে  p  কালার  red  এবং body এর কালার  blue কিন্তু আমরা যখন body  p এর  border দিলাম color property না দিয়ে তখন default ভাবে body কালার border এর কালার হিসেবে নিবে।



MARGIN AND PADDING:

_________________________________________________________





Margin এবং Padding এর  জন্য সবচেয়ে সহজ উদাহরন হচ্ছে  ঘড়ি ।



MARGIN PROPERTIES:



element {



margin-top: number+unit;

margin-right: number+unit;

margin-bottom: number+unit;

margin-left: number+unit;



}



MARGIN SHORTHAND PROPERTY:



element { margin: auto auto auto auto; } /* top >> right >> bottom >> left */





যেকোন এলিমেন্টে মার্জিন শর্টহ্যান্ড দেয়ার সময় ঘড়ির কাটার কথা খেয়াল রাখবেন । প্রথমে উপরের মার্জিন, ডান, নিচে এবং সবশেষে বায়ে এর মার্জিন । Margin কে আরও সুন্দর  এবং সহজভাবে দেয়া যায় ।



 element { margin:10px; }/* adds a 10px margin to all four sides */



element { margin:20px 5px; }/* adds a 20px margin to top and bottom and a 5px margin to left and right */



 element { margin:50px 10px 300px; }/* adds a 50px margin to top and a 10px margin to left and right and a 300px margin to bottom */



Padding  এর  ক্ষেত্রে একই ভাবে দিতে হবে।

(collected)

Read More