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

ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৪] :: এইচটিএমএল, প্যারাগ্রাফ এবং ইমেজ

1,961 দেখা 8 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 0

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

আসসালামু আলাইকুম । কেমন আছেন সবাই? আশা করি ভাল আছেন? আমি আল্লাহ্‌ তা'আলার অশেষ রহমতে ভাল আছি ।

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

এইচটিএমএল প্যারাগ্রাফ

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


<!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 নামে সেভ করুন;


<!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 নামে সেভ করুন;


<!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 নামে সেভ করুন;


<!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" /> এভাবে লিখে তাহলে কি ইমেজ প্রদর্শিত হবে?

আজকের আলোচনার বিষয়বস্তু মনোযোগ সহকারে পড়ুন আর প্র্যাকটিস করুন তাহলে আজকের প্রশ্নের উত্তর সহজেই দিতে পারবেন - ইনশাল্লাহ্‌ ।

আজকের টিউটোরিয়ালটি এখানেই শেষ করছি । বুঝতে কোন অসুবিধা হলে কমেন্ট এর মাধ্যমে জানাবেন । আগামী পর্বে থাকছে; এইচটিএমএল লিংক এবং টেবিল ।

ধন্যবাদ সবাইকে আমার আজকের টিউটোরিয়ালটি মনোযোগ দিয়ে পড়ার জন্য । ভাল থাকবেন সবাই  । আল্লাহ্‌ হাফেজ ।

Level 0

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

টিউনস

আরও টিউনস

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

টিউমেন্টস

Level 0

চতুর্থ পর্বে ও যথারীতি উপস্থিত হলাম। 🙂

Level 0

১ । এইচটিএমএল প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় কেন?
>>>> HTML কোন কিছু লেখার জন্য প‌্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়।

২ । লিস্ট কয় ধরনের?
>>>>সাধারণত দু’ধরনেরI

৩। অর্ডার লিস্ট এ ol কেন লেখা হয়?
>>>> Ordered List র সংক্ষিপ্ত রূপ হিসেবে

৪। আন অর্ডার লিস্ট এ ul কেন লেখা হয়?
>>>>Unordered List র সংক্ষিপ্ত রূপ হিসেবে

৫ । কেউ যদি এভাবে লিখে তাহলে কি ইমেজ প্রদর্শিত হবে?
>>>>ইমেজ প্রদর্শিত হবেনা , কারণ .jpg এক্সটেনশন ব্যবহার করা হয়নি

Level 0

thanks

Level 0

১ । এইচটিএমএল প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় কেন?
উত্তর: টেক্সট লেখার জন্য সাধারনত ট্যাগ ব্যবহার করা হয়।

২ । লিস্ট কয় ধরনের?
উত্তর: লিস্ট দুই ধরনের অর্ডার লিস্ট ও আন অর্ডার লিস্ট

৩। অর্ডার লিস্ট এ ol কেন লেখা হয়?
উত্তর: ol হচ্ছে order list এর সংক্ষিপ্ত।

৪। আন অর্ডার লিস্ট এ ul কেন লেখা হয়?
উত্তর: ul হচ্ছে Un order list এর সংক্ষিপ্ত।

৫ । কেউ যদি এভাবে লিখে তাহলে কি ইমেজ প্রদর্শিত হবে?
উত্তর: না।কারন ইমেজ এক্সটেনশন ব্যবহার করতে হবে। যেমন. jpg . png . gif

Level 0

১ । এইচটিএমএল প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় কেন?
উত্তর: আমরা যেকোন প্যারাগ্রাফ আকারে লেখার জন্য মূলত প্যারাগ্রাফ ট্যাগ ব্যবহার করি। শুধু টেক্সট লেখার জন্য প্যারাগ্রাফ ট্যাগ না ব্যবহার করলেও চলে। কিন্তু প্যারাগ্রাফ আকারে সাজিয়ে লেখার জন্য মূলত প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়।
২ । লিস্ট কয় ধরনের?
উত্তর: লিস্ট দুই ধরনের অর্ডার লিস্ট(order list- ol) ও আন অর্ডার লিস্ট(unorder list- ul)

৩। অর্ডার লিস্ট এ ol কেন লেখা হয়?
উত্তর: ol হচ্ছে order list এর সংক্ষিপ্ত। লেখাকে ক্রমিক আকারে সাজিয়ে লেখার জন্য বা ক্রমান্বয়ে লেখার জন্য ol(order list) লেখা হয়।

৪। আন অর্ডার লিস্ট এ ul কেন লেখা হয়?
উত্তর: ul হচ্ছে Unorder list এর সংক্ষিপ্ত। লেখাকে ক্রমান্বয়ে বুলেট দিয়ে সাজিয়ে লেখার জন্য ul(Unorder list) লেখা হয়।

৫ । কেউ যদি এভাবে লিখে তাহলে কি ইমেজ প্রদর্শিত হবে?
উত্তর: না।কারন ইমেজ এক্সটেনশন ব্যবহার করতে হবে। যেমন. jpg . png . gif

শুধুমাত্র আপনার টিউমেন্ট করার জন্যই লগইন করলাম।

Level 0

১। টেক্সট লিখার জন্য প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়।
২।২ ধরনের
৩।ক্রমিক আকারে লিখার জন্য ol ব্যবহার করা হয়।
৪।লিষ্ট আকারে লিখার জন্য ul ব্যবহার করা হয়।
৫। না।

Level 0

Great initiative. Please do continue.