ব্যস্ততা বাড়ান:আপনার HTML ইমেল টেমপ্লেটে ছবি, ভিডিও এবং অডিও যোগ করা

আমার আগের নিবন্ধে, "কীভাবে একটি প্রতিক্রিয়াশীল HTML ইমেল টেমপ্লেট তৈরি করবেন," আমরা একটি সাধারণ HTML ইমেল টেমপ্লেট ডিজাইন এবং কোডিং করার মৌলিক বিষয়গুলি অন্বেষণ করেছি যা বিভিন্ন ডিভাইস এবং ইমেল ক্লায়েন্ট জুড়ে সুন্দরভাবে মানিয়ে নেয়৷

আমি HTML ইমেল টেমপ্লেটে মিডিয়া যোগ করার বিষয়ে কয়েকটি প্রশ্ন পেয়েছি।

সেই ভিত্তির উপর ভিত্তি করে, আমি আপনার HTML ইমেল টেমপ্লেটে মিডিয়া যোগ করার বিভিন্ন উপায়ে আপনাকে গাইড করব। ছবি, ভিডিও এবং অডিওর মতো মিডিয়া যোগ করা আপনার যোগাযোগের ব্যস্ততা এবং কার্যকারিতা উল্লেখযোগ্যভাবে বৃদ্ধি করতে পারে।

প্রয়োজনীয়তা

• একটি সাধারণ HTML ইমেল টেমপ্লেট। আপনি এই নির্দেশিকা অনুসরণ করে একটি তৈরি করতে পারেন।

ইমেলে যোগ করা মিডিয়ার সবচেয়ে সাধারণ ধরন হল ছবি। আপনার HTML ইমেল টেমপ্লেটগুলিতে সেগুলি কীভাবে অন্তর্ভুক্ত করবেন তা এখানে:

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

এই ছবিটি আমরা আপলোড করব৷

• আপনার ছবি একটি নির্ভরযোগ্য ওয়েব সার্ভার বা কন্টেন্ট ডেলিভারি নেটওয়ার্কে (CDN) আপলোড করুন। আপনার ইমেলে উল্লেখ করার জন্য আপনার একটি স্থিতিশীল URL এর প্রয়োজন হবে৷

এই উদাহরণের জন্য আমরা imgbb ওয়েবসাইট ব্যবহার করব এবং আমাদের ছবি আপলোড করব। "আপলোড করা শুরু করুন"-এ ক্লিক করুন৷ এবং ছবি নির্বাচন করুন।

imgbb হল বিনামূল্যের ছবি হোস্টিং প্ল্যাটফর্মগুলির মধ্যে একটি

ব্যবহার করার জন্য ছবিটি নির্বাচন করার পরে, "স্বয়ংক্রিয়ভাবে মুছে ফেলবেন না" নির্বাচন করুন এবং আপলোড এ ক্লিক করুন৷

ড্রপডাউন থেকে স্বয়ংক্রিয়ভাবে মুছে ফেলবেন না বেছে নিন

আপলোড করার পরে, একটি URL তৈরি হবে। ড্রপডাউনে ক্লিক করুন এবং "HTML full linked"

এম্বেড কোড তৈরি হয়েছে

• উত্পন্ন HTML কোডটি অনুলিপি করুন এবং দেখানো হিসাবে আপনার ইমেল টেমপ্লেটের একটি পছন্দসই বিভাগে এটি সন্নিবেশ করুন৷

<a href="https://ibb.co/XpRp2N8">
 <img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>

ইমেল টেমপ্লেটে আপনার চিত্রটি কীভাবে প্রদর্শিত হবে তা পরীক্ষা করতে অন্যান্য এম্বেড কোড বিকল্পগুলি ব্যবহার করে দেখতে নির্দ্বিধায়৷

নীচে সন্নিবেশিত চিত্রের ফলাফল:

ছবিটি সফলভাবে আমাদের ইমেল টেমপ্লেটে ঢোকানো হয়েছে

দ্রষ্টব্য :সর্বদা alt অন্তর্ভুক্ত করুন বৈশিষ্ট্য যেখানে চিত্র প্রদর্শন করা যাবে না এমন পরিস্থিতিতে বিকল্প পাঠ্য প্রদান করতে।

কিভাবে আপনার ইমেল টেমপ্লেটে ভিডিও এম্বেড করবেন

বেশিরভাগ ইমেল ক্লায়েন্টে সরাসরি ভিডিও প্লেব্যাক সমর্থিত নয়। পরিবর্তে, আপনি একটি ক্লিকযোগ্য থাম্বনেইল এম্বেড করতে পারেন যা অনলাইনে হোস্ট করা একটি ভিডিওর সাথে লিঙ্ক করে:

• একটি থাম্বনেল তৈরি করুন৷ :আপনার ভিডিও থেকে একটি ফ্রেম ক্যাপচার করুন বা একটি কাস্টম গ্রাফিক তৈরি করুন যা ভিডিও সামগ্রীর প্রতিনিধিত্ব করে৷ এটি একটি স্থানধারক হিসাবে কাজ করবে। এই উদাহরণে, আমরা থাম্বনেইলের মতো একই চিত্র ব্যবহার করব।

• ড্রপডাউন থেকে, লিঙ্কযুক্ত HTML থাম্বনেইল বেছে নিন। কোডটি কপি করুন এবং আপনার ইমেল টেমপ্লেটে পেস্ট করুন।

<a href="https://ibb.co/XpRp2N8"><img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"></a>

• ভিডিওতে লিঙ্ক করুন৷ :ভিডিও URL-এর সাথে লিঙ্কযুক্ত একটি ক্লিকযোগ্য চিত্র হিসাবে থাম্বনেইল ব্যবহার করতে উপরের কোডটি পরিবর্তন করুন৷
• <a href ="">-এ URL পরিবর্তন করুন নিচে দেখানো ভিডিও লিঙ্কে।

<a href="https://youtu.be/UG8rjxYBfFg?si=xU2zqCtQW5-2z7nw">
 <img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"</a>

এই এইচটিএমএল স্নিপেট একটি সীমানা ছাড়াই একটি লিঙ্কযুক্ত চিত্র তৈরি করে। এবং এটি আমাদের ইমেল টেমপ্লেট:

লিঙ্ক করা থাম্বনেইলটি এভাবে দেখাবে

আপনার ইমেল টেমপ্লেটে কীভাবে YouTube ভিডিও এম্বেড করবেন

বিকল্পভাবে আপনি সরাসরি আপনার ইমেল টেমপ্লেটে একটি YouTube ভিডিও এম্বেড করতে পারেন। এখানে কিভাবে:

• ইউটিউবে যান এবং আপনি যে ভিডিওটি এম্বেড করতে চান সেটি বেছে নিন।
• শেয়ার -> এম্বেড এ ক্লিক করুন এবং একটি iframe উৎপন্ন হবে। নীচে একটি উদাহরণ:

<iframe width="560" height="315" src="https://www.youtube.com/embed/UG8rjxYBfFg?si=nYBBM032nvBn5tNZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

• iframe কপি করুন এবং এটি একটি <td> এ আটকান আপনার HTML ইমেল টেমপ্লেট কোডের বিভাগ। এবং আপনার কাছে এরকম কিছু দেখতে হবে:

এটি একটি ইমেল টেমপ্লেটের মধ্যে একটি ইউটিউব ভিডিওর একটি উদাহরণ

আপনার ইমেল টেমপ্লেটে কিভাবে অডিও যোগ করবেন

ইমেলগুলিতে সরাসরি অডিও ফাইল যোগ করা বেশিরভাগ ইমেল ক্লায়েন্ট দ্বারা সমর্থিত নয়। ভিডিওগুলির মতো, আপনি অডিও ফাইলের একটি লিঙ্ক অন্তর্ভুক্ত করতে পারেন:

• অডিও ফাইল হোস্ট করুন :একটি উপযুক্ত প্ল্যাটফর্ম বা সার্ভারে আপনার অডিও ফাইল আপলোড করুন। গুগল ড্রাইভ, আপনার নিজস্ব ওয়েবসাইট, ইউটিউব, সাউন্ড ক্লাউড ইত্যাদির মতো অনেকগুলি অডিও প্ল্যাটফর্ম রয়েছে৷
• এই উদাহরণের জন্য, আমরা audio.com নামে একটি প্ল্যাটফর্ম ব্যবহার করব। "এখনই বিনামূল্যে যোগদান করুন" ক্লিক করে একটি অ্যাকাউন্ট তৈরি করুন বা আপনার যদি ইতিমধ্যে একটি অ্যাকাউন্ট থাকে তাহলে সাইন ইন করুন৷

আপলোড ক্লিক করুন এবং আপনার .mp3 ফাইলটি চয়ন করুন যা আপনার অ্যাকাউন্টে সংরক্ষণ করা হবে৷ অডিও সম্পূর্ণ হলে শেয়ার আইকনে ক্লিক করুন।

• এটি আপনাকে কয়েকটি বিকল্পের কাছে নিয়ে আসবে যেখানে আপনি লিঙ্কটি অনুলিপি করতে বা সহজভাবে লিঙ্কটি এম্বেড করতে পারেন:

এম্বেড এ ক্লিক করুন, এবং আপনি আপনার অডিও কিভাবে প্রদর্শিত হবে তার একটি পূর্বরূপ দেখতে পাবেন। কোডটি কপি করুন এবং আপনার ইমেল টেমপ্লেট বিভাগে পেস্ট করুন।

audio.com দ্বারা তৈরি কোড যা ইমেল টেমপ্লেটে এম্বেড করা যেতে পারে

এছাড়াও আপনি div মুছে ফেলতে পারেন এবং শুধু iframe ব্যবহার করুন . এছাড়াও আপনি যে অংশগুলি ইমেল টেমপ্লেটে উপস্থিত করতে চান না তা মুছে ফেলতে এবং আপনার পছন্দ অনুসারে কাস্টমাইজ করতে নির্দ্বিধায়৷

এখানে কোড:

<div style="height: 228px; width: 600px;">
<iframe src="https://audio.com/embed/audio/1797114509131910?theme=image"
 style="display:block; border-radius: 6px; border: none; height: 204px; width: 600px;"></iframe><a href='https://audio.com/nyayic-fanny' style="text-align: center; display: block; color: #A4ABB6; font-size: 12px; font-family: sans-serif; line-height: 16px; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@nyayic-fanny</a>
</div>

উপরের জন্য এটি আমাদের চূড়ান্ত ফলাফল:

আমাদের অডিও আমাদের ইমেল টেমপ্লেটে এভাবে প্রদর্শিত হবে৷

audio ব্যবহার করা ট্যাগ

এম্বেড করার পাশাপাশি, আমরা অডিও ট্যাগ ব্যবহার করতে পারি এবং নীচে দেখানো হিসাবে আমাদের অডিও উত্সে URL যোগ করতে পারি:

 <p>Audio added via audio tag</p> <br><br>
 <audio controls="controls">
 <source src="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">
 <p>? Listen: <a href="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">Audio</a> (mp3)</p>
 </audio>

শুধু আপনার audio url তে URL পরিবর্তন করুন . এবং এইভাবে আমাদের সম্পূর্ণ পরিবর্তন দেখতে হবে।

আমাদের পরিবর্তিত html ইমেল টেমপ্লেট৷

দ্রষ্টব্য: HTML5 সমর্থন করে না এমন হটমেইল এবং ক্লায়েন্ট কাজ করবে না!

এইচটিএমএল ইমেলে মিডিয়াকে সংহত করার সময়, সামঞ্জস্য এবং ব্যবহারকারীর অভিজ্ঞতা অপ্টিমাইজ করার জন্য নিম্নলিখিত টিপসগুলি বিবেচনা করুন:

• সমস্ত ইমেল ক্লায়েন্টে সঠিকভাবে লোড হচ্ছে তা নিশ্চিত করতে ছবি, ভিডিও এবং অডিওর জন্য সর্বদা সম্পূর্ণ, পরম URL ব্যবহার করুন।
• আপনার ইমেল পরীক্ষা করুন:বিভিন্ন ইমেল ক্লায়েন্ট বিভিন্ন উপায়ে HTML সামগ্রী প্রদর্শন করে। বিভিন্ন প্ল্যাটফর্মে কীভাবে আপনার ইমেল রেন্ডার হয় তা পরীক্ষা করতে Litmus বা Email on Acid এর মতো টুল ব্যবহার করুন৷
• লোডের সময় মাথায় রাখুন:আপনার ইমেলগুলি দ্রুত লোড হয় তা নিশ্চিত করতে মিডিয়া ফাইলের আকার অপ্টিমাইজ করুন, যা প্রাপকের মনোযোগ ধরে রাখতে এবং ব্যস্ততা উন্নত করার জন্য অত্যন্ত গুরুত্বপূর্ণ৷
• অভিগম্যতা বিবেচনা করুন:অডিও এবং ভিডিও সামগ্রীর জন্য চিত্র এবং ক্যাপশন বা প্রতিলিপিগুলির জন্য বর্ণনামূলক বিকল্প পাঠ্য প্রদান করুন৷

যদিও ইমেল ক্লায়েন্টরা কী সমর্থন করতে পারে তার সীমাবদ্ধতা রয়েছে, ভিডিও এবং অডিও ফাইলগুলির জন্য লিঙ্কযুক্ত চিত্রগুলি ব্যবহার করা একটি ব্যবহারকারী-বান্ধব সমাধান প্রদান করে যা বেশিরভাগ প্ল্যাটফর্ম জুড়ে কাজ করে।

সর্বদা নিশ্চিত করুন যে আপনি আপনার ইমেলগুলি পুঙ্খানুপুঙ্খভাবে পরীক্ষা করেছেন এবং একটি মসৃণ এবং আকর্ষক ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করতে সর্বোত্তম অনুশীলনগুলি অনুসরণ করুন৷

শুভ কোডিং!

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন