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


 গত কোর্সের টিউন দেখুন এখানেঃ http://www.techtunes.com.bd/web-design/tune-id/253692
 গত কোর্সের টিউটোরিয়াল দেখুন এখানেঃ http://www.youtube.com/watch?v=2QKCzlZEIt0
এইচটিএমএল বেসিক টিপস
এখানে এইচটিএমএল এ প্রয়োজনীয় কিছু টিপস থাকবে। যেগুলো আপনাকে ভালো মানের কোড লিখতে ও সহজে কোড লিখতে সহায়তা করবে।
পিএসডি টেমপ্লেট এর এইচটিএমএল মার্কাপ তৈরি
আমরা পিএসডি টেমপ্লেট টিকে সম্পুর্ন এইচটিএমএল এ পরিণত করবো। এটা অবশ্য আমরা কোন মেশিন এর সাহায্যে করবো না আমরা পিএসডি ফাইল টি দেখে দেখে সেটার এইচটিএমএল মার্কাপ তৈরি করবো।

 Youtube Link: https://www.youtube.com/watch?v=39tDfHnZZPs
এইচটিএমএল মার্কাপ লিখার সময় আমরা কমেন্ট ব্যবহার করবো।

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

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

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

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

সেটিকা লাইভ দেখতে ও পারবেন। ওয়েব ডিজাইন ও ওয়েব ডভেলপমেন্ট এর জগতে ফায়ারবাগ খুবি জনপ্রিয় এবং প্রশংসনীয় একটি প্লাগিন।
এটি আপনি মোজিলা ফায়ারফক্স এ ব্যবহার করতে পারবেন। যেকোনো ওয়েবপেজ এ গিয়ে রাইট ক্লিক করে Inspect elements with Firebug এ ক্লিক করলেই দেখবেন পেজের নিচে একটি বক্স ওপেন হয়ে এবং আপনি এখানে এডিট করতে পারছেন।
ফায়ারবাগ ডাউনলোড করুনঃ https://getfirebug.com/
প্রথমেই আমাদের কে একটি প্রোজেক্ট এনভাইরনমেন্ট তৈরি করতে হবে।

যাতে ভবিষ্যতে আমাদের কাজ করতে সুবিধা হয়।

অথবা ইমেজ গুলোর জিপ ফাইল ডাউনলোড করে নিনঃ https://db.tt/BXudDETs
এবার এইচটিএমএল ফাইলটিতে কিছু বেসিক মার্কাপ যুক্ত করতে হবে।
হেডার এ আমাদের দুইটি অংশ, লোগো এবং নেভিগেশন বার। তাহলে চলুন এর এইচটিএমএল কোড টি লিখে ফেলি।
এখানে আমাদের স্লাইডার বসাতে হবে।

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

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

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


তবে অনেকেই হোম টাস্ক জমা দিয়েছেন। ধন্যবাদ আপনাদের।  আমি হয়তো সবগুলো হোম টাস্ক ঠিক মত দেখতে পারি নি। যেগুলো দেখেছি সবগুলো টিউমেন্ট এ রিপ্লাই দিতে পারিনি। তবে যেটা বুঝলাম যে সবাই মোটামোটি ভালো করেছেন।

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


পুরো টিউন পড়ে, ভিডিও দেখে নিজে নিজে পিএসডি টেমপ্লেট টির এইচটিএমএল মার্কাপ তৈরি করুন। ইমেজ এবং এইচটিএমএল ফাইল সহ প্রোজেক্ট ফোল্ডার টি জিপ করে নিচের ফর্ম এ জমা দিন। আমার যে প্রোজেক্ট ফাইল টি ডাউনলোড করেছেন, সেভাবে প্রোজেক্ট ফাইল করে জমা দিবেন।
প্রোজেক্ট ফাইল জমা দেয়ার লিঙ্কঃ http://techtun.es/1iEFv5n
প্রশ্ন না করলে কখনোই শেখা যায় না। আজকে যেসব বিষয় টিউনে তুলে ধরা হয়েছে সেসব বিষয়ের উপর প্রাসঙ্গিক ও গঠনমূলক প্রশ্ন করুন।

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


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


হাতে ধরে PSD2HTML পুর্নাঙ্গ চেইন কোর্স এ আপনি ভর্তি হয়েছেন তো? না হলে ভর্তি হয়ে যান বিশাল কমিউনিটির এই চেইন কোর্স এ এবং নিজেকে ঝালাই করে নিন PSD2HTML এ!
প্রায় ৩০০০ টিউজিটর ও টিউমেন্টর ভর্তি হয়েছেন বাংলাদেশের এই প্রথম ও সবচেয়ে বড় অনলাইন PSD2HTML পুর্নাঙ্গ কোর্স এ। আপনি বাদ থাকবেন কেন?
কোর্স এ ভর্তি হতে এই টিউনটি দেখুনঃ
টেকটিউনস এ চালু হচ্ছে!! “হাতে ধরে PSD2HTML পূর্ণাঙ্গ চেইন কোর্স”!! সম্পূর্ণ ফ্রি করুন PSD2HTML এর পূর্ণাঙ্গ কোর্স! সফল ও সঠিক ভাবে কোর্স সম্পন্নকারীরা পাবেন টেকটিউনস ভেরিফাইড সার্টিফিকেট!
নিয়মিত আমার টিউনের আপডেট পেতে চাইলে সাবস্ক্রাইব করুনঃ টেকটিউনস » কম্পিউটার লাভার (ক্লিক করে আপনার ইমেইল দিন এবং ইমেইল থেকে ভেরিফাই করুন)
কম্পিউটার লাভার (রাকিবুল হাসান)
আমার টিউনার পাতা
ফেসবুক ~ টুইটার ~ গুগল প্লাস
।