আসসালামু আলাইকুম, কেমন আছেন? আশা করি মহান আল্লাহ রহমতে ভাল আছেন। আল্লাহ রহমতে আজ উপস্থিত হয়েছি Photoshop এ প্রফেশনাল psd template তৈরীর ধারাবাহিক টিউটোরিয়াল Part 9 (PSD to HTML Convert) নিয়ে। বিগত পর্বে আমরা PSD to HTML এ Convert করার আগে আমাদের যে সকল HTML Tag এবং CSS Property সম্পর্ক ধারনা থাকা একান্ত প্রয়োজন তা জেনে ছিলাম।
আজকে আমরা শিখব HTML এবং CSS ব্যবহার করে কিভাবে একটি Template তৈরী করতে হয়। আমরা প্রথমে খুব সহজ একটি টেমপ্লেট তৈরী করা শিখব, এতে কোন কঠিন CSS Style থাকবে না।
এই টুইটের Source file মাত্র 1kb
এক পলকে দেখে নিন টেমপ্লেটটি দেখতে কেমন হবে।
Step -1
- প্রথমে Project নামে একটি Folder তৈরী করুন।
- এর ভেতরে একটি নতুন টেক্সফাইল (Text File) তৈরি করুন। তারপর একে রিনেম করে এর নাম index.html দিন।
- Image নামে একটি Folder তৈরী করুন।
- CSS নামে একটি Folder তৈরী করুন। এর ভেতরে একটি নতুন টেক্সফাইল (Text File) তৈরি করুন। তারপর একে রিনেম করে এর নাম layout.css দিন।
এবার জানা প্রয়োজন কোন ফাইল কি কাজ করে:
- Index.html হল একটি Template বা Website এর মূল বা প্রধান অংশ। এর মাধ্যমে Contain সমূহকে Browser এ Show করে।
- Layout.css হল একটি Template বা Website এর Style ফাইল। একটি ওয়েব সাইটের সকল লে-আউট এখান থেকে নির্ধারন করা হয়।
”Note: Project এর সকল file গুলো একটি Folder এর মধ্যে রাখতে হবে। সকল ফাইল সমূহ একটি Folder এর মধ্যে থাকে, তাহলে কাজ করতে অনেক সহজ হবে।”
Step -2
এই Template টি মূলত ৫টি ভাগে ভাগ করেছি এবং ৪নং এস্টেপটি কে আবার ৩টি ভাগে ভাগ করেছি। Template টির height: 869px এবং width: 680px ।
Step -3
এবার Project Folder এর, CSS নামে Folder এর ভেতরের layout.css নামক ফাইলটি Notepad++ এ ওপেন করুন। নিচে কোড গুলো লিখুন
body{
background-color:gray;
}
.wrp_body{
background-color:green;
margin:auto;
width:680px;
height:869px;
}
.con_one{
background-color:blue;
width:680px;
height:80px;
}
.con_two{
background-color:yellow;
width:680px;
height:200px;
}
.con_three{
background-color:pink;
width:680px;
height:400px;
}
.con_four{
background-color:;
width:680px;
height:151px;
}
.con_four_left{
background-color:#3ff2db;
float:left;
width:215px;
height:150px;
}
.con_four_center{
background-color:red;
float:left;
width:215px;
height:150px;
}
.con_four_right{
background-color:;
float:left;
width:220px;
height:150px;
}
.con_five{
background-color:blue;
width:680px;
height:151px;
}
Step -4
এবার জানব কোন কোডের কি কাজ
প্রথমে Body দিয়ে শুরু করা হয়েছে ।
body{
background-color:gray;
}
এর অর্থ হল <body> Tag এর ভিতর Contain গুলোর background কালার Green হবে।
৫নং লাইন – .wrp_body হল একটি ক্লাস । এই ক্লাসের ভেতরে যা থাকবে তাদের ৬নং লাইন – background কালার হবে Green,
৭নং লাইন – অবস্থান হবে মঝখানে
৮নং লাইন – এর প্রস্থ হবে 680px
৯নং লাইন – উচ্চতা হবে 869px;
১০নং লাইন –} এর মাধ্যমে ক্লাসের কাজ শেষ করা হয়েছে।
Step -5
.con_one{
background-color:blue;
width:680px;
height:80px;
}
.con_one হল একটি ক্লাস । এই ক্লাসের ভেতরে যা থাকবে তাদের background কালার হবে Blue, এর প্রস্থ হবে 680px উচ্চতা হবে 80px;
Step -6
.con_two{
background-color:yellow;
width:680px;
height:200px;
}
.con_two হল একটি ক্লাস । এই ক্লাসের ভেতরে যা থাকবে তাদের background কালার হবে Yellow, এর প্রস্থ হবে 680px উচ্চতা হবে 200px;
Step -7
.con_three{
background-color:pink;
width:680px;
height:400px;
}
.con_three হল একটি ক্লাস । এই ক্লাসের ভেতরে যা থাকবে তাদের background কালার হবে Pink, এর প্রস্থ হবে 680px উচ্চতা হবে 400px;
Step -8
.con_four{
background-color:;
width:680px;
height:151px;
}
.con_four হল একটি ক্লাস । এই ক্লাসের ভেতরে যা থাকবে তাদের background কালার হবে Class wrp_body এর মত, কারন এখানে কোন কালার দেওয়া হয় নাই । এর প্রস্থ হবে 680px উচ্চতা হবে 400px;
Step -9
.con_four_left{
background-color:#3ff2db;
float:left;
width:215px;
height:150px;
}
.con_four_left হল একটি ক্লাস । এই ক্লাসের ভেতরে যা থাকবে তাদের background কালার হবে :#3ff2db, Float:left মানে ক্লাস গুলোর অবস্থান বাম দিক থেকে হবে। এর প্রস্থ হবে 215px উচ্চতা হবে 150px;
Step -10
.con_four_center{
background-color:red;
float:left;
width:215px;
height:150px;
}
.con_four_center হল একটি ক্লাস । এই ক্লাসের ভেতরে যা থাকবে তাদের background কালার হবে Red, ক্লাস গুলোর অবস্থান বাম দিক থেকে হবে। এর প্রস্থ হবে 215px উচ্চতা হবে 150px;
Step -11
.con_four_right{
background-color:;
float:left;
width:220px;
height:150px;
}
.con_four_right হল একটি ক্লাস । এই ক্লাসের ভেতরে যা থাকবে তাদের background কালার হবে Class wrp_body এর মত, কারন এখানে কোন কালার দেওয়া হয় নাই, ক্লাস গুলোর অবস্থান বাম দিক থেকে হবে। এর প্রস্থ হবে 220px উচ্চতা হবে 150px;
Step -12
.con_five{
background-color:blue;
width:680px;
height:151px;
}
.con_five হল একটি ক্লাস । এই ক্লাসের ভেতরে যা থাকবে তাদের background কালার হবে Blue, এর প্রস্থ হবে 680px উচ্চতা হবে 151px;
Step -13
Project নামে Folder এর ভেতরের index.html নামক ফাইলটি Notepad++ এ ওপেন করুন।
Step -14
এবার নিচে কোড গুলো লিখুন
<html>
<head>
<title>TweetBoyz – Home</title>
<link rel=”stylesheet” href=”css/layout.css” />
</head>
<body>
<div class=”wrp_body”>
<div class=” con_one”> con_one</div>
<div class=”con_two”> con_two </div>
<div class=” con_three”> con_three </div>
<div class=”con_four”>
<div class=”con_four_left”> con_four_left </div>
<div class=” con_four_center”> con_four_center </div>
<div class=”con_four_right”> con_four_right </div>
</div>
<div class=”con_five”> con_five </div>
</div>
</body>
</html>
Step -15
এবার জানব কোন কোডের কি কাজ
১নং লাইন – <html> টেগের মাধ্যমে লাইন শুরু হয়েছে।
২নং লাইন – <head> টেগ শুরু। <head> Tag এর মধ্যে Title, link, Meta, Internal Style, Script, ইত্যাদি থাকে।
৩নং লাইন – <title> টেগ শুরু এবং শেষ । এই টেগের মাধ্যমে ওয়েব পেজে টাইটেল বা হেডিং লেখা হয়।
৪নং লাইন – <link> এর মাধ্যমে বিভিন্ন পেজের লিংক দেওয়া হয়। এখানে CSS folder এর মধ্যে যে layout.css নামক স্টাইল ফাইল আছে তার লিংক দেওয়া হয়েছে।
৫নং লাইনে – </head> টেগ এর শেষ।
৬নং লাইনে – <body> টেগ এর শুরু। এই টেগের মধ্যে যা যা থাকে, তা ব্রাউজারে দেখায়।
৭নং লাইনে – wrp_body নামক একটি Div Tag লিখা হয়েছে। এ Div এর মধ্যে সকল Div এবং Contain থাকবে।
৮নং লাইনে – con_one নামক একটি Div Tag লিখা হয়েছে। এ Div এর মধ্যে Contain থাকবে। যেমন আমরা contain হিসাবে con_one লিখেছি।
Browser ও con_one লিখাটি দেখাবে এবং layout.css ফাইলে মধ্যে con_one নামক ক্লাসে আমরা যে সকল স্টাইল লিখে ছিলাম তাও browser এ দেখাবে।
যেমন আমরা .con_one{background-color:blue; width:680px; height:80px;} লিখে ছিলাম।
৯নং লাইন – con_two নামক একটি Div Tag লিখা হয়েছে। এ Div এর মধ্যে Contain থাকবে। যেমন আমরা contain হিসাবে con_two লিখেছি।
Browser ও con_two লিখাটি দেখাবে এবং layout.css ফাইলে মধ্যে con_two নামক ক্লাসে আমরা যে সকল স্টাইল লিখে ছিলাম তাও browser এ দেখাবে।
যেমন আমরা .con_two{background-color:yellow; width:680px; height:200px;} লিখে ছিলাম।
১০নং লাইন – con_three নামক একটি Div Tag লিখা হয়েছে। এ Div এর মধ্যে Contain থাকবে। যেমন আমরা contain হিসাবে con_three লিখেছি।
Browser ও con_three লিখাটি দেখাবে এবং layout.css ফাইলে মধ্যে con_three নামক ক্লাসে আমরা যে সকল স্টাইল লিখে ছিলাম তাও browser এ দেখাবে।
যেমন আমরা .con_three{background-color:pink; width:680px; height:400px;} লিখে ছিলাম।
১১নং লাইন – con_four নামক একটি Div Tag লিখা হয়েছে। এ Div এর মধ্যে সকল Div এবং Contain থাকবে।
যেমন আমরা contain হিসাবে con_four_left con_four_center con_four_right নামক ৩টি Div লিখেছি।
১২নং লাইন – con_four_left নামক একটি Div Tag লিখা হয়েছে। এ Div এর মধ্যে Contain থাকবে। যেমন আমরা contain হিসাবে con_four_left লিখেছি।
Browser ও con_four_left লিখাটি দেখাবে এবং layout.css ফাইলে মধ্যে con_four_left নামক ক্লাসে আমরা যে সকল স্টাইল লিখে ছিলাম তাও browser এ দেখাবে।
যেমন আমরা .con_four_left{background-color: #3ff2db; float:left; width:215px; height:150px;} লিখে ছিলাম।
১৩নং লাইন – con_four_center নামক একটি Div Tag লিখা হয়েছে। এ Div এর মধ্যে Contain থাকবে। যেমন আমরা contain হিসাবে con_four_center লিখেছি।
Browser ও con_four_center লিখাটি দেখাবে এবং layout.css ফাইলে মধ্যে con_four_center নামক ক্লাসে আমরা যে সকল স্টাইল লিখে ছিলাম তাও browser এ দেখাবে।
যেমন আমরা .con_four_center{background-color:red; float:left; width:215px; height:150px;} লিখে ছিলাম।
১৪নং লাইন – con_four_right নামক একটি Div Tag লিখা হয়েছে। এ Div এর মধ্যে Contain থাকবে। যেমন আমরা contain হিসাবে con_four_right লিখেছি।
Browser ও con_four_right লিখাটি দেখাবে এবং layout.css ফাইলে মধ্যে con_four_right নামক ক্লাসে আমরা যে সকল স্টাইল লিখে ছিলাম তাও browser এ দেখাবে।
যেমন আমরা .con_four_right{background-color:; float:left; width:220px; height:150px;} লিখে ছিলাম।
১৫নং লাইন – </div> টেগ এর মাধ্যমে con_four নাম Div টি শেষ করা হয়েছে ।
১৬নং লাইন – con_five নামক একটি Div Tag লিখা হয়েছে। এ Div এর মধ্যে Contain থাকবে। যেমন আমরা contain হিসাবে con_five লিখেছি।
Browser ও con_five লিখাটি দেখাবে এবং layout.css ফাইলে মধ্যে con_five নামক ক্লাসে আমরা যে সকল স্টাইল লিখে ছিলাম তাও browser এ দেখাবে।
যেমন আমরা background-color:blue; width:680px; height:151px; লিখে ছিলাম।
১৭নং লাইন – </div> টেগ এর মাধ্যমে wrp_body নাম Div টি শেষ করা হয়েছে ।
১৮নং লাইন – </body> টেগ এর শেষ।
১৯নং লাইন – </html> টেগের মাধ্যমে লাইন শেষ করা হয়েছে।
Step -16
টুইট সম্পর্কে কোন প্রশ্ন বা মন্তব্যি একান্ত কাম্য, ভাল হলে কমেন্ট করে জানাবেন ।
ওহা আপনাদের প্রয়োজনীয় কিছু লিং
- এই টুইটের Source File মাত্র 1kb
- এই টুইটের PDF File
- টেকটুইটস এর মুখবইয়ে (Facebook) গুরুপে আশাকরি আপনি সাহায্য পাবেন।
- টেকটুইটস এর আমার লেখা গুলো।
- মুখবইয়ে আমি।
4 comments
Skip to comment form ↓
jakir
08/05/2012 at 6:05 অপরাহ্ন (UTC 6) Link to this comment
অনেক সুন্দর টিউটোরিয়াল।
Abdul Mannan Asif
09/05/2012 at 8:38 পুর্বাহ্ন (UTC 6) Link to this comment
ধন্যবাদ জাকির ভাই
MNUWORLD
09/05/2012 at 12:40 পুর্বাহ্ন (UTC 6) Link to this comment
অনেক সুন্দর লিখছেন। একটা বিষয় এ দ্বিমত আছে… এখানে ক্লাশ না ব্যবহার করে আইডি ব্যবহার করাই মনে হয় স্ট্যান্ডার্ড হবে। ধন্যবাদ সুন্দর একটি লিখার জন্য।
Abdul Mannan Asif
09/05/2012 at 8:40 পুর্বাহ্ন (UTC 6) Link to this comment
ধন্যবাদ আপনার সুন্দর মন্তব্যের জন্য, আগামিতে চেষ্টা করব ইনশাআল্লাহ