Information and Communication Technology chapter 4: Web Design and HTML

চতুর্থ অধ্যায়

ওয়েব ডিজাইন পরিচিতি এবং HTML

Introduction to Web Design and HTML

Figure: ইন্টারনেটের মাধ্যমে এখন পুরো পৃথিবী সংযুক্ত হয়ে আছে

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

এ অধ্যায় পাঠ শেষে শিক্ষার্থীরা—

• ওয়েব ডিজাইনের ধারণা ব্যাখ্যা করতে পারবে;
• ওয়েবসাইটের কাঠামো বর্ণনা করতে পারবে;
• এইচটিএমএল-এর ধারণা ব্যাখ্যা করতে পারবে।

ব্যাবহারিক

• এইচটিএমএল ব্যবহার করে ওয়েব পেজ ডিজাইন করতে পারবে;
• ওয়েবসাইট পাবলিশ করতে পারবে।

Printed page 115

৪.১ ওয়েব ডিজাইনের ধারণা (Concept of Web Design)

কম্পিউটারের ইতিহাসের প্রথম যুগে বড় বড় বিশ্ববিদ্যালয়, গবেষণাগার ও সরকারি গুরুত্বপূর্ণ প্রতিষ্ঠান যেমন প্রতিরক্ষা বা সেনাবাহিনীর কাছেই শুধু কম্পিউটার ছিল। এই কম্পিউটারগুলো প্রচুর পরিমাণে হিসাব নিকাশ করা, গবেষণালব্ধ তথ্য যাচাই-বাছাই, সংগ্রহ ও সংরক্ষণ করার কাজেই তখন ব্যবহৃত হতো। অচিরেই এক কম্পিউটারকে অন্য কম্পিউটারের সঙ্গে সংযুক্ত করার প্রয়োজনীয়তা উপলব্ধ হয় এবং ধাপে ধাপে ইন্টারনেট ব্যবস্থা তৈরি হয়। সেইসঙ্গে বিভিন্ন ধরনের ডকুমেন্ট বা ফাইল এক কম্পিউটার থেকে অন্য কম্পিউটারে স্থানান্তরের চাহিদা তৈরি হয়। এই চাহিদা থেকেই টিম বার্নার্স-লি (Tim Berners-Lee) ওয়ার্ল্ড ওয়াইড ওয়েব (www: world wide web) বা সংক্ষেপে ওয়েব তৈরি করেন। তিনি তখন সুইজারল্যান্ডের CERN নামক একটি গবেষণাগারে কর্মরত ছিলেন। ১৯৮৯ সালে তিনি এমন একটি ওয়েবের ধারণা প্রস্তাব করেন যার মাধ্যমে আইপি অ্যাড্রেস (IP Address)* ব্যবহার করে এক কম্পিউটার থেকে অন্য কম্পিউটারে বিভিন্ন ডকুমেন্ট পাঠানো যাবে। টিমের ধারণা ছিল ওয়েবের মাধ্যমে বিভিন্ন দেশের বিজ্ঞানীরা যেন তাদের নিজ দেশে বসেই CERN-এর কম্পিউটার থেকে বিভিন্ন তথ্য সংগ্রহ করতে পারেন। তিনি প্রস্তাব করেন, একবারে শত শত পৃষ্ঠার ডকুমেন্ট ফাইল ডাউনলোড করার ব্যবস্থা না করে সব পৃষ্ঠা আলাদা আলাদাভাবেই যেন ইন্টারনেট থেকে সংগ্রহ করার ব্যবস্থা করা যায়। তাতে করে একেকটি পৃষ্ঠায় অন্যান্য দরকারি পৃষ্ঠার লিঙ্ক দিয়ে দেওয়া যাবে। যার যার যেসব পৃষ্ঠা দরকার হবে তারা শুধু সেই সমস্ত পৃষ্ঠাই ডাউনলোড করবে। তিনি ইন্টারনেট ব্যবহার করে পাঠানো লিখিত তথ্যের নাম দেন হাইপারটেক্সট (Hypertext)। এই হাইপারটেক্সটগুলো খুঁজে পাওয়া যাবে বিভিন্ন নেটওয়ার্ক ঠিকানায়, যার নাম হবে হাইপারলিঙ্ক (Hyperlink)। লিখিত তথ্যের বাইরে ছবি, অডিও ও ভিডিও জাতীয় তথ্যকে বলা হবে হাইপারমিডিয়া (Hypermedia)। টিম চিন্তা করেন, এমন একটি উপায় করতে হবে যেন লিঙ্কগুলো মাউস দিয়ে ক্লিক করেই ব্যবহারকারীরা সেই হাইপারলিঙ্ক থেকে হাইপারটেক্সট পেতে পারেন। 1990 সালে তিনি তার সহকর্মীদের সহায়তায় তার ধারণাটিকে আরো সুগঠিত রূপ দিয়ে পুনরায় প্রস্তাব করেন। ওয়েবের এই তথ্যগুলো অন্য কম্পিউটারে দেখার জন্য তিনি একটি সফটওয়্যারও তৈরি করেন, যা হচ্ছে একটি World Wide Web নামে পরিচিত ওয়েব ব্রাউজার।

এই মূল ধারণার ওপরেই তৈরি হয়েছে আজকের ওয়েব। বর্তমানে ইন্টারনেটে অসংখ্য ওয়েবসাইট রয়েছে। এই ওয়েবসাইটগুলো নিজের কম্পিউটার থেকে দেখা বা ব্রাউজ করার জন্য আমরা সাধারণত বিভিন্ন সফটওয়্যার ব্যবহার করি। এই সফটওয়্যারগুলোকে বলা হয় ওয়েব ব্রাউজার। বিভিন্ন প্রতিষ্ঠানের তৈরি বিভিন্ন ওয়েব ব্রাউজার রয়েছে। যেমন— মজিলা ফায়ারফক্স, গুগল ক্রোম, সাফারি, ওপেরা, মাইক্রোসফট এজ্ ইত্যাদি।

* আইপি অ্যাড্রেস (IP Address) : ইন্টারনেটে সংযুক্ত প্রতিটি যন্ত্র (যেমন— কম্পিউটার, মোবাইল ফোন ইত্যাদি)কে স্বতন্ত্রভাবে চিহ্নিত করার জন্য একটি বিশেষ নম্বর ব্যবহার করা হয় যাকে আইপি অ্যাড্রেস বলে। আইপি অ্যাড্রেস হচ্ছে ইন্টারনেটে একটি নির্দিষ্ট যন্ত্রের ঠিকানা।

Printed page 116

একসময় ওয়েবসাইটগুলো ছিল স্ট্যাটিক (static), অর্থাৎ সেখানে বিভিন্ন তথ্য রাখা হতো এবং ব্যবহারকারী ওয়েব ব্রাউজারের মাধ্যমে সেই তথ্য দেখতে পেতেন। কিন্তু বর্তমানে বেশিরভাগ ওয়েবসাইট আর স্ট্যাটিক ওয়েবসাইট নয়, বরং ডায়নামিক (dynamic) ওয়েবসাইট যেখানে ব্যবহারকারীরা ওয়েবসাইটে বিভিন্ন ইনপুট দেন আর সেই ইনপুট অনুসারে বিভিন্ন আউটপুট তৈরি হয়। এজন্য এগুলোকে ওয়েব অ্যাপ্লিকেশনও বলা হয়। এরকম ওয়েব অ্যাপ্লিকেশনের কিছু উদাহরণ হচ্ছে google.com, services.nidw.gov.bd, passport.gov.bd ইত্যাদি।

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

Figure: চিত্র ৪.১ : ইন্টারনেটে সংযুক্ত সার্ভার ও ক্লায়েন্ট

লেবেল: ক্লায়েন্ট, ইন্টারনেট, সার্ভার বর্ণনা: ল্যাপটপ, মোবাইল ফোন ও ডেস্কটপ কম্পিউটার নামের তিনটি ক্লায়েন্ট যন্ত্র মেঘ আকৃতির ইন্টারনেটের সঙ্গে যুক্ত; ইন্টারনেট একটি সার্ভারের সঙ্গে যুক্ত।

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

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

শুধু এইচটিএমএল ব্যবহার করে ওয়েবসাইট তৈরি করা গেলেও, ওয়েবসাইটকে আরো আকর্ষণীয় ও সুন্দরভাবে উপস্থাপন করার জন্য ব্যবহার করা হয় CSS— যার পূর্ণরূপ হচ্ছে, Cascading Style Sheet। আধুনিক সব ওয়েবসাইটেই HTML-এর সঙ্গে CSS ব্যবহার করা হয়।

Printed page 117

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

৪.১.১ ওয়েবসাইটের কাঠামো (Web Site Structure)

একটি ওয়েবসাইটে এক বা একাধিক ওয়েব পেজ থাকে। সাধারণত একেবারে প্রথমে যে পৃষ্ঠা থাকে তাকে ওয়েবসাইটের হোমপেজ (Homepage) বলা হয়। এছাড়া ওয়েবসাইটের ধরন অনুযায়ী ওয়েবসাইটে বিভিন্ন পেজ থাকে। যেমন— অডিও-ভিডিও শেয়ারিং ওয়েবসাইটে একেকটি পেজ থাকতে পারে একেকটি অডিও/ভিডিও'র জন্য। আবার, একেকজন ব্যবহারকারীর নিজস্ব একেকটি পেজ থাকতে পারে। আবার ব্লগ জাতীয় ওয়েবসাইটে প্রতিটি ব্লগ পোস্টের জন্য একেকটি পেজ থাকতে পারে। এছাড়া বিভিন্ন ওয়েবসাইটে কিছু প্রচলিত পেজ থাকে, যেমন— contact us (যোগাযোগ), about us (আমাদের সম্পর্কে), frequently asked questions– FAQ (প্রায়শ-জিজ্ঞাস্য-প্রশ্ন) ইত্যাদি।

৪.২ এইচটিএমএল-এর মৌলিক বিষয়সমূহ (HTML Basics)

এ অধ্যায়ের ৪.২ পাঠ অংশটুকু পুরোপুরি ব্যাবহারিক। প্রোগ্রামিং করার ব্যবস্থা আছে (কম্পিউটারে কিংবা স্মার্টফোনে) শুধু সেরকম পরিবেশে পরের অংশটুকু শিক্ষার্থীর জন্য অর্থপূর্ণ বলে বিবেচিত হবে।

HTML নিয়ে কাজ শুরু করতে চাইলে প্রথমেই একটি ফাইল তৈরি করতে হবে। যে কোনো নাম দিলেই চলবে, এক্সটেনশন হবে .html। যেমন— mypage.html। এখন এই ফাইলের মধ্যে HTML কোড লিখতে হবে। ফাইলটি ব্রাউজার দিয়ে খোলা হলো, তাহলে একটি ফাঁকা পেজ দেখা যাবে। কারণ, ফাইলটিতে এখনো কিছু লেখা হয়নি। HTML ফাইল এডিট করার জন্য যে কোনো একটি টেক্সট এডিটর ব্যবহার করলেই চলবে, যেমন— নোটপ্যাড, নোটপ্যাড++, সাবলাইম টেক্সট ইত্যাদি।

HTML উপাদান (HTML Element)

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

Printed page 118

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

HTML-এর এলিমেন্ট লেখার জন্য ব্যবহার করা হয় ট্যাগ। ট্যাগকে অনেকটা ব্র্যাকেট বা বন্ধনীর সঙ্গো তুলনা করা যেতে পারে। সাধারণত এলিমেন্টের শুরু বোঝাতে একটি ওপেনিং ট্যাগ এবং শেষ বোঝাতে একটি ক্লোজিং ট্যাগ ব্যবহার করা হয়। ওপেনিং ট্যাগ, দুই ট্যাগের মধ্যবর্তী কনটেন্ট ও ক্লোজিং ট্যাগ মিলে যা হয় তা-ই একটি এলিমেন্ট। তবে কিছু ট্যাগ আছে যাদের মধ্যে কোনো কনটেন্ট থাকে না, তাই এদের ক্লোজিং ট্যাগও থাকে না। এদেরকে বলা হয় এম্পটি (empty) ট্যাগ।

ওপেনিং ও ক্লোজিং ট্যাগের গঠন হয় এরকম, <tag_name> ও </tag_name>। দুটি অ্যাঙ্গোল ব্র্যাকেটের ভেতরে ট্যাগের নাম লিখলে হয় ওপেনিং ট্যাগ, আর ক্লোজিং ট্যাগ হয় এ রকম, </...>। অর্থাৎ, ট্যাগের নামের আগে একটি অতিরিক্ত ফরওয়ার্ড স্ল্যাশ চিহ্ন (Forward Slash /) দেওয়া হয়। ওপেনিং এবং ক্লোজিং ট্যাগের ভেতরের লেখা, ট্যাগের নাম একই হতে হবে।

নিচে একটি HTML কোড দেখানো হলো।

<!DOCTYPE html><html><body>Hello World!</body></html>

কোডটি টাইপ করে ফাইলটি সেভ করে ব্রাউজারে ওপেন করলে স্ক্রিনে Hello World! লেখাটি দেখাবে।

Figure

লেবেল: hello.html, File | C:/Users/rafit/Desktop..., Hello World! বর্ণনা: একটি ব্রাউজার উইন্ডোতে hello.html ফাইলটি খোলা অবস্থায় দেখানো হয়েছে; পেজের ভেতরে Hello World! লেখা দেখা যাচ্ছে।

উপরের কোডটি ভালো করে লক্ষ করা যাক। প্রথম লাইনে আছে <!DOCTYPE html>, যাকে বলা হয় ডকুমেন্ট টাইপ ডিক্লারেশন। এর দ্বারা ব্রাউজার বুঝতে পারে যে ডকুমেন্টটি HTML 5 স্ট্যান্ডার্ড অনুসরণ করে লেখা হয়েছে এবং সেই অনুযায়ী রেন্ডার (প্রদর্শন) করে। এটি আসলে ডকুমেন্টের অংশ নয়, তবে লেখা জরুরি।

Printed page 119

HTML যাবতীয় এলিমেন্ট রাখতে হয় একটি মূল এলিমেন্টের ভেতরে, সেটি হচ্ছে html। সেজন্য দ্বিতীয় লাইনে আছে <html> ট্যাগ, ডকুমেন্টের শেষও কিন্তু হয়েছে </html> ট্যাগ দিয়ে। এরপর আছে <body> ট্যাগ। ব্রাউজারে আমরা যা কিছু দেখি তার সবই থাকে body এলিমেন্টের ভেতরে। বডির ভেতরে আমরা লিখেছি Hello World!, এই লেখাটিই ব্রাউজার দেখাবে।

বডি এলিমেন্ট যেমন আছে, তেমনি একটি হেড এলিমেন্টও আছে। ওয়েব পেজের দৃশ্যমান সবকিছু দেওয়া হয় বডির ভেতরে, আর হেডের ভেতরে ওয়েব পেজ সম্পর্কে তথ্য দেওয়া, বিভিন্ন সেটিংস ঠিক করা, স্টাইল, স্ক্রিপ্ট এসব নিয়ন্ত্রণ করা ইত্যাদি কাজ করা হয়। ব্রাউজারের ট্যাবে ওয়েবপেজের যে শিরোনাম বা টাইটেল (title) দেখা যায় তা লেখা থাকে হেডে। উপরে তৈরি পেজে একটি টাইটেল যুক্ত করে দেওয়া যাক।

<!DOCTYPE html><html><head>  <title>My first html doc</title></head><body>Hello World!</body></html>

এই কোডটি লিখে সেভ করে ব্রাউজারে ওপেন করলে আগের মতোই Hello World! দেখা যাবে। একইসঙ্গে ব্রাউজারের টাইটেল বারে টাইটেলটিও দেখা যাবে। এখানে <title> ... </title> ট্যাগ দিয়ে ওয়েব পেজের টাইটেল দেখানো হয়েছে।

Figure

লেবেল: My first html doc, File | C:/Users/rafit/Desktop..., Hello World! বর্ণনা: একটি ব্রাউজার উইন্ডোর ট্যাবে My first html doc টাইটেল দেখানো হয়েছে; পেজের ভেতরে Hello World! লেখা দেখা যাচ্ছে।