এইচটিএমএল-এ এর আশেপাশের পাঠ্য থেকে উত্সগুলি উদ্ধৃত করার বা উদ্ধৃতিগুলি বোঝার বিভিন্ন উপায় রয়েছে৷ আজ, আমরা এইচটিএমএল কোটেশন এলিমেন্টগুলি নিয়ে যাই:<blockquote> , <q> , <abbr> , <address> , <bdo> এবং <cite> . প্রত্যেকের নিজস্ব স্বতন্ত্র ব্যবহারের কেস রয়েছে – আমরা প্রতিটির মধ্যে পার্থক্য করি এবং আপনার মার্কআপে কীভাবে সেগুলি ব্যবহার করতে হয় তা দেখাই৷
ব্লককোট
<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> উপাদান একটি ছোট উদ্ধৃতির চারপাশে উদ্ধৃতি চিহ্ন রাখে। এটি একটি ইনলাইন উপাদান, অনেকটা বা এর মত, কিন্তু উদ্ধৃতির জন্য। আপনার উদ্ধৃতি একাধিক লাইন বিস্তৃত হলে, আপনার পরিবর্তে ব্যবহার করা উচিত।
<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> দিয়ে করবেন ট্যাগ এটি একটি ইনলাইন উপাদান, যা , , বা এর মতো। আপনার ট্যাগে শিরোনাম বৈশিষ্ট্যের ভিতরে আপনার সংক্ষিপ্ত রূপটি সংজ্ঞায়িত করুন।
<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> ঠিকানা
ঠিকানা উপাদানটি স্রষ্টার জন্য যোগাযোগের তথ্য সংজ্ঞায়িত করে, হয় একজন ব্যক্তি বা ব্যবসা, এবং নিম্নলিখিত যেকোনও:প্রকৃত ঠিকানা, ইমেল ঠিকানা, সোশ্যাল মিডিয়া লিঙ্ক, ফোন নম্বর, ব্যক্তিগত ওয়েবসাইট এবং অন্যান্য পরিচিতির মতো আইটেম৷
পাঠ্যটি তির্যকভাবে রেন্ডার হয় এবং ঠিকানা ব্লকের আগে এবং পরে একটি লাইন বিরতি থাকে।
<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 ট্যাগ একটি সৃজনশীল কাজের শিরোনাম সংজ্ঞায়িত করে। এটি একটি ইনলাইন উপাদান এবং তির্যক ভাষায় রেন্ডার করে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
<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>– কোন কিছুর শিরোনাম সংজ্ঞায়িত করতে ব্যবহৃত হয়
অনেক উদ্ধৃতি উপাদান আছে এবং প্রতিটি তাদের ব্যবহার কেস আছে. আপনার প্রকল্পের জন্য সঠিক (গুলি) সংশোধন করতে ভুলবেন না!
