Awesome! টিউনস
সকল Awesome! টিউনস

ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৮] :: এইচটিএমএল ব্যবহার করে ছোট একটি প্রজেক্ট

3,621 দেখা 4 টিউমেন্টস জোসস
টিউন বিভাগ এইচটিএমএল
প্রকাশিত
Level 0

10 টিউনস 6 টিউমেন্টস 0 ফলোয়ার

ওয়েব ডিজাইন এর হাতেখড়ি

গতপর্বে আমি আপনাদেরকে div ট্যাগ এর ব্যবহার দেখিয়েছি। আশা করছি সেটি আপনারা ভালো করে প্রাকটিস করেছেন। গত পর্বে আমি আপনাদেরকে বলেছিলাম যে এইচটিএমএল ব্যবহার করে আমরা ছোটখাট একটা প্রজেক্ট করব। কিন্তু এর জন্য আপনাদেরকে আগের বিষয়গুলো ভালোভাবে বুঝতে হবে এবং প্রাকটিস থাকতে হবে। গতপর্বে আমি আপনাদেরকে বলেছিলাম একটি ওয়েবপেজ তৈরি করতে গেলে সর্বপ্রথম আমাদেরকে যে কাজটি করতে হবে তা হচ্ছে পরিকল্পনা। পরিকল্পনা করে কাজ শুরু করার কোন বিকল্প নেই। শিক্ষার  বিভিন্ন মাধ্যম যেমন- বই, অনলাইন ইত্যাদিতে দেখা যায় আগে কোডটি দেওয়া থাকে তারপর কোডের বর্ণনা। কিন্তু যেহেতু আমি এখানে সেখানোর পাশাপাশি ছোট একটি প্রজেক্টও আপনাদের সামনে উপস্থাপন করছি। সেজন্য কোড এর আগে পরে ব্যাখ্যা দেওয়ার চেষ্টা করছি, যার মাধ্যমে প্লান এর বিষয়টাও আপনাদের সামনে পরিষ্কার হয়। চলুন তাহলে আর কথা না বাড়িয়ে আমরা আমাদের প্রজেক্ট শুরু করি। এখানে আমি সম্পূর্ণ ওয়েবপেজ জুড়ে একটি এডমিশন ফর্ম ডিজাইন করব। এবং এটির ডিজাইন আমি এমন ভাবেই করেছি যেন তার ভিতরে পূর্বের শেখা সমস্ত বিষয়গুলো অন্তর্ভুক্ত করা যায়। একটা বিষয় আমরা সবাই জানি যে এইচটিএমএল এ সমস্ত কোড আমরা বডি এর ভিতরে লিখি। এখন একটা বিষয় চিন্তা করে দেখুন অধিকাংশ ওয়েবপেজই আপনি দেখতে পাবেন যাদের দুই পাশে ফাকা থাকে। আর আমরা যেহেতু একটু ফর্ম ডিজাইন করতে যাচ্ছি সেহেতু আমাদেরও উচিত এটাকে একটি ফর্ম এর আকৃতি দেওয়া। এর জন্য আমরা এখানে যেটা করেছি। সেটা হল একটি div নিয়েছি এবং বডি টাকে আলাদা ভাবে দেখানোর জন্য সেটার ভিতর আলাদা অ্যাট্রিবিউট নিয়ে ভিন্ন কালার দিয়ে দিয়েছি। এই কথা বলতে গিয়ে যে কথাটি মনে পড়ল তা হল ট্যাগ এর ভিতর অ্যাট্রিবিউট ব্যবহার করা হয় সেটি আপনারা সকলেই যানেন, এবং তার ভিতরে এর প্রপারটিজ দিয়ে দেওয়া হয়। সুতরাং আমি যদি আলাদা আলাদা ভাবে লিখে প্রত্যেকটা লাইনের বর্ণনা দিতে যাই তাহলে হইতোবা পুরো একটা বই লিখে ফেলতে হবে। তাই বুঝতে না পারলে পরবর্তিতে প্রশ্ন করবেন। আরও বেশি প্রবলেম হলে আগের বিষয় গুলোভালোভাবে প্রাকটিস করবেন।

বডি এর ভিতরে একটি div নিয়ে একটি ফর্ম এর সম্পুর্ণ অংশ আমরা নির্বাচন করেছি। এখন আমাদের যা করতে হবে তা হল এক এক করে এর ভিতরের বিষয় বস্তু গুলোকে যুক্ত করতে হবে। এবার তাহলে আপনাদের কে কোডটি দিয়ে দেই। এটিকে .html এক্সটেনশন দিয়ে সেভ করে আপনার ব্রাওজারে ওপেন করে একদিকে ফলাফল এবং সাথে সাথে কোডটি মিলিয়ে দেখুন।

</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:&nbsp; &nbsp;&nbsp; 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>

এখন লক্ষ্য করে দেখুন এখানে আমরা div এর ভিতরে div, এবং তার ভিতরেও একাধিক div নিয়ে সম্পুর্ণ ফর্ম এর অংশ গুলোকে বিভিন্ন ভাগে ভাগ করে নিয়েছি।  এরপর এর ভিতরের বিভিন্ন অংশগুলোকে যুক্ত করেছি। এখানে আরও একটি বিষয় লক্ষনীয় যে, প্রত্যেকটি div আলাদা আলাদা ভাবে চিহ্নিত করার জন্য আমি এদেরকে ভিন্ন ভিন্ন আইডি নেম দিয়েছি। এখানে আর কোন ব্যাখ্যা দিচ্ছিনা। আপনারা নিজেরাই খুজে বের করুন আপনাদের কোথায় কোথায় বুঝতে সমস্যা হচ্ছে । আরও একটা গুরুত্বপূর্ণ বিষয় হল বড় কোড লেখার সময় অবশ্যই কমেন্ট এর ব্যবহার করুন।

আজ তাহলে এ পর্যন্তই। সকলে ভালো থাকবেন।

Level 0

আমি মুন্সী বরকতুল্লাহ জনি। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 10 টি টিউন ও 6 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

অনেক অনেক ধন্যবাদ নতুন পর্ব উপহার দেওয়ার জন্য।

Level 0

thanks tune korar jonno. amar ekta tune dorkar chilo “Layout” somporke. tune ti korle upkrito hotam. carry on & live long

Level 0

thanks you too….. sajal007007 and samir01

Level 0

Hello, you post is nice but please don’t use deprecated code please don’t make us confused. One of your deprecated code is align=”center”.
Next time be sincere.