এই পোস্টটি একটি ছবির নীচে একটি ক্যাপশন লেখার বিষয়ে ব্যাখ্যা করে৷
কিভাবে একটি ছবির নিচে একটি ক্যাপশন লিখতে হয়?
একটি ছবির নীচে একটি ক্যাপশন লিখতে, আমরা নীচে উল্লিখিত বিভিন্ন পদ্ধতি প্রদান করব:
- পদ্ধতি 1: কিভাবে HTML ব্যবহার করে ইমেজ ক্যাপশন যোগ করবেন
'উপাদান? - পদ্ধতি 2: কিভাবে ' ব্যবহার করে ইমেজ ক্যাপশন যোগ করবেন 'উপাদান?
পদ্ধতি 1: কিভাবে HTML “
” এলিমেন্ট ব্যবহার করে ইমেজ ক্যাপশন যোগ করবেন? একটি ছবির ক্যাপশন যোগ করতে, নিম্নলিখিত নির্দেশাবলীর মাধ্যমে যান:
- প্রথমে যোগ করুন ' <চিত্র> ” উপাদান, যা স্বয়ংসম্পূর্ণ বিষয়বস্তু উপস্থাপনের জন্য ব্যবহার করা হয়, সম্ভাব্য একটি ঐচ্ছিক ক্যাপশন সহ।
- পরবর্তী, একটি ঢোকান '
'অনুচ্ছেদের ভিতরে ট্যাগ' ট্যাগ ' ব্যবহার করে ছবি যোগ করুন src ” বৈশিষ্ট্য। দ্য ' সবকিছু ” কোনো কারণে ইমেজ প্রদর্শিত না হলে প্রপার্টি যোগ করা বিষয়বস্তু দেখায়।
- চিত্রের প্রস্থ হিসাবে সেট করুন ' 200px ”
- এরপর '
” ট্যাগটি ছবির ক্যাপশন যোগ করতে ব্যবহৃত হয়। তাছাড়া, “ ” ট্যাগের মধ্যে ক্যাপশন যোগ করুন:
= 'TSL.png' সবকিছু = 'টিএসএল বিষয়বস্তু নির্মাতারা' প্রস্থ = '200' >
>আপনি দেখতে পাচ্ছেন যে নির্দিষ্ট ক্যাপশন সহ চিত্রটি প্রদর্শিত হয়েছে:
এখন, CSS ব্যবহার করে ক্যাপশন যোগ করার জন্য দ্বিতীয় পদ্ধতির দিকে যান।
পদ্ধতি 2: কিভাবে “
” এলিমেন্ট ব্যবহার করে ইমেজ ক্যাপশন যোগ করবেন?ব্যবহার করে ছবির ক্যাপশন যোগ করতে '
' উপাদান, প্রদত্ত নির্দেশাবলী চেষ্টা করে দেখুন:
- একটা তৈরি কর ' ' ধারক এবং নামের সাথে একটি ক্লাস অ্যাট্রিবিউট যোগ করুন ' চিত্রধারক ”
- শিরোনাম ট্যাগ যোগ করুন ' শিরোনাম সন্নিবেশ করার জন্য এবং আপনার পছন্দ অনুযায়ী শিরোনাম স্টাইল করার জন্য।
- আরেকটি '
' উপাদান যোগ করুন এবং একটি 'ঢোকান''সহ ট্যাগ' src ', ' সবকিছু ' এবং ' প্রস্থ ” div কন্টেইনারের মধ্যে বৈশিষ্ট্য।
- ক্লাস নামের সাথে একটি তৃতীয় '
' যোগ করুন ' img-ক্যাপশন ” তারপর, “” ট্যাগের মধ্যে ক্যাপশন দিন। তাছাড়া, '
” উপাদান একটি লাইন বিরতি যোগ করতে ব্যবহৃত হয়:= 'চিত্রধারক' >
= 'রঙ: rgb(95, 31, 245)' > HTML চিত্র >
= 'TSL.png' সবকিছু = 'টিএসএল বিষয়বস্তু নির্মাতারা' প্রস্থ = '200' >
= 'img-ক্যাপশন' >
>
>এটি লক্ষ্য করা যায় যে ছবিটির জন্য ক্যাপশনটি সফলভাবে যোগ করা হয়েছে:
এখন, বৈশিষ্ট্যগুলি প্রয়োগ করার জন্য CSS বিভাগের দিকে যাওয়া যাক।
CSS-এ স্টাইল '.image-holder'
প্রথমে, অ্যাক্সেস করুন '
'একটি ক্লাস থাকার উপাদান' .ছবি-ধারক ” তারপরে, নিম্নলিখিত CSS বৈশিষ্ট্যগুলি প্রয়োগ করুন: .ছবি-ধারক {
অবস্থান : আপেক্ষিক ;
উচ্চতা : 100px ;
প্রস্থ : 200px ;
মার্জিন : স্বয়ংক্রিয় ;
}উপরে উল্লিখিত বৈশিষ্ট্যগুলির বিশদ বিবরণ নীচে বর্ণিত হয়েছে:
- দ্য ' অবস্থান ' হিসাবে সেট করা হয় ' আপেক্ষিক একটি উপাদানের আসল অবস্থান নির্দিষ্ট করতে যা নথির প্রবাহে থাকে, ঠিক স্ট্যাটিক মানের মতো।
- তারপর, ' উচ্চতা ” উপাদানের উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়।
- দ্য ' প্রস্থ ” সম্পত্তি প্রস্থে উপাদানটির আকার নির্দিষ্ট করে।
- দ্য ' মার্জিন ' হিসাবে সেট করা হয় ' স্বয়ংক্রিয় উপাদানের চারপাশে স্বয়ংক্রিয়ভাবে স্থান সেট করতে।
CSS-এ স্টাইল ক্যাপশন
এই ধাপে, আমরা 'নাম দিয়ে দুটি ক্লাস অ্যাক্সেস করব চিত্রধারক ' এবং ' img-ক্যাপশন এবং নিম্নলিখিত CSS বৈশিষ্ট্যগুলি প্রয়োগ করুন:
.ছবি-ধারক .img-ক্যাপশন {
অবস্থান : পরম ;
পাঠ্য-সারিবদ্ধ : কেন্দ্র ;
ফন্ট-ওজন : সাহসী ;
প্রস্থ : 200px ;
উচ্চতা : 50px ;
বাম : 0px ;
রঙ : #f80909 ;
পটভূমি : rgb ( 140 , 166 , 253 ) ;
}উপরে উল্লিখিত বৈশিষ্ট্যগুলির বর্ণনা নিম্নরূপ:
- দ্য ' পাঠ্য-সারিবদ্ধ ' সম্পত্তি হিসাবে সেট করা হয়েছে ' কেন্দ্র কেন্দ্রে পাঠ্য অবস্থান সারিবদ্ধ করার জন্য।
- পরবর্তী, ' ফন্ট-ওজন ' হিসাবে বরাদ্দ করা হয় ' সাহসী ” ছবির ক্যাপশন ফন্ট সেট করতে।
- এরপর ' রঙ অ্যাক্সেস করা উপাদানের রঙ সেট করার জন্য সম্পত্তি ব্যবহার করা হয়।
- দ্য ' পটভূমি ” সম্পত্তি উপাদান পটভূমির রঙ সেট করে।
- অন্যান্য বৈশিষ্ট্য সহ ' অবস্থান ', ' উচ্চতা ', এবং ' প্রস্থ ” এছাড়াও সংশ্লিষ্ট কার্যকারিতা প্রয়োগ করতে ব্যবহৃত হয়।
আউটপুট
আমরা একটি ছবির নিচে ক্যাপশন লেখার পদ্ধতি নিয়ে আলোচনা করেছি।
উপসংহার
একটি চিত্রের নীচে একটি ক্যাপশন লিখতে, ব্যবহারকারীরা হয় '
'উপাদান বা একটি সাধারণ' 'পাত্র। “” ব্যবহার করতে, প্রথমে যোগ করুন “ 'এলিমেন্টের ভিতরে ইমেজ এমবেড করতে' <চিত্র> ” উপাদান, তারপর, “
” উপাদানটি ব্যবহার করুন এবং এর ট্যাগের মধ্যে একটি ক্যাপশন যোগ করুন। দ্বিতীয় পদ্ধতিতে, ব্যবহারকারীরা কেবল ' ” উপাদান এবং ক্যাপশন সুন্দর করতে বিভিন্ন CSS বৈশিষ্ট্য প্রয়োগ করুন। এই পোস্টটি একটি চিত্রের নীচে ক্যাপশন লেখার পদ্ধতিগুলি প্রদর্শন করেছে৷