এইচটিএমএল দিয়ে ফর্ম তৈরি করুন (টেবিল সংযোজন
)-১ এর পর থেকে শুরু করছি
আমরা শেষ করেছিলাম নিচের 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 করুন করলে নিচের চিত্রের মত দেখা যাবে...............
<table cellpadding="0" cellspacing="0" border="0" align="center">
আবার এবার Ctrl + S দিয়ে page টি save করুন এবং Run করুন করলে নিচের চিত্রের মত দেখা যাবে...............
পেয়েগেলেনতো সেই কাঙ্খিত ফর্ম।
শিখেগেলেনতো এইচটিএমএল
দিয়ে প্রফেশনাল ফর্ম তৈরি । এই ফর্ম দিয়েই আমরা পিএইচপি
ফর্ম validation শিখবো পরবর্তীতে।
সবটুকু coding নিজে নিজে নিয়মানুসারে ধাপে ধাপে করতে হবে, না বুঝলে কমেন্ত করে জানাবেন আমি হেল্প করবো, কিন্তু দয়াকরে কপি করে কাজ শেষ করবেন না, তাহলে শিখতে পারবেননা। আর হ্যাঁ যত বেশি ভুল করবেন তত বেশি শিখবেন ।
সবটুকু coding নিজে নিজে নিয়মানুসারে ধাপে ধাপে করতে হবে, না বুঝলে কমেন্ত করে জানাবেন আমি হেল্প করবো, কিন্তু দয়াকরে কপি করে কাজ শেষ করবেন না, তাহলে শিখতে পারবেননা। আর হ্যাঁ যত বেশি ভুল করবেন তত বেশি শিখবেন ।
বারবার করুন এবং practice এর সময় বিভিন্ন coding পরিবর্তন করে সেভ করে Run করুন এবং বোঝার চেষ্টা করুন coding
এর কি পরিবরতনে ওয়েব
পেজে কি পরিবর্তন হল।
তাছাড়া ড্রিমওয়েভার ( Dreamweaver ) এ coding অপশন দেওয়াই আছে। কখনো
যদি অপশন show না করে তবে Ctrl + space বাটন চাপুন চলে আসবে।
আগামী পোস্ট থেকে ধারাবাহিক
প্রফেশনাল ওয়েব ডিজাইন নামে পোস্ট দেওয়া হোবে, যেখানে দেখানো হবে
ধারাবাহিকভাবে DIV
ট্যাগ ব্যাবহার করে
এইচটিএমএল সিএসএস (
HTML
+ CSS = XHTML) একসাথে External Stylesheet ব্যবহার করে প্রফেশনাল ওয়েব ডিজাইনিং । অর্থাৎ
টিউটোরিয়াল গুলো আসবে ধারাবাহিক প্রফেশনাল ওয়েব ডিজাইন XHTML ( HTML+CSS = XHTML)-১,২,৩ ধারাবাহিকভাবে
আপনাদের
সবাইকে অনেক অনেক ধন্যবাদ, আমার ব্লগের সাথেই থাকুন।
কোন সমস্যা হলে বা প্রশ্ন
থাকলে ব্লগে দয়াকরে comment post করে জানাবেন।
0 comments:
Post a Comment