HTML Quotes বা কোটস ট্যাগের জন্য চূড়ান্ত গাইড
একজন পেশাদারের মতো কোট করুন:
শুধু উদ্ধৃতি চিহ্নের মধ্যে কোট রাখা বন্ধ করুন। আপনার লেখাকে অর্থ, শৈলী এবং পেশাদার সৌন্দর্য দিতে `blockquote`, `q`, এবং `cite` কীভাবে ব্যবহার করতে হয় তা শিখুন।
আপনি কি কখনও আপনার ওয়েবসাইটে একটি শক্তিশালী উক্তি বা অন্য কোনও উৎস থেকে একটি অংশ তুলে ধরতে চেয়েছেন? আপনি কেবল এটিকে উদ্ধৃতি চিহ্নের মধ্যে রাখতে পারেন এবং হয়তো এটিকে ইটালিক করতে পারেন, কিন্তু আপনি একটি বিশাল সুযোগ হাতছাড়া করবেন। HTML-এ, আপনি কীভাবে আপনার বিষয়বস্তু চিহ্নিত করেন তা গুরুত্বপূর্ণ—শুধু চেহারার জন্য নয়, অর্থের জন্যও।
আজ, আমরা HTML কোটগুলির জগতে প্রবেশ করছি। আমরা একটি পূর্ণ-অনুচ্ছেদের ঘোষণা থেকে শুরু করে একটি বাক্যের মধ্যে এমবেড করা একটি ছোট বাক্যাংশ পর্যন্ত সবকিছু পরিচালনা করতে শিখব। সঠিক ট্যাগ ব্যবহার করলে ব্রাউজার, সার্চ ইঞ্জিন এবং স্ক্রিন রিডাররা ঠিক কী দেখছে তা জানতে পারে, যা আপনার সাইটকে আরও অ্যাক্সেসযোগ্য এবং পেশাদার করে তোলে।
মূল আকর্ষণ: `
` ট্যাগ
যখন আপনার কাছে একটি বড় উদ্ধৃতি থাকে যা নিজের মতো করে দাঁড়ানোর প্রয়োজন হয়, তখন `
`
ট্যাগটি আপনার সেরা বন্ধু। এটিকে পাঠ্যের একটি অংশে স্পটলাইট দেওয়ার মতো ভাবুন। এটি একটি ব্লক-স্তরের উপাদান, যার অর্থ এটি পৃষ্ঠায় তার নিজস্ব "ব্লক" তৈরি করে, যা আশেপাশের অনুচ্ছেদ থেকে আলাদা।
কল্পনা করুন আপনি The Transcendent থেকে একটি গভীর চিন্তা তুলে ধরতে চান। আপনি এটিকে কেবল একটি বাক্যের মাঝখানে ফেলে দেবেন না। আপনি এটিকে আলাদা করতে চাইবেন। পাঠ্যটিকে `
`-এ মুড়ে দিয়ে, আপনি ব্রাউজারকে শব্দার্থগতভাবে বলছেন, "আরে, এই পুরো বিভাগটি একটি উদ্ধৃতি।"
কোডের কল্পনা: একটি পরিষ্কার, গ্রাফিকাল কোড বক্স কল্পনা করুন। প্যারেন্ট `
` ট্যাগটি একটি নরম বেগুনি রঙে হাইলাইট করা হয়েছে। ভিতরে, আপনি উদ্ধৃতির জন্য একটি `
` ট্যাগ দেখতে পাচ্ছেন, যেখানে পাঠ্যটি একটি মনোস্পেস ফন্টে সুন্দরভাবে প্রদর্শিত হয়েছে। এর নীচে, একটি `` ট্যাগ উৎস, "— The Transcendent" কে সামান্য ইন্ডেন্ট করা এবং ইটালিকে ধরে রাখে। এই ভিজ্যুয়াল কাঠামোটি উদ্ধৃতি এবং এর উৎসের মধ্যে সম্পর্ককে তাৎক্ষণিকভাবে স্পষ্ট করে তোলে।
ডিফল্টরূপে, ব্রাউজারগুলি সাধারণত একটি `
` কে ইন্ডেন্ট করে, কিন্তু এর আসল শক্তি CSS দিয়ে আনলক করা হয়। আপনি বড়, স্টাইলিশ উদ্ধৃতি চিহ্ন যোগ করতে পারেন, পটভূমির রঙ পরিবর্তন করতে পারেন, বা এটিকে আপনার ডিজাইনের একটি সত্যিকারের কেন্দ্রবিন্দু করতে অনন্য ফন্ট ব্যবহার করতে পারেন।
ছোট কথার জন্য: `` ট্যাগ
সেই ছোট উদ্ধৃতিগুলির কী হবে যা একটি বাক্যের অংশ? এর জন্য, আমাদের কাছে ``
ট্যাগ আছে। `
`-এর বিপরীতে, `
` ট্যাগটি একটি ইনলাইন উপাদান। এটিকে একটি পাঠ্য সজ্জাকারক হিসাবে ভাবুন - এটি আপনার বাক্যের প্রবাহে লাইন ব্রেক না করে ঠিক বসে যায়।
উদাহরণস্বরূপ, যখন The Transcendent বলে যে প্রকৃত বোঝাপড়া "একটি যাত্রা, গন্তব্য নয়," তখন আপনি সেই বাক্যাংশটিকে `` ট্যাগের মধ্যে মুড়ে দেবেন।
এখানে চতুর অংশটি হলো: আপনাকে উদ্ধৃতি চিহ্ন টাইপ করতে হবে না! ব্রাউজার স্বয়ংক্রিয়ভাবে আপনার জন্য সঠিকগুলি যোগ করে। এটি অবিশ্বাস্যভাবে দরকারী কারণ উদ্ধৃতি চিহ্নের শৈলী পৃষ্ঠার ভাষার উপর নির্ভর করে পরিবর্তিত হতে পারে। `` ট্যাগটি আপনার জন্য এই স্থানীয়করণ পরিচালনা করে, যা নিশ্চিত করে যে আপনার সাইটটি বিশ্বব্যাপী বন্ধুত্বপূর্ণ।
কৃতিত্ব প্রদান: `` ট্যাগ
একটি উদ্ধৃতি তার উৎস ছাড়া অসম্পূর্ণ। `` ট্যাগটি বিশেষভাবে এই উদ্দেশ্যে ডিজাইন করা হয়েছে। একটি কাজের শিরোনাম (যেমন একটি বই, একটি গান, বা একটি ওয়েবসাইট) বা লেখকের নাম চিহ্নিত করতে এটি ব্যবহার করুন। এটি একটি ইনলাইন উপাদানও, যা প্রায়শই ডিফল্টরূপে ইটালিকে প্রদর্শিত হয়।
আপনি `` একা ব্যবহার করতে পারেন, কিন্তু এটি `
`-এর সাথে মিলিত হলে সবচেয়ে শক্তিশালী হয়।
উপসংহার: ব্লক বনাম ইনলাইন মূল বিষয়
`
` (ব্লক) এবং `
` (ইনলাইন)-এর মধ্যে পার্থক্যটি সবচেয়ে গুরুত্বপূর্ণ শিক্ষা। ব্লক উপাদানগুলি পৃষ্ঠার কাঠামোর ভারী কাজ করে। ইনলাইন উপাদানগুলি হলো সূক্ষ্ম সজ্জাকারক যা সেই সারিগুলির মধ্যে শব্দগুলিতে শৈলী যোগ করে।
এই তিনটি ট্যাগ—`
`, `
`, এবং ``—ব্যবহার করে, আপনি সাধারণ পাঠ্য থেকে এগিয়ে গিয়ে একটি সমৃদ্ধ, অর্থপূর্ণ এবং অ্যাক্সেসযোগ্য ওয়েব অভিজ্ঞতা তৈরি করতে শুরু করেন। আপনি শুধু শব্দকে স্টাইল করছেন না; আপনি এমন একটি গল্প বলছেন যা মানুষ এবং মেশিন উভয়ই বুঝতে পারে।
দ্রুত রেফারেন্স সারাংশ
| HTML ট্যাগ | প্রাথমিক কাজ | কখন ব্যবহার করবেন |
|---|---|---|
| <blockquote> | একটি ব্লক-স্তরের উদ্ধৃতি চিহ্নিত করে। | একাধিক লাইনের উদ্ধৃতি বা অংশের জন্য যা মূল পাঠ্য থেকে আলাদা করা প্রয়োজন। |
| <q> | একটি ইনলাইন উদ্ধৃতি চিহ্নিত করে। | ছোট উদ্ধৃতির জন্য যা একটি বাক্য বা অনুচ্ছেদের মধ্যে এমবেড করা আছে। |
| <cite> | একটি উদ্ধৃতির উৎস সনাক্ত করে। | লেখক, কাজের শিরোনাম (বই, নিবন্ধ, ইত্যাদি), বা উৎস ওয়েবসাইটের নাম দেওয়ার জন্য। |
সাধারণ জিজ্ঞাস্য প্রশ্ন (FAQ)
`` এবং শুধু "" চিহ্ন টাইপ করার মধ্যে পার্থক্য কী?
আমি কীভাবে আমার ব্লককোটের স্টাইল পরিবর্তন করব?
https://thetranscendent.org/courses/html-ai-এর-যুগে-বাংলা-তে
Chapter Resources:
https://codepen.io/01_Trans-Cendent/pen/XJmXNRZ
All Resources: