ওয়েব ডিজাইন এর হাতেখড়ি
- ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৪] :: এইচটিএমএল লিস্ট এবং লিংক
কেমন
আছেন সবাই, আশা করছি ভালো আছেন। আজ আমরা একসাথে দুটি বিষয় শিখব, আর তা
হোলো HTML List এবং HTML Links। HTML সাধারণত তিন ধরণের লিস্ট সমর্থণ করে।
এগুলো হলো order list, unordered list এবং definition list । ব্যবহৃত
ট্যাগ গুলো হল <ol>( অর্ডার লিষ্ট এর জন্য ব্যবহার করা হয়),
<ul>(আনঅর্ডার লিষ্ট এর জন্য ব্যবহার করা হয়), <li>(লিষ্ট
আইটেম এর জন্য ব্যবহার করা হয়) <dl>(ডেফিনিশন লিষ্ট এর জন্য ব্যবহার
হয়)। আমরা সাধারনত একটি ওয়েব সাইট এ অনেক গুলো পেজ দেখে থাকি, কোন এক
জাগাতে ক্লিক করলে আমরা এক পেজ থেকে আর এক পেজে চলে যাই। এই কাজটি করা হয়
লিংক ট্যাগ(<a>) ব্যবহারের মাধ্যমে । শুরুতেই বলেছি আজ আমরা এক সাথে
দুটি কাজ শিখব। তাই ধারাবাহিক ভাবে কাজ গুলো করতে থাকুন। শুরুতে একটি
নোটপ্যাড নিন এবং নিচের কোড টি টাইপ করুন।
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
|
<html>
<head>
<title>Page Of Ordered List </title>
</head>
<body>
<h2> This is an Orderedlist </h2>
<ol>
<li>Monitor</li>
<li>CPU</li>
<li>Keyboard</li>
<li>Mouse</li>
</ol>
<a href="unorderedlist.html"> Show Me Unorderer List</a>
</body>
</html>
<pre>
|
এবার
এটিকে orderedlist.html নাম দিয়ে সেভ করুন। এবার কোডটিকে মনোযোগ দিয়ে
লক্ষ করুন। শুরুতে একটি হেডিং ব্যবহার করা হয়েছে। এরপর <ol> ট্যাগ
ব্যবহারের মাধ্যমে এটি যে একটি অর্ডার লিস্ট হবে তা বোঝানো হয়েছে। এরপর
<li> ট্যাগ এর ভিতরে লিস্টের আইটেম গুলোকে উল্লেক্ষ করা হয়েছে। এবং
সর্বশেষে একটি লিংক ট্যাগ যুক্ত করা হয়েছে যেখানে আমরা href আট্রিবিউট এ
unorderedlist.html এই ফাইলটি নির্দেশ করেছি যা এখনো তৈরি করা হয়নি।
এবার আরো একটি নোটপ্যাড নিন এবং তাতে নিম্নের কোডটি টাইপ করুন-
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
|
<html>
<head>
<title>Page of Unordered List</title>
</head>
<body>
<h2> This is an Unorderedlist </h2>
<ul>
<li>Monitor</li>
<li>CPU</li>
<li>Keyboard</li>
<li>Mouse</li>
</ul>
<a href="orderedlist.html"> Show Me Orderer List</a>
</body>
</html>
<pre>
|
এবার
এটিকে আপনি unorderedlist.html নাম দিয়ে সেভ করুন। এই কোডটিও পূর্বের
কোডের মত, এখানে শুধুমাত্র <ol> ট্যাগ এর পরিবর্তে <ul> ট্যাগ
ব্যবহার করা হয়েছে। এবং লিংক এর মধ্যে আমরা orderedlist.html এই ফাইলটি
নির্দেশ করা হয়েছে। এখন একটি বিষয় খেয়াল রাখবেন যেন দুটি ফাইলই একই
ফোল্ডারের ভিতরে সেভ করা হয়। এখন দুটি ফাইল এর যেকোন একটি ওপেন করুন।
দেখবেন আপনার ওয়েব পেজে একটি লিংক দেখা যাচ্ছে সেই লিংকটি ব্যবহার করে
আপনি খুব সহজেই অন্য একটি পেজ ওপেন করতে পারবেন। নতুন পেজটিতেও একটি লিংক
পাবেন। যেটি ব্যবহার করে আপনি আবার পূর্বের পেজে ফিরে আসতে পারবেন। কেমন
লাগলও এছাড়াও আপনি href আট্রিবিউটটির ভিতরে অন্য লিংকও যুক্ত করতে পারবেন।
যেখানে ক্লিক করলে আপনি সেই পেজটিতে যেতে পারবেন। এছাড়াও আরও বিভিন্ন
ভাবে কোড এ পরিবর্তন করে আপনি নিজে নিজে কিছু করার চেষ্টা করুন। একটা কথা
বারবার বলতে চাই সেটা হল শুধু টিটরিয়াল পড়ে কখনওই কিছু শিখতে পারবেন না।
আপনাকে অবশ্যই নিজে টাইপ করে প্রতিটি বিষয় প্রাকটিস করতে হবে।
আগামী পর্বের আমন্ত্রন জানিয়ে আজ এখানেই শেষ করছি।
No comments:
Post a Comment