HTML-এ উদ্ধৃতি উদ্ধৃতি করার বা окружающее টেক্সট থেকে কোট আলাদা করার একাধিক উপায় আছে। আজ, আমরা HTML কোটেশন এলিমেন্টগুলো নিয়ে আলোচনা করব: <blockquote>, <q>, <abbr>, <address>, <bdo> এবং <cite>। প্রতিটির নিজস্ব ইউনিক ইউজ কেস আছে—আমরা প্রতিটিকে আলাদা করব এবং আপনার মার্কআপে সেগুলো কীভাবে ব্যবহার করতে হয় তা দেখাব।
Blockquote
<blockquote> এলিমেন্ট বহু-লাইন, দীর্ঘ উদ্ধৃত টেক্সটের জন্য ব্যবহৃত হয়। এই এলিমেন্টটি কোটটিকে окружающее প্যারাগ্রাফ বা অন্যান্য HTML এলিমেন্ট থেকে আলাদা করতে ব্যবহৃত হয়। একটি বিখ্যাত নাট্যকারের সোলিলোকই ব্যবহার করে এই উদাহরণটি দেখুন:
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } blockquote p { width: 80%; margin: 0px 20px; text-align: right; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p> <blockquote> "To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles, And by opposing end them?..." <p>—<em>Hamlet</em>, Act III, Scene I</p> </blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p> </body> </html>
q
<q> এলিমেন্ট একটি ছোট কোটের চারপাশে কোটেশন মার্কস রাখে। এটি একটি ইনলাইন এলিমেন্ট, <span> বা <strong>-এর মতো, কিন্তু কোটের জন্য। আপনার কোট যদি একাধিক লাইনে ছড়িয়ে থাকে, তবে আপনাকে <blockquote> ব্যবহার করা উচিত।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <p> The mission statement for the Make-A-Wish Foundation is <q>Together, we create life-changing wishes for children with critical illnesses.</q> </p> </body> </html>
abbr
কখনো কখনো আপনি আপনার লেখার ফ্লোতে অন্তর্ভুক্ত না করে একটি এক্রোনিম ডিফাইন করতে চান। সেটি আপনি <abbr> ট্যাগ দিয়ে করেন। এটি একটি ইনলাইন এলিমেন্ট, <span>, <em>, বা <q>-এর মতো। আপনার <abbr> ট্যাগের title অ্যাট্রিবিউটে আপনার এক্রোনিম ডিফাইন করুন।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <abbr title="COrona VIrus Disease 2019">COVID-19</abbr> was first discovered in December 2019 in Wuhan, China. </body> </html>
address
address এলিমেন্ট স্রষ্টার (একজন ব্যক্তি বা বিজনেস) কন্টাক্ট ইনফরমেশন ডিফাইন করে, এবং নিচের যেকোনো একটি: ফিজিক্যাল অ্যাড্রেস, ইমেইল অ্যাড্রেস, সোশ্যাল মিডিয়া লিংক, ফোন নম্বর, পারসোনাল ওয়েবসাইট, এবং অন্যান্য কন্টাক্ট-সদৃশ আইটেম।
টেক্সট ইট্যালিক রেন্ডার হয় এবং address ব্লকের আগে এবং পরে একটি লাইন ব্রেক থাকে।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <address> Written for Career Karma by Christina Kopecky<br /> Other Articles: <a href="https://careerkarma.com/blog/author/christina-kopecky/">Career Karma Author Page</a><br/> Twitter: <a href="https://twitter.com/cmvnk" target="_blank" rel="noopener noreferrer">@cmvnk</a><br /> Github: <a href="https://github.com/ckopecky" target="_blank" rel="noopener noreferrer">ckopecky</a><br /> </address> </body> </html>
bdo
ডান থেকে বাম পড়া ভাষার সাথে কাজ করার সময়, নিজে করবার চেয়ে একটি ট্যাগ ব্যবহার করা সহজ যা আপনার জন্য টেক্সট রাইট-টু-লেফট রেন্ডার করে। <bdo> এলিমেন্ট ব্যবহার করুন টেক্সট বাই-ডাইরেকশনাল ওভাররাইড দিয়ে রেন্ডার করতে। এটি একটি dir অ্যাট্রিবিউট নেয় যা ডাইরেকশন নির্দেশ করবে। ডিফল্ট হল “ltr”। “rtl” টেক্সটকে ডান থেকে বাম রেন্ডার করবে।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <bdo dir="rtl">This renders Right-to-Left</bdo><br /> <bdo>This renders Left-to-Right</bdo> </body> </html>
cite
cite এলিমেন্ট হল আজ আমরা যা আলোচনা করব শেষ কোটেশন এলিমেন্ট। cite ট্যাগ একটি ক্রিয়েটিভ ওয়ার্কের টাইটেল ডিফাইন করে। এটি একটি ইনলাইন এলিমেন্ট এবং ইট্যালিক রেন্ডার হয়।
<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } p { margin: 0; padding: 0; } </style> </head> <body> <p> <cite>Mona Lisa</cite>, Leonardo da Vinci <br /> <sup>The Louvre (since 1797)</sup> </p> </body> </html>
উপসংহার
চলুন রিভিউ করি। আজ আমরা দেখেছি:
<blockquote>– দীর্ঘ কোটের জন্য ব্যবহৃত হয়<q>– এক লাইনের চেয়ে বড় নয় এমন ছোট কোটের জন্য ব্যবহৃত হয়<abbr>– আমাদের টেক্সটে এব্রিভিয়েশন ডিফাইন করতে ব্যবহৃত হয়<address>– স্রষ্টা বা লেখকের কন্টাক্ট ইনফরমেশন ডিফাইন করতে ব্যবহৃত হয়<bdo>– টেক্সট বাম-থেকে-ডান নাকি ডান-থেকে-বাম রেন্ডার হবে তা কন্ট্রোল করতে ব্যবহৃত হয়<cite>– কিসের টাইটেল ডিফাইন করতে ব্যবহৃত হয়
অনেক কোটেশন এলিমেন্ট আছে এবং প্রতিটির নিজস্ব ইউজ কেস। আপনার প্রজেক্টের জন্য সঠিকটি ব্যবহার করতে ভুলবেন না!
