IN এইচটিএমএল ছবিএকটি ট্যাগ ব্যবহার করে ঢোকানো হয়েছে img.
ট্যাগ img- খালি, এটিতে গুণাবলী রয়েছে এবং একটি ক্লোজিং ট্যাগ নেই।

পৃষ্ঠায় একটি চিত্র প্রদর্শন করতে বৈশিষ্ট্যটি ব্যবহার করা হয় src. Srcউৎস থেকে এসেছে, যার অর্থ উৎস। src অ্যাট্রিবিউটের মান হল urlছবি

উপরের লাইনটির মানে হল যে ছবিটি একই ডিরেক্টরিতে (ফোল্ডার) এইচটিএমএল ফাইলের মতো যা এই ছবির সাথে লিঙ্ক করে। ধরা যাক আপনার একটি ফোল্ডার আছে html, যা রয়েছে index.htmlউপরের কোড এবং শিরোনামের সাথে ইমেজ নিজেই image.jpg.

এই ক্ষেত্রে, খোলার সময় index.htmlআপনি আপনার ব্রাউজারে এই ছবিটি দেখতে পাবেন। যদি আপনার কাছে এটি অন্য কোথাও থাকে (উচ্চ বা নীচে একটি ফোল্ডার), তবে পরিবর্তে আপনি একটি সাদা ক্ষেত্র বা একটি লাল ক্রস সহ একটি ছোট আয়তক্ষেত্র দেখতে পাবেন (ছবিটি লোড করা যায়নি)৷

চিত্রগুলি সবসময় ফাইলের মতো একই ডিরেক্টরিতে (ফোল্ডার) থাকে না, তাই নির্দিষ্ট পাথগুলি আরও নির্দিষ্টভাবে একটু পরে বর্ণনা করা হবে।

img ট্যাগ বৈশিষ্ট্য

src ছাড়াও, img ট্যাগের অন্যান্য বৈশিষ্ট্য রয়েছে যা প্রদর্শিত চিত্রের আকার, এর ক্যাপশন ইত্যাদির জন্য দায়ী।

src- ছবির ঠিকানা
প্রস্থ- ছবির প্রস্থ
উচ্চতা- ছবির উচ্চতা
শিরোনাম- স্বাক্ষর যা প্রদর্শিত হয় যখন আপনি ছবিটির উপর ঘোরান
alt- বিকল্প পাঠ্য। অনুসন্ধান রোবট এবং ইমেজ ইন্ডেক্সিংয়ের জন্য প্রয়োজন
সীমান্ত- চিত্রের সীমানার বেধ। 0 - কোন সীমানা নেই, 1 - সবচেয়ে পাতলা সীমানা, ইত্যাদি।

ঢোকানো ছবির ঠিকানা (উদাহরণ)

একটি নিয়ম হিসাবে, ছবিহিসাবে একই ফোল্ডারে সংরক্ষণ করা হয় না html ফাইল. এই উদ্দেশ্যে, একই ডিরেক্টরিতে একটি ফোল্ডার তৈরি করা হয় ছবি(বা img, স্বাদ এবং রঙের উপর নির্ভর করে)। এবং সমস্ত প্রয়োজনীয় ছবি ইতিমধ্যে এটি স্থাপন করা হয়. আলাদা স্টোরেজের ক্ষেত্রে, আপনাকে src অ্যাট্রিবিউটের জন্য একটি আলাদা ঠিকানা উল্লেখ করতে হবে

যদি ফাইলটি উপরের ফোল্ডারে থাকে, তাহলে তাই

আপনি আপনার ফোল্ডারে ডাউনলোড না করেই সম্পূর্ণ অন্য সাইট থেকে একটি ছবি সন্নিবেশ করতে পারেন। এটি করতে আপনার অবশ্যই থাকতে হবে স্থিতিশীল সংযোগইন্টারনেটে এবং প্রায় নিম্নলিখিত কোড, যেখানে আপনি ঠিকানায় ইন্টারনেটে চিত্রটির ঠিকানা প্রবেশ করান:

HTML এ ব্যাকগ্রাউন্ড ইমেজ

হিসাবে ব্যাকগ্রাউন্ড ইমেজএক্সটেনশন সহ ফাইল প্রদর্শিত হতে পারে gif, jpg, jpegএবং png. যদি চিত্রের আকার ব্রাউজার উইন্ডোর থেকে ছোট হয়, তাহলে ছবিটি স্বয়ংক্রিয়ভাবে অবশিষ্ট পটভূমি পূরণ করতে থাকবে। IN শরীরবৈশিষ্ট্য ব্যবহার করুন পটভূমি, যেখানে আমরা চিত্রের পথটি নির্দিষ্ট করি

হ্যালো, ব্লগ সাইটের প্রিয় পাঠকদের. নিবন্ধে আপনার ওয়েবসাইটের পৃষ্ঠাগুলিতে ছবি ঢোকানোর জন্য কোনটি এবং কোন ক্ষেত্রে ব্যবহার করা ভাল হবে সে সম্পর্কে আমরা বিস্তারিতভাবে কথা বলতে পেরেছি, যার লিঙ্কটি উপরে দেওয়া হয়েছে।

আজ আমরা ইমেজ সন্নিবেশ করার জন্য Img ট্যাগ ব্যবহার করার সমস্ত দিক বিস্তারিতভাবে দেখব, আসুন দেখি কিভাবে একটি ছবির চারপাশে টেক্সট সেট করতে হয়। এইচটিএমএল কোড, আমরা শিখব কিভাবে সাইটের ব্যাকগ্রাউন্ড হিসাবে ছবি ব্যবহার করতে হয়, কিভাবে তাদের আকার পরিবর্তন করতে হয় এবং সারিবদ্ধকরণ (মাঝে, বাম এবং ডান) সেট করতে হয়।

Img ট্যাগ এবং এর Src, প্রস্থ এবং উচ্চতা বৈশিষ্ট্য ব্যবহার করা

তো চলুন দেখি কিভাবে আপনি আপনার ওয়েবসাইটে গ্রাফিক্স ব্যবহার করতে পারেন। প্রথমত, পৃষ্ঠার এইচটিএমএল কোডে একটি উপাদান (বস্তু) হিসাবে একটি চিত্র সন্নিবেশ করা সম্ভব। শুধু এই ধরনের একটি সন্নিবেশ Img ব্যবহার করে বাহিত হয়, যা বিশেষ - প্রতিস্থাপিত সামগ্রী সহ ইনলাইন উপাদান, যার মধ্যে রয়েছে মাত্র চারটি, যার মধ্যে কয়েকটি আমরা ইতিমধ্যে উল্লেখ করেছি, এবং বাকি তিনটি - (ফ্রেমের একটি আধুনিক ব্যবহার), (ভিডিও এবং অন্যান্য মিডিয়া সামগ্রী সন্নিবেশ করার জন্য)।

এটি ঠিক একটি ইনলাইন উপাদানের মতো আচরণ করে, তবে এর ভিতরে বহিরাগত বাহ্যিক সামগ্রী প্রদর্শিত হয় (Img বা ভিডিওর ক্ষেত্রে ফটো এবং অবজেক্ট এবং এম্বেডের ক্ষেত্রে ফ্ল্যাশ)। এই চারটি উপাদানের যেকোন একটি বহিরাগত ফাইলের উপস্থিতি বোঝায় যা এই অঞ্চলে লোড করা হবে, এটির বৈশিষ্ট্যগুলিতে নির্দিষ্ট করা হয়েছে।

পথ নির্দেশ করতে গ্রাফিক ফাইল, যা পৃষ্ঠায় লোড করা আবশ্যক, একটি বিশেষ হিসাবে কাজ করে Src বৈশিষ্ট্য.

ব্যবহারকারীর ব্রাউজার, পৃষ্ঠার এইচটিএমএল কোড পার্স করার সময়, এটিতে Img ট্যাগের মুখোমুখি হওয়ার সাথে সাথেই ইনলাইন উপাদানের জন্য একটি এলাকা তৈরি করে যেখানে এটি লোড হয়। বাহ্যিক ফাইল(উদাহরণস্বরূপ, ফটোগ্রাফি)। ব্রাউজার Src এর বিষয়বস্তু থেকে ফাইলের পথ নেয়।

যখন একটি ছবি আপনার সার্ভার থেকে ব্যবহারকারীর কম্পিউটারে ডাউনলোড হতে শুরু করে, তখন ব্রাউজার এই চিত্রটির প্রকৃত মাত্রা নির্ধারণ করে এবং কোডে Img উপাদান সনাক্ত করার সময় এটি তৈরি করা লাইন এলাকাটি এই একই মাত্রার দ্বারা প্রসারিত করে।

আপনি যদি ব্রাউজারটি অবিলম্বে এই উপাদানটির জন্য প্রয়োজনীয় আকারের একটি এলাকা বরাদ্দ করতে চান এবং লোড করা চিত্রের আকার সম্পর্কে ডেটা পাওয়ার সময় এটি পরিবর্তন না করে তবে আপনাকে নির্দিষ্ট করতে হবে প্রস্থ এবং উচ্চতা বৈশিষ্ট্য.

আপনি যদি সেগুলি সেট করেন, তাহলে ব্যবহারকারীর ব্রাউজার প্রয়োজনীয় মাত্রা সহ একটি এলাকা তৈরি করে এবং সেখানে আপনার ফটো ফিট করবে, এমনকি এটি একটি ভিন্ন আকারের হলেও। যাইহোক, কখনও কখনও আপনি নবাগত ওয়েবমাস্টারদের ওয়েবসাইটে এই জাতীয় ত্রুটির সম্মুখীন হন।

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

এবং ফলাফল কি? এই ধরনের একটি সাইটের একজন দর্শক উল্লিখিত বৈশিষ্ট্যগুলিতে নির্দিষ্ট একটি অপেক্ষাকৃত ছোট এলাকায় চিত্রটির হতাশাজনকভাবে ধীর গতিতে লোডিং পর্যবেক্ষণ করেন (অনেক মেগাবাইট ওজন 300 বাই 400 পিক্সেলের আকারে ফিট)৷

অতএব, অবিলম্বে ওয়েবে পোস্ট করার জন্য একই আকারের ছবি তৈরি করুন যা আপনি সাইটে প্রদর্শন করবেন এবং Img ট্যাগের প্রস্থ এবং উচ্চতা লিখবেন। আপনার ব্যবহারকারীদের সম্মান করুন এবং তাদের ট্রাফিক (বিশেষ করে মোবাইল) নষ্ট করবেন না। আপনি, উদাহরণস্বরূপ, ফাস্টস্টোন ইমেজ ভিউয়ারে বা অন্য কোনও গ্রাফিক সম্পাদকে, উদাহরণস্বরূপ, .

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

এখন দেখা যাক কিভাবে আপনি Img ট্যাগের Src-এ ইমেজ ফাইলের পাথ নির্দিষ্ট করতে পারেন। আসলে, আপনি ব্যবহার করতে পারেন এবং, যা আমি ইতিমধ্যে উপরের নিবন্ধে কিছু বিশদে লিখেছি। এটি সব সূক্ষ্মতা এবং সুবিধার উপর নির্ভর করে।

যারা. Src তে, উদাহরণস্বরূপ, নিম্নলিখিত এন্ট্রি থাকতে পারে:

প্রথম ক্ষেত্রে, গ্রাফিক ফাইলটি আপনার ওয়েব পৃষ্ঠার ফাইলের মতো একই ফোল্ডারে থাকা উচিত (যদি আপনি ব্যবহার করেন, প্রথম দুটি বিকল্প আপনার জন্য উপযুক্ত হবে না, যদিও এটি CSS-এ একটি পটভূমি চিত্র সেট করার জন্য খুব সুবিধাজনক)। দ্বিতীয় ক্ষেত্রে, গ্রাফিক্সগুলি আপনার পৃষ্ঠা ফাইলের সাপেক্ষে একটি সাবফোল্ডারে অবস্থিত এবং তৃতীয় ক্ষেত্রে, চিত্র সহ ফাইলটির নিখুঁত পথ Src-এ নির্দেশিত হয়েছে।

সাধারণভাবে, এইচটিএমএল ভাষার নিয়ম অনুসারে, শুধুমাত্র নথিটিই আপনার সার্ভারে থাকতে হবে ( ওয়েব পেজ), এবং অন্যান্য সমস্ত নথি এবং ফাইল (গ্রাফিক্স, ভিডিও, স্ক্রিপ্ট, শৈলী) যা এটির সাথে লোড করা হবে তা বিভিন্ন সার্ভারে অবস্থিত হতে পারে।

এই, উপায় দ্বারা, বৃদ্ধি উপায় এক. এবং একই ভিজিট কাউন্টার যা আপনি সম্ভবত আপনার রিসোর্সে নিরীক্ষণের জন্য ব্যবহার করবেন সেগুলি আপনার ছাড়া অন্য হোস্ট থেকে তাদের ইনফর্মার এবং স্ক্রিপ্ট লোড করবে।

কিভাবে Img এ একটি লিঙ্ক, Alt এবং Title অ্যাসাইনমেন্ট সহ একটি ছবি ঢোকাবেন?

যদি Img অন্তর্নিহিতভাবে একটি ইনলাইন উপাদান হয়, তাহলে এটি সহজভাবে হতে পারে মূলধন করা, যার মানে এই ট্যাগটিকে একটি হাইপারলিংকের ভিতরে সংযুক্ত করে ছবিটিকে একটি লিঙ্ক তৈরি করা থেকে আমাদের বাধা দেওয়ার কিছু নেই৷ সাধারণভাবে, আমি ইতিমধ্যে একটি সাম্প্রতিক নিবন্ধে এটি সম্পর্কে কিছু বিশদভাবে লিখেছি, তবে নিজেকে একটু পুনরাবৃত্তি করা পাপ হবে না।

ru/image/webcamxp.png">

IE ব্রাউজারে, আপনার লিঙ্ক করা ছবির চারপাশে একটি তিন-পিক্সেল চওড়া ফ্রেম প্রদর্শিত হবে। এটি অপসারণ করতে, আপনাকে এটিকে Img ট্যাগে যুক্ত করতে হবে সীমানা বৈশিষ্ট্যমান শূন্য সহ:

সেই সব ক্ষেত্রে যখন কোনো কারণে গ্রাফিক ফাইল লোড করা যায় না HTML নথি(এটির পথটি সঠিকভাবে লেখা হয়নি বা অন্য কিছু), একটি বিশেষ Alt অ্যাট্রিবিউট.

Alt একটি বিকল্প চিত্র দৃশ্য হিসাবে কাজ করে। গ্রাফিক্স লোড না হলে কি হয়? যাইহোক ব্রাউজার, কোডে Img উপাদান সনাক্ত করার পরে, এটির অধীনে একটি এলাকা গঠন করে, যা ব্যবহারকারীর দ্বারা ব্যবহৃত ব্রাউজারের উপর নির্ভর করে, হয় একটি প্রদত্ত আকারে থাকতে পারে বা ভেঙে যেতে পারে।

কিন্তু যাতে ব্যবহারকারীর ধারণা থাকে যে পৃষ্ঠায় এই জায়গায় একটি ছবি থাকা উচিত, আপনি Img-এ Alt লিখুন, যেখানে আপনি এখানে কী চিত্রিত করা উচিত তা বর্ণনা করে পাঠ্য প্রবেশ করান। Alt-এর বিষয়বস্তু আনলোড করা ছবির এলাকায় প্রদর্শিত হবে।

ঠিক আছে, এবং এর পাশাপাশি, এইচটিএমএল কোডের ছবিগুলির জন্য, সেইসাথে হাইপারটেক্সট মার্কআপ ভাষার অন্যান্য উপাদানগুলির জন্য (উদাহরণস্বরূপ, একই হাইপারলিঙ্কগুলির জন্য), ব্যবহারকারী যখন মাউস কার্সারটি ঘোরায় তখন কিছু সহগামী পাঠ্য দেখানো সম্ভব। তাদের

এটি একটি বিশেষ বৈশিষ্ট্য ব্যবহার করে করা হয় শিরোনাম, যা আমাদের ক্ষেত্রে Img এ ঢোকানো হয়। এটি মূলত একটি টুলটিপ এবং পৃষ্ঠায় দৃশ্যমান প্রায় সমস্ত এইচটিএমএল কোড উপাদানগুলির জন্য ব্যবহার করা যেতে পারে যখন আপনাকে আরও স্পষ্ট করার প্রয়োজন হয়৷

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

Pngе" height="71" width="90" alt="" title="">৷

প্রকৃতপক্ষে, Img ট্যাগের Alt এবং শিরোনামের বিষয়বস্তু শুধুমাত্র আপনার সাইটের দর্শকদের সুবিধার জন্যই নয়, আপনার প্রকল্পের প্রচারের সাফল্যের ক্ষেত্রেও এটি অত্যন্ত গুরুত্বপূর্ণ ভূমিকা রাখতে পারে।

এটি করার জন্য, আপনাকে ব্যবহার করার কথা মনে রাখতে হবে, যেমন আমি এটি সম্পর্কে অনেকবার লিখেছি, উদাহরণস্বরূপ, সম্পর্কে একটি নিবন্ধে বা এর বিষয়ে একটি প্রকাশনায়।

কীওয়ার্ড Alt এবং শিরোনামে (বিশেষ করে Alt-এ) উল্লেখযোগ্যভাবে উন্নতি করতে পারে, সেইসাথে পরিষেবাগুলিতেও। যাইহোক, এই সঙ্গে সতর্কতা অবলম্বন করা প্রয়োজন, কারণ এটি অধীনে পেতে বেশ সহজ.

Html-এ একটি চিত্রের চারপাশে পাঠ্য মোড়ানো - Img ট্যাগের সারিবদ্ধ বৈশিষ্ট্য

এখন এইচটিএমএল কোডে সন্নিবেশিত চিত্রগুলিকে সারিবদ্ধ করার বিষয়ে কথা বলা যাক। প্রতিস্থাপনযোগ্য বিষয়বস্তু (Img, Iframe, Object এবং Embed) সহ চারটি ইনলাইন উপাদানের বৈশিষ্ট্য ব্যবহার করে সারিবদ্ধ হওয়ার ক্ষমতা রয়েছে সারিবদ্ধ. কিন্তু এটি আসলে শুধুমাত্র ব্লক উপাদানের ক্ষেত্রে প্রযোজ্য, এবং উল্লেখিত ট্যাগগুলি হল ইনলাইন ট্যাগ।

অতএব, Img-এর জন্য কিছু সারিবদ্ধ মান (উদাহরণস্বরূপ, একটি চিত্রের চারপাশে মোড়ানোর জন্য পাঠ্য সেট করা) এর অর্থ ব্লক উপাদানগুলিতে (ইত্যাদি) একই বৈশিষ্ট্য ব্যবহার করার চেয়ে সম্পূর্ণ আলাদা কিছু হবে।

সাধারণভাবে, Img-এ ব্যবহৃত হলে অ্যালাইন ব্যবহার করে ছবি সারিবদ্ধ করাকে দুটি গ্রুপে ভাগ করা যায়।

সুতরাং, যখন আমরা একটি নথির পাঠ্যে একটি গ্রাফিক ফাইল সন্নিবেশ করি তখন কী ঘটে? আসলে, এটি একটি বড় অক্ষর হিসাবে প্রদর্শিত হয়:

ডিফল্টরূপে, নীচের প্রান্তিককরণ ব্যবহার করা হয়, যেমন Img এলিমেন্টে align="bottom" অ্যাট্রিবিউট যোগ করলে কিছুই পরিবর্তন হবে না। কিন্তু আপনি উপাদানটিতে align="top" যোগ করে উপরের প্রান্তে চিত্র প্রান্তিককরণ সেট করার চেষ্টা করতে পারেন:

Png" align="top">৷

এই ক্ষেত্রে, ফটোটি যে লাইনে অবস্থিত সেখানে পাঠ্যটি তার উপরের প্রান্ত বরাবর সারিবদ্ধ ছিল।

এই বৈশিষ্ট্যের জন্য আরেকটি সম্ভাব্য মান আছে সারিবদ্ধ="মধ্য":

Png" align="middle">৷

এই ক্ষেত্রে, ছবির সাথে লাইনের পাঠ্যটি একই ছবির মাঝখানে সারিবদ্ধ হবে।

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

Img উপাদানের ভিতরে বাম এবং ডান মান ব্যবহার করার সময়, আমরা ছবিটির চারপাশে তথাকথিত পাঠ্য মোড়ানো অর্জন করি, যা এইচটিএমএল কোডে নির্দিষ্ট করা আছে। এই ক্ষেত্রে, অঙ্কন হয়ে যায় এবং পাঠ্যটি এটির চারপাশে প্রবাহিত হতে শুরু করে।

উদাহরণস্বরূপ, align="left" দিয়ে আমরা নিম্নলিখিত ফলাফল পাই:

Png" align="left">৷

Img-এ বাম মান মানে হল যে ফটোটি ভাসছে বাম দিকে, এবং পাঠ্যটি ডানদিকে এটির চারপাশে প্রবাহিত হয়। align="right" এর ক্ষেত্রে ছবিটি ভেসে উঠবে ডান দিকে, এবং এর পাঠ্য বাম দিকে প্রবাহিত হবে:

Png" align="right">৷

একটি চিত্রের চারপাশে মোড়ানোর জন্য পাঠ্য সেট করার সময়, একটি সতর্কতা রয়েছে - পাঠ্যটি এটির খুব কাছাকাছি অবস্থিত, যা একটি অপ্রীতিকর চেহারা তৈরি করে স্টিকিং প্রভাব. এই সমস্যাএটি ব্যবহার করে সমাধান করা বেশ সহজ, কিন্তু বিশুদ্ধ HTML এর নিজস্ব সমাধানও রয়েছে।

এটি করার জন্য, আপনি Img উপাদান - এর বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন Hspace এবং Vspace. তারা চিত্র থেকে দূরে মোড়ানো টেক্সট টিপুন ব্যবহার করা হয়. Hspace চিত্র থেকে আশেপাশের পাঠ্যের বাম এবং ডান প্যাডিং নির্দিষ্ট করে এবং Vspace উপরের এবং নীচে নির্দিষ্ট করে। ইন্ডেন্টে উল্লেখ করা হয়েছে, উদাহরণস্বরূপ:

Png" align="left" hspace="30" vspace="30">৷

পটভূমি - বিশুদ্ধ এইচটিএমএল-এ একটি ওয়েবসাইটের জন্য কীভাবে ব্যাকগ্রাউন্ড তৈরি করবেন

গ্রাফিক ফাইলগুলি শুধুমাত্র পৃষ্ঠা কোড উপাদান হিসাবে নয়, এর পটভূমি হিসাবে একটি পূরণ হিসাবেও ব্যবহার করা যেতে পারে। সাধারণভাবে, মধ্যে এইচটিএমএল ভাষারঙ দ্বারা বা ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করে সেট করা যেতে পারে। ঠিক আছে, CSS বৈশিষ্ট্যগুলি ব্যবহার করা প্রধান উপাদানগুলির মধ্যে একটি, কারণ আধুনিক সাইটগুলির পৃষ্ঠাগুলিতে Img ব্যবহার করে কোনও নকশা উপাদান ঢোকানো নেই৷

অতএব, ব্যাকগ্রাউন্ড ইমেজ আধুনিক বিন্যাসে একটি খুব গুরুত্বপূর্ণ ভূমিকা পালন করে CSS ব্যবহার করে(আমরা নীচের নিবন্ধে এটি সম্পর্কে কথা বলব)। আপাতত, আমরা অ্যাট্রিবিউট ব্যবহার করে বিশুদ্ধ এইচটিএমএল-এ কীভাবে এটি করা হয় তা দেখব পটভূমিউপাদান বডি এবং , গ্রাফিক ফাইলের পথ দেখায় যা দিয়ে ওয়েব পৃষ্ঠা বা টেবিল (বা এর পৃথক ঘর) পূরণ করা হবে।

উদাহরণস্বরূপ, বডিতে নিম্নলিখিত ব্যাকগ্রাউন্ড অ্যাট্রিবিউট যোগ করা হচ্ছে:

আমরা আমাদের সাইটের জন্য একটি পটভূমি পাব, একটি গুণিত ফটো সমন্বিত, যা একটি টাইলের মতো পুরো দৃশ্যমান এলাকাটি পূরণ করবে:

ব্যাকগ্রাউন্ড ইমেজ, উপরের বাম কোণ থেকে শুরু করে, একবারে দুটি অক্ষ বরাবর পুনরাবৃত্তি হয় (অ্যাবসিসা এবং অর্ডিনেট)। পরবর্তীটি পূর্ববর্তীটির সাথে সংযুক্ত, ইত্যাদি। যাইহোক, আপনি যদি একটি রঙ দিয়ে একটি পৃষ্ঠা বা টেবিলের পটভূমি পূরণ করতে চান তবে এর জন্য আপনাকে ব্যাকগ্রাউন্ড নয়, বৈশিষ্ট্যটি ব্যবহার করতে হবে bgcolor, মান হিসাবে আপনি সন্নিবেশ করতে পারেন, উদাহরণস্বরূপ, এই মত:

তারপরে আমরা bgcolor এর মাধ্যমে নির্দিষ্ট করা নিম্নলিখিত পটভূমির রঙটি পাই:

ব্যাকগ্রাউন্ড অ্যাট্রিবিউটের মতোই, bgcolor পুরো টেবিলের ব্যাকগ্রাউন্ড বা এর স্বতন্ত্র উপাদান সেট করতেও ব্যবহার করা যেতে পারে।

আপনার জন্য শুভকামনা! ব্লগ সাইটের পাতায় শীঘ্রই দেখা হবে

আপনি আগ্রহী হতে পারে

হোয়াইটস্পেস অক্ষর এবং এইচটিএমএল কোডের বিন্যাস, সেইসাথে বিশেষ অক্ষর নন-ব্রেকিং স্পেসএবং অন্যান্য স্মৃতিবিদ্যা
H1-H6, অনুভূমিক লাইন Hr, লাইন ব্রেক Br এবং অনুচ্ছেদ P Html 4.01 স্ট্যান্ডার্ড অনুযায়ী হেডিং-এর ট্যাগ এবং বৈশিষ্ট্য
Html-এ টেবিল - টেবিল, Tr এবং Td ট্যাগ, সেইসাথে Colspan, Cellpadding, Cellspacing এবং Rowspan তৈরি করার জন্য নির্বাচন করুন, বিকল্প, টেক্সটেরিয়া, লেবেল, ফিল্ডসেট, কিংবদন্তি - ট্যাগ এইচটিএমএল ফর্মড্রপডাউন তালিকা এবং পাঠ্য ক্ষেত্র
এম্বেড এবং অবজেক্ট - ওয়েব পৃষ্ঠাগুলিতে মিডিয়া সামগ্রী (ভিডিও, ফ্ল্যাশ, অডিও) প্রদর্শনের জন্য এইচটিএমএল ট্যাগ
এইচটিএমএল এবং সিএসএস কোডে কীভাবে রঙ সেট করা হয়, টেবিলে আরজিবি শেড নির্বাচন, ইয়ানডেক্স আউটপুট এবং অন্যান্য প্রোগ্রাম
কিভাবে HTML - IMG এবং A ট্যাগে একটি লিঙ্ক এবং একটি ছবি (ছবি) সন্নিবেশ করা যায়
হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ Html কি এবং কিভাবে W3C ভ্যালিডেটরে সমস্ত ট্যাগের তালিকা দেখতে হয়
সাইটের জন্য এইচটিএমএল ফর্ম - ওয়েব ফর্ম উপাদান তৈরির জন্য ট্যাগ ফর্ম, ইনপুট এবং নির্বাচন, বিকল্প, টেক্সটেরিয়া, লেবেল এবং অন্যান্য
ফন্ট ট্যাগ(ফেস, সাইজ এবং কালার), ব্লককোট এবং প্রাক-লিগেসি টেক্সট ফরম্যাটিং বিশুদ্ধ HTML এ (কোনও CSS ব্যবহার করা হয়নি)

আজকাল, প্রায় কোনও ওয়েবসাইটই এইচটিএমএল পৃষ্ঠাগুলিতে চিত্র ব্যবহার না করে করতে পারে না, কারণ জনপ্রিয় জ্ঞান বলে: "শতবার শোনার চেয়ে একবার দেখা ভাল।" এই নিবন্ধটি পড়ার পরে, আপনি কীভাবে IMG ট্যাগ ব্যবহার করবেন তা শিখবেন, যা ওয়েবসাইট পৃষ্ঠাগুলিতে ছবি যুক্ত করতে ব্যবহৃত হয়। আমরা HTML 5 এর উদাহরণ বিবেচনা করব, কিন্তু তারা হাইপারটেক্সট মার্কআপ ভাষার পূর্ববর্তী সংস্করণগুলির জন্যও কাজ করবে।

কিভাবে একটি HTML পৃষ্ঠায় একটি ছবি সন্নিবেশ করান

একটি পৃষ্ঠায় একটি ছবি সন্নিবেশ করতে, IMG HTML ট্যাগ ব্যবহার করুন। একটি চিত্রের জন্য, কমপক্ষে দুটি বৈশিষ্ট্য অবশ্যই নির্দিষ্ট করতে হবে: src (ছবি সহ ফাইলের পথ) এবং alt (বিকল্প পাঠ্য যা ব্যবহারকারী দেখতে পায় যদি ছবিটি লোড না হয়)। Alt অ্যাট্রিবিউট খালি হতে পারে, কিন্তু উপস্থিত থাকতে হবে। আপনি শিরোনাম বৈশিষ্ট্যটিও সেট করতে পারেন এবং তারপরে আপনি যখন ছবিটির উপর হোভার করবেন, তখন এই বৈশিষ্ট্যটিতে উল্লেখিত পাঠ্যটি প্রদর্শিত হবে।

যদি চিত্রটির সাথে ফাইলটি লোড করা পৃষ্ঠাটির মতো একই ফোল্ডারে থাকে তবে src বৈশিষ্ট্যে আপনি কেবল ফাইলের নাম নির্দিষ্ট করতে পারেন, উদাহরণস্বরূপ:

যদি পৃষ্ঠাটি http://www..html এ অবস্থিত হয় এবং চিত্রটি http://www..jpg হয়, তাহলে চিত্রটির পথটি নিম্নরূপ উল্লেখ করা হয়েছে:

যদি পৃষ্ঠাটি http://www..site/logo.jpg ফোল্ডারে থাকে, তাহলে পথটি এরকম হবে:

যদি ছবিটি http://www.site/images/ ফোল্ডারে থাকে, তাহলে যে ফোল্ডারে ছবিটি ঢোকানো হয়েছে সেই সাইটের পৃষ্ঠাটি কোন ফোল্ডারে অবস্থিত তা বিবেচ্য নয়, ফাইলের পথটি নিম্নরূপ নির্দিষ্ট করা যেতে পারে:

অথবা আপনি চিত্র ফাইলটির সম্পূর্ণ পথ নির্দিষ্ট করতে পারেন যদি এটি অন্য সাইটে অবস্থিত থাকে:

ছবির প্রস্থ এবং উচ্চতা

এইচটিএমএল এর পূর্ববর্তী সংস্করণগুলিতে, উচ্চতা এবং প্রস্থ প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি ব্যবহার করে সেট করা হয়েছিল, তবে এখন চিত্রের প্রদর্শনকে প্রভাবিত করে এমন সবকিছু সেট করা হয়েছে CSS ব্যবহার করেশৈলী বৈশিষ্ট্যে। প্রায়শই, প্রস্থ এবং উচ্চতা পিক্সেলে নির্দিষ্ট করা হয়:

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

এছাড়াও, প্রস্থ এবং উচ্চতা ব্রাউজার উইন্ডোর প্রস্থ বা উচ্চতার শতাংশ বা অন্য কিছু হিসাবে নির্দিষ্ট করা যেতে পারে ব্লক উপাদান, যা একটি চিত্র ধারণ করে:

টেক্সট এবং ইন্ডেন্টেশনে ছবি মোড়ানো

ডিফল্টরূপে, পাঠ্যটি চিত্রের নীচে প্রদর্শিত হয়। টেক্সটটি ছবির চারপাশে মোড়ানোর জন্য, ফ্লোট সিএসএস প্রপার্টি ব্যবহার করা হয়, যা অ্যালাইন অ্যাট্রিবিউটকে প্রতিস্থাপন করে। আমরা যদি ইমেজটি পাঠ্যের বাম দিকে হতে চাই এবং পাঠ্যটি তার চারপাশে ডানে এবং নীচে প্রবাহিত করতে চাই, তাহলে মানটি বাম সেট করুন CSS বৈশিষ্ট্য float, এবং যদি ছবিটি ডানদিকে থাকা উচিত, তাহলে মান ডান নির্দেশিত হয়:

অনুচ্ছেদের পাঠ্য এখানে যায়

এছাড়াও আপনি ছবির উপরে, ডানে, নীচে এবং বামে ইন্ডেন্ট সেট করতে পারেন:

একই সংক্ষিপ্ত আকারে বলা যেতে পারে:

বিকল্পভাবে, আপনি লিগ্যাসি vspace এবং hspace বৈশিষ্ট্যগুলির পরিবর্তে দুটি মার্জিন সম্পত্তি মান ব্যবহার করে উল্লম্ব এবং অনুভূমিক মার্জিন সেট করতে পারেন। ধরা যাক আমাদের উপরে এবং নীচে 10 পিক্সেলের মার্জিন এবং বাম এবং ডানে 8 পিক্সেল প্রয়োজন:

কিভাবে একটি ছবি একটি পৃষ্ঠার একটি লিঙ্ক করা

অথবা আমরা ছবির ফ্রেমের নিজস্ব রঙ, ধরন এবং বেধ সেট করতে পারি:

ওয়েবের জন্য ইমেজ ফরম্যাট

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

নিবন্ধটি অনুলিপি করা নিষিদ্ধ।

ইন্টারনেটে এমন একটি ওয়েবসাইট খুঁজে পাওয়া কঠিন যেখানে ছবি নেই, এবং এটি আশ্চর্যজনক নয়, কারণ তারা ওয়েবসাইট ডিজাইনের প্রধান অংশ, যা এটিকে একটি স্মরণীয় চেহারা দেয়। ক ভাল নকশাওয়েবসাইট এর সফল বিকাশের চাবিকাঠি। html এ ছবি প্রদর্শন করার জন্য শুধুমাত্র একটি ট্যাগ আছে .

1. ট্যাগ সিনট্যাক্স

ছবির বর্ণনা" src ="URL " [ বৈশিষ্ট্য ]>

দয়া করে মনে রাখবেন যে এই ট্যাগ একক এবং প্রয়োজন হয় নাক্লোজিং ট্যাগ .

src বৈশিষ্ট্য প্রয়োজন. এটি প্রদর্শিত চিত্রের ঠিকানা নির্দিষ্ট করতে ব্যবহৃত হয়। আপনি একটি পরম বা আপেক্ষিক URL উল্লেখ করতে পারেন। আপনি যদি ঠিকানাটি নির্দিষ্ট না করেন বা একটি ত্রুটি সহ এটি না লিখেন তবে ছবিটি প্রদর্শিত হবে না।

অ্যাট্রিবিউট alt="description" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

অবশিষ্ট বৈশিষ্ট্যগুলি ঐচ্ছিক, আমরা নীচে সেগুলি দেখব। প্রথমে, HTML-এ একটি চিত্র আউটপুট করার একটি সহজ উদাহরণ দেওয়া যাক।

2. কিভাবে html এ ছবি ঢোকাবেন

html এ একটি ছবি সন্নিবেশ করতে, ট্যাগ ব্যবহার করুন . আমরা একটু উঁচু সিনট্যাক্স দেখলাম। এর ব্যবহারিক উদাহরণ দেওয়া যাক.

উদাহরণ 2.1। একটি ট্যাগ ব্যবহার করে

... ...

এই কোড

IN এই উদাহরণেআমরা ইয়ানডেক্স ফটোতে ছবি থেকে ছবির সরাসরি ঠিকানা নির্দেশ করেছি। প্রায়শই, একই URL এ অবস্থিত ছবিগুলির লিঙ্কগুলি প্রদান করা হয়। উদাহরণস্বরূপ, src="/img/kartinka.jpg", i.e. আপেক্ষিক ঠিকানা নির্দেশিত হয়।

একটি সারিতে বেশ কয়েকটি ছবি স্থাপন করা সম্ভব। যদি তারা এক লাইনে ফিট না হয়, তারা স্বয়ংক্রিয়ভাবে পরের লাইনে চলে যাবে।

উদাহরণ 2.2। একের পর এক এইচটিএমএলে বেশ কিছু ছবি প্রদর্শন করা হচ্ছে

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

পৃষ্ঠায় নিম্নলিখিতগুলিতে রূপান্তরিত হয়:

আমরা অন্য ইমেজ পোস্ট করা হয়, এটা সঙ্গে হবে নতুন লাইন, কারণ এটি আর এই এক মাপসই হবে না.

উদাহরণ 2.3। img-এ বিকল্প টেক্সট (alt) ব্যবহার করা

ট্যাগে বিকল্প টেক্সট (alt অ্যাট্রিবিউট) অন্তর্ভুক্ত করার পরামর্শ দেওয়া হয় , ছবি পাওয়া যায় না যে মামলা বিরুদ্ধে নিজেকে বীমা. নিচে alt টেক্সট ব্যবহার করে একটি উদাহরণ দেওয়া হল। প্রথম ক্ষেত্রে, আমরা ছবির আকার নির্দিষ্ট করিনি, তবে দ্বিতীয়টিতে আমরা করি।

... উদাহরণ চিত্র" src ="321.jpg "> ...

পৃষ্ঠায় নিম্নলিখিতগুলিতে রূপান্তরিত হয়:

যদি আমরা অন্য একটি চিত্র রাখি, তবে এটি একটি নতুন লাইনে থাকবে, যেহেতু এটি এই লাইনে আর ফিট হবে না।

এখন এর সমস্ত ট্যাগ বৈশিষ্ট্যগুলি ঘনিষ্ঠভাবে দেখে নেওয়া যাক .

3. ট্যাগ বৈশিষ্ট্য এবং বৈশিষ্ট্য

1. প্রপার্টি align="parameter" - ছবির প্রান্তিককরণ নির্ধারণ করে। এই মানটি চিত্রের চারপাশে পাঠ্য কীভাবে প্রবাহিত হবে তাও প্রভাবিত করে। নিম্নলিখিত পরামিতি গ্রহণ করতে পারেন:

• বাম - বাম প্রান্তিককরণ
• মধ্যম - বর্তমান লাইনের বেসলাইনে চিত্রের মাঝখানে সারিবদ্ধ করুন
• নীচে - পার্শ্ববর্তী পাঠ্যের সাথে চিত্রের নীচের সীমানা সারিবদ্ধ করুন
• শীর্ষ - চিত্রের উপরের সীমানাটি বর্তমান লাইনের সর্বোচ্চ উপাদানের সাথে সারিবদ্ধ
• ডান - ডান প্রান্তিককরণ

উদাহরণ 3.1। html এ একটি চিত্রকে ডানদিকে সারিবদ্ধ করা

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

পৃষ্ঠায় নিম্নলিখিতগুলিতে রূপান্তরিত হয়:

2. প্রপার্টি alt="text" - подсказка/описание картинки. Выполняет сразу две важные функции:!}

• হোভারে টুলটিপ দেখায়
• ব্রাউজারে ছবি অক্ষম করা থাকলে, এই পাঠ্যটি প্রদর্শিত হয়

ইয়ানডেক্স ইমেজ এবং গুগল ইমেজে ইমেজ র‍্যাঙ্কিং করার সময় এই অ্যাট্রিবিউটটি খুবই গুরুত্বপূর্ণ। এটি প্রতিটি ছবিতে যোগ করা উচিত, কারণ এটি সার্চ ইঞ্জিন অ্যালগরিদমের অন্যতম কারণ।

উদাহরণ 3.2। একটি ফ্রেম (সীমান্ত) সহ html এ একটি চিত্র আউটপুট করা

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

পৃষ্ঠায় নিম্নলিখিতগুলিতে রূপান্তরিত হয়:

4. প্রপার্টি bordercolor="color" - ছবির চারপাশে মোড়ানো সীমানার রঙ সেট করে। বর্ডার অ্যাট্রিবিউট ০-এর বেশি হলেই বোঝা যায়।

উদাহরণ 3.3। একটি রঙিন ফ্রেম সহ html এ একটি চিত্র আউটপুট করা

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

ফলাফল ঠিক উপরে দেখা যাবে।

দ্রষ্টব্য

সীমানা এবং বর্ডার রঙের বৈশিষ্ট্যগুলি সেট করা যেতে পারে CSS শৈলী img করতে:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

5. প্রপার্টি উচ্চতা="NUMBER" - ছবির উচ্চতা সেট করে: হয় পিক্সেলে বা শতাংশ হিসাবে। উদাহরণস্বরূপ, যদি একটি চিত্রের আকার 400x200 থাকে এবং আমরা 150 পিক্সেলের উচ্চতা নির্দিষ্ট করি, তাহলে এটি 300x150 (25% ছোট) এ সংকুচিত হয়, যেমন সমানুপাতিকভাবে

6. প্রপার্টি width="NUMBER" - ছবির প্রস্থ সেট করে: হয় পিক্সেলে বা শতাংশ হিসাবে। উদাহরণস্বরূপ, যদি একটি চিত্রের আকার 1000x800 হয় এবং প্রস্থটি 1200 পিক্সেল হিসাবে নির্দিষ্ট করা হয়, তাহলে এটি স্বয়ংক্রিয়ভাবে 20% দ্বারা 1200x960 পর্যন্ত প্রসারিত হয়।

7. প্রপার্টি hspace="NUMBER" - অন্যান্য html অবজেক্ট থেকে পিক্সেলে ইমেজের অনুভূমিক ইন্ডেন্টেশন সেট করে।

8. প্রপার্টি vspace="NUMBER" - অন্যান্য html অবজেক্ট থেকে পিক্সেলে ছবির উল্লম্ব স্থান সেট করে।

দ্রষ্টব্য

hspace এবং vspace এর পরিবর্তে, আমি আপনাকে পুরানো এবং প্রমাণিত মার্জিন ব্যবহার করার পরামর্শ দিচ্ছি (আপনি html শৈলী বর্ণনা করার পাঠে এটি সম্পর্কে আরও পড়তে পারেন)। আমাকে সংক্ষেপে মনে করিয়ে দেওয়া যাক:

• মার্জিন-টপ: X px;
• (X - শীর্ষ ইন্ডেন্ট)
• margin-bottom: Y px;
• (Y - নিচের ইন্ডেন্ট)

মার্জিন-বাম: L px;

(L - বাম ইন্ডেন্ট)

... মার্জিন-ডান: R px;(আর - ডান ইন্ডেন্ট) https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

পৃষ্ঠায় নিম্নলিখিতগুলিতে রূপান্তরিত হয়:

পিক্সেলে বস্তু থেকে ইন্ডেন্ট সেট করুন। নেতিবাচক মান অনুমোদিত। ডিফল্টরূপে, এটি হয় পূর্বপুরুষের মান উত্তরাধিকারসূত্রে পায় বা এর মান 0 থাকে।

যেমন. বাম প্যাডিং 50 পিক্সেল, এবং উপরের প্যাডিং 10 পিক্সেল।

মার্জিন-টপ:10px; মার্জিন-বাম: 50px

"src=" এই উদাহরণে, উপরে ইন্ডেন্টেশন ছিল 10 পিক্সেল, বাম দিকে 50 পিক্সেল।

9. প্রপার্টি ক্লাস="class_name" - আপনি এই শ্রেণীর সমস্ত ছবির জন্য শৈলী সেট করতে একটি চিত্রের জন্য একটি ক্লাস বরাদ্দ করতে পারেন।

... তরুণ ওয়েবমাস্টারদের মধ্যে এই প্রশ্ন উঠছে। এটা আসলে খুব সহজ. এটি করতে, শুধু ট্যাগ ফ্রেম"> ...

ট্যাগ (লিংক)।

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpgযেমন

যেখানে_the_link বাড়ে image_address