এইচটিএমএল দিয়ে ফর্ম তৈরি করুন (টেবিল সংযোজন )-১ এর পর থেকে শুরু করছি
আমরা শেষ করেছিলাম নিচের coding পর্যন্ত
আমরা শেষ করেছিলাম নিচের coding পর্যন্ত
এখানে খেয়াল করুন প্রথমে এই coding এরalign="center" coding টি আপনার টেবিলটাকে ওয়েব পেজের মাঝে নিয়াছে, align="left", align="right" দিয়ে Practiceকরুন।
এবার প্রথম সারির প্রথম ঘর অর্থাৎ প্রথম tr এর td এর ভিতর যান
এবার > < এর মাঝে লিখুন Name এবং পরের এর > < এর মাঝে লিখুন
লেখার নিয়মঃ আগের মতই ড্রিমওয়েভার এ input type থেকে শুরু করুন, একটু লিখলেই অপশন show করবে, অপশন থেকে enter দিয়ে সঠিক coding টি লিখুন, কখনো অপশন show না করলে space চাপুন অপশন আসবে। মনে রাখবেনplaceholder="Enter your name" এই coding টা Dreamweaver এর অপশনে আসবেনা আপনাকে মুখস্ত লিখতে হবে।
অর্থাৎ আমাদের প্রথম tr টি হবে নিচের মত
Name
সব মিলিয়ে coding টা হবে
Name
এবার Ctrl + S দিয়ে page টি save করুন এবং Run করুন করলে নিচের চিত্রের মত দেখা যাবে...............
Coding বিশ্লেষণ দেখুন
লক্ষ্য করেন
Name
এর জন্য টেবিলের প্রথম সারির প্রথম ঘরে Name লেখা এবং
এর জন্য টেবিলের প্রথম সারির ২য় ঘরে হালকা রঙের place টা লেখাসহ show করেছে, মনে রাখবেন placeholder="Enter your name" এই codingটা Dreamweaver এর অপশনে আসবেনা আপনাকে মুখস্ত লিখতে হবে। Enter your name এর পরিবর্তে আপনি যা লিখবেন সেটাই হালকা রঙ্গে ২য় ঘরে দেখা যাবে।
২য় tr টি হবে
৩য় tr টি হবে
Gender
Male
Female
Common Gender
৪র্থ tr টি হবে
Country
৫ম tr টি হবে
Picture
৬ষ্ঠ tr টি হবে
Interest
Sports
Reading
Traveling
৭ম tr টি হবে
৭ম tr টিতে ১ম ঘরতি খালি তাই ১ম
ফাকা থাকবে, এবং ২য়
তে GO বাটনের জন্য লিখতে হবে input type="submit" value="GO" /> উল্লেখ্য GO এর স্থানে সাধারণত SUBMIT ব্যবহার করা হয়। আপনি যেকোনো নাম ব্যবহার করতে পারেন।
সবটুকু coding নিজে নিজে নিয়মানুসারে ধাপে ধাপে করতে হবে, না বুঝলে কমেন্ত করে জানাবেন আমি হেল্প করবো, কিন্তু দয়াকরে কপি করে কাজ শেষ করবেন না, তাহলে শিখতে পারবেননা। আর হ্যাঁ যত বেশি practice করবেন তত বেশি শিখবেন ।
সব মিলিয়ে coding টা হবে
Name
Gender
Male
Female
Common Gender
Country
Picture
Interest
Sports
Reading
Traveling
এবার Ctrl + S দিয়ে page টি save করুন এবং Run করুন করলে নিচের চিত্রের মত দেখা যাবে...............
এবার প্রথম coding অর্থাৎ এরborder="1" পরিবর্তন করে 0 ( শুন্য ভুলেও o দিবেননা ) অর্থাৎ প্রথম coding টি হবে
আবার এবার 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] -১ )
0 মন্তব্য(গুলি):
Post a Comment