একটি URL থেকে একটি ছবি যোগ করা - HTML

Ekati Url Theke Ekati Chabi Yoga Kara Html



এইচটিএমএল-এ, ছবিগুলি ওয়েবসাইটগুলিকে আরও আকর্ষণীয় করে তোলে এবং মানুষের উদ্দেশ্য অর্জন করে। এটি ডেভেলপারদের বিভিন্ন ইমেজ দিয়ে তাদের ওয়েব পেজ কাস্টমাইজ করতে দেয়। উপরন্তু, তারা পছন্দসই ছবির URL অনুলিপি করে এবং তারপর 'এর মান হিসাবে এটি নির্দিষ্ট করে ইন্টারনেট থেকে সরাসরি তাদের যোগ করতে পারে। src ” ইমেজ ট্যাগের ভিতরে অ্যাট্রিবিউট। তাছাড়া, ডেভেলপাররা CSS প্রপার্টির সাহায্যে ইমেজ যোগ করতে পারে যা ' ব্যাকগ্রাউন্ড-ইমেজ

এই পোস্টটি সংক্ষিপ্তভাবে একটি URL থেকে ইমেজ যোগ করার পদ্ধতি ব্যাখ্যা করবে।

কিভাবে HTML/CSS এ একটি URL থেকে একটি ছবি যোগ করবেন?

HTML/CSS-এ, URL ব্যবহার করে একটি ছবি যোগ করার জন্য দুটি পদ্ধতি উপলব্ধ, যা নীচে তালিকাভুক্ত করা হয়েছে:







পদ্ধতি 1: এলিমেন্ট ব্যবহার করে ছবি যোগ করুন

দ্য ' ” উপাদান হল একটি একক অকার্যকর উপাদান যার কোনো চাইল্ড কন্টেন্ট এবং শেষ ট্যাগ নেই। দ্য ' src ' এবং ' সবকিছু ” হল দুটি মূল বৈশিষ্ট্য যা “ ” ট্যাগের ভিতরে ব্যবহার করা হয়।



উপাদান ব্যবহার করে একটি ছবি যোগ করার জন্য নীচের নির্দেশাবলী দেখুন!



ধাপ 1: একটি ডিভ কন্টেইনার তৈরি করুন

প্রথমে, ' ব্যবহার করে একটি ডিভ কন্টেইনার তৈরি করুন

ট্যাগ তারপর, সন্নিবেশ করান ' ক্লাস ” বৈশিষ্ট্য এবং ইচ্ছা অনুযায়ী ক্লাসের একটি নাম বরাদ্দ করুন।





ধাপ 2: শিরোনাম ঢোকান

এরপর, 'থেকে প্রয়োজনীয় শিরোনাম ট্যাগ ব্যবহার করুন

' প্রতি '
ট্যাগ উদাহরণস্বরূপ, আমরা

ট্যাগ ব্যবহার করব এবং ওপেনিং এবং ক্লোজিং ট্যাগের ভিতরে একটি শিরোনাম হিসাবে নির্দিষ্ট পাঠ্য যোগ করব।


ধাপ 3: URL ব্যবহার করে একটি ছবি যোগ করুন

এর পরে, একটি যোগ করুন ' ট্যাগ করুন এবং চিত্র ট্যাগের ভিতরে নীচের তালিকাভুক্ত বৈশিষ্ট্যগুলি সন্নিবেশ করুন:



  • ' src মিডিয়া ফাইল যোগ করার জন্য ” বৈশিষ্ট্য ব্যবহার করা হয়। সেই উদ্দেশ্যে, আপনার পছন্দসই ওয়েব ব্রাউজার চালু করুন এবং পছন্দসই ছবির URLটি অনুলিপি করুন।
  • তারপরে, 'এর মান হিসাবে URL নির্দিষ্ট করুন src ” বৈশিষ্ট্য।
  • পরবর্তী, ' সবকিছু ” ইমেজটির জন্য একটি নাম যোগ করার জন্য ব্যবহার করা হয় যখন এটি কোনো কারণে দেখানো হয় না।
  • ' উচ্চতা ' সম্পত্তি প্রদত্ত মান অনুযায়ী উপাদানের উচ্চতা নির্দিষ্ট করে।
  • ' প্রস্থ উপাদানটির প্রস্থ নির্ধারণের জন্য ব্যবহার করা হয়েছে:
< 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 বৈশিষ্ট্য ব্যবহার করে ছবি যোগ করুন

বিকাশকারীরাও CSS ব্যবহার করে একটি URL থেকে চিত্র যোগ করতে পারে “ ব্যাকগ্রাউন্ড-ইমেজ 'সিএসএস। এই উদ্দেশ্যে, নীচের প্রদত্ত পদক্ষেপগুলি অনুসরণ করুন।

ধাপ 1: শিরোনাম ঢোকান

প্রথমে,

ওপেনিং এবং ক্লোজিং ট্যাগের সাহায্যে একটি শিরোনাম লেখা প্রবেশ করান।

ধাপ 2: ডিভ কন্টেইনার তৈরি করুন

এরপর,

ট্যাগ ব্যবহার করে একটি div কন্টেইনার তৈরি করুন এবং এর নামের সাথে একটি ক্লাস অ্যাট্রিবিউট যোগ করুন:

> URL এর সাথে ছবি যোগ করুন >

= 'img-ধারক' > >

ধাপ 3: কনটেইনার অ্যাক্সেস করুন

এখন, ডট সিলেক্টরের মাধ্যমে ক্লাসে প্রবেশ করুন “ . এবং ক্লাসের নাম যা আগে তৈরি করা হয়েছিল।

ধাপ 4: 'ব্যাকগ্রাউন্ড-ইমেজ' CSS প্রপার্টি ব্যবহার করে ছবি যোগ করুন

এর পরে, ক্লাসের ভিতরে একটি URL থেকে চিত্র যোগ করতে নীচের তালিকাভুক্ত CSS বৈশিষ্ট্যগুলি প্রয়োগ করুন:

.img-ধারক {

উচ্চতা : 400px ;

প্রস্থ : 250px ;

ব্যাকগ্রাউন্ড সাইজ : ধারণ ;

ব্যাকগ্রাউন্ড-ইমেজ : url ( https : //ছবি পেক্সেল .com/photos/ 2260800 /পেক্সেল-ফটো- 2260800 .jpeg? স্বয়ংক্রিয় = কম্প্রেস এবং সি.এস = tinysrgb&w = 1260 &h = 750 &dpr = এক )

}

উপরে প্রদত্ত কোডে:

  • ' উচ্চতা উপাদানের উচ্চতা নির্ধারণের জন্য সম্পত্তি ব্যবহার করা হয়।
  • ' প্রস্থ ” উপাদানটির প্রস্থের আকার নির্দিষ্ট করতে ব্যবহৃত হয়।
  • ' ব্যাকগ্রাউন্ড সাইজ ” ব্যাকগ্রাউন্ড এলিমেন্ট সাইজ সেট করার জন্য ব্যবহার করা হয়।
  • ' ব্যাকগ্রাউন্ড-ইমেজ ' সম্পত্তি উপাদানের পিছনে একটি চিত্র যোগ করে। এই সংশ্লিষ্ট উদ্দেশ্যে, ' url() ' ফাংশনটি ইমেজ যোগ করার জন্য এবং ফাংশনে ছবির URL পেস্ট করার জন্য ব্যবহার করা হয় ' ()

আউটপুট

আপনি URL থেকে ছবি যোগ করার বিভিন্ন পদ্ধতি সম্পর্কে শিখেছেন।

উপসংহার

একটি URL থেকে একটি ছবি যোগ করতে, বিকাশকারীরা ব্যবহার করতে পারেন ' ট্যাগ তারপর, সন্নিবেশ করান ' src ' বৈশিষ্ট্য এবং 'src' মান হিসাবে URL বরাদ্দ করুন। তদ্ব্যতীত, ব্যবহারকারী CSS ব্যবহার করে URL থেকে একটি চিত্র যোগ করতে পারেন “ ব্যাকগ্রাউন্ড-ইমেজ 'সম্পত্তি। এই লেখায় এইচটিএমএল/সিএসএস-এ URL থেকে ছবি যোগ করার পদ্ধতি উল্লেখ করা হয়েছে।