ওয়েব ডিজাইন এর হাতেখড়ি
- ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৮] :: এইচটিএমএল ব্যবহার করে ছোট একটি প্রজেক্ট
গতপর্বে আমি আপনাদেরকে div ট্যাগ এর ব্যবহার দেখিয়েছি। আশা করছি সেটি আপনারা ভালো করে প্রাকটিস করেছেন। গত পর্বে আমি আপনাদেরকে বলেছিলাম যে এইচটিএমএল ব্যবহার করে আমরা ছোটখাট একটা প্রজেক্ট করব। কিন্তু এর জন্য আপনাদেরকে আগের বিষয়গুলো ভালোভাবে বুঝতে হবে এবং প্রাকটিস থাকতে হবে। গতপর্বে আমি আপনাদেরকে বলেছিলাম একটি ওয়েবপেজ তৈরি করতে গেলে সর্বপ্রথম আমাদেরকে যে কাজটি করতে হবে তা হচ্ছে পরিকল্পনা। পরিকল্পনা করে কাজ শুরু করার কোন বিকল্প নেই। শিক্ষার বিভিন্ন মাধ্যম যেমন- বই, অনলাইন ইত্যাদিতে দেখা যায় আগে কোডটি দেওয়া থাকে তারপর কোডের বর্ণনা। কিন্তু যেহেতু আমি এখানে সেখানোর পাশাপাশি ছোট একটি প্রজেক্টও আপনাদের সামনে উপস্থাপন করছি। সেজন্য কোড এর আগে পরে ব্যাখ্যা দেওয়ার চেষ্টা করছি, যার মাধ্যমে প্লান এর বিষয়টাও আপনাদের সামনে পরিষ্কার হয়। চলুন তাহলে আর কথা না বাড়িয়ে আমরা আমাদের প্রজেক্ট শুরু করি। এখানে আমি সম্পূর্ণ ওয়েবপেজ জুড়ে একটি এডমিশন ফর্ম ডিজাইন করব। এবং এটির ডিজাইন আমি এমন ভাবেই করেছি যেন তার ভিতরে পূর্বের শেখা সমস্ত বিষয়গুলো অন্তর্ভুক্ত করা যায়। একটা বিষয় আমরা সবাই জানি যে এইচটিএমএল এ সমস্ত কোড আমরা বডি এর ভিতরে লিখি। এখন একটা বিষয় চিন্তা করে দেখুন অধিকাংশ ওয়েবপেজই আপনি দেখতে পাবেন যাদের দুই পাশে ফাকা থাকে। আর আমরা যেহেতু একটু ফর্ম ডিজাইন করতে যাচ্ছি সেহেতু আমাদেরও উচিত এটাকে একটি ফর্ম এর আকৃতি দেওয়া। এর জন্য আমরা এখানে যেটা করেছি। সেটা হল একটি div নিয়েছি এবং বডি টাকে আলাদা ভাবে দেখানোর জন্য সেটার ভিতর আলাদা অ্যাট্রিবিউট নিয়ে ভিন্ন কালার দিয়ে দিয়েছি। এই কথা বলতে গিয়ে যে কথাটি মনে পড়ল তা হল ট্যাগ এর ভিতর অ্যাট্রিবিউট ব্যবহার করা হয় সেটি আপনারা সকলেই যানেন, এবং তার ভিতরে এর প্রপারটিজ দিয়ে দেওয়া হয়। সুতরাং আমি যদি আলাদা আলাদা ভাবে লিখে প্রত্যেকটা লাইনের বর্ণনা দিতে যাই তাহলে হইতোবা পুরো একটা বই লিখে ফেলতে হবে। তাই বুঝতে না পারলে পরবর্তিতে প্রশ্ন করবেন। আরও বেশি প্রবলেম হলে আগের বিষয় গুলোভালোভাবে প্রাকটিস করবেন।
</pre><html><head><title>Admission Form</title></head><body style="background-color:#CCCCCC;"><div id="container" align="center" style="width:900px; height:1410px; border:groove; background-color:#FFFFFF; margin:0px auto;"><h1 style="text-align:center; color:#0099FF"> ABH World IT Academy</h1><h2 style="text-align:center; color:#0099FF"> Admission Form</h2><form><div id="1st"><div id="course" style="margin-left:20px; float:left;"> Course:<select name="course"><option value="PWD"> Professional Website Designe </option><option value="CWJ"> Corporate Website Designe With Joomla </option><option value="BGD"> Basic Graphics Design </option><option value="ALD"> Advance Logo Design </option><option value="PHP"> PHP & MySQL </option><option value="AAD"> Android Apps Development </option></select></div><div id="date" style=" text-align:right; margin-right:20px; float:right;"> Date:<input type="text" name="date" style="border:groove;"/> </div></div> <!--close of 1st line div--><br/><div id="student_information" style="width:850px; height:300px; border:groove; text-align:left; margin:10px"><table><tr><td> Full Name: </td><td> <input type="text" name="std_name" size="30" style="border:groove"/></td><tr><td>Father's Name: </td><td><input type="text" name="fthr_name" size="30" style="border:groove"/></td></tr><td>Mother's Name: </td><td><input type="text" name="mthr_name" size="30" style="border:groove"/></td></tr><td>Contact Address: </td><td><input type="text" name="CA" size="30" style="border:groove"/></td></tr><td>Mobile Number: </td><td><input type="text" name="mbl_no" size="30" style="border:groove"/></td></tr><td>Email Address: </td><td><textarea rows="3" cols="22" style="border:groove"></textarea></td></tr><td>Date of Birth: </td><td><input type="text" name="DOB" size="30" style="border:groove"/></td></tr></table></div> <!--end of student information div--><br/><div id="sex" style="width:850px; height:25px; border:groove; text-align:left;">Gender: Male<input type="radio" name="sex" value="Male" checked="checked">Female<input type="radio" name="sex" value="Female" checked="checked"></div> <!--close of gender div--><h3>For Job Holder</h><div id="sex" style="width:850px; height:30px; border:groove; text-align:left;"><table><tr><td>Organization Name:</td><td><input type="text" size="30" name="orga" style="border:groove"/></td><td>Designation:</td><td><input type="text" size="30" name="dsg" style="border:groove"/></td></tr></table></div> <!--close of job div--><h3>For Student </h3><div id="sex" style="width:850px; height:30px; border:groove; text-align:left;"><table><tr><td>Institute Name:</td><td><input type="text" size="30" name="inst" style="border:groove"/></td><td>Class/Department:</td><td><input type="text" size="30" name="cls" style="border:groove"/></td></tr></table></div> <!--close of std_institute div--><h3>From Where you heard about us ? </h3><div id="student_information" style="width:850px; height:30px; border:groove; text-align:left; margin:10px">Person<input type="checkbox" name="media" value="Person"/>Online<input type="checkbox" name="media" value="Online"/>Paper/Magazine<input type="checkbox" name="media" value="Paper"/>Other<input type="checkbox" name="media" value="Other"/></div><h3> For office use only</h3><div id="student_information" style="width:850px; height:220px; border:groove; text-align:left; margin:10px"><table><tr><td>Name of Councilor: </td><td> <input type="text" name="counilor_name" size="30" style="border:groove"/></td><tr><td>Class days:</td><td><input type="text" name="cls_day" size="30" style="border:groove"/></td></tr><td>Class time: </td><td><input type="text" name="cls_time" size="30" style="border:groove"/></td></tr><td>Batch no: </td><td><input type="text" name="batch" size="30" style="border:groove"/></td></tr><td>Name of Trainer: </td><td><input type="text" name="trainer_name" size="30" style="border:groove"/></td></tr><td>Class start: </td><td><input type="text" name="cls_start" size="30" style="border:groove"/></td></tr></table></div> <!--end of office information div--><h3>Payment Option </h3><div id="sex" style="width:850px; height:30px; border:groove; text-align:left;"><table><tr><td>Course Fee:</td><td><input type="text" size="30" name="fee" style="border:groove"/></td><td>Remarkable:</td><td><input type="text" size="30" name="remark" style="border:groove"/></td></tr></table></div> <!--close of payment option div--></form><br/><div id="last"><div id="course" style="margin-left:20px; float:left;"><hr/>Student's Signature</div><div id="date" style=" text-align:right; margin-right:20px; float:right;"><hr/>Councilor's Signature</div></div></div> <!--close of container div--></body></html><pre> |
আজ তাহলে এ পর্যন্তই। সকলে ভালো থাকবেন।
No comments:
Post a Comment