নিচের চিত্রটি খেয়াল করুন.....................
আপনারা এ রকম ফর্ম
সচারাচর বিভিন্ন ওয়েব সাইটে Contact Us পেজে, Home পেজে দেখতে পাবেন। এটা প্রফেশনালি টেবিল সংযোজন করে করা হয়। আসুন আমরা
হাতে কলমে এটা করি।
আগের মতই Web
design ফোল্ডারের ভিতর নতুন ফোল্ডার lesson5 খুলুন। আর এর ভিতর index.html খুলুন,
Dreamweaver দিয়ে ওপেন করুন কপি
পেস্ট করে default করুন।
এবার body ট্যাগের ভিতর coding করুন
Coding করার প্রফেশনাল নিয়ম
খুবই সহজ শুধু নিয়ম মেনে
ধাপে ধাপে করতে হবে
প্রথমে
<table cellpadding="0" cellspacing="0"
border="1" align="center">
</table>
লিখতে হবে, লেখার জন্য <table space লিখুন cellpadding enter দিন ডাবল কোটেশন এর ভিতর লিখুন 0 (শুন্য ভুল
করেও o দিবেন না ),
কোটেশন থেকে বাহিরে মাউস
নিন ( Arrow ব্যবহার করতে পারেন) মাউস বাহিরে নিয়ে space দিন লিখুন cellspacing enter দিন ডাবল কোটেশন এর ভিতর লিখুন 0, কোটেশন থেকে বাহিরে মাউস নিন space
দিন লিখুন border enter দিন ডাবল কোটেশন এর ভিতর লিখুন 1,
মাউস বাহিরে নিয়ে space দিন লিখুন align enter দিন ডাবল কোটেশন এর ভিতর
লিখুন center enter দিন > এটা দিয়ে লাইন শেষ,এবার enter দিন মাউস নিচেস,চলে আসবে। </ এটা দিলে </table> close ট্যাগ হয়ে যাবে।
এবার প্রথম লাইন এর শেষে
মাউস নিন ( অর্থাৎ <table cellpadding="0"
cellspacing="0" border="1"
align="center"> এর শেষে ), এবার enter দিন , এন্টার চাপলে মাউস মাঝে
আসবে এবার ট্যাব Tab দিন, Tab দিয়ে লিখুন
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
</tr> close করতে হবে enter দিয়ে মাউস নিচে নিয়ে। এরপর
মাউস <tr> ট্যাগের ভিতরে নিয়ে
<td
width="100"> </td>
<td width="400"> </td> লিখতে হবে।
space, enter দিয়ে যেভাবে coding করেছি, সেভাবে করতে হবে। ঠিক
<table cellpadding="0"
cellspacing="0" border="1"
align="center">
</table>
এর মত ।
সব মিলিয়ে coding টা হবে নিচের মত............
<table cellpadding="0"
cellspacing="0" border="1" align="center">
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
</table>
এখানে লক্ষ্য করুন সুন্দরভাবে
বোঝা যাচ্ছে table ট্যাগের ভিতর tr
ট্যাগ এবং tr ট্যাগের ভিতর td ট্যাগ রয়েছে। tr height="50" নির্দেশ করে টেবিলের
সারির উচ্চতা 50 হবে এবং <td width="100"> </td> মানে প্রথম সেল বা ঘর
লম্বা হবে 100 এবং <td width="400"> </td> এটা মানে ২য় ঘর লম্বা
হবে 400 । এখানে 50,100, 400 মুলত 50 px, 100 px, 400 px, px টা হল সেন্টিমিটার থেকেও ছোট একক। px,
CSS Coding এ
প্রচুর দরকার হবে। এইচটিএমএল এ px ডিফল্ট তাই দেওয়া
লাগেনি।
এবার Ctrl + S দিয়ে page টি save করুন এবং Run করুন করলে নিচের চিত্রের
মত দেখা যাবে...............
বিশ্লেষণী
চিত্র দেখুনঃ
চিত্রের
ব্যাখ্যাঃ
এখানে <tr> মানে টেবিল এর সারি, <td> হল প্রতিটি cell বা ঘর নির্দেশ করে।
আপনারা tr height, td width পরিবর্তন করে সেভ করে Run করে দেখুন কিভাবে কি হয়। আর ও ক্লিয়ার বুঝতে পারবেন।
এবার
আপনার coding এর ভিতরের
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
সিলেক্ট করে Ctrl + c দ্বারা কপি করে, </tr> ট্যাগের শেষে মাউস এনে এন্টার enter চাপুন Ctrl + v দ্বারা পেস্ট করুন, এবার একটা এন্টার চাপুন এবার Ctrl
+ v দ্বারা
পেস্ট করুন, এভাবে ৬ বার কপি পেস্ট করুন। অর্থাৎ মোট ৭ টি tr বা সারি হবে। দেখুন নিচের মত coding
হবে
<table cellpadding="0"
cellspacing="0" border="1" align="center">
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
<tr height="50">
<td width="100"> </td>
<td width="400"> </td>
</tr>
</table>
ঠিক এইরকম আপনার coding টি হতে হবে। এবার বলি ৬ বার কেন কপি করলাম, একদম প্রথমে ফর্মের যে ছবি দেওয়া আছে, সেটাই দেখুন Name, Email,
Gender, Country, Picture, Interest এবং Go বাটনসহ মোট ৭ টি লাইন বা
সারি আছে। আমরা যেহেতু এই ফরমটিই করবো, সেহেতু আমাদের টেবিলের
সারি অর্থাৎ tr হবে ৭ টি।
এবার Ctrl + S দিয়ে page টি save করুন এবং Run করুন করলে নিচের চিত্রের
মত দেখা যাবে...............
সম্পূর্ণ coding ডাউনলোড করুন নিচের লিঙ্ক থেকে
প্রথম থেকে এ পর্যন্ত
বারবার Practice করুন, যত Practice করবেন তত শিখবেন । আর যে যত বেশি ভুল করবেন সে তত বেশি শিখবেন, নিজের বাস্তব অভিজ্ঞতা থেকে বলছি। টেবিল কিভাবে প্রফেশনালই সংযোজন
করতে হয় সেটা কিন্তু শেষ বললেই চলে। যেটুকু coding
করলেন টা বারবার করুন এবং
practice এর সময় বিভিন্ন coding পরিবর্তন
করে সেভ করে Run করুন এবং বোঝার চেষ্টা করুন coding এর কি পরিবরতনে ওয়েব পেজে কি পরিবর্তন হল।
তাছাড়া ড্রিমওয়েভার ( Dreamweaver ) এ coding অপশন দেওয়াই আছে। কখনো
যদি অপশন show না করে তবে Ctrl + space বাটন চাপুন চলে আসবে।
আগামি পোস্ট ঠিক আজকের পর
থেকে শুরু করবো এবং প্রথম চিত্রের মত ফর্ম তৈরি করবো। অর্থাৎ
আগামী পোস্টটা হবে এইচটিএমএল দিয়ে ফর্ম তৈরি করুন (টেবিল সংযোজন
)-২ নামে খুব দ্রুতই পোস্টটা করবো, চেষ্টা করবো আজকেই করতে।
আপনাদের
সবাইকে অনেক অনেক ধন্যবাদ, আমার ব্লগের সাথেই থাকুন।
কোন সমস্যা হলে বা প্রশ্ন
থাকলে ব্লগে দয়াকরে comment post করে জানাবেন।
nice post
ReplyDelete