ICT AID: ৪র্থ অধ্যায়

ওয়েবসাইট

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

ওয়েবসাইটের কাঠামো

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

ওয়েব অ্যাড্রেসের বিভিন্ন অংশের পরিচিতি

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

ওয়েবপেজ তৈরীর ভাষা

ওয়েবসাইটের এসকল ওয়েবপেজ তৈরীর জন্য ব্যবহৃত হয় এক ধরণের বিশেষ ল্যাংগুয়েজ যা HTML নামে পরিচিত। এর পূর্নরূপ হল হাইপার টেক্সট মার্কআপ ল্যাংগুয়েজ (Hyper Text Markup Language)।

এটি কোনো প্রোগ্রামিং ল্যাংগুয়েজ নয়, বরং এটি একটি মার্কআপ ল্যাংগুয়েজ যা কিনা এক সেট মার্কআপ ট্যাগের সমন্বয়ে গঠিত। একটা ওয়েবপেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কীভাবে প্রদর্শিত হবে তা বিভিন্ন মার্কআপ ট্যাগ ব্যবহার করে প্রকাশ করা হয়। ১৯৮০ সালের দিকে টিম বার্নাস লী এ ভাষার প্রাথমিক রূপ দান করেন। আর ২০১০ সালে HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মুখে প্রকাশিত হয়।

ওয়েব ডিজাইনে HTML ল্যাংগুয়েজ ব্যবহারের সুবিধা

এটি বিনামূল্যে ব্যবহার করা যায়।
সকল ব্রাউজার HTML কে সমর্থন করে।
বেশির ভাগ ডেভেলপমেন্ট Uzj&m HTML কে সমর্থন করে।
বেশির ভাগ সার্চ ইঞ্জিন HTML বান্ধব।
HTML-এর সাথে XML-এর অনেক সাদৃশ্য রয়েছে।

HTML ফাইল তৈরীতে যা লাগবে

বর্তমানে বিভিন্ন Development Tools পাওয়া যায় যা দিয়ে HTML ফাইল তৈরী করা যায়। কিন্তু এক্ষেত্রে আমরা আমাদের উইন্ডোজের মধ্যে যে প্লেইন টেক্সট এডিটরটি আছে সেই Notepad সফ্টওয়্যারটি ব্যবহার করব। আর তৈরী করা ফাইলটি Test করার জন্য গুগলের Chrome বা Mozilla Firefox কিংবা Internet Explorer ব্রাউজারের সাহায্য নিব।

HTML ফাইল তৈরী

কম্পিউটারে ব্যবহৃত ফাইল বা ডকুমেন্টের নামের দুইটি অংশ থাকে। এ দুইটি অংশের মাঝে থাকে একটি ডটেড চিহ্ন। ডটেড চিহ্নের বাম দিকের অংশটি সংশ্লিষ্ট ফাইলের নাম নির্দেশ করে যা সাধারণ অবস্থায় আমরা দেখতে পাই। আর ডটেড চিহ্নের ডান দিকের অংশটি সেই ফাইলটি কি ধরণের ফাইল তার Extension নির্দেশ করে। সাধারণ অবস্থায় এ অংশটি Hidden করা থাকে।

এখন উইন্ডোজের Notepad টি Open করে মেনুবার এর File অপশন থেকে Save As সিলেক্ট করব। ফলে Save As নামে একটি ডায়ালগ বক্স আসবে। সেখান থেকে Save as type এ গিয়ে All Files সিলেক্ট করব। তারপর File name এর Text field এ গিয়ে ফাইলটির যে নাম দিতে চাই তা লিখে HTML ফাইলের Extension (.html) ডট এইচ টি এম এল বা (.htm) ডট এইচ টি এম লিখে ফাইলটি যেখানে Save করতে চাই তা সিলেক্ট করে Save বাটনে ক্লিক করব। ব্যস্ হয়ে গেল আমাদের HTML ফাইল তৈরী।

HTML ফাইল সম্পাদনা বা Edit করা

যে ফাইলটি Edit করতে হবে সে ফাইলটির উপর মাউসের Right Button ক্লিক করে Open with Notepad সিলেক্ট করতে হবে। ফলে HTML ফাইলটি Notepad টেক্সট এডিটর দিয়ে Open হবে। এখন আমরা আমাদের কাঙ্খিত HTML ফাইলে যা Edit বা Add করতে চাই তাই করতে পারব।

HTML ট্যাগ

HTML - এ প্রোগ্রাম লেখার জন্য < > এরূপ এবং </ > এই ধরণের চিহ্নগুলি এবং এর মধ্যে কিছু বর্ণ বা শব্দ যেমন p, b, i, html, head, title, body ইত্যাদি ব্যবহার করা হয়। এই চিহ্নগুলোর মাঝে লেখা কি ওয়ার্ডকে ট্যাগ বলে। উদাহরণস্বরূপ, একটি HTML ফাইল শুরুর ট্যাগ হলো <html> এবং শেষ ট্যাগ হলো </html>।

HTML ট্যাগ এর প্রকারভেদ

HTML এ মূলত দুই ধরণের ট্যাগ ব্যাবহার করা হয়ে থাকে। যেমন-

এম্পটি ট্যাগ (Empty tag)
কনটেইনার ট্যাগ (Container tag)

এম্পটি ট্যাগ - HTML ফাইল তৈরীতে এই ট্যাগ শুধুমাত্র একবার ব্যবহৃত হয় কোনো সমাপ্তি ট্যাগ দেয়ার প্রয়োজন হয় না। যেমন <br>।

কনটেইনার ট্যাগ - HTML ফাইল তৈরীতে এ ধরণের ট্যাগের শুরু এবং শেষ ট্যাগ উভয়েরই প্রয়োজন হয়। যেমন <B>। এই ট্যাগ ব্যবহার করলে এর শেষ ট্যাগও ব্যবহার করতে হবে। এক্ষেত্রে ব্যবধান শুধু এটাই যে Angle bracket (< >) এর ভেতর ফরওয়ার্ড স্ল্যাশ ( / ) চিহ্ন দিতে হবে। অর্থাৎ শুরুর ট্যাগ হবে (B) এবং শেষ ট্যাগ হবে </B>। এই ট্যাগ যেকোন অক্ষর বা লাইনকে বোল্ড করে দেখাবে।

HTML এ ব্যবহৃত ট্যাগের গঠন

HTML এ ব্যবহৃত ট্যাগগুলোকে তিনভাবে লেখা হয়। যেমন

<tag_name>
<tag_name> Text </tag_name>
<tag_name attribute_name = attribute_value> Text <tag_name>

HTML এলিমেন্ট সিনটেক্স

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

HTML এট্রিবিউট

এট্রিবিউট হচ্ছে এমন এক ধরণের নির্দেশনা যার দ্বারা কোন কিছুর বৈশিষ্ট্য নির্ধারিত হয়। উদাহরণস্বরূপ বলা যেতে পারে আমরা আমাদের HTML ডকুমেন্টের কোন Paragraph - এ Bangladesh শব্দটি লিখলাম। আমরা চাই এ শব্দটি ওয়েব পেজের ডান দিকে হবে। শব্দটিকে ওয়েবপেজের Right Alignment বা পেজের ডান দিকে নেয়ার জন্য Paragraph ট্যাগের ভিতর যে অতিরিক্ত সিনটেক্স যুক্ত করতে হবে সেটিই হচ্ছে তার এট্রিবিউট।

HTML ডকুমেন্টের মৌলিক কাঠামো

HTML - এ লিখিত প্রেগ্রামকে প্রধানত দুইটি অংশে ভাগ করা যায়। সেগুলো হল -

হেড সেকশন ( Head Section )
বডি সেকশন ( Body Section )

হেড সেকশন - HTML পেজের একটি গুরুত্বপূর্ণ অংশ হল হেড ট্যাগ <head>। কারণ এই ট্যাগের মধ্যেই <title>, <link>, <meta>, <style>, <script> এর মতো গুরুত্বপূর্ণ ট্যাগসমূহ রাখা হয়।

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

HTML - এ কমেন্টস বা মন্তব্য

অনেক সময় প্রোগ্রামের মধ্যে মন্তব্য লেখার প্রয়োজন হয়, যা মূল কোডে থাকবে কিন্তু ব্রাউজারে তা দেখা যাবে না। কোডে মধ্যে মন্তব্য লেখার কিছু নিয়ম আছে। যেমন

মন্তব্য যদি এক লাইনের হয় তবে // চিহ্নের পর মন্তব্য লিখলেই চলবে।
মন্তব্য যদি একাধিক লাইনের হয় সেক্ষেত্রে মন্তব্যের শুরুতে /* চিহ্ন দিয়ে শুরু করতে হবে, তারপর মন্তব্য লিখে শেষ করতে হবে */ চিহ্ন দিয়ে।
মন্তব্যে যদি বিস্তারিত কিছু লিখার প্রয়োজন হয় সেক্ষেত্রে < ! বিস্তারিত মন্তব্য..... > এ ধরণের ট্যাগের মাঝে মন্তব্য লিখা যাবে।

HTML ট্যাগসমূহ ও তার বর্ণনা

ওয়েবপেজ তৈরীতে ব্যবহৃত HTML ট্যাগের নাম ও বর্ণনার তালিকা নিম্নরূপ।

HTML ফাইলের সাধারণ গঠন

HTML ফাইল তৈরীর সাধারণ গঠন নিম্নরূপ -

অনুশীলন ০১: Welcome to ICTAid এই লেখাটির জন্য একটি ওয়েব পেজ তৈরী করতে হবে।

প্রথমে Exercise 01 নামে একটি HTML ফাইল তৈরী করি। তার ভেতর Notepad টেক্সট এডিটর দিয়ে নিচের অংশটুকু লিখে Save করি।

ফলাফল: এখন HTML ফাইলটি যে কোন ব্রাউজার দিয়ে Open করলে Welcome to ICTAid লেখাটি দেখা যাবে।

অনুশীলন ০২: ওয়েবপেজে Header ট্যাগের ব্যবহার।

সাধারণত HTML এ ছয় ধরণের Header ট্যাগের ব্যবহার হয়ে থাকে। এখন Exercise 02 নামে একটি HTML ফাইল তৈরী করি। তার ভেতর Notepad টেক্সট এডিটর দিয়ে নিচের অংশটুকু লিখে Save করি।

ফলাফল: এখন HTML ফাইলটি যে কোন ব্রাউজার দিয়ে Open করলে এই ছয় ধরণের Header ট্যাগের পার্থক্য খুব সহজেই বুঝতে পারব।

অনুশীলন ০৩: 'align' Attribute এর ব্যবহার।

এখন আমরা দেখব কিভাবে 'align' Attribute ব্যবহারের মাধ্যমে কোন Heading কে ওয়েবপেজের বামে, মাঝে বা ডানে নেয়া যায়। এজন্য Exercise 03 নামে একটি HTML ফাইল তৈরী করি। তার ভেতর Notepad টেক্সট এডিটর দিয়ে নিচের অংশটুকু লিখে Save করি।

ফলাফল: এখন HTML ফাইলটি যে কোন ব্রাউজার দিয়ে Open করলে 'align' Attribute এর এই তিন ধরণের Value-র পার্থক্য বুঝতে পারব।

অনুশীলন ০৪: প্যারাগ্রাফ ট্যাগ ও বিভিন্ন প্রকার টেক্সট ফরম্যাটের ব্যবহার।

আজ আমরা শিখব কিভাবে ওয়েবসাইটে প্যারাগ্রাফ ট্যাগ ও বিভিন্ন প্রকার টেক্সট ফরম্যাট ব্যবহার করা হয়ে থাকে। এজন্য Exercise 04 নামে একটি HTML ফাইল তৈরী করি। তার ভেতর Notepad টেক্সট এডিটর দিয়ে নিচের অংশটুকু লিখে Save করি।

ফলাফল: এখন HTML ফাইলটি যে কোন ব্রাউজার দিয়ে Open করলে বিভিন্ন প্রকার টেক্সট ফরম্যাটের ব্যবহার দেখা যাবে।

অনুশীলন ০৫: হাইপারলিঙ্ক এর ব্যবহার।

হাইপারলিঙ্ক হচ্ছে এমন একটি টেকনিক যার মাধ্যমে কোন ওয়েব পেইজের কোন একটি শব্দ বা কতকগুলো শব্দ বা কোন ছবির দ্বারা সেই ওয়েব পেইজের অন্য কোন অংশের বা অন্য কোন ওয়েব পেইজের সংযোগ স্থাপন করা যায় । আজ আমরা কোন ওয়েব পেইজে হাইপারলিঙ্ক ব্যবহার করার টেকনিক নিয়ে আলোচনা করব। এজন্য Exercise 05 নামে একটি HTML ফাইল তৈরী করি। তার ভেতর Notepad টেক্সট এডিটর দিয়ে নিচের অংশটুকু লিখে Save করি।

ফলাফল: এখন HTML ফাইলটি যে কোন ব্রাউজার দিয়ে Open করলে হাইপারলিঙ্ক এর ব্যবহারটি খুব সহজেই বুঝা যাবে। এর জন্য অবশ্য কম্পিউটারে ইন্টারেনট কানেকশন থাকতে হবে।

অনুশীলন ০৬ঃ চিত্র সংযুক্ত করা (ব্যানারসহ)

HTML এর সাহায্যে কোন ওয়েব পেইজে অতি সহজে ব্যানারসহ যেকোন ধরনের ছবি যোগ করা যায়। এজন্য Exercise 06 নামে একটি HTML ফাইল তৈরী করি। তার ভেতর Notepad টেক্সট এডিটর দিয়ে নিচের অংশটুকু লিখে Save করি।

বি.দ্র. src এট্রিবিউটে অবশ্যই ছবির নির্দিষ্ট path উল্লেখ করতে হবে।

ফলাফল: এখন HTML ফাইলটি যেকোন ব্রাউজার দিয়ে Open করলে ফুলের ছবিটি সেই ব্রাউজারে দেখা যাবে।

অনুশীলন ০৭ঃ টেবিল

সাধারণত কোন তথ্যকে সারি বা কলামে বিন্যস্ত করে সংরক্ষন বা উপস্থাপন করার জন্য টেবিল তৈরী করা হয়। ওয়েব পেজে টেবিল তৈরীর ক্ষেত্রে <table> ট্যাগ ব্যবহার করতে হয়।

টেবিলের প্রতিটি সারির জন্য <tr> ট্যাগ অর্থাৎ Table Row,

টেবিল হেডিংয়ের জন্য <th> ট্যাগ অর্থাৎ Table Header,

টেবিল ডাটার জন্য <td> ট্যাগ অর্থাৎ Table Data ব্যবহার করা হয়।

ধরি কোন ওয়েব পেজে ক্লাশ রুটিনের জন্য একটি টেবিল তৈরী করতে হবে। এজন্য প্রথমে Exercise 07 নামে একটি HTML ফাইল তৈরী করি। তারপর Notepad টেক্সট এডিটর দিয়ে নিচের অংশটুকু লিখে Save করি।

ফলাফলঃ এখন HTML ফাইলটি যেকোন ব্রাউজার দিয়ে Open করলে তৈরীকৃত ক্লাশ রুটিনটি টেবিল আকারে দেখা যাবে।

অনুশীলন ০৮ঃ বুলেট এবং নাম্বার লিস্ট

সাধারণত HTML এ দুই ধরনের লিস্ট তৈরী করা যায়। যথা- অর্ডার লিস্ট এবং আনঅর্ডার লিস্ট। অর্ডার লিস্ট এর ক্ষেত্রে প্রতিটি লাইনের শুরুতে একটি ক্রমিক নাম্বার বা বর্ণ ব্যবহৃত হয়, অপরদিকে আনঅর্ডার লিস্ট এর ক্ষেত্রে এগুলো থাকে না, বরং মার্কিং করার জন্য ছোট বৃত্তাকার বা বর্গাকার চিহ্ন ব্যবহৃত হয়। এই ধরণের চিহ্নকে বুলেট বলা হয়ে থাকে। বুলেট বা নাম্বার দেওয়ার পদ্ধতি কীভাবে শুরু হবে এর জন্য type অ্যাট্রিবিউটটি ব্যবহার করা হয়।

প্রথমে লিস্ট তৈরীর জন্য Exercise 08 নামে একটি HTML ফাইল তৈরী করি। তারপর Notepad টেক্সট এডিটর দিয়ে নিচের অংশটুকু লিখে Save করি।