প্রকাশ কুমার দাস
বিভাগীয় প্রধান, তথ্য ও যোগাযোগ প্রযুক্তি বিভাগ
মোহাম্মদপুর প্রিপারেটরি স্কুল অ্যান্ড কলেজ, ঢাকা
উচ্চ মাধ্যমিক শ্রেণীর তথ্য ও যোগাযোগ প্রযুক্তি বিষয়ের চতুর্থ অধ্যায়- ওয়েব ডিজাইন পরিচিতি ও এইচটিএমএল থেকে সৃজনশীল তিনটি প্রশ্নোত্তর নিয়ে আলোচনা করা হলো।
শিক্ষক ক্লাসে ‘ওয়েব ডিজাইন পরিচিতি এবং এইচটিএমএল অধ্যায় পড়ানো শেষে সজলকে একটি ওয়েব পেজ তৈরি করতে বললেন, যেখানে পেজের ডান পাশে উপরের দিকে কলেজের মনোগ্রাম থাকবে।
ক. Book mark কী? ১
খ. ওয়েব পেজে মেটা ট্যাগ কেন ব্যবহার করা হয়? ২
গ. সজল HTML ফাইলটি কীভাবে তৈরি করতে পারে ব্যাখ্যা কর। ৩
ঘ. সজলের ওয়েব পেজের মনোগ্রামে ক্লিক করলে কলেজের ইতিহাস প্রদর্শিত হতে হলে আর কী ব্যবস্থা নিতে হবে তা বিশ্লেষণ কর। ৪
১নং প্রশ্নের উত্তর (ক)
Book mark হচ্ছে একটি বিন ঢ়ধমব লিস্ট, যেখান থেকে কোনো ওয়েব পেজের নাম সিলেক্ট করে সরাসরি সেই ওয়েব পেজে যাওয়া যায়।
১নং প্রশ্নের উত্তর (খ)
ওয়েব পেজে মেটা ট্যাগ ব্যবহার করা হয় ডকুমেন্ট সম্পর্কিত তথ্য যুক্ত করার জন্য। সাধারণত ওয়েব পেজটি কে তৈরি করেছেন, তার প্রতিষ্ঠানের ঠিকানা (ফোন নম্বরসহ), পরিচয়, অন্যান্য সংশ্লিষ্ট তথ্য এবং বিষয়বস্ত্তসহ যাবতীয় তথ্য এখানে উল্লেখ থাকে।
১নং প্রশ্নের উত্তর (গ)
সজল HTML ফাইল বা প্যারাগ্রাফটি নিমণলিখিতভাবে তৈরি করল। সে HTML-এ প্যারাগ্রাফ তৈরির জন্য

ট্যাগ ব্যবহার করেছে। যেমন-

Information and Communication Technology

ব্রাউজারের মাধ্যমে প্রতিটি প্যারাগ্রাফ প্রদর্শনের জন্য প্রতিটি প্যারাগ্রাফের পর একটি করে লাইন ব্রেক তৈরি হয়। প্যারাগ্রাফের মধ্যে লাইন ব্রেক দেয়ার জন্য লাইনের শেষে
ট্যাগ ব্যবহার করা হয়।

Information and communication Technology

Information and communication Technology

Information and communication Technology

Information and communication Technology



১নং প্রশ্নের উত্তর (ঘ)
সজলের ওয়েব পেজের মনোগ্রামে ক্লিক করলে কলেজের ইতিহাস প্রদর্শিত হবে। এ কাজটি করার জন্য নিমণলিখিত পদক্ষেপ নিতে হবে।
নিচের কোডটি Notepad-এ যেমন (Test-1) লিখে সংরক্ষণ করতে হবে।









এখন Test-1. html ফাইলটি ডাবল ক্লিক করলে মনোগ্রাম দেখা যাবে। এখন ইন্টারনেট সংযোগ থাকা অবস্থায় মনোগ্রামে Click করলে http://www.mpsc.edu.bd ঠিকানায় কলেজের ইতিহাস প্রদর্শিত হবে।
০২. তফসির সাহেব একটি সুপার শপের মালিক। তিনি ওয়েবসাইটের মাধ্যমে কাস্টমারদের কাছ থেকে অর্ডার নেন এবং তাদের কাছে পণ্য পৌঁছে দেন। তফসির সাহেব ওয়েবসাইটটিকে একটু নতুন আঙ্গিকে সাজাতে চান, যাতে করে প্রতিটি product টাইপের অধীনে product লিস্টগুলো দেখা যায় এবং product নেমটি হেডিং আকারে ওয়েব পেজে উপস্থাপিত হয়।
ক. এম্পটি ট্যাগ কী? ১
খ. ক্লায়েন্ট কমপিউটার কীভাবে কাজ করে? ২
গ. উদ্দীপকে product নেমকে হেডিং আকারে উপস্থাপন করতে হলে কী করতে হবে ব্যাখ্যা কর। ৩
ঘ. উদ্দীপকে productগুলোকে লিস্ট আকারে সাজাতে হলে কী করতে হবে বলে তুমি মনে কর? ৪
২নং প্রশ্নের উত্তর (ক)
যেসব ট্যাগের ওপেনিং বা শুরু আছে কিন্তু ট্যাগের বিষয়বস্ত্ত ও ক্লোজিং বা শেষ থাকে না তাই এম্পটি ট্যাগ।
২নং প্রশ্নের উত্তর (খ)
যে কমপিউটার থেকে আমরা ওয়েব পেজ ব্রাউজ করি তাই ক্লায়েন্ট কমপিউটার। ক্লায়েন্ট কমপিউটারের দুটি মূল অংশ রয়েছে। প্রথমত, এই মেশিনের সাথে অবশ্যই ইন্টারনেট সংযোগ থাকতে হবে। দ্বিতীয়ত, এই মেশিনের ওয়েব ব্রাউজার রান করার ক্ষমতা থাকতে হবে। ইন্টারনেটের সাথে এই সংযোগ হয় ডায়াল আপ ফোনের সাহায্যে। মডেমের মাধ্যমেও হতে পারে।
২নং প্রশ্নের উত্তর (গ)
তফসির সাহেব তার সুপার শপের ওয়েবসাইটটিতে বিভিন্ন ধরনের product-এর তথ্য রাখতে চান। যদি product typeগুলোকে হেডিং আকারে দেখানো যায়, তবে একজন কাস্টমারের দৃষ্টি খুব সহজেই productগুলোর ওপর পড়বে। product নেমকে হেডিং আকারে উপস্থাপন করতে চাইলে html কোডে heading tag-এর ব্যবহার করতে হবে। ধরি, একটি product type হলো SOAP। এর under-এ অনেক ধরনের soap থাকতে পারে। কিন্তু যদি soap-কে heading আকারে দেখাতে হয়, তবে Html-এ নিচের কোডটি লিখতে হবে।

SOAP

২নং প্রশ্নের উত্তর (ঘ)
প্রতিটি product-এর অধীনে উক্ত product-এর লিস্টগুলো দেখাতে হলে html-এ নিচের কোডটি অবশ্যই লিখতে হবে।

SOAP Name List

1. Lux


2. Meril


3. Cosco

ol মানে ordered list। কোনো তথ্য ১, ২, ৩ এরূপ নম্বরযুক্ত করতে ol বসে। ol = '1' মানে ol type ঘোষণা করা। অর্থাৎ নম্বরগুলো কোন ধরনের হবে তাই উল্লেখ করা। ol = 1 মানে 1, 2, 3 এমন হবে। li হলো list। এই ট্যাগটি ধারাবাহিকতা রক্ষা করার জন্য ব্যবহার করা হয়। যেমন- প্রোগ্রামে যদি আরেকটি soap name Aeromatic বসতো তবে

Aeromatic এভাবে লিখতে হবে।
০৩. বরুণ নতুন ওয়েব ডিজাইনার। সে HTML ব্যবহার করে কাজ করছে। সম্প্রতি ওয়েবে অন্য ওয়েবের লিঙ্ক সংযোগে ব্যর্থ হওয়ায় সে একজন প্রোগ্রামারের শরণাপন্ন হলো। তিনি তাকে ওয়েবে ছবি সংযোগ কৌশল শিখিয়ে দিলেন।
ক. Combination স্ট্রাকচার কী? ১
খ. ওয়েবসাইট চালু করতে কী কাজ করতে হয়? ২
গ. বরুণ যে সমস্যায় পড়েছে তা কীভাবে সমাধান করা সম্ভব ব্যাখ্যা কর। ৩
ঘ. প্রোগ্রামার বরুণকে যে পদ্ধতি শিখিয়ে দিলেন, ওয়েব ডিজাইনে তার ভূমিকা আলোচনা কর। ৪
৩নং প্রশ্নের উত্তর (ক)
যখন একাধিক স্ট্রাকচার ব্যবহার করে ওয়েবসাইট ডিজাইন করা হয় তাই Combination স্ট্রাকচার।
৩নং প্রশ্নের উত্তর (খ)
ওয়েবসাইট চালু করতে নিমণলিখিত কাজগুলো করতে হয়- ০১. ডোমেইন নেম রেজিস্ট্রেশন। ০২. ওয়েব পেজ ডিজাইন। ০৩. ওয়েব সার্ভারে পেজ হোস্টিং। ০৪. ইন্টারনেটের (সার্চ ইঞ্জিন) সাথে ওয়েবসাইটের সংযুক্তি।
৩নং প্রশ্নের উত্তর (গ)
বরুণ একজন নতুন ওয়েব ডিজাইনার। সে HTML ব্যবহার করে কাজ করতে পারে। কিন্তু সে এক ওয়েব থেকে অন্য ওয়েবে লিঙ্ক করতে সমস্যায় পড়েছে। সে নিমণলিখিত তথ্যগুলোতে ভুল করায় লিঙ্ক সংযোগে সমস্যায় পড়েছে।
HTML লিঙ্কের সিনটেক্স হলো :
link text
এখানে, 'url'-এর বদলে ঠিকানা লিখতে হয়।
এখানে ঠিকানা লিখতে ভুল করেছে। তাছাড়া লিঙ্কের সিনটেক্স লিখতেও ভুল করেছে।
যেমন লিখতে হয়।
৩নং প্রশ্নের উত্তর (ঘ)
প্রোগ্রামার বরুণকে ওয়েব পেজে ছবি কীভাবে সংযোগ বা লিঙ্ক করা হয় তা শিখিয়ে দিলেন। ওয়েব ডিজাইন করার পর তা লিঙ্ক করে দেয়া হয়। HTML-এ পেজের লিঙ্কে ক্লিক করে একই ডকুমেন্টের ভিন্ন পেজে যাওয়া যায়। টেক্সট অথবা ইমেজকে লিঙ্ক হিসেবে নির্দিষ্ট করা যায়। প্রোগ্রামার বরুণকে যে পদ্ধতি শিখিয়ে দিলেন, ওয়েব ডিজাইনে তার ভূমিকা গুরুত্বপূর্ণ ছিল। বরুণ এখন HTML-এর লিঙ্কের সিনটেক্স ও href অ্যাট্রিবিউট লিঙ্কের ঠিকানা ঠিকমতো নির্ধারণ করতে পারে। সে এখন বুঝতে পারছে যে, একটি লিঙ্ক তৈরি হলে ঠিকানাটির লেখা নীল রংয়ে প্রদর্শিত হবে।
ওয়েব ডিজাইনে ছবি যুক্ত করে ওয়েব ডিজাইনকে আরও আকষর্ণীয় করে তোলা যায়। ওয়েবসাইট ভিজিট করার সময় দর্শক ওই ওয়েবসাইটের প্রতি বেশি আকৃষ্ট হয় এবং ওয়েবসাইটটির গুরুত্ব অনেক বেড়ে যায়
ফিডব্যাক : prokashkumar08@yahoo.com