ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৭ ( এইচটিএমএল দিয়ে ফর্ম তৈরি করুন, টেবিল সংযোজন-I )

নিচের চিত্রটি খেয়াল করুন.....................























সম্পূর্ণ Coding নিচের লিঙ্ক থেকে DOWNLOAD করুন


DOWNLOAD






আপনারা এ রকম ফর্ম সচারাচর বিভিন্ন ওয়েব সাইটে 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 ডাউনলোড করুন নিচের লিঙ্ক থেকে






DOWNLOAD






প্রথম থেকে এ পর্যন্ত বারবার Practice করুন, যত Practice করবেন তত শিখবেন । আর যে যত বেশি ভুল করবেন সে তত বেশি শিখবেন, নিজের বাস্তব অভিজ্ঞতা থেকে বলছি। টেবিল কিভাবে প্রফেশনালই সংযোজন করতে হয় সেটা কিন্তু শেষ বললেই চলে। যেটুকু coding করলেন টা বারবার করুন এবং practice এর সময় বিভিন্ন coding পরিবর্তন করে সেভ করে Run করুন এবং বোঝার চেষ্টা করুন coding এর কি পরিবরতনে ওয়েব পেজে কি পরিবর্তন হল।






তাছাড়া ড্রিমওয়েভার ( Dreamweaver ) এ coding অপশন দেওয়াই আছে। কখনো যদি অপশন show না করে তবে space বাটন চাপুন চলে আসবে।






আগামি পোস্ট ঠিক আজকের পর থেকে শুরু করবো এবং প্রথম চিত্রের মত ফর্ম তৈরি করবো। অর্থাৎ আগামী পোস্টটা হবে এইচটিএমএল দিয়ে ফর্ম তৈরি করুন (টেবিল সংযোজন )-২ নামে খুব দ্রুতই পোস্টটা করবো, চেষ্টা করবো আজকেই করতে।










এইচটিএমএল দিয়ে ফর্ম তৈরি করুন (টেবিল সংযোজন )-২ পেতে নিচের লিঙ্কে ক্লিক করুন






Web design






আপনাদের সবাইকে অনেক অনেক ধন্যবাদ, আমার ব্লগের সাথেই থাকুন।


আরও জানতে visit করুন প্রফেশনাল ওয়েব ডিজাইন।






কোন সমস্যা হলে বা প্রশ্ন থাকলে ব্লগে দয়াকরে comment post করে জানাবেন।

"আমি রফিকুল ইসলাম, একজন ফ্রীলাঞ্চার ও ওয়েব ডিজাইনার, আপনাদের জন্য এখন থেকে প্রকাশ করব ওয়েব ডিজাইন এর পরিপূর্ণ ধারাবাহিক টিউটোরিয়াল ।

আমার ধারাবাহিক টিউটোরিয়াল প্রকাশিত হবে শুধু মাত্র আমার ব্লগ ProWebdesign4u এবং টেকনোট্রিক বিডি তে । "

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ১

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ২ ( ড্রিমওয়েভার ডাউনলোড ) 

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৩ (ওয়েব ডিজাইনে ড্রিমওয়েভার ব্যবহার)

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৪ ( HTML এ লেখা প্রোগ্রামের বিভিন্ন অংশ বিশ্লেষণ )

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৫ ( হেডিং ট্যাগের ব্যবহার )

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৬ ( HTML এর সাধারন ট্যাগ সমূহ )

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৭ ( এইচটিএমএল দিয়ে ফর্ম তৈরি করুন, টেবিল সংযোজন-I )

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৮ ( এইচটিএমএল দিয়ে ফর্ম তৈরি করুন , টেবিল সংযোজন II )

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৯ ( চমৎকার চলন্ত এইচটিএমএল কোড করুন marquee এর ব্যবহার )

ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ১০ ( XHTML [HTML+CSS = XHTML] -১ )