Coding Teacher-
Coding Teacher
Web Development
21 Feb 2022 (3 months ago)
Araihazar, Naryanganj, Dhaka, Bangladesh
Html5 course bangla tutorial for beginners | Tamim Ahmed – Part: 02

২.১ঃ HTML ট্যাগ ( Tag)

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

২.১ HTML ট্যাগ লেখার নিয়ম

  • প্রতিটি HTML ট্যাগ < (less than Sign) দিয়ে শুরু করতে হয়।
  • এরপর ট্যাগ এর নাম উলেখ করতে হয়।
  • এবং সবশেষে > (greater than Sign) দিয়ে ট্যাগ শেষ করতে হয়।
    যেমনঃ <a>, <b>, <img /> <code> ইত্যাদি।
  • Note : HTML ট্যাগ গুলো কেস সেনসিটিভ নয়, তবে W3C স্ট্যান্ডার্ড অনুযায়ী ছোট অক্ষরে লেখা ভাল। HTML এ কোন টেক্সটকে বিভিন্ন ট্যাগ এর মাধ্যমে লেখার সময় প্রতিটি ট্যাগকে দুইবার করে ব্যবহার করতে হয়।

    এগুলো হলঃ

    ২.১.১: ওপেনিং ট্যাগ (Opening Tags)

    টেক্সট শুরু করার আগে ওপেনিং ট্যাগ ডিক্লেয়ার করতে হয়। ওপেনিং ট্যাগ লেখার নিয়মঃ

    ২.১.২ঃ ক্লোজিং ট্যাগ (Closing Tags )

    টেক্সট শেষ হওয়ার পর ক্লোজিং ট্যাগ ডিক্লেয়ার করতে হয়। ক্লোজিং ট্যাগ লেখার নিয়ম হচ্ছে ট্যাগ এর নামের পূর্বে / less than সাইন এর পরে এটি “/” ব্যবহার করতে হয়। অর্থাৎ

    এর উদাহরণ দেওয়া হলঃ

    <Opening Tag> Here is Your Text </Closing Tag<
    <p> This line would be written under Paragraph style </p>

    ২.১.৩: HTML এম্পটি ট্যাগ (Empty Tags)

    HTML এ বেশ কিছু ট্যাগ রয়েছে, যেগুলো কোন টেক্সটকে প্রভাবিত করে না। বিশেষ কিছু কাজে এদের ব্যবহার হয়ে থাকে। যেমনঃ <br>, <hr>, <img>, <input> ইত্যাদি। এই ট্যাগ গুলোকে এম্পটি ট্যাগ (Empty Tags) বলা হয়ে থাকে। এই ট্যাগগুলোর কোন ক্লোজিং ট্যাগ নেই। তবে W3C স্ট্যান্ডার্ড অনুযায়ী এসকল এম্পটি ট্যাগগুলোকেও ক্লোজ করা উচিত। এজন্য ট্যাগ এর নামের শেষে এবং greather than সাইন এর পূর্বে একটি স্পেস ( ) এবং একটি ফ্রন্ট -্যাশ “/” ব্যবহার করতে হয়। অর্থাৎ <br /> <hr /> ২.২ঃ HTML ডেপ্রিকেটেড ট্যাগ (Deprecated Tags) ও অ্যাট্রিবিউট (Attributes )

    এইচটিএমএল এর পূর্বের ভার্সনগুলোতে (HTML 4.01 এর পূর্বে) ব্যবহৃত কিছু ট্যাগ ও অ্যাট্রিবিউট HTML 4.01 ভার্সনে ডেপ্রিকেটেড (অননুমোদিত) ঘোষনা করা হয়। ডেপ্লিকেটেড মানে এই নয় যে, এটি কাজ করবে না !! তবে, পেইজ ভ্যালিডেশনে এটি সমস্যা হয়ে দাড়াবে। বিভিন্ন ডেপ্লিকেটেড ট্যাগ এর মধ্যে রয়েছে <big>, <center> <font> <franme>, <strike> ইত্যাদি।

    ২.৩ঃ HTML অ্যাট্রিবিউট (Attributes) ও ভ্যালিউ (Value)

    HTML ট্যাগ এ ব্যবহৃত বিষয়সমূহের বিভিন্ন পরিবর্তন সাধন, বিভিন্ন আঙ্গিকে উপস্থাপন করা, সুনির্দিষ্টভাবে প্রকাশ করার জন্য ট্যাগ এর মধ্যে বিভিন্ন অ্যাট্রিবিউট ব্যবহারের প্রয়োজন হয়ে থাকে। আর এসকল অ্যাট্রিবিউট এর ব্যবহার কাজকে সুনির্দিষ্ট করতে, এতে বিভিন্ন ভ্যালিউ ব্যবহৃত হয়। যেমনঃ <p> ট্যাগ ব্যবহার করে যখন কোন টেক্সট লেখা হয়, তখন স্বাভাবিক নিয়মে এটি ব্রাউজার এ বাম দিক থেকে শুরু হয়। এখন আমি যদি এই টেক্সটকে ব্রাউজার এর ডান দিক থেকে শুরু করতে চাই, অর্থাৎ ডান দিক থেকে প্রদর্শন করতে চাই তবে <p> ট্যাগ এ নিচের মতো অ্যাট্রিবিউট ও ভ্যালিউ ব্যবহার করতে হবে। যেমনঃ

    <p dir=”rtl”> This line will be shown as right to left in browser </p>

    এখানে <p> হচ্ছে ট্যাগ, dir হচ্ছে উক্ত <p> ট্যাগ এর অ্যাট্রিবিউট এবং rth হচ্ছে dir অ্যাট্রিবিউট এ ব্যবহৃত ভ্যালিউ। Note: সকল ট্যাগে অ্যাট্রিবিউট ব্যবহার হয় না। আবার সকল ট্যাগও সব ধরণের অ্যাট্রিবিউট সাপোর্ট করে না। আমরা পরবর্তী অধ্যায়গুলোতে এ সম্পর্কে বিস্তৃরিত জানবো।

    ২.৩.১ঃ অ্যাট্রিবিউট লেখার নিয়ম

    HTML এ অ্যাট্রিবিউট লেখার নিয়ম হচ্ছে-ওপেনিং ট্যাগ এর মধ্যে ট্যাগ এর নাম এরপর একটি স্পেস ব্যবহার করে অ্যাট্রিবিউট উলেখ করতে হয়।
    <Tag_name Attribute_name

    ২.৩.২ঃ ভ্যালিউ সেট করার নিয়ম

    অ্যাট্রিবিউট এর ভ্যালিউ সেট করার জন্য অ্যাট্রিবিউট এর নামের পরে একটি ইকুয়াল সাইন, তারপর কোটেশন এর মধ্যে ভ্যালিউ লিখতে হয়। নিচে অ্যাট্রিবিউট ও ভ্যালিউ ব্যবহার করে ট্যাগ লিখে দেখানো হলঃ

    Note: ভ্যালিউ অ্যাসাইন করার সময় কোটেশন ব্যবহার করা আবশ্যক। সিংগেল এবং ডাবল কোটেশন উভয় পদ্ধতিই ব্যবহার করা যাবে।

    ২.৩.৩ঃ HTML এর প্রধান অ্যাট্রিবিউট সমূহ

    HTML এ উলে-খযোগ্য কিছু অ্যাট্রিবিউট রয়েছে, যেগুলো প্রায় সব ধরণের ট্যাগ এর সাথে ব্যবহারযোগ্য। এগুলো হলঃ id, class, title style i

    ২.৩.৩.১ঃ id

    HTML পেজের কোন ট্যাগকে নির্দিষ্টভাবে সনাক্ত করার জন্য id অ্যাট্রিবিউট ব্যবহার করা হয়ে থাকে। HTML পেজকে যখন কোন CSS অথবা JavaScript ফাইলের সাথে লিংক করা হয়, তখন HTML এর ট্যাগকে id অ্যাট্রিবিউট ব্যবহার এর মাধ্যমে উক্ত CSS অথবা JavaScript ফাইল যথাযথ কাজ সম্পাদন করে থাকে। যেমনঃ

    ২.৩.৩.২ঃ class

    HTML পেজের মধ্যে একই রকমের বিভিন্ন ট্যাগকে আলাদা আলাদাভাবে সনাক্ত করার জন্য class অ্যাট্রিবিউট ব্যবহার করা হয়ে থাকে। যেমন কোন একটি HTML পেজের মধ্যে ৪টি <p> ট্যাগ রয়েছে। এখন আমি যদি এই ৪টি <p> ট্যাগকে আলাদা আলাদা ভাবে সনাক্ত করতে চাই, তবে class Attribute এর মাধ্যমে সংজ্ঞায়িত করতে হবে।যেমনঃ

    Note : HTML id এবং class অ্যাট্রিবিউট এর ভ্যালিউ ‘কেস-সেনসিটিভ’। ভ্যালিউ হিসেবে যে কোন নাম হতে পারে, সেই মান ধরে CSS অথবা JavaScript প্রয়োজনীয় কাজ সম্পাদন করবে। ভ্যালিউ অবশ্যই লেটার দিয়ে শুরু হতে হবে এবং পরবর্তীতে নাম্বার (০-৯), হাইফেন (-), আন্ডারস্কোর (), কমা (,) ব্যবহার করা যেতে পারে।

    ২.৩.৩.৩ঃ title

    HTML পেজের কোন ইলিমেন্টকে (ইলিমেন্ট নিয়ে পরবর্তী অধ্যায়গুলোতে বিস্তারিত আলোচনা করা হয়েছে) ব্রাউজারে নির্দেশ করার জন্য title অ্যাট্রিবিউট ব্যবহার করা হয়ে থাকে। title অ্যাট্রিবিউট সাধারণত <a> <area>, <img>, <link>, <abbr>, <acronym> ট্যাগগুলোতে বেশি ব্যবহৃত হয়ে থাকে। title অ্যাট্রিবিউট এর ব্যবহার দেখানো হয়েছে।

    2.3.3.4ঃ style

    HTML পেজে এক লাইন বিশিষ্ট কোন ইলিমেন্টে স্টাইল (Inline CSS) প্রয়োগ করার জন্য style অ্যাট্রিবিউট ব্যবহার করা হয়ে থাকে। যেমনঃ-নিচের <p> ট্যাগে স্টাইল অ্যাট্রিবিউট ব্যবহার করে এর ফন্ট ও কালার পরিবর্তন করা হয়েছে।
    <p style=”font-family: arial; color:#FF0000;”> Some text. </p>

    ২.৪ : কনটেন্ট (Contents)

    ওয়েবপেজে আমরা যা দেখতে পাই, (টেক্সট, ইমেজ, অডিও, ভিডিও ইত্যাদি) সব কিছুই কনটেন্ট। উদাহরণস্বরূপ ও আমরা যদি ওয়েবপেজকে একটি কনটেইনার এর সাথে তুলনা করি যে, একটি কনটেইনার এর মধ্যে কি থাকে ? চাল, ডাল, পানি ইত্যাদি। কনটেইনার এসব কিছু ধারণ (contain) করে। আর ধারণকৃত চাল, ডাল, পানি হচ্ছে উক্ত কনটেইনার এর কনটেন্ট (Contents)। ঠিক তেমনি, এখানে কনটেইনার হচ্ছে আমাদের ওয়েবপেজ আর কনটেইনার এর মধ্যে থাকা চাল, ডাল, পানি ইত্যাদি যাবতীয় কনটেন্ট হচ্ছে ওয়েবপেজে ব্যবহৃত টেক্সট, ইমেজ, অডিউ, ভিডিউ ইত্যাদি।

    ২.৫ঃ HTML এক্সটেনশন (Extension)

    কম্পিউটারে ব্যবহৃত প্রতিটি ফাইল, বিভিন্ন প্রোগ্রামিং ল্যাংগুয়েজ এর নিজস্ব এক্সটেনশন/ফরম্যাট রয়েছে। এক্সটেনশন বলতে একটি ফাইল যে নামে সেভ করা হয়ে থাকে, তাকে বুঝায়। যেমন : বিভিন্ন ভিডিও ফাইলের এক্সটেনশনঃ “.avi vod.dat, .mp4” ইত্যাদি হয়ে থাকে। বিভিন্ন অডিও ফরম্যাটের গান এর এক্সটেনশন : “.mp3, Amr, .wav” ইত্যাদি হয়ে থাকে। আবার বিভিন্ন প্রোগ্রামিং ল্যাংগুয়েজ যেমন ঃ-পিএইচপি’র এক্সটেনশন হচ্ছে “.php”, JavaScript প্রোগ্রামিং ল্যাংগুয়েজ এর এক্সটেনশন হচ্ছে “.js”। ঠিক তেমনি HTML ল্যাংগুয়েজ এর এক্সটেনশন হচ্ছে “.html”। এক্সটেনশন ব্যাতিত অথবা এক্সটেনশন পরিবর্তন হলে কোন ভাবেই উক্ত ফাইল কাজ করবে না। যেমন ও কোন অডিও ফাইলের এক্সটেনশন পরিবর্তন করে যদি ইমেজ ফরম্যাট ফাইলের এক্সটেনশন “.jpg, gif, .png” দেয়া হয়, তাহলে যেমন উক্ত অডিও ফাইল কাজ করবে না, ঠিক তেমনি HTML এর এক্সটেনশন পরিবর্তন করে যদি “.php” রাখা হয়, তাহলে এটি ও কাজ করবে না। সুতরাং এক্সটেনশন অতি গুরুত্বপূর্ণ বিষয়।

    ২.৬ : HTML এডিটর

    এইচটিএমএল কোড লিখার জন্য আমাদের একটি টেক্সট এডিটর প্রয়োজন হবে, যেমন Notepad Notepad++, – Text Editor ইত্যাদি। এছাড়া, বর্তমানে বিভিন্ন ধরনের IDE (Integrated Development Environment) Software যেমন:- (Macromedia Dreamweaver Adobe Dreamweaver ইত্যাদি) রয়েছে, যেগুলো ব্যবহার করে সহজ ও স্বল্প সময়ে প্রোগ্রাম লেখা যায়। ম্যাক্রোমিডিয়া ড্রিমওয়েভার ব্যবহার করে অনায়াসেই অনেক আকর্ষনীয় ওয়েবসাইট তৈরি করা যায়।

    ২.৭ঃ HTML ফাইল এর ব্যাসিক গঠন

    এইচটিএমএল ফাইল এর একটি নিজস্ব বৈশিষ্ট্য/গঠন পদ্ধতি রয়েছে। সেই গঠন/নিয়ম অনুসারে এইচটিএমএল ফাইল লিখতে হয়। এর বাইরে এইচটিএমএল ফাইল কাজ করবে না। নিচে একটি এইচটিএমএল ফাইল এর ব্যাসিক গঠন পদ্ধতি নিয়ে আলোচনা করা হলঃ

    প্রতিটি HTML ফাইল শুরু করতে হয় <html> (html এর ওপেনিং ট্যাগ) দিয়ে, এবং শেষ করতে হয় </html> (html এর ক্লোজিং ট্যাগ) দিয়ে। এই html এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে আমাদের অন্যান্য সমস্ত ট্যাগ, কনটেন্ট থাকবে। html এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে প্রধান যে দু’টি সেকশন থাকবে, এগুলো হল head সেকশন এবং body সেকশন। head সেকশন এর ভিতর পেজ সম্পর্কে বিভিন্ন ইনফরমেশন, পেজ এর শিরোনাম, বিভিন্ন স্ক্রিপ্ট, স্টাইল ইত্যাদি বিষয়সমূহ যোগ করা হয়ে থাকে। head সেকশনকে body সেকশন শুরু হওয়ার আগেই ক্লোজ করতে হবে। Head সেকশন নিয়ে পরবর্তীতে আলোচনা করবো। আর আমরা আমাদের ওয়েবপেজে যে সকল কিছু (টেক্সট, ইমেজ, ফ্ল্যাশ ইত্যাদি) দেখতে পাই, তার সবই body সেকশন এর মধ্যে উলেখ করতে হয়। এখানে আরো একটি বিষয় লক্ষ্যনীয় যে, যে ট্যাগ সবার আগে শুরু হয়েছে, সেটি সবার পরে এসে শেষ হয়েছে। এ সকল বিষয়গুলো আমরা পোস্টের পরবর্তীতে প্র্যাকটিক্যালী দেখতে পাবো।

    ২.৮ঃ HTML এ প্রথম প্রোগ্রাম লেখা

    এতক্ষন আমরা এইচটিএমএল এর খুঁটিনাটি বিষয়গুলো সম্পর্কে জেনেছি। এখন এসকল বিষয়গুলো ব্যবহার করে এইচটিএমএল এ আমরা আমাদের প্রথম প্রোগ্রাম লিখে তা ব্রাউজারে রান করে দেখবো। চলুন, তাহলে শুরু করা যাক…

    ধাপ-১ঃ নোটপ্যাড ওপেন করাঃ

    এজন্য প্রথমে আপনার কম্পিউটারের Start মেন্যু থেকে Run ক্লিক করুন।

    (Window বাটন + R) প্রেস করুন।

    এখন উপরের মতো একটি ডায়ালগ বক্স আসবে।

    এবার Open এর পাশের টেক্সট ফিল্ডে “notepad” টাইপ কর“ন এবং Ok বাটনে ক্লিক করুন।

    তাহলে উপরের চিত্রের মতো একটি নোটপ্যাড ওপেন হবে।
    ধাপ- ২ঃ HTML ফাইলে কোড লেখা এবার আগত নোটপ্যাডে নিচের মতো HTML কোড/ট্যাগ লিখি।

    ধাপ-৩: ফাইল সেভ করা
    এবার ফাইলটিকে আমরা HTML ফরম্যাটে সেভ করবো। এজন্য প্রথমে File মেন্যু থেকে Save As… এ ক্লিক করি।

    প্রথমে Save in এর পাশের ড্রপ-ডাউন লিস্ট থেকে এর লোকেশন, অর্থাৎ ফাইলটি কোথায় গিয়ে সংরক্ষিত হবে, তা ঠিক করে দিই। এবার ফাইলটির জন্য একটি নাম দিতে হবে এবং নামের শেষে অবশ্যই html এক্সটেনশন ব্যবহার করতে হবে। উপরের মতো File name এর ঘরে আমাদের ফাইল এর জন্য একটি নাম লিখি।

    এখানে একটি বিষয় লক্ষ্যনীয় যে, HTML ফাইল এর নামে কোন হোয়াইট স্পেস (” “) ব্যবহার করা যাবে না। হোয়াইট স্পেস এর পরিবর্তে হাইফেন (“-“) অথবা আন্ডারস্কোর (“_”) ব্যবহার করতে পারেন।

    এবার Save as type ফিল্ড হতে All Files সিলেক্ট করুন।

    সবশেষে Save বাটনো ক্লিক করে ফাইলটি সেভ করুন।
    ধাপ-৪: আউটপুট
    এখন আমরা আমাদের তৈরি করা এইচটিএমএল এর আউটপুট দেখবো। এজন্য প্রথমে আমরা আমাদের ফাইলটি যে ডিরেক্টরীতে সেভ করেছি, সেখানে চলে যাই।

    এবার যে ফাইলটি কিছুক্ষন আগে সেভ করেছেন, সেটি কোন একটি ব্রাউজার দিয়ে ওপেন করন। এজন্য ফাইলটির উপর মাউস এর ডান বাটন ক্লিক করুন। তারপর Open With এবং এখান থেকে আগত যে কোন একটি ব্রাউজার (যেমন:- Internet Explorer Mozilla Firefox Google Chrome, Opera ইত্যাদি) এর নামের উপর ক্লিক করুন, যেগুলো আপনার কম্পিউটারে ইনস্টল করা আছে। বিঃ দ্রঃ এইচটিএমএল এর অনেক ট্যাগ, অ্যাট্রিবিউট ব্রাউজার এর উপর নির্ভর করে কাজ করে। এ সম্পর্কে আমরা পরবর্তী বিস্তারিত জানবো।

    এবার নিচের মতো আপনার তৈরিকৃত এইচটিএমএল ফাইল এর আউটপুট ব্রাউজারে দেখতে পাবেন।

    কোড বিশেষণ
    এখন আমরা এই HTML ফাইল এর প্রতিটি ট্যাগ সম্পর্কে জানবো। আমাদের HTML ফাইলটি <html> (html এর ওপেনিং ট্যাগ) দিয়ে শুরু হয়েছে এবং শেষ হয়েছে </html> (html এর ক্লোজিং ট্যাগ) ব্যবহার করে। অর্থাৎ নিয়মানুসারে <html> এবং </html> ট্যাগ এর ভিতর অন্যান্য ট্যাগ ও কনটেন্ট ব্যবহৃত হয়েছে।

    <html> এরপর <head> ট্যাগ ব্যবহার করা হয়েছে। <head> সেকশন এর ভিতর বিভিন্ন স্টাইল, স্ক্রিপ্ট ব্যবহার করা হয়ে থাকে। নিয়মানুসারে head সেকশনকে (<head> </head>) body ট্যাগ শুরু হওয়ার আগেই ক্লোজ করা হয়েছে। head সেকশন নিয়ে পরবর্তীতে বিস্তারিত আলোচনা করব।

    <head> সেকশনের ভিতর <title> নামে একটি ট্যাগ ব্যবহার করা হয়েছে। এই ট্যাগটি ওয়েবপেজের টাইটেল/শিরোনাম ধারণ করে। টাইটেল ট্যাগ ব্যবহার করে পরবর্তীতে আমরা প্র্যাকটিক্যালী অনেক কাজ দেখবো। <title> This is my first HTML Program 🙂 </title>
    <html>
    <head>
    <title> This is my first HTML Program 🙂 </title>
    </head>
    </html>
    নিচে ব্রাউজারে টাইটেল ট্যাগ এর আউটপুট দেখানো হলঃ

    উপরে চিহ্নিত জায়গাটুকু Title ট্যাগ এর ভিতর লেখা, যা ব্রাউজার এর টাইটেল অংশে প্রদর্শিত হচ্ছে। <head> ট্যাগ ক্লোজ করার পর আমরা <body> ট্যাগ এর কাজ শুরু করেছি। আমরা কোন ওয়েবপেজে যা কিছু দেখতে পাই (কনটেন্ট), তার সব কিছুই এই <body> ট্যাগ এর ভিতর লিখতে হয়। যেমন : “Hellow World !!” লেখাটিকে ওয়েবপেজে প্রদর্শন করার জন্য আমরা এটিকে <body> ট্যাগ এর ভিতর ডিক্লেয়ার লিখেছি। ওয়েবপেজের এসকল কনটেন্টকে নিয়ন্ত্রন করার জন্য HTML এ অনেক ট্যাগ ব্যবহার করা হয়ে থাকে। আস্তে আস্তে আমরা এ সকল বিষয় সম্পর্কে জানবো। “<body> Hellow World !! </body>”
    <html>
    <head>
    <title> This is my first HTML Program 🙂 </title>
    </head>

    <body>
    Hellow World !!
    </body>

    </html>

    ২.৯ঃ এইচটিএমএল কমেন্ট (Comments)

    কমেন্টস এর কথা শুনলে হয়তো বা ফেসবুক কমেন্ট এর কথা মনে হতে পারে। বিষয়টি আসলে তা না। ফেসবুক কমেন্ট এর মতো এটি ব্রাউজারে প্রদর্শিত হয় না। এইচটিএমএল এ কমেন্ট ব্যবহার করবেন কেবল আপনার বুঝার সুবিধার্থে। মনে করুন, আজ আপনার তৈরি করা একটি এইচটিএমএল পেইজ/প্রোগ্রাম/ডকুমেন্ট-আজ থেকে আগামী ৬ মাস পর এর বিভিন্ন কোড এর ব্যবহার নাও বুঝতে পারেন। এক্ষেত্রে কোড এর পাশে কমেন্ট ব্যবহার করে এই সমস্যা থেকে মুক্তি পেতে পারেন। তাছাড়া অনেক সময় ওয়েবপেজ ডিজাইন/ডেভেলপমেন্ট এর ক্ষেত্রে একাধিক ডিজাইনার/ডেভেলপার একসাথে কাজ করে থাকেন, তখন আপনার প্রোগ্রামটি অন্যান্য ডিজাইনার এর বুঝার সুবিধার্থেও কমেন্ট ব্যবহারের প্রয়োজন হয়ে থাকে।

    ২.৯.১ঃ কমেন্ট (Comments) এর ব্যবহার

    এইচটিএমএল এ কমেন্ট ব্যবহার করার জন্য কমেন্ট (!–) ট্যাগ ব্যবহৃত হয়।

    যে লেখাকে কমেন্ট এর ভিতরে রাখতে চান, তার প্রথমে “<!–” এবং লেখার শেষে “–>” ব্যবহার করতে হয়। অর্থাৎ, <!–This is a comment & will not be displayed in the browser –>

    নিচে একটি উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।

    উপরে আমরা This is a comment. The Comment line (s) w…লাইনটিকে কমেন্ট ট্যাগ এর ভিতরে রেখেছি, তাই এটি ব্রাউজারে প্রদর্শিত হবে না। কিন্তু নিচের লাইনটি ঠিকই ব্রাউজারে প্রদর্শিত হবে। এখন পেজটি ব্রাউজারে রান করালে নিচের মতো প্রদর্শিত হবে।

    ২.১০ঃ ডকুমেন্ট টাইপ ডিক্লেয়ারেশন

    কোন এইচটিএমএল পেইজে এর ডকুমেন্ট টাইপ ডিক্লেয়ার না করা হলে ব্রাউজার বুঝতে পারে না যে, এটি এইচটিএমএল এর কোন ভার্সনে তৈরি। সেক্ষেত্রে এইচটিএমএল সংক্রান্ড্র বিভিন্ন তথ্যই ব্রাউজার এর নিকট পৌঁছায় না। ডকুমেন্ট টাইপ ডিক্লেয়ার করা ছাড়া এইচটিএমএল পেইজ ভ্যালিডেশনও সম্ভব নয়। তাই যথাযথ ডকুমেন্ট টাইপ ডিক্লেয়ার করা জরুরী। ডকুমেন্ট টাইপ ডিক্লেয়ার করার জন্য এইচটিএমএল এর <!DOCTYPE> ব্যবহৃত হয়। তবে, এটি এইচটিএমএল এর কোন ট্যাগ নয়। এটি এইচটিএমএল পেইজ এর শুরু তে (<html> ট্যাগ এর প্রথমে) উলেখ করতে হয়।
    উদাহরণঃ

    ২.১০.১ঃ HMTL 4.01 ভার্সনে ডকুমেন্ট টাইপ ডিক্লেয়ার করা

    HTML 4.01 এ তিনভাবে ডকুমেন্ট টাইপ ডিক্লেয়ার করা হয়।
    ২.১০.১.১ঃ Strict
    এইচটিএমএল ৪.০১ ভার্সনে উপযুক্ত ডকুমেন্ট ফরম্যাট এটি। কোন ডেগ্রিকেটেড ট্যাগ, অ্যাট্রিবিউট, ডকুমেন্ট ফরম্যাটে ব্যবহারযোগ্য নয়। এটি লেখার নিয়মঃ
    <!DOCTYPE HTML PUBLIC “//W3C//DTD HTML 4.01 // EN” “http://www.w3.org/TR/html4/strict.dtd”>
    ২.১০.১.২ঃ Transitional
    অনেক সময় আপনাকে আপনার ওয়েবপেইজে ডেপ্রিকেটেড অ্যাট্রিবিউট, ট্যাগ ব্যবহারের প্রয়োজন হতে পারে। সেক্ষেত্রে এই ডকুমেন্ট টাইপটি উলেখ করতে হয়।
    <!DOCTYPE HTML PUBLIC “//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

    ২.১০.১.৩ঃ Frameset
    ফ্রেমসেট ব্যবহার করে ওয়েবপেইজ তৈরিতে এই ডকুমেন্ট টাইপটি উলেখ করতে হয়।
    <!DOCTYPE HTML PUBLIC “//W3C//DTD HTML 4.01 Frameset // EN” “http://www.w3.org/TR/html4/frameset.dtd”>

    ২.১১.২ঃ HMTL 5 ভার্সনে ডকুমেন্ট টাইপ ডিক্লেয়ার করা

    HTML 5 এ নিম্নোক্ত পদ্ধতিতে ডকুমেন্ট টাইপ উলেখ করতে হয়।
    <!DOCTYPE html>
    বিঃ দ্রঃ এইচটিএমএল ৫ এ কোন প্রকার ডেপ্রিকেটেড ট্যাগ, অ্যাট্রিবিউট সমর্থিত নয়।

    181 Views
    No Comments
    Forward Messenger
    . 17

    HTML ল্যাংগুয়েজ
    -
    - -
    What is a database? How does the database work?
    -
    - -
    Basics Press Notice
    1
    Technology Updates
    10
    Electronics
    2
    Android Programing
    16
    iOS Programing
    2
    Computer Programing
    13
    Wireless Fidelity
    4
    Hacking tutorials
    15
    Mobile Networks
    3
    Videos Programing
    5
    Movie Review
    4
    Freelancing
    35
    Web Development
    18
    Social Network
    23
    Politics News
    2
    Education Guideline
    6
    Religious Fiction
    15
    Magic Tricks
    3
    LifeStyle
    17
    Uncategorized
    40
    No comments to “Html5 course bangla tutorial for beginners | Tamim Ahmed – Part: 02”