এই পোস্টটি সংক্ষিপ্তভাবে একটি URL থেকে ইমেজ যোগ করার পদ্ধতি ব্যাখ্যা করবে।
কিভাবে HTML/CSS এ একটি URL থেকে একটি ছবি যোগ করবেন?
HTML/CSS-এ, URL ব্যবহার করে একটি ছবি যোগ করার জন্য দুটি পদ্ধতি উপলব্ধ, যা নীচে তালিকাভুক্ত করা হয়েছে:
- পদ্ধতি 1: HTML এ একটি উপাদান ব্যবহার করে ছবি যোগ করুন
- পদ্ধতি 2: HTML এ CSS বৈশিষ্ট্য ব্যবহার করে ছবি যোগ করুন
পদ্ধতি 1: এলিমেন্ট ব্যবহার করে ছবি যোগ করুন
দ্য ' ” উপাদান হল একটি একক অকার্যকর উপাদান যার কোনো চাইল্ড কন্টেন্ট এবং শেষ ট্যাগ নেই। দ্য ' src ' এবং ' সবকিছু ” হল দুটি মূল বৈশিষ্ট্য যা “ ” ট্যাগের ভিতরে ব্যবহার করা হয়।
উপাদান ব্যবহার করে একটি ছবি যোগ করার জন্য নীচের নির্দেশাবলী দেখুন!
ধাপ 1: একটি ডিভ কন্টেইনার তৈরি করুন
প্রথমে, ' ব্যবহার করে একটি ডিভ কন্টেইনার তৈরি করুন এরপর, 'থেকে প্রয়োজনীয় শিরোনাম ট্যাগ ব্যবহার করুন ' প্রতি ' ট্যাগ উদাহরণস্বরূপ, আমরা এর পরে, একটি যোগ করুন ' ট্যাগ করুন এবং চিত্র ট্যাগের ভিতরে নীচের তালিকাভুক্ত বৈশিষ্ট্যগুলি সন্নিবেশ করুন: নীচের প্রদত্ত আউটপুট অনুসারে, নির্দিষ্ট চিত্রটি সফলভাবে যোগ করা হয়েছে: বিকাশকারীরাও CSS ব্যবহার করে একটি URL থেকে চিত্র যোগ করতে পারে “ ব্যাকগ্রাউন্ড-ইমেজ 'সিএসএস। এই উদ্দেশ্যে, নীচের প্রদত্ত পদক্ষেপগুলি অনুসরণ করুন। প্রথমে, এরপর, এখন, ডট সিলেক্টরের মাধ্যমে ক্লাসে প্রবেশ করুন “ . এবং ক্লাসের নাম যা আগে তৈরি করা হয়েছিল। এর পরে, ক্লাসের ভিতরে একটি URL থেকে চিত্র যোগ করতে নীচের তালিকাভুক্ত CSS বৈশিষ্ট্যগুলি প্রয়োগ করুন: উপরে প্রদত্ত কোডে: আউটপুট আপনি URL থেকে ছবি যোগ করার বিভিন্ন পদ্ধতি সম্পর্কে শিখেছেন। একটি URL থেকে একটি ছবি যোগ করতে, বিকাশকারীরা ব্যবহার করতে পারেন ' ট্যাগ তারপর, সন্নিবেশ করান ' src ' বৈশিষ্ট্য এবং 'src' মান হিসাবে URL বরাদ্দ করুন। তদ্ব্যতীত, ব্যবহারকারী CSS ব্যবহার করে URL থেকে একটি চিত্র যোগ করতে পারেন “ ব্যাকগ্রাউন্ড-ইমেজ 'সম্পত্তি। এই লেখায় এইচটিএমএল/সিএসএস-এ URL থেকে ছবি যোগ করার পদ্ধতি উল্লেখ করা হয়েছে।
ধাপ 2: শিরোনাম ঢোকান
ট্যাগ ব্যবহার করব এবং ওপেনিং এবং ক্লোজিং ট্যাগের ভিতরে একটি শিরোনাম হিসাবে নির্দিষ্ট পাঠ্য যোগ করব।
ধাপ 3: URL ব্যবহার করে একটি ছবি যোগ করুন
< div ক্লাস = 'img-কন্টিনার' >
< h2 > URL এর সাথে ছবি যোগ করুন < / h2 >
< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' সবকিছু = 'ছবি!' উচ্চতা = '400px' প্রস্থ = '300px' / >
< / div >
পদ্ধতি 2: HTML এ CSS বৈশিষ্ট্য ব্যবহার করে ছবি যোগ করুন
ধাপ 1: শিরোনাম ঢোকান
ওপেনিং এবং ক্লোজিং ট্যাগের সাহায্যে একটি শিরোনাম লেখা প্রবেশ করান।
ধাপ 2: ডিভ কন্টেইনার তৈরি করুন
> URL এর সাথে ছবি যোগ করুন
>
ধাপ 3: কনটেইনার অ্যাক্সেস করুন
ধাপ 4: 'ব্যাকগ্রাউন্ড-ইমেজ' CSS প্রপার্টি ব্যবহার করে ছবি যোগ করুন
উচ্চতা : 400px ;
প্রস্থ : 250px ;
ব্যাকগ্রাউন্ড সাইজ : ধারণ ;
ব্যাকগ্রাউন্ড-ইমেজ : url ( https : //ছবি পেক্সেল .com/photos/ 2260800 /পেক্সেল-ফটো- 2260800 .jpeg? স্বয়ংক্রিয় = কম্প্রেস এবং সি.এস = tinysrgb&w = 1260 &h = 750 &dpr = এক )
}
উপসংহার