পূর্ববর্তী ক্লাসঃ HTML কি? ফাইল এক্সটেনশন, ডিফল্ট ব্রাউজার নিয়ে আলোচনা এবং একটি বেসিক পেজ বানানো।

HTML: HTML stands for Hyper Text Markup Language

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

আজ আমরা HTML এর হেডিং ট্যাগ কি? কিভাবে লিখতে হয় এবং কেন ব্যবহার হয় সেটা শিখব। সাথে সাথে আমরা HTML ট্যাগ লেখার নিয়ম ও শিখে নিব। শিখে নিব ব্রাউজারের একটি ফেচার ইন্সপেক্ট এলিমেন্ট, যার মাধ্যমে আমরা কোনো একটি ওয়েব পেজের এলিমেন্ট (পরে জানব এলিমেন্ট সম্পর্কে) এর সমন্ধে জানা যায়। আরো জানব কিভাবে যে কোনো ওয়েব পেজের রিসোর্স দেখা যায়। জানব রাজা ট্যাগ এবং প্রজা ট্যাগ কি।

তো সব কিছুর আগে আমরা ফিরে যাই গত দিনের ক্লাসে, যেখানে আমরা একটি ফাইল তৈরী করেছিলাম আমাদের লোকাল ডিস্ক ডি এর মাঝে। যার লোকেশন Local Disk (D) → Web Class → Class 03 → New text document.html এবং এর মাঝে আমরা লিখেছিলাম This is our class 03.

▶ আজকের ক্লাসটি ভিডিওতে দেখুন

আজ আমরা Local Disk (D) → Web Class এর মাঝে Class 04 নামে একটি ফোল্ডার তৈরী করি এবং তার মাঝে গতদিনের মত করে একটি নতুন HTML ফাইল তৈরী করি। যার নাম রিনেম করে আমরা index.html লিখি। তাহলে আমাদের আজকের ফাইলটির লোকেশন হচ্ছে Local Disk (D) → Web Class → Class 04 → index.html

এখন এই ফাইলটিকে আমরা প্রথমে ব্রাউজারে ওপেন করি। ব্রাউজারে একটি ফাঁকা পেজ দেখাবে। এটা এভাবে থাক। আমরা আবার index.html কে Notepad এ ও ওপেন করি।

এখন আমরা এই নোটপ্যাডে নিচের লেখা গুলো লিখি।

This is heading 1.

<h1>This is heading 1.</h1>

এবং ফাইল মেনু থেকে সেভ করি অথবা কিবোর্ডের Ctrl আর S বাটনদ্বয় একসাথে চাপ দেই। তাহলে আমাদের ফাইল সেভ হয়ে যাবে।

এখন আমরা ব্রাউজারে যাই যেখানে আমরা আগে থেকেই আমাদের index.html কে ওপেন করে রেখেছি। এবং সেখানে রিফ্রেশ করি। তাহলে নিচের মত দেখা যাবে।

লক্ষ্য করে দেখুন, আমরা কিন্তু দুই স্থানেই লিখেছি This is heading 1. কিন্তু আমাদের ব্রাউজার আমাদের দুই লাইনের লেখা দুই রকম ভাবে দেখিয়েছে। কিন্তু কেন এমন দেখালো?

▶ আজকের ক্লাসটি ভিডিওতে দেখুন

হ্যা, ২য় লাইনে আমরা কিছু অতিরিক্ত লেখা লিখেছি যা ব্রাউজার আমাদের কে দেখায়নি। সেই অংশ অর্থাৎ <h1>……</h1> টাই হচ্ছে HTML এর একটি ট্যাগ।

এখন আগে জেনে নেই এই ট্যাগের গঠন।

একটি HTML ট্যাগের শুরু এবং শেষ আছে। শুরু হবে দুইটি অ্যাঙ্গুলার ব্রাকেট < ও > দ্বারা। এই দুই অ্যাঙ্গুলার ব্রাকেটের মাঝে মূল ট্যাগের নাম লিখতে হয়। এই ট্যাগের নাম আর দুই অ্যাঙ্গুলার ব্রাকেট মিলে শুরু হয় HTML ওপেনিং ট্যাগ বা স্টার্ট ট্যাগ। যেমন এখানে আমাদের ওপেনিং ট্যাগ বা স্টার্ট ট্যাগ হচ্ছে <h1> যেখানে h1 হচ্ছে ট্যাগের নাম।

HTML ভাষার নিয়ম অনুযায়ী প্রতিটা ট্যাগের শেষ করতে হবে। সেই কারণে ট্যাগের ক্লোজিং বা এন্ড ট্যাগ ও রয়েছে। এটাও লেখার জন্য অ্যাঙ্গুলার ব্রাকেট দিতে হয়। শুধু মাঝে একটা অতিরিক্ত ফরোয়ার্ড স্লাশ বা শুধু স্লাশ (/) চিহ্ন দিতে হয়। আর স্লাশের পর লিখতে হয় ট্যাগের নাম। তাহলে পুরো গঠন কি হবে? </ এর পর ট্যাগের নাম এবং শেষে >. যেমন আমাদের এখানে আমাদের h1 ট্যাগের ক্লোজিং ট্যাগ হচ্ছে </h1>. অবশ্যই ফরোয়ার্ড স্লাশের পর ট্যাগের নাম লিখতে হবে।

নোটঃ পৃথিবীতে সব কিছুরই ব্যতিক্রম আছে। HTML এর ট্যাগের জন্যেও আছে। আগেই বলেছি HTML এর সকল ট্যাগের শুরু করলে শেষ করতে হবে। কিন্তু এমন অনেক ট্যাগ আছে যাদের শেষ হয় না। তাদেরকে এমপটি ট্যাগ বলে। কেন বলে আমরা পরে জেনে নিব। আপাতত এমন একটা উধারণ দেই। এমন একটি এমপটি ট্যাগ হল <br> এর কোনো ক্লোজিং হয় না। এর কাজ আমরা পরে দেখে নিব।

▶ আজকের ক্লাসটি ভিডিওতে দেখুন

তাহলে টোটাল HTML ট্যাগের স্ট্রাকচার কেমন হবে? <tag_name> হবে শুরুর জন্য আর শেষের জন্য হবে </tag_name>

ফিরে যাই আমাদের উপরের কোডে।

দেখা যাক আমাদের ট্যাগ কি কাজ করেছে।

দেখুন ওখানে আমাদের প্রথম লাইনে শুধু লেখা আছে This is heading 1. তাই ব্রাউজার এটাকে সাধারণ লেখা হিসাবেই দেখিয়েছে। ২য় লাইনে আমরা লিখেছিলাম <h1>This is heading1.</h1> এখানে <h1>….</h1> একটি HTML ট্যাগ। তাই ব্রাউজার এটাকে রিড করে এই ট্যাগের কাজটা কি সেই হিসাবে কাজ করেছে।

গত পর্বে আমরা জেনেছি ব্রাউজার শুধুমাত্র HTML ভাষা বোঝে। এখানে h1 প্রকাশ করে এর মাঝের লেখা হবে হেডিং। আর হেডিং মানে তো শিরোনাম। আর আমরা জানি যে কোন স্থানে শিরোনাম সাধারণ লেখা থেকে বড় হয়। এখানেই সেই কাজটা ঘটেছে।

আর একটা বিষয় আমিরা এখানে জেনে নেই, সেটা হচ্ছে কোনো একটা ট্যাগের ওপেনিং এবং ক্লোজিং ট্যাগের মাঝে যত লেখা থাকবে, সেই সব লেখাই হবে ঐ ট্যাগের এলিমেন্ট। এই কারণে যে সকল ট্যাগের ক্লোজিং ট্যাগ নেই, তার এলিমেন্ট ও থাকবেনা। সেই কারণে ঐ সমস্ত ট্যাগের নাম এমপটি ট্যাগ।

তাহলে আমাদের উধারণে h1 ট্যাগের এলিমেন্ট কি হবে? নিশ্চয় <h1> ও </h1> এর মাঝে থাকা This is heading 1. লেখাটুকু। হ্যা, সেটাই।

একইভাবে সকল ট্যাগের একটি নির্দিষ্ট কাজ আছে। আর সেই ট্যাগ দিলে কোন কাজ করতে হবে সেটা ব্রাউজার জানে। তাই ঐ ট্যাগ দেখলেই সেই কাজটা করে ফেলবে। সুতরাং HTML শেখার অর্থই হচ্ছে প্রতিটা ট্যাগের কি কাজ সেটা জানা। যেমন এখানে h1 দ্বারা শিরোনাম বা হেডিং দেওয়া বোঝায়।

▶ আজকের ক্লাসটি ভিডিওতে দেখুন

এখন আপনি কোনো একটা পত্রিকার দিকে দেখলে দেখবেন, সকল শিরোনাম কিন্তু একই সাইজের না। কোনোটা বড় অক্ষরের শিরোনাম, কোনোটা ছোট। এইভাবে বিভিন্ন সাইজের হেডিং বা শিরোনাম হয়ে থাকে। HTML এ ও এমন বিভিন্ন সাইজের হেডিং আছে। আপনি যে নোটপ্যাডে কোড লিখেছেন সেটা ওপেন করে সব গুলো লাইন কেটে দিয়ে নিচের মত করে লিখুন এবং সেভ করুন।

<h1>This is heading 1.</h1>

<h2>This is heading 2.</h2>

<h3>This is heading 3.</h3>

<h4>This is heading 4.</h4>

<h5>This is heading 5.</h5>

<h6>This is heading 6.</h6>

এখন আবার ব্রাউজারে ফিরে গিয়ে রিফ্রেশ করুন। আর দেখেন কেমন দেখা যাচ্ছে। আমার এমন দেখা যাচ্ছে।

এবার আমরা এই ৬ লাইন লেখাকে একটু রিসার্চ করি।

১ম লাইনেরটা হচ্ছে h1: যা সব থেকে বেশী প্রায়োরিটির হেডলাইন বোঝায়। তাই এটি সব থেকে বড় আকারের হয়েছে।

২য় লাইন h2: এটা h1 থেকে কম প্রায়োরিটির। তাই এটি h1 থেকে কিছুটা ছোট হয়েছে।

এভাবে পরপর ৬ষ্ঠ লাইন অব্দি একই প্রসেসে সাইজ ছোট হয়েছে। আমরা কি চাইলে এর পরেও h7, h8… দিতে পারব? দিয়ে দেখি কি হয়।

এবার দেখি ব্রাউজার কি দেখায় আমাদের।

ব্রাউজার এমন কেন দেখালো যে h6 এর পর অন্য রকম হয়ে গেল? হ্যা, কারণ শিরোনাম বা হেডিং h1 থেকে h6 পর্যন্তই হবে। এরপর আর হেডিং হবেনা। সেই কারণে h7 বা h8 HTML এর কোনো ট্যাগ না। তাই ব্রাউজার কিছুই করেনি এর উপর। তাই সাধারণ লেখার মত করে দেখিয়েছে।

এখন আমরা দেখব রাজা ও প্রজা ট্যাগ কি? আসলে এটা আমরা ব্যবহারের পর যে ফল দেখতে পাই তার উপর ভিত্তি করে সকল HTML ট্যাগকে দুই ভাগে ভাগ করা হয়। সেই দুই ভাগ রাজা ও প্রজা। কেন এমন করা হয়? আমরা সেটা দেখে নিব। তার আগে আমাদের জানতে হবে ব্রাউজারের ইন্সপেক্ট ফেচার কি?

ইন্সপেক্ট এলিমেন্টঃ কোনো একটি ওয়েব পেজের রিসোর্স বা কোড দেখা, রিসার্চ করা বা ক্লায়েন্ট সাইডের পরিবর্তন নিজের জন্য নিজে করার জন্য ইন্সপেক্ট এলিমেন্ট ব্যবহার করা হয়।

▶ আজকের ক্লাসটি ভিডিওতে দেখুন

কিভাবে করতে হয়? আপনি প্রায় সকল মর্ডান ব্রাউজারে কোনো ওয়েব পেজ ওপেন করলে সেই ওয়েব পেজের ভেতর মাউসের রাইট বাটন ক্লিক করলে মেনুতে Inspect বা Inspect Element নামে একটা অপশন পাবেন। আমরা আমাদের যে index.html ব্রাউজারে এখন ওপেন করা আছে সেটার ইন্সপেক্ট করি। আপনি করে নিন। নিচের মত করে।

ইন্সপেক্ট এলিমেন্ট এ চাপলে নিচের মত দেখা যাবে।

এখানে বাম পাশে নিচে দেখুন নীল কালারের একটা মার্ক আছে। ওটা সিলেক্টেড অবস্থায় আছে। আপনি এখন মাউস টা নীল কালার বাদে নিচের বা উপরের কোনো ট্যাগের উপর দিয়ে ঘুরিয়ে নিন। আর উপরের দিকে দেখবেন অনেক রকম কালার আসছে এবং চলে যাচ্ছে। যেমন-

এখানে আমার ক্ষেত্রে দেখুন h1 এর লাইনে মাউস রাখার সময় উপরে দু’ধরনের রং এসেছে। একটা বর্ডার করা হালকা নীল/আকাশী বর্ণের। এই বর্ণটা শুধু মাত্র কোনো একটি লেখা যতটা স্থান দখল করেছে সেই অংশের বর্ণ ঐ রঙ্গের করে দেয়। আর অন্যটা হলুদ বর্ণের। এটা কোনো একটি লেখার বাইরে সেই লেখার মার্জিন নির্দেশ করে।

▶ আজকের ক্লাসটি ভিডিওতে দেখুন

এখানে h1 থেকে h6 পর্যন্ত দেখবেন সকল ট্যাগই সম্পূর্ণ লাইন দখল করে আছে। যে ট্যাগ সমূহ এমন সম্পূর্ণ লাইন দখল করে, তাদেরকে রাজা ট্যাগ বলে। এদের যদি লেখা এক অক্ষরেরও হয়, তবুও পুরো লাইন দখল করে নেয়। কিন্তু নিচের যেখানে আমরা h7 বা h8 লিখেছি, ওখানে মাউস হোভার (মাউস নিয়ে জাস্ট রেখে দেওয়াকে হোভার বলে) করে দেখেন। এরা পুরো যায়গা দখল করে নি। তাই এদেরকে প্রজা ট্যাগ বলে।

আশা করি রাজা ট্যাগ, প্রজা ট্যাগ, ট্যাগ, HTML এর ট্যাগ কেন আর কিভাবে লিখতে হয় এবং হেডিং ট্যাগের ব্যবহার শিখতে পেরেছেন। সাথে সাথে কোনো একটা ওয়েব পেজ ব্রাউজার থেকে রিসার্চ করাও শিখেছেন।

যেমন আমরা আগেই জেনেছি যে, সকল ওয়েব সাইটই ব্রাউজারে HTML হয়ে আসে। সেটা আমরা কিভাবে বুঝতে পারব? আপনি যে কোনো একটি ওয়েব সাইটে গিয়ে আপনার ব্রাউজারের পেজের ভেতর মাউস রেখে রাইট বাটন প্রেস করেন। দেখবেন সেখানে View Source বা Source বা View Page Source আছে, ওটায় চাপ দিন।

এখানে চাপ দেওয়ার পর নিচের মত আসছে দেখুন।

এইভাবে আপনি যে কোনো ওয়েব সাইটের কন্টেন্ট দেখতে পারবেন।

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

সব কিছুর আগে আপনি গতদিনের ইন্সটল করা Notepad Plus এপটা ওপেন করুন। সেখান থেকে নিউ ফাইল এ যান।

এবার যে এডিটর আসবে সেখানে আপনি কোড লিখুন (উপরের যে সব কোড দিয়েছি সেগুলোই)। লেখার পর সেভ আইকনে চাপুন (নিচের স্ক্রিনশট দেখুন)।

এখানে চেপে সেভ এ চাপুন। এখন যে পপ-আপ আসবে সেখানে নামের ঘরে index.html লিখুন (আগে যা আছে সব কেটে দিন)।

▶ আজকের ক্লাসটি ভিডিওতে দেখুন

আর ফোল্ডারের ঘরে যা আছে তার সাথে /Web Class/Class 04 লিখে সেভ করুন। নিচের স্ক্রিনশট দেখুন।

সেভ হলে আপনার ফাইল ম্যানেজারে প্রবেশ করুন। এবং সেখান থেকে ইন্টারনাল স্টোরেজ (ফোন মেমোরীর) Web Class → Class 04 ফোল্ডারে যান এবং index.html ফাইলটি ওপেন করুন।

ক্রোম ব্রাউজার সিলেক্ট করলে নিচের মত আসবে।

এভাবে বাকি উপরের বাকি সব কাজ করতে থাকুন।

নোটঃ মোবাইলে ইন্সপেক্ট ফেচার নেই। আর ভিউ সোর্স দেখতে হলে ব্রাউজারে ডকুমেন্টটি ওপেন হবার পর এড্রেসটির শুরুতে view-source: লিখতে ঢুকতে হবে। নিচের মত করে।

দেখবেন সেই পেজে কোন কোন ট্যাগ ব্যবহার আছে সেগুলো দেখতে পাবেন। আমরা ধীরে ধীরে সেই সমস্ত ট্যাগ শিখব।

সাথেই থাকুন। শিখতে থাকুন।

আমাদের ক্লাস গুলো প্রাকটিস করে তা আমাদের মেন্টরদের কাছে চেক করার জন্য জমা দিতে পারবেন। আমাদের মেন্টর সেগুলো চেক করবেন। এই বিষয় নিয়ে আমরা পরের ক্লাসে জানব।

আমাদের সম্পূর্ণ কোর্সটি দেখনু 👉 https://www.youtube.com/WebGround

আমাদের ফেসবুকে ঘুরে আসতে 👉 https://www.facebook.com/groups/WebGround

আমাদের ওয়েব সাইটঃ https://www.webground.in