আজ ওয়েব ডিজাইন ধারাবাহিক টিউটোরিয়াল এর চতুর্থ পর্ব শুরু করতে যাচ্ছি ।
গত পর্বে আমরা এইচটিএমএল এর ট্যাগ, লাইন ব্রেক-আপ, হেডিং নিয়ে আলোচনা
করেছিলাম । আজ আমরা এইচটিএমএল প্যারাগ্রাফ, লিস্ট এবং ইমেজ নিয়ে আলোচনা
করবো । ওয়েব পেইজ ডিজাইন করার জন্য এইচটিএমএল প্যারাগ্রাফ, লিস্ট এবং ইমেজ
খুবই গুরুত্বপূর্ণ । আমরা প্রথমে এইচটিএমএল প্যারাগ্রাফ নিয়ে আলোচনা করবো ।
এরপর এইচটিএমএল লিস্ট নিয়ে আলোচনা করবো এবং এইচটিএমএল ইমেজ নিয়ে আলোচনা
করবো । যাইহোক, কথা না বাড়িয়ে এখন আমরা আমদের মূল আলোচনা শুরু করবো ।
এইচটিএমএল প্যারাগ্রাফ
এইচটিএমএল
এ কোন টেক্সট লেখার জন্য সাধারণত প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় ।
প্যারাগ্রাফ ট্যাগ ব্যবহার করে আমরা টেক্সটকে কয়েকটি ভাগে বিভক্ত করে ফেলতে
পারি । আপনাদের কাছে বিষয়টি পরিষ্কার করার জন্য এখন একটি উদাহরণ দিচ্ছি ।
প্রথমে নিচের কোডটুকু একটি টেক্সট এডিটর যেমন নোটপ্যাড প্লাস প্লাস এ লিখে
index.html নামে সেভ করুন;
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE HTML><html><head> <title> HTML Paragraph </title></head><body> <p> Bangladesh is our Country. It is a very beautiful Country. </p> <p> It is a small country. But it has a Large Population. </p></body></html> |
এবার
কোডটুকু একটি ব্রাউজারে প্রদর্শন করার দেখতে পারবেন যে আমরা যে টেক্সট
ব্যবহার করেছি তা দুইটি অনুচ্ছেদে বিভক্ত হয়ে গেছে । অর্থাৎ index.html
ফাইলটি একটু ব্রাউজারে প্রদর্শন করালে নিচের চিত্রের মত দেখতে পাবেন;
আমরা
দুইটি প্যারাগ্রাফ ট্যাগ ব্যবহার করেছি । প্রথম প্যারাগ্রাফ ট্যাগ শুরু
হয়েছে সাত নম্বর লাইন এ । এরপর দ্বিতীয় প্যারাগ্রাফ ট্যাগ শুরু হয়েছে আট
নম্বর লাইনে ।
এইচটিএমএল লিস্ট
এইচটিএমএল লিস্ট ব্যবহার করে
আপনি কোন কিছুর তালিকা প্রকাশ করতে পারেন । আমরা ওয়েবসাইটের মেনু তৈরি করার
সময় সাধারণত এইচটিএমএল লিস্ট ব্যবহার করে থাকি । এছাড়া, আমরা কোন কিছু
পয়েন্ট আকারে লিখতে চাইলে এইচটিএমএল লিস্ট ব্যবহার করি । এইচটিএমএল এ
সাধারণত দুই ধরনের লিস্ট রয়েছে । এ দুইটি লিস্ট হচ্ছে;
১। Order List (অর্ডার লিস্ট)
২ । Unorder List (আন অর্ডার লিস্ট)
Order List (অর্ডার লিস্ট): আমরা
কোন তালিকা যখন ক্রমিক সংখ্যা অনুযায়ী লিখে থাকি তখন আমরা এইচটিএমএল
অর্ডার লিস্ট ব্যবহার করতে পারি । এখন একটা উদাহরণ দিলে ব্যাপারটি আপনাদের
কাছে সম্পূর্ণ পরিষ্কার হয়ে যাবে । এজন্য নিচের কোডটুকু লিখে index.html
নামে সেভ করুন;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE HTML><html><head> <title> HTML Order List </title></head><body> <ol> <li> HTML </li> <li> CSS </li> <li> JavaScript </li> <li> PHP </li> <li> WordPress </li> </ol></body></html> |
এবার index.html ফাইলটি ব্রাউজারে প্রদর্শন করান তাহলে আপনি নিচের চিত্রের মত দেখতে পারবেন;
কোড বিশ্লেষণঃ আমরা সাত নম্বর লাইনে ol ব্যবহার করেছি । ol মানে হচ্ছে Order List এবং প্রতিটি লিস্ট এর জন্য ol এর ভিতরে li ব্যবহার করা হয় ।
Un order List (আন অর্ডার লিস্ট): আমরা
কোন তালিকা যখন ক্রমিক সংখ্যা অনুযায়ী না লিখে লিস্ট প্রকাশ করে থাকি তখন
আমরা এইচটিএমএল আন অর্ডার লিস্ট ব্যবহার করতে পারি । এখন একটা উদাহরণ দিলে
ব্যাপারটি আপনাদের কাছে সম্পূর্ণ পরিষ্কার হয়ে যাবে । এজন্য নিচের কোডটুকু
লিখে index.html নামে সেভ করুন;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE HTML><html><head> <title> HTML Un Order List </title></head><body> <ul> <li> HTML </li> <li> CSS </li> <li> JavaScript </li> <li> PHP </li> <li> WordPress </li> </ul></body></html> |
এবার index.html ফাইলটি ব্রাউজারে প্রদর্শন করান তাহলে আপনি নিচের চিত্রের মত দেখতে পারবেন;
কোড বিশ্লেষণঃ আমরা সাত নম্বর লাইনে ul ব্যবহার করেছি । ul মানে হচ্ছে Un Order List এবং প্রতিটি লিস্ট এর জন্য ul এর ভিতরে li ব্যবহার করা হয় ।
এইচটিএমএল ইমেজ
ওয়েবসাইটের
জন্য ইমেজ ব্যবহার করা খুবই গুরুত্বপূর্ণ । একটি ওয়েবসাইটের লোগো থেকে
শুরু করে বিভিন্ন অংশে ইমেজ ব্যবহার করা হয় । এইচটিএমএল ইমেজ ব্যবহার করার
জন্য <img src="" /> ট্যাগ ব্যবহার করা হয় । src="এখানে এক্সটেনশন সহ
ইমেজের নাম লিখতে হবে" । আপনাদের বুঝার সুবিধার্থে আমি আপনাদের কাছে এখন
একটি উদাহরণ দিবো ।
এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;
1
2
3
4
5
6
7
8
| <!DOCTYPE HTML><head> <title> HTML Images </title></head><body> <img src="images.jpg" /></body></html> |
এবার index.html ফাইলটি ব্রাউজারে প্রদর্শন করান তাহলে আপনি নিচের চিত্রের মত দেখতে পারবেন;
একটা
বিষয় খেয়াল রাখবেন, আপনার ইমেজ এবং এইচটিএমএল ফাইল যদি একসাথে থাকে তাহলে
এই পদ্ধতিতে কাজ করবে । যদি, আপনার index.html ফাইলটি ডেক্সটপ এ এবং ইমেজ
ফাইল একটি images ফোল্ডার এর ভিতরে থাকে তাহলে আপনাকে <img
src="images/images-name.png" /> এভাবে লিখতে হবে ।
সেলফ ওয়ার্ক
আমি
আজ এইচটিএমএল প্যারাগ্রাফ, লিস্ট এবং ইমেজ নিয়ে আলোচনা করেছি । আজকের
আলোচনার উপর ভিত্তি করে এখন আমি আপনাদের কিছু প্রশ্ন দিচ্ছি, আপনারা
টেকটিউনস কমেন্ট এ এসব প্রশ্নের উত্তর দিবেন ।
১ । এইচটিএমএল প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় কেন?
২ । লিস্ট কয় ধরনের?
৩। অর্ডার লিস্ট এ ol কেন লেখা হয়?
৪। আন অর্ডার লিস্ট এ ul কেন লেখা হয়?
৫ । কেউ যদি <img src="logo" /> এভাবে লিখে তাহলে কি ইমেজ প্রদর্শিত হবে?
আজকের আলোচনার বিষয়বস্তু মনোযোগ সহকারে পড়ুন আর প্র্যাকটিস করুন তাহলে আজকের প্রশ্নের উত্তর সহজেই দিতে পারবেন - ইনশাল্লাহ্ ।
আজকের
টিউটোরিয়ালটি এখানেই শেষ করছি । বুঝতে কোন অসুবিধা হলে কমেন্ট এর মাধ্যমে
জানাবেন । আগামী পর্বে থাকছে; এইচটিএমএল লিংক এবং টেবিল ।
0 comments:
Post a Comment