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

ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৭] :: এইচটিএমএল ফর্ম এবং ডিভ ট্যাগ এর ব্যবহার

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

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

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

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

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

</pre></pre>
<html>

<head>

<title>Password Field</title>

</head>

<body>

<form>

User ID:

<input type="text" name="user">

<br/>

Password:

<input type="password" name="password">

<br>

<input type="submit" value="Submit">

</form>

</body>

</html>
<pre>

এখানে কোডটিতে আপনি কিভাবে পাসওয়ার্ড ফিল্ড তৈরি করবেন তার পাশাপাশি কিভাবে সাবমিট বাটন তৈরি করবেন সেটিও দেখিয়ে দেওয়া হয়েছে।

এবার তাহলে চলুন ফর্মের আরও একটি গুরুত্বপূর্ণ বিষয় ড্রপ-ডাউন বক্স কিভবে তৈরি করা যায় সেটি দেখা যাক। ড্রপ-ডাউন বক্স ব্যবহার করে সাধারণত একটি নির্বাচনযোগ্য তালিকা তৈরি করা হয়। একটি নোটপ্যাড নিয়ে নিম্নের কোডটি টাইপ করুন।

</pre></pre>
<html>

<head>

<title>Drop Down Box</title>

</head>

<body>

<form>

Select Your country:

<select name="country">

<option value="Bangladesh">Bangladesh </option>

<option value="Pakisthan">Pakisthan </option>

<option value="USA">USA </option>

<option value="Canada">Canada </option>

<option value="Japan">Japan</option>

<option value="Iran">Iran </option>

<option value="Nepal">Nepal </option>

</select>

</form>

</body>

</html>
<pre>

আশা করছি একটি ফর্ম তৈরি করতে মোটামুটি যা যা প্রয়োজন তা আমরা আপনাদের কে দেখিয়ছি। এবার আপনারা নিজে নিজে সমস্ত বিষয়গুলো একত্রিত করে পূর্ণাঙ্গ একটি ফর্ম তৈরি করার চেষ্টা করুন।

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

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

তাহলে একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে সেভ করে ব্রাউজারে ওপেন করে ফলাফল দেখুন।

</pre></pre>
<html>

<body>

&nbsp;

<div id="container" style="width:1000px; height:300">

&nbsp;

<div id="header" style="background-color:#0099FF">

<h1 style="margin-bottom:0; text-align:center">Use of Div Tag</h1></div>

&nbsp;

<div id="menu" style="background-color:#00CCFF;height:250px;width:250px;float:left;">

<b>Standard Attribute </b><br/>

id<br/>

class <br/>

title<br/>

style<br/>

lang</div>

&nbsp;

<div id="content" style="background-color:#EEEEEE;height:250px;width:750px;float:left;">

<h3 align="center"> HTML div Tag </h3>

<p>

<div> The HTML  tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS.

The difference between the div tag and the span tag is that the div tag is used with block-level elements whilst the span tag is used with inline elements.

&nbsp;

&nbsp;

</p></div>

</div>

&nbsp;

</body>

</html>
<pre>

ট্যাগ আর অ্যাট্রিবিউট নিয়ে নিশ্চয় নতুন করে বলার কিছু নেই। তবু আবারো মনে করিয়ে দিই। লক্ষ্য করে দেখুন, এখানে ট্যাগ গুলোর ভিতরে কিভাবে অ্যাট্রিবিউট ব্যবহার করা হয়েছে। সেগুলো পরিবর্তন করে বিভিন্ন ভাবে আপনি প্রাকটিস করুন। আর এখন যেহেতু আপনাকে অনেক বড় বড় কোড লিখতে হবে সে জন্য কাজের সুবিধার জন্য আপনি ভালো একটি কোড এডিটর ইউজ করতে পারেন। যেমনঃ Notepad++, Dreamweaver.

আগামী পর্বে আমি আপনাদেরকে দেখাবো কিভাবে পূর্ণাঙ্গ একটি ফর্ম তৈরি করতে হয়। সে পর্যন্ত সকলেই ভালো থাকবেন আজ এখানেই শেষ করছি।

Level 0

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

টিউনস

আরও টিউনস

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

টিউমেন্টস

Level 0

অনেক অনেক ধন্যবাদ ধারাবাহিক ভাবে সুন্দর সুন্দর টিউন উপহার দেওয়ার জন্য।

Level 0

ভাইয়া আপনাকে অনেক ধন্যবাদ। আমি একজন ওয়েব ডিজাইন এর ছাত্র। আমি div এর ব্যবহার ঠিক মত বুঝতাম না তবে আপনার টিউটোরিল দেখে আমি আজ div ট্যাগ এর ব্যবহার খুব ভালো ভাবে বুঝতে পেরেছি।
ভাইয়া আসা করি আপনি আপনার টিউটোরিয়াল Advance Lavel পর্যন্ত নিয়ে যাবেন। ভাল থাকবেন ।