ওয়েব ডিজাইন এর হাতেখড়ি
- ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৭] :: এইচটিএমএল ফর্ম এবং ডিভ ট্যাগ এর ব্যবহার
এর আগের পর্বে আমি ফর্মের কয়েকটি অংশ তৈরি করা দেখিয়েছি। আজ আমরা দেখব কিভাবে পাসওয়ার্ড ফিল্ড এবং ড্রপ ডাউন বক্স তৈরি করা যায়। চলুন তাহলে শুরু করা যাক। একটি নোটপ্যাড নিয়ে নিম্নের কোডটি টাইপ করুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| </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> |
এবার তাহলে চলুন ফর্মের আরও একটি গুরুত্বপূর্ণ বিষয় ড্রপ-ডাউন বক্স কিভবে তৈরি করা যায় সেটি দেখা যাক। ড্রপ-ডাউন বক্স ব্যবহার করে সাধারণত একটি নির্বাচনযোগ্য তালিকা তৈরি করা হয়। একটি নোটপ্যাড নিয়ে নিম্নের কোডটি টাইপ করুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| </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> ট্যাগ এর ব্যবহার দেখে নিই। একটি ওয়েবপেজ ডিজাইন করতে গেলে এটি অনেক কাজে লাগে। আপনি যখন একটি ওয়েবপেজ ওপেন করেন তখন দেখবেন সেটাতে বিভিন্ন অংশ থাকে। এই ট্যাগ ব্যবহারের মাধ্যমে আপনি আপনার পেজটিকে বিভিন্ন ভাগে ভাগ করে ফেলতে পারবেন। যা কিনা একটি ওয়েবপেজ তৈরি করার জন্য অত্যন্ত গুরুত্বপূর্ণ।
তাহলে একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে সেভ করে ব্রাউজারে ওপেন করে ফলাফল দেখুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| </pre></pre><html><body> <div id="container" style="width:1000px; height:300"> <div id="header" style="background-color:#0099FF"><h1 style="margin-bottom:0; text-align:center">Use of Div Tag</h1></div> <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> <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. </p></div></div> </body></html><pre> |
আগামী পর্বে আমি আপনাদেরকে দেখাবো কিভাবে পূর্ণাঙ্গ একটি ফর্ম তৈরি করতে হয়। সে পর্যন্ত সকলেই ভালো থাকবেন আজ এখানেই শেষ করছি।
No comments:
Post a Comment