উত্তর: (ক) HTML ডকুমেন্টে ওপেনিং বা শুরুর ট্যাগ থেকে আরম্ভ করে ক্লোজিং বা শেষ ট্যাগ পর্যন্ত সকল কিছুকে HTML এলিমেন্ট বলে।

(খ) ওয়েবসাইট পাবলিশ করার জন্য পাবলিক আইপি অ্যাড্রেস (IP Address) প্রয়োজন। এটি হলো ইন্টারনেটে ঐ কম্পিউটারের একটি নির্দিষ্ট ঠিকানা। বিভিন্ন প্রতিষ্ঠান ওয়েব হোস্টিং সেবা প্রদান করে, যেখানে ওয়েবসাইট রাখা ও পাবলিশ করা যায়। আইপি এড্রেস মনে রাখা সহজ নয় বলে ডোমেইন নাম ব্যবহার করা হয়। ইন্টারনেটে ডোমেইন নাম কিনতে পাওয়া যায়। তারপর ডোমেইন নামের সঙ্গে ওয়েব হোস্টিং সার্ভারের একটি সংযোগ প্রতিষ্ঠা করতে হয়। তাহলে ব্রাউজারে ওই ডোমেইন নাম লিখলে ওয়েবসাইটটি দেখা যাবে।

(গ) উদ্দীপকে উল্লিখিত হোমপেজ তৈরির জন্য HTML কোডটি নিম্নরূপ:


(ঘ) উদ্দীপকের X ডিগ্রি কলেজের ওয়েবসাইটটিকে ডাইনামিক ওয়েবসাইট বলা যায় না। উত্তরের পক্ষে যুক্তি নিম্নরূপ:
উদ্দীপকের ওয়েবসাইটটিতে ভিজিটরদের মতামত প্রদানের কোন ব্যবস্থা নেই। অর্থাৎ ইহা একটি স্ট্যাটিক ওয়েবসাইট। স্টাটিক ওয়েবসাইটে বিভিন্ন তথ্য রাখা যায় এবং ব্যবহারকারী ওয়েব ব্রাউজারের মাধ্যমে সেই তথ্য দেখতে পায়। ব্যবহারকারী কোন ইনপুট দিতে পারে না। অপরদিকে ডাইনামিক ওয়েবসাইটে ব্যবহারকারী বিভিন্ন ইনপুট দেন এবং সেই ইনপুট অনুসারে বিভিন্ন আউটপুট তৈরি হয়। এজন্য এগুলোকে ওয়েব অ্যাপ্লিকেশনও বলা হয়। এছাড়া একটি ডায়নামিক ওয়েবসাইটের দুটি আংশ থাকে যথা: সার্ভার ও ক্লায়েন্ট। ক্লায়েন্ট সফটওয়্যার ব্যবহারকারীর ইনপুট নিয়ে সার্ভারের কাছে ডেটা পাঠায় যাকে বলা হয় রিকোয়েস্ট। সার্ভার সেই ডেটা অনুসারে ক্লায়েন্টের কাছে জবাব বা রেসপন্স পাঠায়। সার্ভারে যে সফটওয়্যার চলে সেটি সাধারণত প্রোগ্রামিং ভাষা, যেমনঃ পিএইচপি, পাইথন, জাভা, রুবি ইত্যাদি ব্যবহার করে লেখা হয়। কিন্তু উদ্দীপকের ওয়েব সাইটটি শুধু এইচটিএমএল ব্যবহার করে তৈরি করা হয়েছে। অতএব, উপরোক্ত আলোচনা থেকে বুঝা যায়, X ডিগ্রি কলেজের ওয়েবসাইটটিকে ডাইনামিক ওয়েবসাইট বলা যায় না। এটি একটি স্ট্যাটিক ওয়েবসাইট। Close / বন্ধ করি ।

উত্তর: (ক) এইচটিএমএল ট্যাগ হলো জোড়া অ্যাঙ্গেল ব্রাকেটের মধ্যে কী-ওয়ার্ড, যা কোনো নির্দেশকে সুনির্দিষ্ট করে দেয় এবং কীভাবে বিষয়বস্তু ওয়েব ব্রাউজারে প্রদর্শনের জন্য সাজাতে হবে তা নির্দেশ দেয়।

(খ) আইপি অ্যাড্রেস ও ডোমেইন নেইম এক নয়। আইপি অ্যাড্রেস হলো ইন্টারনেটে একটি নির্দিষ্ট যন্ত্রের ঠিকানা। এটি হচ্ছে নেটওয়ার্ক তথা ইন্টারনেটে সংযুক্ত প্রতিটি কম্পিউটারের একটি পৃথক আইডেন্টিফিকেশন নম্বর। আইপি অ্যাড্রেস সংখ্যা দিয়ে তৈরি যা মনে রাখা কষ্টকর। তাই সহজে ব্যবহারযোগ্য ক্যারেক্টার ফর্মের ডোমেইন নাম ব্যবহার করা হয়। যেমন- আইপি অ্যাড্রেস 173.248.140.183 এর পরিবর্তে www.facebook.com ডোমেইন নেম ব্যবহার করা হয়।

(গ) HTML ফাইলটি তৈরি করতে নিম্নোক্ত কোডগুলো একটা Notepad এ লিখে something.html এক্সটেশন এ সেভ করলেই হবে।


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

উত্তরঃ (ক) ওয়েব পেজ হলো এক ধরনের ওয়েব ডকুমেন্ট যা ইন্টারনেট ব্যবহারকারীদের দেখার জন্য ইন্টারনেটের সাথে যুক্ত সার্ভারে রাখা হয়।

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

(গ)


(ঘ)Serial No এবং Subject Name টেবিল হেডিং দিয়ে তৈরিকৃত টেবিল নিম্নরূপঃ



HTML-এ টেবিল একটা গুরুত্বপূর্ণ মৌলিক উপাদান। এর মাধ্যমে বিভিন্ন তথ্য সুন্দর ও আকর্ষণীয়ভাবে উপস্থাপন করা যায়। কিছু তথ্য আছে যা টেবিলে উপস্থাপন না করলে বোধগম্য হয় না। তাই ওয়েব ডিজাইনে টেবিল অত্যন্ত গুরুত্বপূর্ণ।

উত্তর: (ক) ওয়েবসাইটগুলো ঘুরে দেখার জন্য তথা ওয়েব ব্রাউজ করার জন্য যে সকল সফটওয়‍্যার ব্যবহার করা হয় তাকে ওয়েব ব্রাউজার বলে।

(খ) "IP Address এর চেয়ে Domain Name ব্যবহার সুবিধাজনক। কারণ IP Address এর জন্য সংখ্যা মনে রাখা কষ্টকর। তাই IP Address কে সহজে ব্যবহারযোগ্য করার জন্য ইংরেজি অক্ষরের কোন নাম ব্যবহার করা হয়। ক্যারেক্টার ফর্মের দেয়া কম্পিউটারের এরূপ নামকে ডোমেইন নেম বলে। যেমন আইপি এ্যাড্রেস 173.248.140.183 এর পরিবর্তে www.facebook.com ডোমেইন নেম ব্যবহার করা যায়।

(গ) উদ্দীপকের কোডটি HTML. ভাষায় লিখা হয়েছে। নিচে HTML এর মৌলিক কাঠামো ব্যাখ্যা করা হলো:-

HTML ট্যাগ: HTML এর যাবতীয় এলিমেন্ট রাখতে হয় একটি মূল এলিমেন্টের ভেতরে, সেটি হচ্ছে html ট্যাগ।
Head ট্যাগ: হেডের ভেতরে ওয়েব পেইজ সম্পর্কে তথ্য দেওয়া, বিভিন্ন সেটিংস ঠিক করা, স্টাইল, স্ক্রিপ্ট এসব নিয়ন্ত্রণ ইত্যাদি কাজ করা হয়।
Title ট্যাগ: < head > ট্যাগের ভেতরে < title > ট্যাগ লিখতে হয়। এ ট্যাগের মাঝে যা কিছু লেখা হয় তা ব্রাউজারের টাইটেল বারে দেখা যায়।
Body ট্যাগ: ওয়েব পেইজের দৃশ্যমান সবকিছু দেওয়া হয় বডির ভেতর। একটি ওয়েব পেইজের যাবতীয় কনটেন্ট (Image, Text, Table, Form, Frame, Paragraph, Heading etc.) এই সেকশনে লিখতে হয়।

(ঘ) উদ্দীপকে একটি কলেজের পরীক্ষার রেজাল্ট ওয়েবসাইটে প্রকাশের জন্য HTML কোড দেখানো হয়েছে। এই কাঠামোটি ইন্টারনেটে প্রদর্শনের যথেষ্ট প্রয়োজনীয়তা রয়েছে। নিম্নে এর সপক্ষে আমার মতামত দেওয়া হলো:
১. কলেজের ভর্তি প্রক্রিয়া অনলাইনের মাধ্যমে সম্পন্ন করতে পারে।
২. ভর্তির রেজিস্ট্রেশন প্রক্রিয়ার কাজ করতে পারে।
৩. জরুরি প্রয়োজনে অনলাইনে কলেজের নোটিস দিতে পারে। এ থেকে ছাত্রছাত্রীরা সহজেই তাদের কলেজের কার্যক্রম সম্পর্কে জানতে পারে।
৪. কলেজের বিস্তারিত বিবরণ ওয়েবসাইটে লিঙ্ক করে দিতে পারে। যেমন- কলেজের পরিচিতি, শিক্ষক/শিক্ষিকাদের তালিকা, ল্যাবের পরিচিতি ও ছবি, ভৌত অবকাঠামো, বিগত বছরের পরীক্ষার ফলাফল, কলেজের নিয়ম-শৃঙ্খলাসহ সকল বিষয় যুক্ত করে সবার সামনে তুলে ধরতে পারে।
৫. সকল পরীক্ষার ফলাফল এবং শিক্ষা সংক্রান্ত ওয়েবসাইট যেমন সংশ্লিষ্ট বোর্ড, শিক্ষা মন্ত্রণালয়, এনসিটিবি, ব্যানবেইজসহ অন্যান্য গুরুত্বপূর্ণ সাইটের সাথে যুক্ত করতে পারে।
৬. বিশ্বব্যাপী যেকোনো স্থান থেকে কলেজের তথ্য জানা সম্ভব হবে।
৭. ভর্তি সংক্রান্ত বিজ্ঞাপন প্রত্রিকায় প্রচারের জন্য অনেক টাকা খরচ করতে হয়। এক্ষেত্রে নিজস্ব কলেজের ওয়েবসাইটে এ ধরনের প্রচারের জন্য আলাদা কোনো খরচ নেই।

উত্তরঃ (ক) ওয়েব ব্রাউজার: ওয়েব ব্রাউজার হলো এক ধরনের সফটওয়্যার যা ওয়েব পেইজ বা ইন্টারনেটের ইনফরমেশন প্রদর্শনের কাজ করে থাকে।

(খ) এই ভাষাটি অর্থাৎ HTML ব্যবহার করে সহজেই ওয়েবপেজ তৈরি করা যায়। কারণ:
• HTML ভাষা শেখা ও ফরমেটিং করা সহজ।
• প্রায় সব ধরনের ব্রাউজার সমর্থন করে।
• এটি ইউজার ফ্রেন্ডলি। প্রোগ্রামিং সম্পর্কে ধারণা নেই এমন ব্যক্তিও সহজে শিখতে পারে।
• HTML-এর তৈরি করা যে কোনো ফাইল/সাইটকে রক্ষণাবেক্ষণ ও আপডেট করা যায়।
• HTML-এর তৈরি করা ফাইল লোড করতে সময়ও কম লাগে।

(গ) চিত্র-১ এর মতো ওয়েবপেজ তৈরির জন্য HTML কোড নিম্নরূপঃ


(ঘ) চিত্র-১ কে চিত্র-২ এর মতো করে উপস্থাপন করা যায়। এক্ষেত্রে অর্ডাড লিস্ট (< ol >) ট্যাগের পরিবর্তে
আনঅর্ডাড লিস্ট (< ul >) ট্যাগ ব্যবহার করতে হবে। নিম্নে এটি কোডিং এর মাধ্যমে বিশ্লেষণ করে দেখানো হলো:

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

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

(ii) উত্তরঃ দৃশ্যকল্প-২ এ ট্রি বা হায়ারার্কিক্যাল ওয়েবসাইট ব্যবহার করা হয়েছে। হায়ারার্কি বা ট্রি সম্ভবত ওয়েব ডকুমেন্টের ক্ষেত্রে সবচেয়ে সহজ এবং যুক্তিপূর্ণ কাঠামো। বেশির ভাগ অনলাইন হেল্প সিস্টেম এ পদ্ধতি ব্যবহার করছে। এই গঠন পদ্ধতিতে মূল টপিকস এর লিস্ট অথবা মেনু তৈরি করে এর থেকে সাব টপিকস তৈরি করতে হয়। যেখানে আমরা নির্দিষ্ট টপিক সম্পর্কে আলোচনা করি। সংগঠনের ক্ষেত্রে মূল বিষয় দিয়ে মেনু বা লিস্ট তৈরি করতে হয়। অতঃপর মূল বিষয় এর লিস্ট বা মেনু থেকে একটিকে সূচনা বা পথ ধরে অপর একটি সাব টপিকস (Sub Topics) তৈরি করতে হয় যা একটি নির্দিষ্ট বিষয় সম্পর্কে আলোচনার সূচনা হিসেকে কাজ করে। লিংকের মাধ্যমে ইউজাররা প্রয়োজন অনুযায়ী সহজে ওয়েবের এক পেইজ থেকে অন্য পেইজে অনায়াসে যেতে পারে ও ওয়েবপেইজটির কোন অংশে ইউজার অবস্থান করছে, তা সহজবোধ্য হয়। হায়ারার্কিক্যাল ডিজাইনের ক্ষেত্রে হোম পেইজটিতে সমস্ত ডকুমেন্টের পূর্ণাঙ্গ চিত্র সংক্ষিপ্ত আকারে থাকে। বিস্তারিত তথ্যের জন্য হোম পেইজে লিংক ব্যবহার করে হায়ারার্কিক্যাল পরবর্তী পেইজগুলোতে যাওয়া যায়।


(iii) উত্তরঃ দৃশ্যকল্প-৩ এ নেটওয়ার্ক বা ওয়েব লিংকড ওয়েবসাইট কাঠামো ব্যবহার করা হয়েছে। নেটওয়ার্ক বা ওয়েব লিংকড কাঠামো কিছু জটিল কাঠামোর হলেও এর ব্যবহারের প্রচুর ক্ষেত্র বিদ্যমান। এ ধরনের ওয়েবসাইট কাঠামোতে সবগুলো ওয়েবপেইজের সাথে সবগুলো লিংক থাকে। অর্থাৎ একটি মেইন পেইজের সাথে যেমন অন্যান্য পেইজের লিংক থাকে তেমনি প্রতিটি পেইজের তাদের নিজেদের সাথে ও মেইন পেইজের সাথে লিংক থাকে। ফ্রেম ব্যবহার করে তৈরি করা ওয়েব পেইজগুলোকে এই নেটওয়ার্কের মাধ্যমে লিংক করা হয়ে থাকে। যাতে একটি ছোট ফ্রেমের মধ্যে অন্যান্য পেইজের লিংকগুলো মেনু আকারে রাখা যায়। এই ফ্রেমটি সাধারণত স্থির থাকে এবং কোনো একটি লিংক নির্বাচন করলে ঐ পেইজটি একটি অপেক্ষাকৃত বড় ফ্রেমের মধ্যে দেখায়।

ব্যবহারের দিক থেকে নেটওয়ার্ক কাঠামো সহজ হলেও পেজ বাড়ার সাথে সাথে এর স্ট্রাকচার গঠন জটিল হয়ে যায়।

(iv) উত্তরঃ দৃশ্যকল্প-১ এবং দৃশ্যকল্প-২ এর মাঝে, দৃশ্যকল্প-১ লিনিয়ার বা সিকুয়েন্স কাঠামোকে এবং দৃশ্যকল্প-২ হায়ারার্কিক্যাল বা ট্রি কাঠামোকে ইঙ্গিত করে। ব্যবহারের ক্ষেত্র হিসেবে উভয় কাঠামোই ব্যবহৃত হলেও, হায়ারার্কি বা দৃশ্যকল্প-২ কাঠামোর ব্যবহার অধিক সুবিধাজনক। হায়ারার্কিক্যাল বা ট্রি কাঠামোতে সকল ওয়েবপেইজের একটি সংক্ষিপ্ত তথ্যপূর্ণ চিত্র পাওয়া যায়। অন্যান্য সকল কাঠামোর তুলনায় এই কাঠামো সবচেয়ে সহজ ও যুক্তিপূর্ণ। এ) পদ্ধতিতে বিভিন্ন শাখাগুলোকে আলাদা আলাদাভাবে সংযুক্ত করা হয়ে থাকে। এবং হোমেপেইজ ও অন্যান্য সাব পেইজগুলোর মধ্যে লিংক করা থাকে। এতে করে পেইজের ভিজিটররা সহজেই বুঝতে পারে কোন অংশে প্রয়োজনীয় তথ্যগুলো রয়েছে। বিস্তারিত তথ্যের জন্য হোম পেইজে লিংক ব্যবহার করে পরবর্তী পেইজগুলোতে যাওয়া যায়। বিভিন্ন প্রতিষ্ঠান যেমন: স্কুল, কলেজ, হাসপাতাল, ব্যবসায়িক প্রতিষ্ঠানের ওয়েবসাইটে এ কাঠামো ব্যবহৃত হয়। মেনু থেকে সাব মেনু তৈরির কারনে এই কাঠামো রক্ষা ও পরিচর্যা করাও সহজ। অন্যদিকে দৃশ্যকল্প-১ এর কাঠামোতে প্রতিটি পেইজ একটি ক্রমানুসারে সাজানো থাকে। অর্থাৎ পেইজগুলোকে সিকুয়েন্স অনুসারে ভিজিট করার ক্ষেত্রে এই কাঠামো ব্যবহৃত হয়। এই কাঠামোর ক্ষেত্রে ইউজার নিজ ইচ্ছায় যে কোন পেইজে যেতে পারে না। ফলে লিনিয়ার কাঠামো ব্যবহার করতে হলে নিদিষ্ট স্থানের সাথে বিচ্ছিন্ন অংশ সংযোগ দিতে হয়। অতত্রব, লিনিয়ার এবং হায়ারার্কিক্যাল কাঠামোর মধ্যে হায়ারার্কিক্যাল কাঠামোর সুবিধাই সুদূরপ্রসারী।

(v) উত্তরঃ উদ্দীপকে Mr.X এক বহুজাতির কোম্পানীর মালিক এবং তার প্রতিষ্ঠানের ওয়েবসাইটের জন্য দৃশ্যকল্পের একটি কাঠামোও ব্যবহার করেনি, অর্থাৎ Mr.X তার ওয়েবসাইটের জন্য হাইব্রিড কম্বিনেশন কাঠামো ব্যবহার করেছে। সাধারণত বড় বড় প্রতিষ্ঠানে বা বৃহৎ কাজের উদ্দেশ্যে তৈরিকৃত ওয়েবসাইটের ক্ষেত্রে একটি মাত্র কৌশল ব্যবহার করে কখনও ওয়েবসাইট তৈরি করা হয় না। বরং একাধিক কৌশলের সম্বনয়ে একটি ওয়েবসাইট ডিজাইন করা হয়ে থাকে। ট্রি স্ট্রাকচার ব্যবহার করে কোনো ওরেবসাইট তৈরি করলে তা খুব দর্শনীয় হয় না। আবার শুধুমাত্র নেটওয়ার্ক স্ট্রাকচার ব্যবহার করে তৈরি করা ওয়েবসাইট হার্ডডিস্কে বেশি যায়গা দখল করে। তাই একাধিক কৌশল ব্যবহার করে ওয়েবসাইট তৈরি হয়। তবে এক ওয়েবপেইজ থেকে আরেক ওয়েবপেইজে যাওয়ার জন্য যা ব্যবহার করা হয় যেমন: লিংক, বাটন, মেন্যু ইত্যাদি অবশ্যই স্পষ্ট হতে হবে। যদি লিংকগুলো কোনো পেইজের উপরে বাম দিকে দেওয়া হয় তবে একই লিংক পেইজের নিচেও দেয়া উচিৎ। যেমনঃ হায়ারার্কিক্যাল এবং লিনিয়ারকে পারস্পরিক সমন্বয় সাধনের মাধ্যমে ব্যবহার করা যায়। এতে ওয়েবসাইটের সৌন্দর্যও বহুগুণে বৃদ্ধি পায়।

(vi) উত্তরঃ দৃশ্যকল্পসমূহ এবং Mr.X এর ব্যবহৃত কাঠামোর মধ্যে Mr. X এর ব্যবহৃত কাঠামো বা হাইব্রিড বা কম্বিনেশন ওয়েবসাইট কাঠামো ব্যবহার করাই সবচেয়ে সুবিধাজনক। সাধারণত হায়ারার্কিক্যাল বা ট্রি কাঠামো ব্যবহার করা অনেক সহজ এবং সুবিধাজনক। এই কাঠামোতে একটি হোম পেইজের বিভিন্ন সাব ক্লাস তৈরি করা হয় এবং ইউজার তার সকল তথ্য হোম পেইজ থেকেই সংগ্রহ করতে পারে। কিন্তু এই কাঠামো ব্যবহার করলে ওয়েবসাইট খুব দর্শনীয় করা যায় না। তাছাড়া পৃথকভাবে ওয়েবপেইজে কোন সম্পর্ক স্থাপিত হয় না। ফলে কিছুটা সীমাবদ্ধতা থেকেই যায়। সিকুয়েন্স কাঠামোর ক্ষেত্রে ইউজার তার ইচ্ছেমত যেতে পারে না বরং তাকে সকল পেইজে ভিজিট করে মূল পেইজে যেতে হয় ফলে ওয়েবসাইট বড় হয়ে গেলে তা সময়সাপেক্ষ হয়ে পড়ে। নেটওয়ার্ক বা ওয়েব লিংকড কাঠামোতে যে কোন পৃথক পেইজ থেকে অন্য যেকোনো পেইজে যাওয়া সম্ভব। তাছাড়া একটি ফ্রেমের মধ্যে লিংকগুলোকে মেনু আকারে রাখা যায়। তবে যত পেইজ সংখ্যা বাড়তে থাকে, ততটাই জটিল ওয়েব তৈরি হতে থাকে। ফলে এই ওয়েব সাইটের ব্যবস্থাপনা ধীরে ধীরে কঠিন হয়ে পড়ে। কিন্তু যদি এই কাঠামোগুলোকেই কম্বিনেশন করে ব্যবহার করা যায় তবে সকল কাঠামোর সুবিধা একত্রে পাওয়া সম্ভব। ওয়েবসাইটের চাহিদা অনুসারে সৌন্দর্য বৃদ্ধি, সহজ মেনু, লিংক, বাটন ইত্যাদির মাধ্যমে ইজজার ব্যবহার উপযোগী করে তোলা সম্ভব। হাইব্রিড কাঠামোর মাধ্যমে অল্প সময় এবং পরিশ্রমে ওয়েবসাইটের সর্বোচ্চ সুবিধা পাওয়া সম্ভব।

(i) উত্তরঃ ব্রাউজারে উদ্দীপকের ন্যায় চিত্র-১ এর ফলাফল পেতে প্রয়োজনীয় HTML কোড নিচে লেখা হলো।


(ii) উত্তরঃ উদ্দীপক থেকে দেখা যাচ্ছে, দোকানের ওয়েবসাইটিতে হোম পেইজে "shop.jpg" নামের 500 × 800 px আকারে একটি ছবি সংযুক্ত হয়েছে এবং তার নিচে একটি লিংক সংযুক্ত হয়েছে। অতএব হোম পেইজ তৈরির কোডটি,


ব্রাউজারে নিম্নরূপ আউটপুট দেখাবে,


(iii) উত্তরঃ উদ্দীপকে দোকানের ওয়েবসাইট রচনায় ছবি সংযোজনের ক্ষেত্রে দুটি অ্যাট্রিবিউট src, height and width এবং লিংক সংযোজনের ক্ষেত্রে href আট্রিবিউট ব্যবহৃত হয়েছে, তাছাড়া বডিতে ব্যবহৃত হয়েছে style অ্যাট্রিবিউট। নিম্নে অ্যাট্রিবিউটগুলোর সম্পর্কে আলোচনা করা হলো।
ইমেজের ক্ষেত্রে কোড: < img src="shop.jpg" height="800px" width="500px">
Src: এই অ্যাট্রিবিউট সাধারণত কোন URL কে মান হিসেবে দেওয়া হয় যা মূলত ছবিটির অবস্থানের পাথ নির্দেশ করে।
height: এটি দ্বারা ছবিটির উচ্চতা নির্ধারণ করা হয়
width: এই অ্যাট্রিবিউট দ্বারা ছবির প্রস্থ বা প্রশস্ততা নির্ধারিত হয়। লিংক সংযোজনের ক্ষেত্রে কোড, < a href=” ……com”
herf: হাইপারলিংক ট্যাগে ব্যবহৃত href অ্যাট্রিবিউট মূলত লিংক এর গন্তব্য বা ঠিকানা নির্ধারণ করে। href এর URL অংশে সম্পূর্ণ অ্যাড্রেসটি লিখতে হয়। বডিতে ব্যবহৃত স্টাইল অ্যাট্রিবিউট এর কোড: < body style="text-align: center">
Style: সাধারণত একটি html কোডে তার বডিতে থাকা উপাদানগুলো কিভাবে সজ্জিত হবে তা স্টাইল অ্যাট্রিবিউট দ্বারা নির্ধারণ করা যায়। স্টাইল অ্যাট্রিবিউটের মাধ্যমে পরবর্তী সময়ে CSS ফাইলে কোডের আরও সৌন্দর্যবর্ধন করা সম্ভব হয়।

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

(ii) উত্তরঃ উদ্দীপকে দেখা যাচ্ছে দুই বন্ধু নিজেদের ব্যবসার উদ্দেশ্যে যে ওয়েবসাইটটি তৈরি করেন, সেখানে ব্যবসায়ীক অনেক কার্যক্রম করা সম্ভব নয়, কেননা প্রতিনিয়নিয়ত কনটেন্ট আপলোড করা অনেকটাই ধীর ও সময়ের অপচয়। এছাড়াও ব্যবহারকারীগণের মতামত বা পরামর্শ কোন কিছুই গ্রহণ করে তাতে আলোকপাত করা যাচ্ছে না। অতএব এমন এক পরিবর্তন আনতে হবে যেন আলোচ্য কার্যক্রমগুলো সহজেই করে ফেলা যায়। এবং এটি বাস্তবায়ন করতে প্রয়োজন একটি ডাইনামিক ওয়েবসাইটের। যে সকল ওয়েবসাইটের ডেটার মান ওয়েবপেইজ প্রদর্শনের পরেও পরিবর্তন করা যায় তাকে ডাইনামিক ওয়েবসাইট বলে। এই ধরনের ওয়েবসাইট তৈরির জন্য HTML ভাষার সাথে স্ক্রিন্টিং ভাষা যেমন পিএইচপি (php) বা এএসপি (asp) ভাষা এবং তাদের সাথে ডেটাবেজ প্রয়োজন হয়। ডাইনামিক ওয়েবসাইট দ্বারা পরিবর্তনশীল তথ্য বা ইন্টারঅ্যাকেটিভ ওয়েবপেইজ তৈরি করা যায়। দ্রুত নতুন কনটেন্ট লোড করা যায় এবং ব্যবহারকারীর তথ্য বা তথ্য আপডেট করা সম্ভব। এ ধরনের ওয়েবসাইটের জন্য আকর্ষণীয় ও ইন্টারঅ্যাকটিভ লে-আউট প্রস্তুত করা সম্ভব, এতে ব্যবহারকারী অতি সহজে ওয়েবসাইটের বিভিন্ন প্রক্রিয়া সম্পর্কে ধারণা করতে পারে। ডাইনামিক ওয়েবসাইটে ব্যবহারকারীর ইনপুট নেওয়ার ব্যবস্থা থাকে। অতত্রব, উদ্দীপকের দুই বন্ধুর নেওয়া সিদ্ধান্ত যুক্তিসম্পন্ন।

(iii) উত্তরঃ উদ্দীপকের ওয়েবসাইটি স্ট্যাটিক হওয়ায় এতে ব্যবহারকারী বা ক্রেতার মতামত প্রদানের কোনো ব্যবস্থা নেই। মূলতঃ স্ট্যাটিক ওয়েবসাইটের ওয়েবপেইজ লোডিং বা চালুর পর পরিবর্তন করা যায় না। ফলে ক্রেতা বা ব্যবহারকারীগণ সরাসরি ইনপুট দিয়ে তাদের মতামত জানাতে পারে না। ফলে ক্রেতা বা ব্যবহারকারীদের মতামত গ্রহণে উপযোগী করতে ওয়েবসাইটটিকে ডায়নামিক করতে হবে। কেননা ডাইনামিক ওয়েবসাইটে ডেটা লোডিং এর পরে পরিবর্তন করা সম্ভব। সাধারণত শুধু HTML ব্যবহার করেই স্ট্যাটিক ওয়েবসাইট তৈরি করা যায়। এতে CSS ব্যবহার করে ওয়েবপেইজগুলোকে আরও সহজ ও সুন্দর করে আনা যায়। পরবর্তী স্ক্রিপ্টিং ল্যাঙ্গুয়েজ যেমন জাভাস্ক্রিপ্ট, পিএইচপি ইত্যাদির মাধ্যমে, পেইজটিকে ডায়নামিক করে ফেলতে হবে। সর্বশেষে ওয়েবসাইটটির সাথে ডেটাবেজের সংযোগ স্থাপন করে একে পূর্ণাঙ্গ ডায়নামিক ওয়েবসাটে রূপান্তর করা সম্ভব। সুতরাং ক্রেতা বা ব্যবহারকারীদের মতামত গ্রহণের জন্য স্ক্রিপ্টিং ল্যাঙ্গুয়েজ এর সাথে ডেটাবেজের সংযোগ অর্থাৎ এক কথায় ডায়নামিক ওয়েবসাইট তৈরি করে নিতে হবে।

(i) উত্তরঃ উদ্দীপকের ন্যায় টেবিল-১ ওয়েব ব্রাউজারে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডটি লেখা হলো:


(ii) উত্তরঃ টেবিল-১ এর ফাঁকা স্থানে ছবি সংযোজনের ক্ষেত্রে টেবিলটি তৈরির HTML কোড লেখা হলোঃ


(iii) উত্তরঃ নিম্নে টেবিল-১ তৈরির HTML কোড লেখা হলো যেখানে ছবিতে ক্লিক করলে Organization.com ওয়েবসাইটটি চালু হবে।


(iv) উত্তরঃ উদ্দীপকে Mr. X তার তৈরিকৃত টেবিলগুলো ভিন্ন পেইজে থাকায় পরবর্তীতে পেইজগুলো সংযুক্ত করে দেন, এবং এই ব্যবস্থা তৈরি করতে তার html কোডে লিংক করার কোড ব্যবহার করেন, কোডটি নিম্নরূপ:

উপরোক্ত কোডটিতে Mr.X তার কোডটিতে লিংক ট্যাগ < a> এর মাধ্যমে দ্বিতীয় টেবিলের পেইজটিকে সংযোগ করে দেন। এবং একই ভাবে টেবিল-২ কেও টেবিল-১ কে লিংক করা সম্ভব। এভাবে Mr.X ভিন্ন ভিন্ন পেইজকে সংযুক্ত করে একটি ভালো ওয়েবসাইট তৈরি করতে পারেন। মূলত তথ্য সমাহার বৃদ্ধি এবং সম্পূর্ণ ব্যবস্থার ব্যবহার উপযোগীতা বৃদ্ধিতে লিংক ওয়েবপেজ তৈরি করা যুক্তি সঙ্গত একটি পদক্ষেপ।

(v)উত্তরঃ যদি টেবিল-২ এর সকল সারিকে স্তম্ভে এবং সকল স্তম্ভকে সারিতে পরিণত করা হয় তাহলে যে টেবিল তৈরি হবে তা তৈরির জন্য নিম্নে HTML কোড এবং তার ফলাফল চিত্র দেখানো হলো:

আউটপুট বা ফলাফলঃ

(i) উত্তরঃ উদ্দীপকের কোডটি HTML ভাষায় রচিত। নিচে HTML এর মৌলিক কাঠামো ব্যাখ্যা কর হলো:


HTML কোডে < html> < /html> ট্যাগ এর ভিতরে এর প্রধান দুটি সেকশন থাকে।
১. হেড (< head>......< /head>) সেকশন: এ অংশে শিরোনাম, ধরন, কী-ওয়ার্ডসমূহ ও প্রয়োজনীয় কিছু কোড সংযোজন করা হয়। এটি < head> দিয়ে শুরু এবং < /head> দিয়ে শেষ হয়।

২. বডি (< body>) সেকশন: এটি ডকুমেন্টের মূল অংশ যাতে তথ্য সংযোজন করা হয়। এটি < body> দিয়ে শুরু এবং < /body> দিয়ে শেষ হয়। একটি ওয়েব পেইজের যাবতীয় কনটেন্ট যেমন: Paragraph, table, Text, Form ইত্যাদি এই সেকশনে লিখতে হয়।

(ii) উত্তরঃ উদ্দীপকের কোডটির ফলাফল নিম্নে দেখানো হলোঃ

Here is a demo

Fox is clever

Don't go there

A+B ²

Book

(iii) উত্তরঃ ওয়েব পোর্টাল হচ্ছে একটি ওয়েবসাইটের মধ্যে বিভিন্ন লিংক, কনটেন্ট ও সার্ভিস বা সেবার সংগ্রহ যা ব্যবহারকারীদেরকে তথ্য জানানোর জন্য সহজবোধ্যভাবে উপস্থাপন করা হয়। সাধারণত ওয়েবসাইটের যে কোন একটি সার্ভিস ওয়েব পোর্টালের একটি অংশ হতে পারে। উক্ত ওয়েব পেজের Book লেখাটিতে ক্লিক করলে Book.com ওয়েবসাইটি প্রদর্শিত হয় যা একটি লিংক। অর্থাৎ উক্ত পেজটি ওয়েব পোর্টাল হিসেবে কাজ করে। অর্থাৎ উক্ত কোডটির পোর্টাল অংশটি নিম্নরূপ:


(iv) উত্তরঃ উদ্দীপকের কোডটি তথা ওয়েবপেজটি ইন্টারনেটে দেখার উপায় ওয়েবসাইট পাবলিশিং। ওয়েবসাইট পেইজ চালু করতে নিম্নলিখত কাজগুলো করতে হবে। যথা-

ধাপ-১: ওয়েব পেইজ ডিজাইন: ব্যবহারকারীদের কথা মাথায় রেখে ওয়েব পেইজটি একটি সরল-সহজ আকষণীয় ডিজাইনে আনতে হবে। প্রোফেশনাল ওয়েব ডিজাইনার দিয়ে করাতে পারলে কাজটি আরও নিখুঁত করা সম্ভব।

যাপ-২: ডোমেইন নেইম রেজিস্ট্রেশনঃ ওয়েবপেইজের তথ্যের সাথে সম্পর্কিত সহজ সাবলীল একটি নাম বেছে নিতে হবে, যা মনে রাখা সহজ এবং অর্থবোধক হয়। এবং সেই নামের ডোমেইন রেজিস্ট্রেশন করতে হবে।

ধাপ-৩: ওয়েব সাভারে পেইজ হোস্টিংঃ ধাপ-১ ও ধাপ-২ এর কাজ পরিপূর্ণ হলে ওয়েব পেইজটিকে নির্ভরযোগ্য কোন সার্ভারে হোস্টিং করতে হবে। অনেক প্রতিষ্ঠান রয়েছে যারা অর্থের বিনিময়ে এই হোস্টিং সার্ভিস প্রদান করে থাকে। এরই সাথে ওয়েবসাইট পাবলিশিং এর কাজ সম্পন্ন হয় যাতে নির্দিষ্ট ডোমেইন এ প্রবেশ করে বিশ্বের যেকোন প্রান্ত থেকে সাইটটি দেখা যাবে। তবে এটি প্রচারের জন্য এর পরেও কিছু গুরুত্বপূর্ণ কাজ আছে।

ধাপ-৪: সার্চ ইঞ্জিনের সাথে ওয়েব সাইট সংযোজন: মূলত এই ধাপটি কার্যকর করা হয় ওয়েবসাইটের প্রচার বৃদ্ধিতে এবং জনপ্রিয়তা বাড়াতে। বর্তমানে এমন অনেক প্রতিষ্ঠান আছে, যারা অর্থের বিনিময়ে কাজটি করে থাকে। এটি অত্যাবশকীয় কোন ধাপ নয় তবে, বর্তমানে এই কাজের গুরুত্ব প্রচুর।

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

(খ) উত্তরঃ সাধারণত HTML ফাইলে নামে একটি ট্যাগ ব্যবহৃত হয়। এটি একটি ডকুমেন্ট টাইপ ডিক্লারেশন ট্যাগ। এর দ্বারা ব্রাউজার বুঝতে পারে যে ডকুমেন্ট টি HTML 5 স্ট্যান্ডার্ড অনুসরণ করে লেখা হয়েছে এবং সেই অনুযায়ী রেন্ডার প্রদর্শন করে। এটি মূলত ডকুমেন্টের অংশ নয়, তবে লেখা জরুরি।

(গ) উত্তরঃ উদ্দীপকের দৃশ্যকল্প-১ এর মত ওয়েবপেইজ তৈরির জন্য HTML কোডটি হলো:


(ঘ) উত্তরঃ উদ্দীপকের দৃশ্যকল্প-২ এর ওয়েবসাইট কাঠামোটি হলো হায়ারার্কিক্যাল বা ট্রি কাঠামো।
ওয়েবসাইট কাঠামোর মধ্যে হায়ারার্কিক্যালই তথ্য উপস্থাপনে সবচেয়ে সহজ ও উত্তম। বেশিরভাগ অনলাইন সিস্টেমই এ পদ্ধতি ব্যবহার করে। এ ধরনের কাঠামোতে মূল Topics এর লিস্ট অথবা মেনু তৈরি করা থাকে এবং মূল Topics থেকে Sub-Topics তৈরি করা থাকে। প্রতিটি Sub-Topics এ নির্দিষ্ট বিষয় সম্পর্কে আলোচনা করা থাকে। এ ধরনের কাঠামো ব্যবহারের মাধ্যমে তথ্য গ্রহণের ক্ষেত্রে ব্যবহারকারী সর্বোচ্চ স্বাধীনতা ভোগ করে থাকে। লিংকের মাধ্যমে তাদের প্রয়োজন অনুযায়ী সহজেই ওয়েবের এক পেইজ থেকে আর এক পেইজে অনায়াসে যেতে পারেন এবং ওয়েব পেইজটির কোন অংশে তিনি অবস্থান করছেন তা জানা তার পক্ষে সহজসাধ্য হয়। হায়ারার্কিক্যাল কাঠামোর হোমপেইজটিতে সময় ডকুমেন্টের পূর্ণাঙ্গ চিত্র সংক্ষিপ্ত আকারে থাকে। বিস্তারিত তথ্যের জন্য হাইপার লিঙ্ক ব্যবহার করে হোম পেইজ থেকে অন্যান্য পেইজে যাওয়া যায়।

উদ্দীপকের চিত্র-৩ এর ওয়েবসাইট কাঠামোটি হচ্ছে ওয়েব লিংকড বা নেটওয়ার্ক কাঠামো। নেটওয়ার্ক কাঠামোতে সবগুলো পেইজের একে অপরের সাথে লিংক থাকে অর্থাৎ একটি মেইন পেইজের সাথে অন্যান্য পেইজের যেমন লিংক থাকে ঠিক তেমনি অন্যান্য পেইজের সাথেও মেইন পেইজের লিংক থাকে। ফ্রেম ব্যবহার করে তৈরি করা ওয়েব পেজগুলোকে এই নেটওয়ার্কের মাধ্যমে লিংক করা হয়ে থাকে যাতে ফ্রেমের মধ্যে অন্যান্য পেইজের লিংকগুলি মেনু আকারে রাখা হয়। এই ফ্রেমটি সাধারণত স্থির থাকে এবং কোন একটি লিংক নির্বাচন করলে ঐ পেইজটি অপেক্ষাকৃত বড় ফ্রেমের মধ্যে দেখায়। ব্যবহারের দিক থেকে নেটওয়ার্ক কাঠামো সহজ হলেও পেজ বাড়ার সাথে সাথে এর স্ট্রাকচার গঠন জটিল হয়ে যায়।

যদিও ওয়েব লিংকড বা নেটওয়ার্ক কাঠামোতে এক পেইজ থেকে সহজেই অন্য পেইজে যাওয়া যায় তবুও হায়ারার্কি বা মেনুই ওয়েব ডকুমেন্টের ক্ষেত্রে সবচেয়ে সহজ এবং যুক্তিপূর্ণ এবং এই কাঠামে ব্যবহার করাই অধিক সুবিধাজনক।

(ক) উত্তরঃ আর্টবিউট হচ্ছে এমন কিছু শব্দ গুচ্ছ যা ট্যাগের বৈশিষ্ট্য নির্ধারক নির্দেশ হিসাবে কাজ করে।

(খ) উত্তরঃ সাধারণত যে ভাষাগুলো তথা প্রোগ্রামিং ভাষাগুলো বড় অক্ষরের ও ছোট অক্ষরের বর্ণকে শনাক্ত করতে পারে তাদের কেস সেনসিটিভ (Casc Sensitive) ভাষা বলে। HTML মূলত ওয়েবপেইজ এবং ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত একটি মার্কআপ ল্যাংগুয়েজ। HTML এর পূর্ণরূপ Hyper Text Markup language এর মাধ্যমে ওয়েব ডকুমেন্টের বিভিন্ন ধরনের উপাদান ও উপকরণ তৈরি করা যায়। এইচটিএমএলে ব্যবহৃত ট্যাগ অ্যাট্রিবিউট কোনটিই কেস সেনসিটিভ নয়, তবে অ্যাট্রিবিউটের মান বা ভ্যালু কেস সেনসিটিভ হয়। HTML. প্রধানত কোন প্রেগ্রামিং ল্যাঙ্গুয়েজ নয় বরং এটি একটি মার্ক-আপ ল্যাঙ্গুয়েজ যা ট্যাগের উপর ভিত্তি করে কাজ করে, ফলে অক্ষরের বড় ও ছোট হওয়ার পক্ষে এই ভাষার কোন দায়বদ্ধতা নেই।

(গ) উত্তরঃ উদ্দীপকে পেজটি মূলত একটি লিস্টের টেবিল, যেখানে বেশ কিছু বিশেষ ট্যাগ ও অ্যাট্রিবিউট ব্যবহার করা হয়েছে। নিম্নে পেজটিতে ব্যবহৃত বিশেষ ট্যাগ ও অ্যাট্রিবিউট সম্পর্কে আলোচনা করা হলো।

১। Ol ট্যাগ: অর্ডার লিস্ট তৈরির ক্ষেত্রে এই ট্যাগটি ব্যবহার করা হয়। এই ট্যাগের মাধ্যমে রোমান নম্বর, ডিজিটাল নম্বর ইত্যাদির মাধ্যমে লিস্ট তৈরি করা যায়।

২। Ul ট্যাগ: আনঅর্ডারড লিস্ট তৈরি করতে এই ট্যাগটি ব্যবহার করা হয়। এই ট্যাগের মাধ্যমে বিভিন্ন ধরনের বুলেট পয়েন্ট তৈরি করা যায়।

৩। align অ্যাট্রিবিউট: HTML-এ ব্যবহৃত অন্যতম বিশেষ অ্যাট্রিবিউট হচ্ছে align। এই অ্যাট্রিবিউট দিয়ে একটি ট্যাগের উপাদান কোথায় বসবে তা নির্ধারণ করে দেওয়া সম্ভব।

৪। type অ্যাট্রিবিউট: কোন অর্ডার বা আনঅর্ডার লিস্টে বুলেট স্টাইল কেমন হবে তা মূলত টাইপ (type) অ্যাট্রিবিউট দ্বারা নির্দেশ করা হয়। এই অ্যাট্রিবিউটে ব্যবহৃত মান বা ভ্যালু হতে পারে disc, square, i ইত্যাদি।

৫। border অ্যাট্রিবিউট: একটি টেবিলের বর্ডার নির্ধারণ করতে এই অ্যাট্রিবিউট ব্যবহার করা হয়।

(ঘ) উত্তরঃ ওয়েব পেজটি প্রদর্শনের জন্য প্রয়োজনীয় HTML Code :

(ক) উত্তরঃ হাইপারলিঙ্ক হচ্ছে একটি ওয়েব পেইজের কোন একটি অংশের সাথে বা কোন পেইজের সাথে অন্যান্য পেইজের সংযোগ স্থাপন করা।

(খ) উত্তরঃ ওয়েব পেজ তৈরি করার পর ওয়েব সার্ভারে হোস্টিং করার প্রক্রিয়াকে ওয়েবসাইট পাবলিশিং বলে। সহজ ভাষায়, ইন্টারনেটে কনটেন্ট বা বিষয়বস্তু প্রকাশ করার প্রক্রিয়া হচ্ছে ওয়েবসাইট পাবলিশিং। এই ওয়েবসাইটটি মূলত একটি সার্ভারে পাবলিশ করতে হয় ফলে কিছু ধাপসমূহের মাধ্যমে কাজটি পরিপূর্ণ হয়। এই ধাপগুলো নিম্নরূপ:
১। ওয়েবপেইজ ডিজাইন ও তৈরি
২। একটি ডোমেইন নেম রেজিস্ট্রেশন
৩। ওয়েব হোস্টিং করা
৪। ওয়েব সার্ভারে ওয়েবসাইটটি প্রেরণ।

(গ) উত্তরঃ চিত্র-১ প্রদশর্নের জন্য HTML কোডটি নিম্নরূপ:


(ঘ) উত্তরঃ চিত্র-২ ওয়েব পেইজে প্রদর্শনের জন্য HTML কোডটি নিম্নরূপঃ

(ক) উত্তরঃ ওয়েবসাইটগুলো ঘুরে দেখার জন্য তথা ওয়েব ব্রাউজ করার জন্য যে সকল সফটওয়্যার ব্যবহার করা হয় তাকে ওয়েব ব্রাউজার বলে।

(খ) উত্তরঃ যে সকল ট্যাগের শুরু আছে কিন্তু তার শেষ কোন ট্যাগ নেই, এমন ট্যাগসমূহকে এম্পটি (empty) ট্যাগ বলে। < br> একটি অতি পরিচিত এবং বহুল ব্যবহৃত এম্পটি ট্যাগ। < br> ট্যাগ একটি একক লাইন বিরতি সন্নিবেশ করায়। < br> ট্যাগ ঠিকানা বা কবিতা লেখার ক্ষেত্রে সবচেয়ে বেশি ব্যবহৃত হয়। এছাড়া একই প্যারাগ্রাফে লাইন ব্রেক দিতে < br> ট্যাগটি ব্যবহৃত হয়।

(গ) উত্তরঃ উদ্দীপকে X কলেজের দ্বাদশ শ্রেণীর ছাত্রী আয়েশা HTML ব্যবহার করে ডকুমেন্ট তৈরি করল এবং ব্রাউজার নিম্নরূপ আউটপুট দেখালো
2H₂ + O₂ = 2H₂O
অতত্রব, উক্ত ফলাফল দেখার জন্য HTML কোডটি হবে,



(ঘ) উত্তরঃ উক্ত ফলাফলটির পরিবর্তে যদি (H+O)² = H² + 2HO + O² পেতে চাই, তবে 'গ' নং প্রশ্নে ব্যবহৃত কোডের মাঝে বেশ কিছু পরিবর্তন আনতে হবে, এই পরিবর্তনের মাঝে প্রধান পরিবর্তনটি হচ্ছে আমাদের সাবস্ক্রিন্ট ট্যাগের পরিবর্তে সুপারস্ক্রিন্ট ট্যাগ ব্যবহার করতে হবে। নিম্নে পরিবর্তিত কোডটি দেখানো হলো:



উক্ত কোডটিতে দেখা যাচ্ছে, < p> ট্যাগের ভিতরে সমীকরণ লেখার জন্য < sub> ট্যাগের পরিবর্তে < sup> ট্যাগ ব্যবহার করা হয়েছে।

(ক) উত্তরঃ যে সকল ওয়েবসাইটের ডেটার মান ওয়েব টেকনোলজি লোডিং বা পেইজ চালু করার পর পরিবর্তন করা যায় তাকে ডাইনামিক ওয়েবসাইট বলে।

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

(গ) উত্তরঃ উদ্দীপকের চিত্রটি আউটপুট হিসেবে পাওয়ার জন্য HTML কোডটি লেখা হলো:



(ঘ) উত্তরঃ যদি উদ্দীপকের টেবিলের কোড সারিকে স্তম্ভে এবং স্তম্ভকে সারিতে পরিণত করা হয় তাহলে কোডে নিম্নোক্ত পরিবর্তন করতে হবেঃ


এবং উক্ত কোডটির ফলাফল হবে,

(ক) উত্তরঃ অ্যাট্রিবিউট হচ্ছে এমন কিছু শব্দ গুচ্ছ যা ট্যাগের বৈশিষ্ট্য নির্ধারক নির্দেশ হিসাবে কাজ করে।

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

(গ) উত্তরঃ চিত্র-১ এর ন্যায় ফলাফল পেতে HTML কোডটি নিম্নরূপ:


(ঘ) উদ্দীপকের ওয়েবসাইটটিতে ফলের নিয়মিত আপডেট পাওয়া যাচ্ছে না অর্থাৎ ওয়েবসাইটি একটি স্ট্যাটিক ওয়েবসাইট। স্ট্যাটিক ওয়েবসাইটে ওয়েবপেজ লোডিং বা চালুর পর ডেটার মান পরিবর্তন করা যায় না। অর্থাৎ এতে ভিজিটর বা ক্রেতাদের থেকে সরাসরি ইনপুট নেয়ার ব্যবস্থা না থাকায় মতামত প্রদানের ব্যবস্থা থাকে না। ফলে ক্রেতারা ভুল তথ্য পেয়েও কিছু জানাতে পারে না বা তথ্য আপডেট দিতে পারে না। এখন ওয়েবসাইটটিতে গ্রাহকদের সঠিক তথ্য প্রদানের জন্য করণীয় কাজ হচ্ছে ওয়েবসাইটটিকে ডায়নামিক ওয়েবসাইটে পরিবর্তন করা। ডায়নামিক ওয়েবসাইটে ডেটার মান ওয়েবপেইজে লোডিং বা চালু করার পরও পরিবর্তন করা যায়। শুধু html দিয়ে একটি স্ট্যাটিক ওয়েবপেইজ তৈরি করতে পারা যায়। এরপর সিএসএস (CSS) ব্যবহার করে ঐ পেজটিকে আরেকটু সৌন্দর্য্য বৃদ্ধি তথা উন্নত করা যায়। এরপর জাভাস্ক্রিপ্ট ব্যবহার করলে ঐ ওয়েবপেইজটি ডায়নামিক হওয়া শুরু হয়। সবশেষে পিএইচপি, এএসপি/ জেএসপি এবং সাথে ডেটাবেজ দিয়ে পূর্ণাঙ্গ ডায়নামিক ওয়েবসাইট করতে পারা যায়। সুতরাং, উদ্দীপকের স্ট্যাটিক ওয়েবসাইটটিকে তথ্য আপডেট প্রদানের জন্য অর্থাৎ ডায়নামিক ওয়েবসাইটে রূপান্তরের জন্য HTML ভাষার সাথে স্ক্রিপ্টিং ভাষা যেমন-পিএইচপি, এএসপি ভাষা এবং ডেটাবেজ এর ব্যবহার প্রয়োজন।

(ক) উত্তরঃ সার্চ ইঞ্জিন হচ্ছে এমন এক ধরনের টুল যার সাহায্যে ইন্টারনেটের অজস্র ওয়েব সার্ভার থেকে সহজেই যেকোনো তথ্য খুঁজে বের করা যায়।

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

(গ) উত্তরঃ হাবিবের ওয়েবসাইটটির কাটামো হচ্ছে হায়ারার্কিক্যাল বা ট্রি কাঠামো। ওয়েবসাইট কাঠামোর মধ্যে হায়ারার্কিক্যালই তথ্য উপস্থাপনে সবচেয়ে সহজ ও উত্তম। বেশিরভাগ অনলাইন সিস্টেমই এ পদ্ধতি ব্যবহার করে। এ ধরনের কাঠামোতে মূল Topics এর লিস্ট অথবা মেনু তৈরি করা থাকে এবং মূল Topics থেকে Sub-Topics তৈরি করা থাকে। প্রতিটি Sub-Topics এ নির্দিষ্ট বিষয় সম্পর্কে আলোচনা করা থাকে। এ ধরনের কাঠামো ব্যবহারের মাধ্যমে তথ্য গ্রহণের ক্ষেত্রে ব্যবহারকারী সর্বোচ্চ স্বাধীনতা ভোগ করে থাকে। লিঙ্কের মাধ্যমে তাদের প্রয়োজন অনুযায়ী সহজেই ওয়েবের এক পেইজ থেকে আর এক পেইজে অনায়াসে যেতে পারেন এবং ওয়েব পেইজটির কোন অংশে তিনি অবস্থান করছেন তা জানা তার পক্ষে সহজসাধ্য হয়। হায়ারার্কিক্যাল কাঠামোর হোমপেইজটিতে সমস্ত ডকুমেন্টের পূর্ণাঙ্গ চিত্র সংক্ষিপ্ত আকারে থাকে। বিস্তারিত তথ্যের জন্য হাইপার লিঙ্ক ব্যবহার করে হোম পেইজ থেকে অন্যান্য পেইজে যাওয়া যায়।

(ঘ) উত্তরঃ উদ্দীপকে দেখা যাচ্ছে, হাবিব একটি ওয়েবসাইট তৈরি করল যার হোমপেইজের সাথে ৩টি মূল ওয়েবপেইজ সংযুক্ত। আবার প্রতিটি মূল পেজের সাথে ২টি করে ওয়েবপেজ সংযুক্ত। এবং ওয়েবসাইটটির হোমপেজে কলেজের নাম ও ছবি সংযুক্ত।
অতএব, ওয়েবসাইটির হোমপেইজের জন্য html কোডটি নিম্নরূপ:


উক্ত কোডে ব্যবহৃত ট্যাগসমূহ ব্যাখ্যা করা হলো:
১। html ট্যাগ: < html> ট্যাগ দ্বারা html ডকুমেন্টের মূলকে প্রতিনিধিত্ব করা হয়।
২। head ট্যাগ: এই < head> ট্যাগ সকল মেটাডেটার ধারক হিসেবে কাজ করে।
৩। title ট্যাগ: < title> ট্যাগ দ্বারা html ডকুমেন্টটির টাইটেল বা শিরোনাম প্রকাশ করা হয়।
৪। body ট্যাগ: < body> ট্যাগ দিয়ে ডকুমেন্টটির বডিকে নির্দেশ করে অর্থাৎ এখানেই যাবতীয় তথ্য লেখা হয়ে থাকে।
৫। img ট্যাগ: < img> ট্যাগ একটি ফাঁকা ট্যাগ যা মূলত html ডকুমেন্টে ছবি সংযোজনের জন্য নেওয়া হয়।
৬। ul ট্যাগ: < ul> ট্যাগটি ব্যবহৃত হয় আনঅর্ডারড লিস্ট তৈরিতে তথা বুলেট পয়েন্ট তৈরি করতে।
৭। li ট্যাগ: < li> ট্যাগটি ব্যবহৃত হয় লিস্টিং করতে। অর্ডারড বা আনঅর্ডারড, উভয় ক্ষেত্রেই এর ব্যবহার রয়েছে।

(ক) উত্তরঃ অ্যাট্রিবিউট হচ্ছে এমন কিছু শব্দ শুচ্ছ যা ট্যাগের বৈশিষ্ট্য নির্ধারক নির্দেশ হিসাবে কাজ করে।

(খ) উত্তরঃ সাধারণত যে ভাষাগুলো তথা প্রোগ্রামিং ভাষাগুলো বড় অক্ষরের ও ছোট অক্ষরের বর্ণকে শনাক্ত করতে পারে তাদের কেস সেনসিটিভ (Case Sensitive) ভাষা বলে। HTML মূলত ওয়েবপেইজ এবং ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত একটি মার্কআপ ল্যাংগুয়েজ। HTML এর পূর্ণরূপ Hyper Text Markup language এর মাধ্যমে ওয়েব ডকুমেন্টের বিভিন্ন ধরনের উপাদান ও উপকরণ তৈরি করা যায়। এইচটিএমএলে ব্যবহৃত ট্যাগ অ্যাট্রিবিউট কোনটিই কেস সেনসিটিভ নয়, তবে অ্যাট্রিবিউটের মান বা ভালু কেস সেনসিটিভ হয়। HTML প্রধানত কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয় বরং এটি মার্ক-আপ ল্যাঙ্গুয়েজ যা ট্যাগের উপর ভিত্তি করে কাজ করে, ফলে অক্ষরের বড় ও ছোট হওয়ার পক্ষে এই ভাষার কোনো দায়বদ্ধতা নেই।

(গ) উত্তরঃ চিত্র-১ এর মত ওয়েবপেইজ তৈরির জন্য html কোডিংটি নিম্নে দেখানো হলোঃ


(ঘ) উত্তরঃ চিত্র-২ এর মত ওয়েবপেইজ তৈরির জন্য html কোডিংটি নিম্নে দেখানো হলোঃ

(ক) উত্তরঃ ইন্টারনেটে যুক্ত প্রতিটি কম্পিউটারের একটি নিজস্ব ঠিকানা থাকে। এই ঠিকানাকে আইপি অ্যাড্রেস বা Internet Protocol Address বলে।

(খ) উত্তরঃ ওয়্যারফ্রেমিং হল কাঠামোগত স্তরে একটি ওয়েবসাইট পরিষেবা ডিজাইন করার একটি উপায়। একটি ওয়্যারফ্রেম সাধারণত একটি পৃষ্ঠার সামগ্রীক এবং কার্যকরিতা লেআউট করতে ব্যবহৃত হয় যা ব্যবহারকারীর চাহিদা এবং ব্যবহারকারীর ভ্রমণকে বিবেচনা করে তৈরি করা হয়। ওয়্যারফ্রেমগুলি ভিজ্যুয়াল ডিজাইন এবং বিষয়বস্তু যোগ করার আগে একটি পৃষ্ঠার মৌলিক কাঠামো স্থাপন করার জন্য বিকাশ প্রক্রিয়ার প্রথম দিকে ব্যবহার করা হয়। একটি ওয়্যারফ্রেমের উদ্দেশ্য হল সৃজনশীল পর্যায়টি চালু হওয়ার আগে স্টেকহোল্ডার এবং প্রকল্প দলের অনুমোদন পেতে একটি প্রকল্পের প্রথম দিকে একটি পৃষ্ঠার চাক্ষুস উপলব্ধি প্রদান করা।

(গ) উত্তরঃ চিত্র-১ এর ওয়েবসাইট কাঠামোটি হচ্ছে হাইব্রিড কাঠামো এখানে লিংকড ও ট্রি কাঠামোর সমন্বয় ঘটানো হয়েছে। সাধারণত একটি কৌশল ব্যবহার করে কখনও একটি ওয়েবসাইট তৈরি করা হয় না। বরং একাধিক কৌশলের সমন্বয়ে একটি ওয়েবসাইট ডিজাইন করা হয়ে থাকে। ট্রি স্ট্রাকচার ব্যবহার করে কোনো ওয়েবসাইট হার্ডডিস্কে বেশি জায়গা দখল করে। তাই একাধিক কৌশল ব্যবহার করে ওয়েবসাইট তৈরি হয়। তবে এক ওয়েবপেইজ থেকে আরেক ওয়েবপেইজে যাওয়ার জন্য যা ব্যবহার করা হয় যেমন: লিংক, বাটন মেনু ইত্যাদি অবশ্যই স্পষ্ট হতে হবে। যদি লিংক গুলো কোনো পেইজের উপরে বামে দিকে দেয়া হয় তবে একই লিংক পেইজের নিচেও দেয়া উচিৎ। উদ্দীপকের চিত্র-১ এ এভাবেই ওয়েব লিংকড কাঠামো ব্যবহৃত হয়েছে HOME, Result, Images পেজের মধ্যে এবং Result থেকে XI, XII, Test ওয়েবপেইজে ট্রি স্ট্রাকচারে রেখে, দুই ধরনের ওয়েব কাঠামোর পেজ লিংক করা হয়েছে।

(ঘ) উত্তরঃ চিত্র-২ ওয়েব ব্রাউজারে প্রদর্শনের জন্য HTML কোডটি নিম্নরূপ: যেখানে সংযোজিত চিত্রটি photo.jpg এবং সাইজ 100×80px

....