How to create comment section in html

How to create comment section in html

এইচটিএমএল কমেন্টস (HTML Comments)

কি ভাবে html comment section  তৈরী করতে হয়? আমরা যারা Facebook ব্যবহার করি সবারই Comment সম্পর্কে ভাল জানেন। তবে Facebook Comment আর এইচটিএমএল Comment এক জিনিস নয়। Facebook Comment ব্রাউজারে দেখা যায়। কিন্তু এইচটিএমএল কমেন্ট ব্রাউজারে দেখা যায় না। এইচটিএমএল কমেন্ট বলতে মুলত কোড এডিটরের কমেন্টকে বুঝানো হয়। পূর্ণাঙ্গ পেজ বানাতে গিয়ে আমাদেরকে হাজার হাজার লাইন কোড করতে হয়। কোথায় কি বিষয়ে বা কোন্‌ সেকশনের কোড করা হয়েছে তা সনাক্ত করার জন্য আমরা কিছু কমেন্ট করে রাখি। পরবর্তিতে যখনই কোন বিশেষ একটি সেকশনের কোড সম্পাদন করার প্রয়োজন হয়, তখন আমাদেরকে সেই সেকশনের কোড খুঁজতে গিয়ে বিড়ম্বনায় পড়তে হয় না। অতি সহজে অল্প সময়ে কমেন্ট দেখে আমরা সেই সেকশন খুঁজে নিতে পারি। তাছাড়া অনেক সময় আমাদেকে গ্রুপ করে ওয়েবসাইট বানাতে হয়। কেউ ডিজানের কাজ করলে অন্য কেউ হয়তো ডেভেলপমেন্টের কাজ করে। তখন ডিজাইনার যে কোড করেছে তা ডেভেলপার এই কমেন্টের সাহায্যে কোড গুলোর সেকশন সহজে খুঁজে নিতে পারে। কমেন্ট ব্রাউজারে দেখা যায় না। কমেন্ট শুধুমাত্র ডিজাইনার আর ডেভেলপার এর সুবিধার জন্য করা হয়।

কমেন্ট করার নিয়ম ভিন্ন ভিন্ন ভাষায় ভিন্ন ভিন্ন হতে হতে পারে। এইচটিএলে এক নিয়ম তো সিএসএসে অন্য নিয়ম। নিয়ম যেটাই হোক এটা ছোট্ট একটি সিনট্যাক্স মাত্র। এইচটিএমএল এর কমেন্ট সিনট্যাক্স নিয়ম হচ্ছে শুধু এইটুকু <!– Comments –> এর ভিতরে আপনি যাই লিখেন তার সবই হচ্ছে কমেন্টস। এখানে একটা বিষয় খিয়াল করে দেখুন। এখানে ওপেনিং ট্যাগ এর ভিতরে বিস্ময়বোধক চিহ্ন (!) একাধিক বিয়োগ চিহ্ন এর পরে “আপনার কমেন্টস” এর পরে আবার একাধিক বিয়োগ চিহ্ন। কিন্তু এর কোন ক্লোজিং ট্যাগ নেই। হ্যাঁ, কমেন্টের জন্য ক্লোজিং ট্যাগের প্রয়োজন নেই। তবে কিছু কিছু সময় আমাদেরকে এমন পরিস্থিতির সম্মুখীন হতে হয় যখন আমরা কোন একটা সেকশনের কোড লিখে সম্পূর্ণ করে ফেলি কিন্তু যে কোন কারণে আপাতত সেই কোডের ফলাফল ব্রাউজারে দেখাতে চাই না। পরে হয়তো দেখাতে হবে। এমন পরিস্থিতিতে সম্পূর্ণ কোডকে কমেন্ট করে রাখতে হয়। তো এমন অবস্থায় অনেক লাইনের কমেন্ট কিভাবে করা যায় তার নিয়ম উদাহরণে দেখিয়েছি।

HTML Comments কোড শেখার উপায় উদাহরণ

উদাহরণঃ

<!DOCTYPE html>

<html>

<head>

<title> HTML Comments </title>

</head>

<body>

<h2>This Headline Is Out Of Comment.</h2>

<!– This Is a Comment –>

<!–

<h3>This Headline Is Inside Of Comment.</h3>

<section>

<p>

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

</p>

</section>

–>

<p> ইহা যেহেতু কমেন্টের বাইরে আছে সেহেতু ব্রাউজারে ইহা প্রদর্শিত হবে। </p>

</body>

</html>

ব্রাউজারে রান করলে দেখা যায় এইচটিএমএল কমেন্টস (HTML Comments) কৃত অংশ ব্রাউজারে দেখা যায় না।

HTML Comments

HTML Comments

ওয়েব ডিজাইন সম্পূর্ণ জানতে ভিজিট করুন

কি ভাবে ওয়েব পেজে ইমেজ ব্যবহার করবেন?

কি ভাবে ওয়েব পেজে ইমেজ ব্যবহার করবেন?

কি ভাবে ওয়েব পেজে ইমেজ ব্যবহার করবেন?

কি ভাবে ওয়েব পেজে ইমেজ ব্যবহার করবেন? আসুন আমরা www.kaziitzone.com এ ওয়েব-পেজে-ইমেজ-ব্যবহার করা শিখি ওয়েব সাইট তৈরি করার জন্য ওয়েব সাইটে অনেক তথ্য সন্নিবেশিত করতে হয় । তার মধ্যে অন্যতম হলো ইমেজ । ইমেজ ব্যবহার করা খুবই জরুরি । ওয়েব পেজকে ব্যবহার কারির কাছে সুন্দর বা আকর্ষণীয় করে তোলার জন্য যেমন ওয়েব পেজের সাথে বিভিন্ন স্টাইলের ফন্ট মানানসই কালার ব্যবহার করা প্রয়োজন তেমনি ভাবে ওয়েব পেজে সুন্দর সুন্দর ইমেজ ব্যবহার করতে হয় । ইমেজ ব্যবহার করা জন্য এইচটিএমএল এ একটি ট্যাগ আছে সেই ট্যাগটি ব্যবহার করে ইমেজ ওয়েব পেজে প্রদর্শন করা যায় ।

এইচটিএমএল <img> ট্যাগ ও src এট্রিবিউট

এইটিএমএল এর <img> ট্যাগটি একটি সিঙ্গেল ট্যাগ । এই ট্যাগটিকে সিঙ্গেল ট্যাগ বলার কারণ ট্যাগটির শুরুর ট্যাগ আছে কিন্ত শেষ ট্যাগ নেই ।

যেমনঃ <img src=”img name”>.

সবাই দেখে থাকবে এইটিএমএল ট্যাগ গুলোর শুরু আছে শেষ ও আছে ।

যেমনঃ <h1>…………….</h1>.

তবে <img> ট্যাগটির শেষ ট্যাগ নেই।

আমি তো দেখালাম <img> ট্যাগটি তবে ট্যাগটি কিভাবে কাজ করে? নিম্নে কোড দেওয়া হলো .html File করে কোড দেখে লিখে নিন এবং কোড রান করে দেখে নিন ট্যাগটি কিভাবে কাজ করে ।

উদাহরণ

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Image</h2>

<img src=”pic.jpg>

 

</body>

</html>

কি ভাবে ওয়েব পেজে ইমেজ ব্যবহার করবেন?

কি ভাবে ওয়েব পেজে ইমেজ ব্যবহার করবেন?

উদাহরণ ব্যাখ্যা

  • <!DOCTYPEhtml> ঘোষণাটি সংজ্ঞা দেয় যে এই নথিটি একটি HTML5 নথি ।
  • < html > উপাদানটি একটি HTML পৃষ্ঠার মূল উপাদান ।
  • < head > উপাদানটিতে HTML পৃষ্ঠা সম্পর্কে মেটা সম্পর্কিত তথ্য রয়েছে ।
  • < title > উপাদানটি HTML পৃষ্ঠার জন্য একটি শিরোনাম নির্দিষ্ট করে (যা ব্রাউজারের শিরোনাম বারে বা পৃষ্ঠার ট্যাবে প্রদর্শিত হয়) ।
  • <body> উপাদানটি নথির শরীরে সংজ্ঞায়িত করে এবং শিরোনাম, অনুচ্ছেদ, চিত্র, হাইপারলিঙ্কস, টেবিল, তালিকা ইত্যাদি সমস্ত দৃশ্যমান সামগ্রীর জন্য একটি ধারক ।
  • <h1> উপাদানটি একটি বড় শিরোনামকে সংজ্ঞায়িত করে ।
  • <img> উপাদান ইমেজ সংজ্ঞায়িত করে ।
  • Src এট্রিবিউট ইমেজ কেথায় আছে তার লোকেশন নির্ধারণ করে ।

এইটিএমএল ব্যবহার করে ইমেজ ওয়েব পেজে প্রদর্শন করার জন্য <img> ট্যাগটি ব্যবহার করা হয় ।

কি ভাবে ওয়েব পেজে ইমেজ ব্যবহার করবেন? তার সম্পূর্ণ বিষয় এই পোস্ট এ আলোচনা করা হলো। আসা করি এই পোস্টটি দেখলে ওয়েব পেজে ইমেজ ব্যবহার নিয়ে সমস্যা থাকবে না ।

আজ এপর্য্ন্ত আমাদের সঙ্গেই থাকবেন । বাংলায় ওয়েব ডিজাইন এন্ড ডেভেলপমেন্ট কের্স ধারাবাহিক ভাবে আলোচনা করা হবে । সবাই ভালো থাকবেন।

Pin It on Pinterest

My title page contents