ওয়েব ডিজাইন পরিচিতি এবং HTML (সম্পূর্ণ অধ্যায়) | HSC ICT ৪র্থ অধ্যায়

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

 

পুরো অধ্যায় এক ভিডিয়োতে

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

ওয়েবসাইট এবং ওয়েবপেজ কী?

ওয়েবসাইট (website) আসলে কী? আপনি এই মূহুর্তে যখন এই আর্টিকেলটি পড়ছেন, তখন আপনি আসলে একটি ওয়েবসাইটেই আছেন। আমাদের এই ওয়েবসাইটটি হচ্ছে pathgriho.com। pathgriho.com একটি বিশাল ওয়েবসাইট। এখানে অনেকগুলো পেজ আছে, এখন পর্যন্ত ৪০০টিরও বেশি পেজ আছে আমাদের ওয়েবসাইটে। এই সবগুলো পেজ নিয়েই একটি পূর্ণাঙ্গ ওয়েবসাইট। ঠিক একইভাবে wikipedia.org, google.com, facebook.com সবগুলোই কোনো না কোনো ওয়েবসাইট। এবং আপনি একটি পেজ একবারে দেখতে পারেন সাধারণত, সেই একটি পেজে যা কিছু আছে তা সবকিছু নিয়েই একটি ওয়েবপেজ (Webpage)।

দুটি আংশিক ওয়েবপেজ

এই ছবিটিতে দুটি ওয়েবপেজের আংশিক ছবি আছে, এবং এই দুটি ওয়েবপেজসহ আরও অনেকগুলো ওয়েবপেজ নিয়ে পুরো ওয়েবসাইটটি গঠিত।

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

ওয়েব ব্রাউজার কী?

একটি ওয়েবপেজ আপনি কী দিয়ে দেখছেন? আপনি হয়তো আপনার মোবাইল বা কম্পিউটারের Chrome নামক অ্যাপ ব্যবহার করে আমাদের এই ওয়েবসাইটের এই পেজটি দেখছেন। iOS ইউজার হয়ে থাকলে হয়তো দেখছেন Safari ব্যবহার করে। অথবা হতে পারে Brave, Mozila Firefox, Opera, Edge বা অন্য যেকোনো একটি অ্যাপ। এই যেকয়টি মাধ্যমের নাম বললাম, এর প্রত্যেকটিই হলো কোনো না কোনো ওয়েব ব্রাউজার। অর্থাৎ সহজ ভাষায়, যা ব্যবহার করে আপনি একটি ওয়েবপেজ দেখতে পারেন, সেটিই হলো ওয়েব ব্রাউজার।

কয়েকটি ওয়েব ব্রাউজারের লগো

ওয়েবসাইটের প্রকারভেদ

ওয়েবসাইটকে অনেকভাবেই বিভিন্ন ভাগে ভাগ করা যায়। তবে এইচএসসির সিলেবাসে প্রকারভেদ করা হয়েছে Static এবং Dynamic- এই দুই ভাগে।

স্ট্যাটিক ওয়েবসাইট

স্ট্যাটিক ওয়েবসাইট মূলত ওইসব ওয়েবসাইট, যেগুলোতে কোনো ধরনের পরিবর্তন আসে না। ওয়েবসাইট ডিজাইনার যেভাবে ওয়েবসাইটটি তৈরি করে ওয়েবে রেখে দিয়েছে, তেমনটাই থাকে সেসকল ওয়েবসাইটই হলো স্ট্যাটিক ওয়েবসাইট। স্ট্যাটিক ওয়েবসাইটের একটি উদাহারণ হলো example.com। আপনি যদি এই ওয়েবসাইটটিতে প্রবেশ করেন, তাহলে দেখবেন সেখানে পরিবর্তন হওয়ার মতো কিছু নেই। যা আছে তা নির্দিষ্ট।

ডায়নামিক ওয়েবসাইট

ডায়নামিক ওয়েবসাইট হলো ওই সকল ওয়েবসাইট যা পরিবর্তিত হয়। যেমন facebook.com একটি ওয়েবসাইট, যেখানে আপনি একটি ছবি আপলোড করার সাথে সাথে পুরো ওয়েবসাইটে একটি পরিবর্তন চলে আসলো, আপনার ছবি ওয়েবসাইটে যুক্ত হয়ে গেলো যা আগে ছিল না। এটি ডায়নামিক ওয়েবসাইটের উদাহারণ।

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

সার্ভার (Server) ও ক্লায়েন্ট (Client) কী?

সার্ভার আসলে কী? এই যে ওয়েবপেজটি আপনি এখন দেখছেন, এটি একটি সার্ভারে রয়েছে। আপনি ইন্টারনেট ব্যবহার করে সেই সার্ভার থেকেই আমাদের এই পেজটি দেখছেন। আরও সহজ করে বলা যাক।

ধরুন আপনি কোনো কম্পিউটার থেকে কিছু ছবি বা ইমেজ আপনার কম্পিউটারে নিচ্ছেন। তাহলে যে কম্পিউটার থেকে নিচ্ছেন, সেটি হবে সার্ভার কম্পিউটার। আর আপনার কম্পিউটারটি, অর্থাৎ যে কম্পিউটারে নেয়া হচ্ছে সেটি হবে ক্লায়েন্ট কম্পিউটার। এই সার্ভার ও ক্লায়েন্ট মিলে তৈরি হয় নেটওয়ার্ক (Network)।

ওয়েবপেজের উপাদান, ওয়েবসাইটের সংগঠন, URL, ওয়েবসাইটের উদ্দেশ্য

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

এই হ্যান্ডনোটে আপনি এই অধ্যায়ের প্রায় পুরোটাই পাবেন। তবে কনটেন্টটিতে থাকছে অল্প কিছু প্রশ্নের উত্তর। প্রশ্নগুলো হলো:

• ওয়েবপেজের উপাদান কয়টি ও কী কী?
• ওয়েবসাইট সংগঠনের প্রকারভেদ ব্যাখ্যা কর (সিকোয়েন্স, হায়ারার্কি, স্ট্রেইট লিনিয়ার, লিনিয়ার সিকোয়েন্স উইথ সাপোর্টিং ডিগ্রেসন, স্টার, ট্রি)
• হোমপেজ (Homepage) কী?
• ওয়েবসাইট প্রকাশের (Website Publish) এর উদ্দেশ্য ব্যাখ্যা কর।
• URL কী?
• URL এর বিভিন্ন অংশ চিহ্নিত কর।

এবার আমরা HTML কী এবং কেন প্রয়োজন সে বিষয়ে আলোচনার শুরু করি তাহলে। মাঝে বাকি রইলো Domain Name এবং IP Address - এর আলোচনা। এজন্য ভিডিয়োটির ২৩ মিনিট ৩৬ সেকেন্ড থেকে ৪৩ মিনিট পর্যন্ত দেখলেই আশা করি বুঝতে পারবেন।

HTML কী এবং কেন প্রয়োজন?

HTML এর সংক্ষিপ্ত রূপ। এর পূর্ণরূপ হচ্ছে Hyper Text Markup Language বা হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ। HTML মূলত একটি কম্পিউটারের ভাষা বা কোড যার সাহায্যে কম্পিউটারকে কিছু নির্দেশনা দেয়া হয়। আপনি এই মূহুর্তে যে ওয়েবসাইটটি দেখছেন সেটিও কিন্তু HTML ভাষা ব্যবহার করেই তৈরি করা হয়েছে। এখানে HTML এর পাশাপাশি আরও অনেক ভাষা রয়েছে, তবে HTML এর ভেতরে বাকি সবাই আছে। HTML একটি গাঠনিক ভাষা।

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

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

pathgriho.com এর একটি পৃষ্ঠার আংশিক HTML

HTML এর গঠন

HTML ভাষায় কোনো কোড লিখতে হলে একটি সাধারণ গঠন অনুসরন করতে হয়। প্রথমে <HTML> ট্যাগ দিয়ে শুরু করতে হয়। (ট্যাগ কী তা আমরা জানব একটু পর)। এভাবে HEAD, TITLE, BODY ট্যাগ ব্যবহার করতে হয়। BODY ট্যাগের মধ্যে মূলত যা কিছু থাকে সেসবই একটি ওয়েবপেজে শো করা হয়। HTML এর সাধারণত গঠন জানতে চাইলে নিচের গঠনটি দেখা যেতে পারে।

<HTML>

<HEAD>

    <TITLE> An HTML Example </TITLE>

</HEAD>

<BODY>

    MAIN CONTENTS

</BODY>

</HTML>

এই <Body> এবং </Body> এর মধ্যে মূল কনটেন্টটি প্রকাশ করার জন্য আরও অনেক ট্যাগ ব্যবহার করতে হয়।

HTML Tag কী? কোন কাজের জন্য কোন ট্যাগ প্রয়োজন?

HTML এর কাজগুলো বিভিন্ন ট্যাগের মাধ্যমে করতে হয়। এই ট্যাগ সম্পর্কিত কিছু প্রশ্ন জানা যাক আগে।

• ট্যাগ বলতে আসলে কী বুঝায়?
• HTML ট্যাগ কত প্রকার?
• কন্টেইনার ট্যাগ এবং এম্পটি ট্যাগ কী?
• বিভিন্ন কাজের ভিত্তিতে আমরা HTML ট্যাগকে মোট ১৪টি ক্যাটাগোরিতে ভাগ করেছি। এই ১৪ ক্যাটাগোরির মোট প্রয়োজনীয় ট্যাগ কতটি?
• ১০০টির বেশি ট্যাগ এবং তাদের কাজ।

এই বিষয়গুলো বিস্তারিত জানতে পড়ুন: "সকল HTML Tag List বাংলা PDF।"

HTML ট্যাগ বিষয়ে আমাদের আরও একটি কন্টেন্ট আছে "All HTML Tags List with Example" নামে। এটিও দেখতে পারেন। তবে দেখার আগে বা পরে ছোট করে আরেকটু বিষয় জেনে নেয়া যাক।

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

HTML কোড লেখার নিয়ম

প্রথমেই বলেছি HTML কোড আসলে প্রাকটিক্যালি বুঝার ব্যাপার। লিখে এ ব্যাপারটা পুরোপুরি বুঝতে পারা সম্ভব না। তাই এ বিষয়ে আমরা প্রায় আড়াই ঘন্টার লম্বা একটি ভিডিয়ো তৈরি করেছি আপনাদের জন্য। এই ভিডিয়োর ১ ঘন্টা ৪২ মিনিট থেকে প্রায় শেষ মিনিট পর্যন্ত প্র্যাকটিক্যালি HTML বুঝিয়ে দেয়া হয়েছে। তাই পুরোপুরি বুঝতে চাইলে ভিডিয়োটিই দেখতে হবে।

এর বাইরে আপনি যদি কোডের লিখিত ভার্সন চান, তবে আপনি বই দেখতে পারেন। বইয়ের অফিসিয়াল পিডিএফ ডাউনলোড করতে ক্লিক করুন এখানে। এছাড়া কালার সহ কোড দেখতে চাইলে আপনার জন্য ৫টি সাধারণ প্রশ্নের উত্তর নিয়ে আমাদের একটি কনটেন্ট রয়েছে "HTML Examples" এর জন্য। দেখতে পারেন এটিও।

এর বাইরে আপনি W3 School এর HTML Tutorial থেকেও শিখতে পারবেন HTML।

HTML সম্পর্কিত আরও কিছু

HTML সম্পর্কে আরও কিছু বিষয় জেনে নেয়া যাক। প্রথমেই জানা যাক মোবাইল ফোন দিয়ে কিভাবে HTML কোড লিখে প্র্যাকটিস করা যেতে পারে?

Mobile Phone দিয়ে HTML করার উপায়

Android দিয়ে আপনি HTML প্র্যাকটিক্যালি শিখতে চাইলে আপনার জন্য আছে anWriter Free HTML Editor। এটির ব্যবহার পদ্ধতি সম্পর্কে জানতে পড়ুন "Android Phone এ শিখুন HTML।" এছাড়াও আপনি আপনার iOS থেকেও শিখতে পারবেন বিভিন্ন সফটওয়্যার ব্যবহার করে।

HTML এ বাংলায় লেখা যায়?

অবশ্যই HTML এ বাংলা লেখা যায়। যদি না-ই লেখা যেত, তাহলে আপনি আমাদের এই কনটেন্টটি বাংলাতে কিভাবে পড়ছেন? আপনি "HTML-এ বাংলা লেখার নিয়ম" থেকে বিস্তারিত জানতে পারে।

HSC Board পরীক্ষার প্রশ্ন

২০১৯ সালের এইচএসসি বোর্ড পরীক্ষা সবশেষ পূর্ণাঙ্গ সিলেবাসের পরীক্ষা ছিল। 2019 সালের HSC ICT বোর্ড পরীক্ষার প্রশ্ন PDF সহ পেতে পারেন লিংক করা আর্টিকেল থেকে।