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

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


আমরা শেষ করেছিলাম নিচের 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>






এখানে খেয়াল করুন প্রথমে <table cellpadding="0" cellspacing="0" border="1" align="center"> এই coding এরalign="center" coding টি আপনার টেবিলটাকে ওয়েব পেজের মাঝে নিয়াছে, align="left", align="right" দিয়ে Practiceকরুন।










এবার প্রথম সারির প্রথম ঘর অর্থাৎ প্রথম tr এর td এর ভিতর যান










<td width="100"> </td>


এবার > < এর মাঝে লিখুন Name এবং পরের <td width="400"> </td> এর > < এর মাঝে লিখুন <input type="text" name="email" placeholder="Enter your email"/>






লেখার নিয়মঃ আগের মতই ড্রিমওয়েভার এ input type থেকে শুরু করুন, একটু লিখলেই অপশন show করবে, অপশন থেকে enter দিয়ে সঠিক coding টি লিখুন, কখনো অপশন show না করলে space চাপুন অপশন আসবে। মনে রাখবেনplaceholder="Enter your name" এই coding টা Dreamweaver এর অপশনে আসবেনা আপনাকে মুখস্ত লিখতে হবে।






অর্থাৎ আমাদের প্রথম tr টি হবে নিচের মত






<tr height="50">


<td width="100">Name</td>


<td width="400"><input type="text" name="name" placeholder="Enter your name"/></td>






সব মিলিয়ে coding টা হবে






































<table cellpadding="0" cellspacing="0" border="1" align="center">


<tr height="50">


<td width="100">Name</td>


<td width="400"><input type="text" name="name" placeholder="Enter your name"/></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>














এবার Ctrl + S দিয়ে page টি save করুন এবং Run করুন করলে নিচের চিত্রের মত দেখা যাবে...............



















Coding বিশ্লেষণ দেখুন


লক্ষ্য করেন <td width="100">Name</td> এর জন্য টেবিলের প্রথম সারির প্রথম ঘরে Name লেখা এবং


<td width="400"><input type="text" name="name" placeholder="Enter your name"/></td> এর জন্য টেবিলের প্রথম সারির ২য় ঘরে হালকা রঙের place টা লেখাসহ show করেছে, মনে রাখবেন placeholder="Enter your name" এই codingটা Dreamweaver এর অপশনে আসবেনা আপনাকে মুখস্ত লিখতে হবে। Enter your name এর পরিবর্তে আপনি যা লিখবেন সেটাই হালকা রঙ্গে ২য় ঘরে দেখা যাবে।






২য় tr টি হবে


<tr height="50">


<td >Email</td>


<td ><input type="text" name="email" placeholder="Enter your email"/></td>


</tr>






৩য় tr টি হবে


<tr height="50">


<td >Gender</td>


<td >


<input type="radio" name="gender" value="male"/>Male


<input type="radio" name="gender" value="female"/>Female


<input type="radio" name="gender" value="common_gender"/>Common Gender


</td>


</tr>






৪র্থ tr টি হবে


<tr height="50">


<td >Country</td>


<td >


<select name="country">


<option>Select your country</option>


<option>Bangladesh</option>


<option>Pakistan</option>


<option>Spain</option>


<option>England</option>


<option>USA</option>


</select>


</td>


</tr>






৫ম tr টি হবে






<tr height="50">


<td >Picture</td>


<td ><input type="file" name="picture" /></td>


</tr>










৬ষ্ঠ tr টি হবে


<tr height="50">


<td >


Interest


</td>


<td >


<input type="checkbox" />Sports


<input type="checkbox" />Reading


<input type="checkbox" />Traveling


</td>


</tr>






৭ম tr টি হবে


<tr height="50">


<td >





</td>


<td >


<input type="submit" value="GO" />





</td>


</tr>


৭ম tr টিতে ১ম ঘরতি খালি তাই ১ম <td >





</td>


ফাকা থাকবে, এবং ২য় <td> তে GO বাটনের জন্য লিখতে হবে input type="submit" value="GO" /> উল্লেখ্য GO এর স্থানে সাধারণত SUBMIT ব্যবহার করা হয়। আপনি যেকোনো নাম ব্যবহার করতে পারেন।


সবটুকু coding নিজে নিজে নিয়মানুসারে ধাপে ধাপে করতে হবে, না বুঝলে কমেন্ত করে জানাবেন আমি হেল্প করবো, কিন্তু দয়াকরে কপি করে কাজ শেষ করবেন না, তাহলে শিখতে পারবেননা। আর হ্যাঁ যত বেশি practice করবেন তত বেশি শিখবেন ।


সব মিলিয়ে coding টা হবে


<table cellpadding="0" cellspacing="0" border="1" align="center">


<tr height="50">


<td width="100">Name</td>


<td width="400"><input type="text" name="name" placeholder="Enter your name"/></td>


</tr>


<tr height="50">


<td >Email</td>


<td ><input type="text" name="email" placeholder="Enter your email"/></td>


</tr>


<tr height="50">


<td >Gender</td>


<td >


<input type="radio" name="gender" value="male"/>Male


<input type="radio" name="gender" value="female"/>Female


<input type="radio" name="gender" value="common_gender"/>Common Gender


</td>


</tr>


<tr height="50">


<td >Country</td>


<td >


<select name="country">


<option>Select your country</option>


<option>Bangladesh</option>


<option>Pakistan</option>


<option>Spain</option>


<option>England</option>


<option>USA</option>


</select>


</td>


</tr>


<tr height="50">


<td >Picture</td>


<td ><input type="file" name="picture" /></td>


</tr>


</tr>


<tr height="50">


<td >


Interest


</td>


<td >


<input type="checkbox" />Sports


<input type="checkbox" />Reading


<input type="checkbox" />Traveling





</td>


</tr>


<tr height="50">


<td >





</td>


<td >


<input type="submit" value="GO" />





</td>


</tr>


</table>













এবার Ctrl + S দিয়ে page টি save করুন এবং Run করুন করলে নিচের চিত্রের মত দেখা যাবে...............












এবার প্রথম coding অর্থাৎ <table cellpadding="0" cellspacing="0" border="1" align="center"> এরborder="1" পরিবর্তন করে 0 ( শুন্য ভুলেও o দিবেননা ) অর্থাৎ প্রথম coding টি হবে

<table cellpadding="0" cellspacing="0" border="0" align="center">

আবার এবার Ctrl + S দিয়ে page টি save করুন এবং Run করুন করলে নিচের চিত্রের মত দেখা যাবে...............








পেয়েগেলেনতো সেই কাঙ্খিত ফর্ম।





শিখেগেলেনতো এইচটিএমএল দিয়ে প্রফেশনাল ফর্ম তৈরি । এই ফর্ম দিয়েই আমরা পিএইচপি ফর্ম validation শিখবো পরবর্তীতে।

সবটুকু coding নিজে নিজে নিয়মানুসারে ধাপে ধাপে করতে হবে, না বুঝলে কমেন্ত করে জানাবেন আমি হেল্প করবো, কিন্তু দয়াকরে কপি করে কাজ শেষ করবেন না, তাহলে শিখতে পারবেননা। আর হ্যাঁ যত বেশি ভুল করবেন তত বেশি শিখবেন ।





বারবার করুন এবং practice এর সময় বিভিন্ন coding পরিবর্তন করে সেভ করে Run করুন এবং বোঝার চেষ্টা করুন codingএর কি পরিবরতনে ওয়েব পেজে কি পরিবর্তন হল।









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





আগামী পোস্ট থেকে ধারাবাহিক প্রফেশনাল ওয়েব ডিজাইন নামে পোস্ট দেওয়া হোবে, যেখানে দেখানো হবে ধারাবাহিকভাবে DIV ট্যাগ ব্যাবহার করে এইচটিএমএল সিএসএস ( HTML


+ CSS = XHTML) একসাথে External Stylesheet ব্যবহার করে প্রফেশনাল ওয়েব ডিজাইনিং । অর্থাৎ টিউটোরিয়াল গুলো আসবে ধারাবাহিক প্রফেশনাল ওয়েব ডিজাইন XHTML ( HTML+CSS = XHTML)-১,২,৩ ধারাবাহিকভাবে






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


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






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

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

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

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

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

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

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

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

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

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

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

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

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